Svcc 2013-css3-and-mobile

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

jQuery is a lightweight JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions easier. It takes common tasks that require many lines of JavaScript code and wraps them into methods that can be called with a single line of code. Originally created in 2006, jQuery simplifies HTML document navigation and manipulation, as well as event handling, CSS animation, and Ajax interactions for rapid web development. It has a simple syntax of $() selector and action() methods and is now one of the most popular JavaScript libraries.

Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor. This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript. We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers. You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.

SVG (Scalable Vector Graphics) is a XML-based format for defining vector graphics. It allows graphics to be scalable, zoomable and searchable. Common SVG shapes that can be created include circles, rectangles, ellipses, lines, and paths. Attributes like cx, cy, r are used to define properties of circles and ellipses, while x1, y1, x2, y2 define the start and end points of a line. SVG graphics do not lose quality when resized.

Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.

This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include: - SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML. - SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics. - As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript. - The document outlines SVG's emergence and development timeline, its structure as an XML language, and its

My presentation for A Day In The Life Conference - April 9, 2011 - Baltimore, MD. http://adayinthelifeconference.com

HTML5 is the next generation web development standard that improves upon HTML4 and XHTML. It focuses on features rather than syntax, and includes new elements like <article> and <section>, native audio/video support, drawing APIs, geolocation, drag and drop, web forms 2.0, and more. HTML5 aims to improve multimedia capabilities while keeping code readable by humans and machines. It is supported by all major browsers, though support for specific features may vary, and polyfills can help with backwards compatibility.

This document discusses cross-device development using web standards. It covers the concepts of adaptive design, responsive design, fluid layouts, media queries and responsive images. For layouts, it discusses moving from fixed tables and floats to newer CSS techniques like flexible boxes, multi-column layouts, and CSS grids. It provides examples of fluid layouts using these techniques. It also covers media queries in depth, including using them for breakpoints, device characteristics like orientation and resolution. The document discusses challenges and solutions for responsive images, including resolution switching, art direction, high DPI images, and emerging standards like srcset and the picture element.

The document discusses responsive images and different solutions for optimizing images for responsive design. It begins by providing context on responsive design and the challenges of supporting different devices. It then focuses on images, explaining their importance but also the issues they can cause for performance. The document evaluates several solutions for responsive images including CSS media queries, SVG, Picturefill.js and the proposed picture element. It concludes by noting there is no perfect solution and developers should choose based on their specific needs and constraints.

The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.

This document provides an introduction to Scalable Vector Graphics (SVG). It begins with an agenda that outlines topics including what SVG is, why it should be used, tools for working with SVG, and sample artwork. The document then discusses the history and standards behind SVG, how it works as a vector format, and why it may be preferable to other formats like JPEG, PNG, Flash or Silverlight. Browser support, manual and programmatic production of SVG files, and related resources are also covered. The document concludes with an invitation for questions.

The document discusses responsive design techniques for desktop and mobile interfaces. It covers: - Adapting layouts using AlloyUI Viewport and media queries to target different screen sizes. - Dynamically retrieving data using the Pjax utility and ScrollInfo plugin. - The future potential of CSS Flexbox layout for complex responsive designs.

“Software designed to take advantage of public cloud features is different from traditional software. It stands to reason that testing such software will require some different insights and approaches.” -- Bill Wilder, Windows Azure, MVP In this talk, author and cloud consultant Bill Wilder covers 7 Things testing pros ought to know about the public cloud. The tips span cloud tools for better process and execution, walks you through real examples in Windows Azure, and highlights considerations to streamline the process between dev and test.

Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.

HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5

This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses how D3 works, examples of basic charts like scatter plots and bar charts using D3, and how to incorporate features like mouse interactions, animations, filters and gradients. It also covers using D3 with technologies like Android, PhoneGap, and Google Glass to create mobile visualizations.

This document provides an overview of a presentation on using D3 for data visualization on desktops, smartphones, and Google Glass. It discusses topics like what D3 is, how it works, examples of creating simple charts and adding interactivity with mouse events, using SVG filters and gradients, and integrating D3 visualizations into Android and Google Glass apps. It also briefly mentions related technologies, resources for learning more, and potential training topics.

Este documento analiza el uso real de datos abiertos ("opendata") en gobiernos. Clasifica los tipos de información que los gobiernos suelen publicar como datos abiertos, como información geográfica, meteorológica, económica, social, de tráfico, turismo y agricultura. También muestra estadísticas sobre qué datos son los más descargados en las comunidades autónomas del País Vasco y Navarra, como calendarios laborales y mapas. El objetivo final es medir el retorno de la inversión de public

Este documento analiza el valor real del uso de datos abiertos (opendata). Presenta un diagrama sobre el "círculo estúpido" de la implementación de opendata por parte de políticos y ciudadanos. Luego enumera diferentes formas en que los datos abiertos podrían generar valor a través de ingresos fiscales, ahorros en servicios sociales, mejoras en productividad, y reducciones en corrupción y evasión fiscal. Finalmente, clasifica los tipos de información pública disponible como datos abiertos en diferentes regiones de España.

This document discusses 3D graphics techniques using CSS3, jQuery, CSS shaders, and WebGL. It provides demonstrations of 3D effects created with only CSS3 and jQuery mobile code. CSS shaders and WebGL allow more complex 3D graphics by using vertex and fragment shaders. Toolkits like Three.js and tQuery.js simplify working with WebGL. The document recommends books and meetups for learning more about these technologies.

