Toronto HTML5 User Group Meet Up #1 - Intro to HTML5
•Télécharger en tant que PPTX, PDF•
5 j'aime•1,933 vues
Toronto HTML5 User Group Meet Up #1's presentation deck, dealing with the introduction to HTML5 along with some links to some tools and resources that will help you get started with HTML5!
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Toronto HTML5 User Group Meet Up #1 - Intro to HTML5
- 1. TORONTO HTML5 USER GROUPMeet up #1 – HTML 5 Basics, Tools & Resources, and Demos
- 2. Agenda Introduction Digiflare Overview Brief Introduction to HTML5 Defining what HTML5 is Comparing HTML5 to HTML 4.01 Separating HTML5 from other new technologies Quick Rundown on a few Elements & Functionality of HTML5/Modern Web Stack HTML5 Browser Compatibility Tools and Resources to Work With HTML5 What the Future Holds for HTML5 Questions Project Highlights CBC’s HTML5 Federal Election iPad Map Questions?
- 3. Company Overview Digiflare is a full service digital agency that successfully integrates creative ideas with new technology. We help brands discover new opportunities that enhance and expand their businesses through interactive experiences on the web, mobile devices and emerging digital platforms. Strategy Technology Creative Social Media Competitive Analysis Persona Development Website Analytics Search Engine Optimization Mobile & Slate Apps HTML5 Development Web Development SharePoint Development Facebook & Twitter Brand Strategy & Activation Information Architecture Usability Studies Interaction Design Web Design
- 4. User Experience Form Factors Mobile Web Desktop / Tablet Easy to use Engage the audience Empower the user Emotional connection We define UX by:
- 5. Award Winning Digital Marketing Practice Gold Competency for Digital Marketing with Microsoft BlackBerry Alliance Select Tier Partner Virtual Technical Roles Brand & Advertising Digital Marketing Most Valuable Professional SharePoint Preferred Small Agency of Record for Microsoft
- 6. Our Clients
- 7. Defining what HTML5 is HTML5 is simply most recent iteration of HTML HTML5 is getting a lot of talk because of the new semantic and functional enhancements it brings forth HTML5 combined with other technologies like CSS3 and JavaScript create the modern web stack
- 8. What HTML5 is not HTML5 is sometimes used as a buzzword when talking about the next generation website, much like Web 2.0 was/is used HTML5 works in conjunction with other sets of specifications and technologies such as JavaScript & Browser APIs and CSS3
- 9. Comparing HTML5 to HTML 4.01 HTML5 has added over 25 new elements Several other elements have been un-depreciated from HTML 4.01, while others have had revisions to their purpose Vs 4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/
- 10. Comparing HTML5 to HTML 4.01 HTML5 has over 38 new global attributes You can now define your own attributes, and still have your markup be valid! Syntactically, HTML5 and HTML4 are essentially the same Vs 4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/
- 11. Comparing HTML5 to HTML 4.01 Things have become simpler! Vs To… 4.01 Logo by Chris Bishophttp://chrisbishop.com/forums/dribbble/
- 12. The Video Element There ARE many video containers and codecs that can be used to play video No single codec that will work across all browsers Need to encode your video in different formats There are a variety of new event handlers to work with video* elements, along with several attributes that would attach to the video** element * All new event handlers will work with either the video or audio element.** Many of the new attributes to the video element are the same for the audio element, such as preload and controls.
- 13. The Canvas Element Draw-able region in HTML code, given width and height attributes Can be used as a basic shapes (lines, rectangles, arcs, Bezier & quadratic curves, images) display tool to full interactive graphics Can create scalable vectors through coordinate-point line drawings With JavaScript, animations can be applied on the graphics, or on top of user interactions HTML5 compatible browsers allow for hardware accelerated graphic support, making full use of a PC’s hardware Allows for scaling and rotation, combined with a physics engine for immersive graphics or games
- 14. HTML5 Geolocation The user’s location is available via Javascript Geolocation is opt-in. The browser asks for permission. Image from diveintohtml5.org
- 15. HTML5 Offline Support Great for web applications where users go on to produce something Cache manifest file dictates what to cache for offline use Flag in DOM to indicate connection status, events fire for state changes You handle data changes/persisting data and synchronizing with server once online
- 16. HTML5 Browser Compatibility HTML5 support is fragmented between different browsers and versions There are multiple levels of fragmentation; there could be overall feature support or sub-feature support, i.e. the Video tag and the actual video’s encoding.
- 17. HTML5 Browser Compatibility HTML5 support is growing with each new release of the browsers, and we’re fortunately seeing shorter times in-between new releases for all vendors Statistical Breakdown of the Latest Browser Versions’ Support 73% 52% 78% 88% 76% Source: http://caniuse.com/#cats=HTML5
- 18. HTML5 Tools and Resources There are many tools/resources available to help aid in HTML5 development and the modern web stack in general There are tools/resources for: Design and Development Software HTML5 Boilerplate & CSS3 Generator Compatibility and Testing
- 19. HTML5 Tools and Resources Design and Development Software Resources Adobe Dreamweaver CS5 with the CS5 HTML5 Pack The HTML5 Pack updates the Live View to an updated version of Webkit, which is Dreamweaver’s Live View engine Considerable amount of built-in code-hinting for HTML5 markup and CSS3 support is available, along with vendor-specific prefixes for CSS3 rules JavaScript code hinting with custom object hinting is also supported Basic HTML5 starter templates are available to you
- 20. HTML5 Tools and Resources Design and Development Software Resources Adobe Dreamweaver CS5 with the CS5 HTML5 Pack Media Query Window available for you to view how your site will look in various screen resolutions with the CSS defined for that resolution The Widget Browser contains HTML5 and other modern web stack widgets to use or build upon
- 21. HTML5 Tools and Resources Design and Development Software Resources Adobe Dreamweaver CS5.5 CS5.5 adds additional capabilities for developing next generation applications and mobile development jQuery code hinting support and jQuery Mobile Integration Video elements, and SVG elements are supported in Live View
- 22. HTML5 Tools and Resources Design and Development Software Resources Adobe Dreamweaver CS5.5 CSS3 is now supported in the CSS Panel Ability to publish Native Android and iOS apps using within Dreamweaver using PhoneGap Validator brought back using Live W3C Validation
- 23. HTML5 Tools and Resources Design and Development Software Resources Microsoft Expression Web 4 w/ SP1 Expression Web is Microsoft’s Answer to Adobe’s Dreamweaver Expression Web 4 with SP1 provides complete support for HTML5 and CSS3 in the code view, along with significant support in Design View Expression Web supports CSS3 rule parameter hints
- 24. HTML5 Tools and Resources Design and Development Software Resources Microsoft Visual Studio 2010 with SP1 Visual Studio 2010 w/ SP1 brings some HTML5 support to IntelliSense and markup validation, but it is limited. An extension is available from Microsoft Employees (it’s not an official Microsoft product) that adds: The missing HTML5 features in IntelliSense and Validation Browser APIs of GeoLocationand LocalStorage CSS3 rules with vendor specificextensions
- 25. HTML5 Tools and Resources Design and Development Software Resources Adobe Illustrator “Ai->Canvas” plug-in allows you to export AI vectors and bitmaps to an HTML5 canvas element The plug-in provides drawing, animation, and coding options “Adobe Illustrator CS5 HTML5 Pack” provides inapplication capabilities to: Export art boards for unique screensizes using SVG and CSS3 media queries. Create web widgets by generating dynamic vector art for Data-Driven Web Workflows Generate interactive web contentwith SVG and CanvasMap Artwork Appearance attributes to CSS3 rules
- 26. HTML5 Tools and Resources HTML5 Boilerplate & CSS3 Generator HTML5 Boilerplate A great resource available to anyone starting off with an HTML5 project Contains a tried-and-true foundational mark-up and file organization Customizable to suit your needs Well documented to help learn from it Actively developed Already contains great backwardcompatibility options
- 27. HTML5 Tools and Resources HTML5 Boilerplate & CSS3 Generator CSS3 Generator If you don’t have/desire to use an IDE to code hint but you don’t want to remember everything, you can use a generator CSS3generator.com allows you to generate CSS3 rules with the parameters defined by preferences It will provide you with the CSS3 code you need to put in your CSS file, along with an indication of it’s browser support
- 28. HTML5 Tools and Resources Compatibility and Testing Compatibility and Testing Resources CSS3 Selectors Test and Previewshttp://tools.css3.info/selectors-test/test.htmlhttp://www.css3.info/preview/ HTML5 Demo and Exampleshttp://html5demos.com/http://wufoo.com/html5/ In-Depth Compatibility Chartshttp://caniuse.com/
- 29. HTML5 Tools and Resources Compatibility and Testing Backwards compatibility JS Solutions HTML5Shivhttp://code.google.com/p/html5shiv/ Modernizrhttp://www.modernizr.com/
- 30. HTML5 Tools and Resources Links Adobe Dreamweaver Related Links Dreamweaver Product Information:http://www.adobe.com/products/dreamweaver.html Adobe Widget Browser:http://labs.adobe.com/downloads/widgetbrowser.html Dreamweaver CS5 Updater:http://www.adobe.com/support/dreamweaver/downloads_updaters.html#dwcs51104 Dreamweaver CS3 and CS4 HTML5 and CSS3 Code Hinting Extension:http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2188522 Microsoft Visual Studio Related Links Web Standards Update:http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83 Adobe Illustrator Links: Ai -> Canvas Plug-In:http://visitmix.com/work/ai2canvas/ Adobe Illustrator CS5 HTML5 Packhttp://labs.adobe.com/technologies/illustrator_html5/
- 31. HTML5 Tools and Resources Links Compatibility and Testing Resources CSS3 Selectors Test and Previewshttp://tools.css3.info/selectors-test/test.htmlhttp://www.css3.info/preview/ HTML5 Demo and Exampleshttp://html5demos.com/http://wufoo.com/html5/ In-Depth Compatibility Chartshttp://caniuse.com/ Backwards compatibility JS Solutions HTML5Shivhttp://code.google.com/p/html5shiv/ Modernizrhttp://www.modernizr.com/
- 32. HTML5 Going Forward With each new browser release, support for HTML5 is growing The HTML5 community, interest and adoption is growing rapidly Is HTML5 going to replace other RIA technologies like Flash and Silverlight?
- 33. CBC News Federal Election Maps 2011HTML5 optimized for Blackberry Playbook and iPad Browsers National Map View (iPad) Regional Map View (Playbook)
- 34. CBC News Federal Election Maps 2011
- 35. CBC News Federal Election Maps 2011
- 36. CBC News Federal Election Maps 2011 Architecture HTML5 Canvas, isolated storage XML feeds, XML parsing Jquery for animations, communication Separate JS classes to manage each component (map, results, riding info etc.)
- 37. CBC News Federal Election Maps 2011 Challenges Map data Map rendering (SVG, drawing on canvas) Map loading
- 38. Thank you! Stay tuned to the Toronto HTML5 User Group page for dates on our upcoming sessions: HTML5 on Mobile Form Factors HTML5’s Canvas Element Please visit our blog to download this presentation and get the links to the tools and resources! http://blog.digiflare.com Follow us!@digiflare @nathaniel401 We are on Facebook too. Like us!
Notes de l'éditeur
- HTML5 is simply the most recent iteration of HTML, Hyper-text Markup Language.The reason why HTML5 is getting a lot of talk is because it's features and semantic nature that it brings to the table. Elements with meaningful names, greater range of attributes and the ability to define your own attributes give the ability to have more meaningful markup and more precise and efficient control of your page’s elements.Coupling HTML5 with other technologies such as CSS3 and JavaScript help create next generation web properties that are engaging and eye-catching.
- It’s easy to group the modern web stack and label it HTML5, and it’s understandable that this happens especially when trying to discuss with clients a potential new project as the “buzzword” or marketing terms are most likely what your clients understand. That said, it seems as though HTML5 has taken the crown on being the buzzword for the modern web stack just as Web 2.0 was/is used to describe the “social web” and lest we not forget cool-looking gradients :PHTML5 is a separate specification from several technologies that make up the modern web stack. Those that are not HTML5 are:CSS3: As the name implies, CSS3 is the next iteration of the Cascading Stylesheet Specification.SVG: SVG stands for Scalable Vector Graphics, which is also it’s own specification.Geolocation: This has not been a part of the HTML5, it’s its own specification “Geolocation API Specification”*Client Storage and Web Sockets: These used to be a part of the HTML5 specification though they were split into their own separate specificationsThat said, these separations are merely for your own knowledge and will not impact you or your projects in the real world of course; plus, when you are on the lookout for HTML5 examples you’ll often come across these other technologies as well as they naturally go together. This understanding of seperation will probably be most beneficial when you’re out searching for information.In fact, we’ll be talking about all of these technologies in depth at some point in the subsequent meet-ups and briefly today as well; there will most often always be cross pollination of these technologies when relevant
- First, it's important to note that HTML5 and HTML4 are "backwards compatible" in the sense where User Agent creators are required to support HTML4 elements and standards for the foreseeable future HTML5 has over 25 new elements along with un-depreciated elementsThese elements' purpose range from improving semantics and enhancing media integration to making it easier to gather data from users.Examples include some hot elements such as the Canvas element, Video element, Audio element, and some new Input element types.We’ll go over some of these briefly today and much more in-depth in future meet-ups.Aside from the new additions, several elementsfrom HTML4 have made a come-back so to speak due to various reasons (i.e. newfound value, revised logic)An exampleof newfound value:The ‘target’ attribute for an ‘a’ and ‘area’ are no longer depreciated as it's useful in web applicationsRevised logic:The value attribute for an LI element and the start attribute for an OL element is no longer deprecated as it's not presentational An example of revised purpose:The ‘b’ element now is meant to simply offset text from its surrounding content without conveying any extra emphasis/importanceThe ‘small’ element that was often used for subheadings now is meant for small print like a copyright notice.This is not a complete list, as there are a few more elements/attributes that are no longer deprecated.
- HTML5 contains a number of new attributes, many of the new global attributes are event handlers that relate to media playback, while the rest of the new event handlers deal with other new functionalities associated with HTML5 elements such as form validation and dragging.HTML5 allows you to define your own attributes as well. You could have gotten away with it in 4.01 but unfortunately the validators would be upset; if you’re particular about validation and you need the use of custom attributes you’re in luck! All you need to do is simply prefix your attribute title with data-*. This will most likely be a welcoming addition to individuals who do web application development. From a syntax perspective, HTML5 and HTML4 are essentially the same, which subjectively can be a good thing or a bad thing.Personally, I think it’s a bad thing; you don’t need to close tags to validate nor do you need to use quotes to define attributes.In fact, they’ve made it technically even more relaxed than 4.01 Transitional in the sense where previously when you would define an attribute’s value without quotes the value must only contain name characters (i.e. only letters and number/alphanumerical) but now they will allow other characters as well potentially creating a very difficult to read document. I would recommend against following these relaxed rules and continue to author well-structured and well-formed HTML documents.
- The DOCTYPE is no longer a long string that points to a definition file; it’s simply “!DOCTYPE html”. In fact, you don’t necessarily even need the doctype for modern browsers, though for older browsers who require a doctype specification we put it in.You may ask that if a Browser requires a doctype specified yet the doctype is “html”, wouldn’t it get confused? Well, fortunately, browsers that do not know what this doctype is will simply render the page as a standard HTML document.The ‘type’ attribute for ‘script’ and ‘link’ element as well as the ‘language’ attribute for the ‘script’ element are no longer needed unless you need it. It’s implied that the ‘link’ element is for Stylesheets and the ‘script’ tag is for JavaScript. We’ll now give a high level overview several elements/features that had the most interest shown based on the responses from your signup form for the group, please note that this is a high level overview and that some of these elements will have their very own user group meet up organized in the near future!
- HTML5 brings forth a video element to provide a native method of playing videos without the need for plugins/add-ons. Unfortunately though, what they didn’t include was an encoding standard. Because of that, each browser supports their own preferred codecs.For example:H.264/MPEG4 are supported by IE9 & Upcoming IE10, along with Safari and iOS safari. Future versions of chrome however will drop this codec however to help push the more open WebM/VP8 and Theora codecs.Ogg/Theora is not supported in IE9, Or any Safari browser, however it is supported in Chrome, Firefox, and Opera/Opera Mobile, WebM/VP8 is not supported in IE9 (though there is an add-on that you can install from the WebM project to enable it to do so), Or any Safari browser either, however it is supported in Chrome, Firefox, and Opera/Opera Mobile, along with the Android Browser.As you see, there is no single combination of containers and codecs that works in all HTML5 browsers and this is not likely to change in the near future. When it does change, it will most likely have a consistency with an open-source codec Like WebM/VP8.To sum it all up, to make your video watchable across all of these devices and platforms, you’re unfortunately going to need to encode your video in multiple formats.For maximum compatibility, here’s what your video workflow will look like:Make one version that uses WebM (VP8 + Vorbis).Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.Make another version that uses Theora video and Vorbis audio in an Ogg container.Link to all three video files from a single <video> element, and fall back to a Flash-based video player.From: http://diveintohtml5.org/video.html
- Draw-able region in HTML code, given width and height attributesCan be used as a basic shapes (lines, rectangles, arcs, Bezier & quadratic curves, images) display tool to full interactive graphicsCan create scalable vectors through coordinate-point line drawingsWith JavaScript, animations can be applied on the graphics, or on top of user interactionsHTML5 compatible browsers allow for hardware accelerated graphic support, making full use of a PC’s hardwareAllows for scaling and rotation, combined with a physics engine for immersive graphics or gamesThe most similar alternative would be SVG as they both allow in-browser manipulation, though there are some important differences that you will want to consider when deciding which alternative is best for your project. We’ll discuss these two meet-ups from now when we examine the Canvas element in detail.
- Great for a wide variety of web applications that rely on a geographic contextKijiji, autotrader, mapping appsAs a developer, you can access the user’s location via javascript.Works differently in different browsers. Chrome will send data to Google’s location service, mobile safari may use GPS via iphoneThe browser will ask for permission first and you’ll see something like the image belowadvertising
- Great for web applications or businesses that have the need to go online/offline periodicallyCache manifest file specified in html tag lists what resources (css, js, images, html pages) to cache. Every page needs to have this specifiedFor developers, there’s a flag in the DOM and events to detect when the app is online/offlineWith the cache manifest file, when the app goes offline, it’ll automatically use the file its cached but you have to handle synchronizing with the web server if data is changed or saved.
- HTML5 support is different for each browser and version, and further fragmentation based on the parent feature’s sub features, i.e. the video element and it’s codec support.Another example would be the Canvas element, the Canvas element is supported in all modern browsers* with the exclusion of IE8* (if you want to call it a modern browser), and the Text API is supported in all modern browsers as well, though the WebGL 3D Canvas sub feature and has partial support in select browsers at best.Another example would be HTML5 Forms; most browsers support the fundamental new form input types and it’s sub features to certain extents; some may support validation, the progress and metre/elements, and data lists while others may not go that far, and in the case of IE9, not go at all.
- Here is the statistical breakdown of the overall support of the HTML5 specification for each respective browser, based on their most current version as of July 27th 2011.Please don’t let these figures deter you; you can implement most features of HTML5 with graceful fallbacks to ensure a rich, user experience for all of your visitors. When we cover in detail specific bits and pieces of HTML5 and other relevant pieces of the modern web stack, we’ll also show you how to do graceful fallbacks so you’re not left in the dark!
- Now that we’ve gone through a rudimentary primer, we can identify tools and resources that can help us in building these next generation web properties. Also, just a note, these tools and resources that I will be mentioning will have some points highlighted that are not specifically HTML5 but fall into the modern web stack.There are many tools and resources available to you to help you in building with the modern web stack, and they generally fall under tools and resource that assist in:Development Software/IDE’sDesign SoftwareMark-up foundationCross-browser compatibilityThese resources come in the form of actual applications/extensions/plugins, to actual code/markup to simply quality reading materials.
- Adobe Dreamweaver CS5 along with Adobe’s HTML5 Pack (which is a part of the CS5 11.0.3 Update) brings forth some HTML5 goodness for you to utilize.Code hinting for HTML5 and CSS3 is available to you in Dreamweaver, along with all the elements’ respective attributes. In regards to CSS3, you also get vendor-specific rule assistance as well, which can be quite handy, though unfortunately it will not help you with any of the rules parameters for CSS3 rules.JavaScript code hinting with custom object hinting is supported as well; which is a nice convenience.To get a better idea as to how to structure a pure HTML5 page with the new semantically-oriented tags, the HTML5 Pack brings two templates to Dreamweaver which you can use/build upon. As an added benefit, the dummy content is informative on how the page is structured and the CSS document is heavily commented to tell you what’s going on.Also, as a side note, Adobe released an extension for CS3 and CS4 that brings code-hinting for HTML5 tags, updated HTML4 attributes, and some CSS3 and vendor-specific CSS3 rules.I’ve included the links to where to get all these tools at the end of this section; don’t worry about rushing to write down the links as I’ll be sure to post them on Digiflare’s blog along with this deck.
- Dreamweaver CS5 offers a Media Query Window though the “Multiscreen” feature. Essentially, you can specify certain sets of style rules for certain screen sizes and instantly see how they will render. Each viewport is clickable so that you can navigate through each page. Adobe has a Widget Browser that is similar to their Developer Exchange portal, however the Widget Browser has tight integration to Dreamweaver which brings convenience when gathering all the required JS, CSS, and image files for the widget in question. You can either download them and use them as is, or, as practice get into the inner code and discover how it all works together. The widgets are rated so you can easily identify what is worth using/learning from.
- You may have noted Adobe released several new updates to some of it’s creative suite offerings to 5.5. For Dreamweaver, Adobe wanted to put some more power to Dreamweaver in the mobile space, and with this naturally comes more support for components of the modern web stack.Extending the JavaScript & Custom Object hinting, Dreamweaver now supports jQuery and jQuery Mobile code hinting.The Live View feature now supports Video elements and SVG elements, so now they’ll render as they would naturally in a browser.
- If you’re not comfortable with coding CSS, or, you’re not familiar with how the parameters of these new CSS3 rules are defined, the CSS Panel in 5.5 now supports CSS3 rules and provides a GUI to define all the required parameters.Adobe integrated the functionalities of PhoneGap, which gives you the ability to build “Native” Android and iOS applications.Essentially it will wrap your standard markup in an application package. We’ll come across this tool in our meet up about HTML5 and mobile form factors.Lastly, Dreamweaver CS 5.5 brought back the validation feature. In CS5, the validation feature was removed (though an extension is available to bring it back), but in CS 5.5 they brought it back with it being constantly updated with the latest W3C specifications, so you can be confident that you won’t get any false positives in your validation.
- Microsoft’s answer to Adobe’s Dreamweaver is Expression Web.If you’re familiar with Visual Studio, the understanding of the interface of Expression Web will come naturally, along with it’s visual cues such as icons and code-coloring. Reading the profiles of some of the attendees here, some of you are are C#/VB/.NET developers so you may be interested in looking at this option.In terms of editor capability, Expression Web and Dreamweaver are very close competitors when examined from the out-of-the-box functionality and official updates. When looking at the third party extensions available however, Dreamweaver still has the edge. As well, if you’re looking to work rapidly on a mobile project, 5.5 may be the way to go.That said though, Expression Web with SP1 has great support for HTML and CSS3; and one thing that beginners to CSS3 will greatly appreciate is the parameter hints for a CSS3 rule.If your project is using TFS, Expression Web integrates into this as well, so this may be something to consider.
- VS 2010 with SP1 has limited HTML5 support, though an extension available greatly enhances the functionality of VS 2010.If you will be working on a significant amount of front end development in the modern web stack, and cannot wait until the next version of Visual Studio which is rumored to have extensive HTML5/CSS3 support, I recommend investing in either Dreamweaver or Expression Web. Both of these have trails that you can use to determine which fits you and your workflow best.
- It may be confusing to hear that there’s design software resources, but there is!For Adobe Illustrator, you can use a plugin called Ai->Canvas that will export your AI vector and bitmap artwork to an HTML5 canvas element. What’s really cool is that it gives you options to have drawing, animating, and events into your canvas!You can extend the JavaScript it outputs to add sounds, enhance the animations, add interactivity, etc. There’s also a debugging mode when dealing with really advanced animations!It supports CS3, 4, and 5 on Mac or PC.Another solution from Adobe is the Ill. CS5 HTML5 Pack, giving you the ability to:Efficiently design for web and devices by exporting Illustrator Artboards for unique screen sizes using SVG and CSS3 media queries.Create web widgets with Illustrator by generating dynamic vector art for data driven web work-flows.Take advantage of the latest enhancements to SVG and Canvas to generate interactive web content.Map artwork appearance attributes from designer to developer tools—export from the Illustrator Appearance Panel to CSS3 for streamlined styling of web pages.
- HTML5 Boilerplate is essentially a rock-solid foundation to start building HTML5 websites. You wouldn’t think that mark-up could be scrutinized as much as it has been in the HTML5 boilerplate, but it has. Everything from the naming of the element classes to the placement to the size of your documents has been considered, reviewed, and tested by a active community on it’s GitHubrepositry.The document structure of the HTML and CSS follows industry best practices and has been architected with backwards compatibility in mind. Browser-based conditionals, effective placement of JavaScript, and clever use of element class/ids make the markup of the HTML5 boilerplate efficient and scalable without limiting the possibilities of HTML5 and CSS3.Depending on the package you download, as HTML5 Boilderplate offers a commented, non-commented, and custom package, you can follow along with what’s going on through intensive comments. Reglardless of what package you choose however, the website has extensive documentation on everything.Lastly, if you’re looking for efficiency and optimization, look no more. The boilerplate package comes with a buildscript that optimizes almost everything in your web project.
- CSS3 GeneratorIf you don’t have/desire to use an IDE to code hint but you don’t want to remember everything, you can use a generatorCSS3generator.com allows you to generate CSS3 rules with the parameters defined by preferencesIt will provide you with the CSS3 code you need to put in your CSS file, along with an indication of it’s browser supportOne thing that I find useful about this is that it takes the guess work of what CSS3 rules need browser prefixes, and which don’t. Some browsers and browser versions require a prefix while others don’t; this already knows and will include only the required prefixes when needed.
- CSS3 Selectors Test and Previews:The selector test will run a test on the current browser that you’re using to see what selectors are supported. This is a useful test if you want to know how you can identify certain elements in your markup using CSS selectors.The second link is more of a visual preview of certain CSS3 features; it provides a static image of what it should look like and a real-world code example that your browser will render. If the live rendering looks like the visual preview, then you know your browser knows what to do with the CSS3 rules in question.The HTML5 Demos link and the Wufoo HTML5 link collectively contain many HTML5 features, with the Wufoo one in particular covering HTML5 forms. Each link provides a summarized compatibility chart and a live-code example.The Caniuse.com link is a great in-depth compatibility chart with comments and future browser release information. An invaluable resource when determining what you can realistically use in your project. To boot, it links to official documentation on the specification you’re investigating along with potential workarounds and fallback suggestions. It covers CSS, HTML5, JS API, SVG, and Other things such as ARIA (accessibility specification) and Touch Events.
- Please note that these two solutions do not enable HTML5 compatibility, but rather detect what is and what is not available. HTML5Shiv/Shim simply makes browsers (namely older versions of IE) who don’t understand elements like <header> and other semantic tags cool, calm, and collected about them. It just “fixes” the browser to render them without complaining about them. It’s a very lightweight solution. In addition to what HTML5Shiv does, Modernizr will set classes in your HTML that you can then use in your CSS and JavaScript to selectively target elements with what they are compatible with. For example, if my browser did not support the video element, the body tag may have no-video, and thus because of that I can then automatically know to use my Flash Video fallback; likewise a CSS3 example, if it had a class such as no-gradient, in my CSS I can have a selector such as .no-gradient #gradient-item and have an image substitute. HTML5Shiv is the lighter option of the two; if you do not need to fork your code extensively I would suggest using HTML5Shiv.
- HTML used to be interesting mostly to web devs but with HTML5, designers are interested because of increased support for rich interactivity, app developers because of the same reason. Web dev going more to app dev side.Flash player is free but the dev toolkit for flash is expensive. HTML5 is free for designers and developers.Flash still has the advantage for advanced effects and certain featuresFlash not on iphone and ipad and requires a plugin. HTML5 is becoming adopted universallyHTML5 with its support for video/audio/image transforms/vector graphics capabilities can be good for most cases and idea is that it will continue to evolve to include more rich functionality
- CBC federal elections ipad mapIntro CBC had an flash version of the map for previous elections. We created an HTML5 version of it so that it would work on ipad. The intended use for the map was through their existing CBC news ipad app. So they took what we created and showed it through an iOSwebview on the ipad.Architecture -the page consists of a canvas, and the rest are divs -a few JS files responsible for rendering the UI, handling touch events and map rendering -a few JS files to get xml data, cache data -asynchronously download xml files for data -jquery notification for communication
- Demo The whole point of the elections map is to follow along the results of the election. The map is interactive in that you can zoom in and out of the provinces, regions and ridings. You can pull up a riding to view leaders and stats within that riding. You can also search for your own riding and save it.
- Demo The whole point of the elections map is to follow along the results of the election. The map is interactive in that you can zoom in and out of the provinces, regions and ridings. You can pull up a riding to view leaders and stats within that riding. You can also search for your own riding and save it.
- Architecture -the page consists of a canvas, and the rest are divs -a few JS files responsible for rendering the UI, handling touch events and map rendering -a few JS files to get xml data, cache data -asynchronously download xml files for data -jquery notification for communication
- Difficulties They didn’t have the map vector files. We had the flash working files with the map vectors in them. We had to export to SVG format files. Once we had a way to get the mapping data out, we had to see how to draw all of the map data onto the canvas and still have it performant enough to use. We tried two methods. One was to use HTML5 SVG support and the other was to draw polygons onto the canvas. We’re talking about 300 different ridings. Found out that drawing polygons was faster. Also found out that Safari was fastest at rendering the map vectors.iso storage for storing a users’ selected ridingAt the end it was a huge success. Where they were only expecting 20K users, they had over 400k users
- HTML used to be interesting mostly to web devs but with HTML5, designers are interested because of increased support for rich interactivity, app developers because of the same reason. Web dev going more to app dev side.Flash player is free but the dev toolkit for flash is expensive. HTML5 is free for designers and developers.Flash still has the advantage for advanced effects and certain featuresFlash not on iphone and ipad and requires a plugin. HTML5 is becoming adopted universallyHTML5 with its support for video/audio/image transforms/vector graphics capabilities can be good for most cases and idea is that it will continue to evolve to include more rich functionalitySource protection?