The document discusses how open data from cities can enable third party developers to create applications that improve city services and quality of life for citizens. It provides examples of applications developed using open data from various cities, including Barcelona, Amsterdam, and cities around the globe. These applications have been successful and in some cases outcompeted the cities' own applications. The document advocates for cities to release more open data to enable more third party innovation and improve services for citizens.

This document discusses data binding in Android development. It begins by explaining what data binding is, which is connecting UI components to data sources. It then shows how data binding improves upon traditional MVC patterns. The document proceeds to demonstrate how to implement data binding through layout files, view models, and generated binding classes. It explores observable objects, collections, and fields to notify UI of data changes. Attribute bindings and custom bindings are also covered to extend XML and reduce boilerplate code. Overall, the document promotes data binding as a way to write less code, build more maintainable apps, and enable easier testing through separation of UI and logic.

Data binding is a declarative way to bind UI components to application data sources. It minimizes code needed to bind layouts to data and supports MVVM pattern. Data binding engine allows binding layouts to observable data sources and updating UI automatically when data changes. It works on Android 2.1+ and uses XML syntax like <layout> and @{} to bind variables and call methods.

Presentation by DataBinding done by Leonid from GDG and me at "Sweetest aMazing" session at Google Cloud Next event.

We're checking out new data binding lib announced on the last Google I/O. We'll go in depth of data binding - goals, benefits and drawbacks. Less code should mean less bugs - in theory.

This document provides an overview of SVG, CSS3, and D3 for beginners. It covers key SVG elements like <line>, <ellipse>, <rect>, <polygon>, and <path> as well as features like gradients, filters, transforms and animation. It also demonstrates CSS3 concepts like rounded corners, gradients and transforms. Examples are provided in HTML files with linked CSS style sheets. The document then introduces D3, an open source JavaScript library for data visualization that uses SVG, HTML and CSS. Key D3 concepts, functionality and use cases are outlined.

The document discusses features of SVG and D3, including different SVG elements, colors/gradients/filters, transforms and animation, and how D3 builds upon SVG to enable data visualization. It provides examples of creating basic SVG shapes and charts with D3, binding data to DOM elements, adding mouse interactions and transitions. It also covers using D3 with other technologies like Angular, working with different data formats and large datasets, and transpires for working with modern JavaScript.

Android weather lib tutorial. How to code an android app using weatherlib in github

This document provides an introduction and overview of React Native, including what it is, how it works, and how to set it up for both iOS and Android development. It discusses some key differences between React Native and traditional web development, provides code samples and explanations of common React Native components and patterns, and outlines steps for creating a new React Native project. It also addresses common errors and links to additional documentation resources.

Slides for a four-hour Angular 2 workshop that models some real world Angular 2 applications, along with SVG graphics samples.

This document provides an overview of using NFC (Near Field Communication) on Android devices. It discusses registering an NFC intent filter in the manifest to listen for NDEF tags, handling foreground NFC dispatch, interacting with tags using the NfcAdapter class, and reading the payload of NDEF tags which can contain text, URIs, or other data. Future posts will describe extracting specific information from different tag types.

This document summarizes AngularJS scopes, digest cycles, data binding, dependency injection, and modularity. It discusses how scopes are created and inherited, how to use $digest and $watch, how expressions are evaluated, the benefits of dependency injection, and best practices for managing modules. Key recommendations include trusting the scope hierarchy, using $apply instead of $digest, avoiding non-isolated directives, and structuring code into independent, testable modules.

This document provides an overview of TypeScript, including: - What TypeScript is and how it supports features like interfaces, classes, and subclasses - How TypeScript uses a compiler to provide type checking and transpiles code to JavaScript - Examples of using basic TypeScript syntax like types, functions, classes, and interfaces - How to set up a TypeScript development environment and use the tsc compiler - Popular IDEs and resources for learning more about TypeScript

The document discusses testing Android apps using data binding and MVVM. It covers setting up the MVVM architecture with a Note taking app example. It discusses using the Model-View-ViewModel pattern with data binding in Android. It also discusses how to write JVM unit tests for the ViewModel and mock dependencies by using stubs and spies.

This document provides an overview of a workshop on working with ECMA5 and ES6 including promises. The workshop will cover nested functions/closures, arrow functions, promises, and other ECMA5/ES6 features useful for ReactJS and Angular 2. It includes examples of functions, closures, filter, map, reduce, and promises as well as exercises for participants. Promises are introduced as a way to avoid callback hell and determine success/failure asynchronously.

The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.

Presentation given during the HTML5 Dev Conf and The Graphical Web, showing how to create and play SVG content in a streaming manner.

Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.

Vector graphics allow shapes to be mathematically represented and scaled smoothly, while raster graphics use a grid of pixels. SVG is an XML format for describing vector shapes and is supported natively by modern browsers. DojoX GFX provides a normalized API for creating vector graphics across browsers using SVG, VML, Canvas, or Silverlight depending on browser support. It implements a procedural subset of SVG for creating shapes and text programmatically similar to the canvas API.

This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.

Doris Chen is a senior developer evangelist at Microsoft who focuses on web technologies like JavaScript and HTML5. Her presentation covers optimizing Cordova app performance, including measuring startup cost and memory usage, using CSS for gradients instead of images, animating with translate3d instead of left/top, and handling events through bubbling instead of individual listeners. She provides tips like keeping the DOM simple, batching layout changes, and cleaning up unused objects to prevent memory leaks.