Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company, for the United States Department of Energy’s National Nuclear Security Administration under contract DE-AC04-94AL85000. Introduction to HTML5 & CSS3 Joseph R. Lewis, Sandia National Laboratories InterLab Conference, Oak Ridge National Laboratory, November 1 st , 2010, SAND №2010-7567C
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company,for the United States Department of Energy’s National Nuclear Security Administration
under contract DE-AC04-94AL85000.
Introduction to HTML5 & CSS3
Joseph R. Lewis, Sandia National Laboratories
InterLab Conference, Oak Ridge National Laboratory, November 1st, 2010, SAND №2010-7567C
Get set up for playing along
• Your favorite code editor. Suggestions:• TextMate or E – check for HTML5 bundles on GitHub• Dreamweaver CS5 11.0.3 update
• Latest versions of these browsers:• Firefox 4 (beta)
National Laboratories• Web development for 13 years • Author, AdvancED CSS and
Foundation Website Creation
What we will cover
• As much HTML5 and CSS3 as we can!• Some time for exercises.• Other topics may be introduced and left for you to
explore later.• Will skip a few things that are either deeply in flux
or not relevant to National Lab/Science application (i.e. Ruby)
• Focus on practical things you can get started with now, with a taste of what is to come!
Agenda
• HTML5• History and Overview• Semantic Elements• Forms• SVG and MathML• Canvas• WAI-ARIA (Accessibility)• Video and Audio• Offline Storage• Drag & Drop• Messages, Workers, &
Sockets
• Geolocation• CSS3
• Selectors• Borders• Backgrounds• Color• Text & Web Fonts• Transitions, Transforms,
Animation
HTML5 and CSS3 Appetizers
• CanvasMol: http://alteredqualia.com/canvasmol/
• The Wilderness Downtown: http://www.thewildernessdowntown.com/
• Microsoft, Apple, Mozilla, Google, Facebook, YouTube, Vimeo, etc. – all fully committed to HTML5 as the future of the web.
• HTML5 represents a more practical, more semantic, more functional web.
• CSS3 makes common visual elements easy, programmatic, not image-based.
• Browser support for HTML5+CSS3 today:• Excellent for Safari, Firefox, Chrome, Opera, IE9• Practical strategies exist for older browsers.
The long journey to HTML5
History of HTML
• Why? So we can understand why certain decisions were made, and why things are the way they are.
• W3C & HTML up to v4.01• Browser wars – vendors trying to one-up each other
on features• Standards process at the W3C – debate,
committees, specifications• “Shipping code wins”
The reasoning behind XHTML
• XML was seen as the future of the web• XHTML was intended to function as a ‘transition’ on
the path to XML
Why XHTML was doomed
• No backwards compatibility• Fussy XML interpretation• Strict adherence to MIME types
• text/html vs. application/xhtml+xml• Browsers all allow text/html• application/xhtml+xml broke IE
Enter WHATWG and HTML5
• Opera, Mozilla, and Apple, presented competing vision of evolution of HTML at W3C workshop in 2004. Voted down.
• Web Hypertext Application Technology Working Group (WHATWG) formed to continue work outside W3C.
• In 2007, W3C creates HTML working group with HTML5 as the foundation.
• In 2009, The W3C discontinued the XHTML 2.0 working group in favor of HTML5.
Principles of HTML5
• Backwards compatibility• Well-defined, non-draconian error handling• Practical applications and usage• Embracement of JavaScript interaction with markup• Open process
• Discuss as a group how we got to HTML5.• What do you all think about having two versions of
HTML5?• What have you heard about the debate?• When do you think you might start using HTML5 in
your own code?
Let’s learn some HTML5!
Doctype, the old way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Doctype, the HTML5 way:
<!DOCTYPE html>
Defining a character set
• Why? Text rendering + Security concern: http://code.google.com/p/doctype/wiki/ArticleUtf7
• In the old days, we used Latin 1: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">, or whatever regional character set was necessary for your language (i.e. Big-5 for traditional Chinese).
• Unicode makes individual character sets unnecessary: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
• To many to catch them all here, but just a few to mention up front include:• placeholder – placeholder text in forms• autofocus – assigns focus to text fields• contenteditable – makes a given element editable.
Try it.• reversed – works on <ol> to reverse numbering.
Changed HTML5 elements
• <a> can now wrap around block elements• <b> and <i> are back. • <cite> defined to be the title of a work*• <hr> is now a “paragraph-level thematic break”• <small> is for small print, i.e. legal boilerplate
• Code is complex, confusing• Relies on 3rd party plug-in• Plug-in layout is monopolized – can’t draw objects
on top of it.
<video> in HTML5
<video src=Bach.mp4></video>
Easiest way to support pre-<video> UAs
<video src=Bach.ogv autoplay>Get the <a href=Bach.ogv>Bach video here!</a>
</video>
Did you notice something different
• Ogg Vorbis vs H.264• Apple Safari and Microsoft IE9 support H.264• Mozilla Firefox and Opera support Ogg Vorbis• Google Chrome supports both• VP8/webM will be supported by all but Safari• The debate…
• Microformats in HTML5 is a future-looking effort. Not stable at the present.
• Some elements such as <time> and <article> might be more helpful to microformats than when using the current conventions.
• Using data-* is explicitly not for microformats or anything else other than custom data structures. Browsers will never do anything special with data-*
• Currently hCard and XFN have no compatibility issues with HTML5. Other microformats may need examination in the HTML5 context.
Exercise №7: Semantic Web
• Make an hCard in an HTML5 web page.• Create some data-* attributes. Discuss what you
came up with and how your data might be used.• Write some CSS that targets your data-* attributes!
Maybe give it a purple background color with green text. On second thought – I’m sure you can come up with a better idea…
• Discuss the issues around microformats, microdata, and RDFa.
Cache manifest
• Tells browser what to get from cache when offline
• Invoke in HTML element: <html manifest="my.manifest”>
CACHE MANIFEST
CACHE:logo.pngofflinestyles.cssappfunctions.js
FALLBACK:backup-appfunctions.js
NETWORK:ping.js
HTML5 JS APIs: Selectors
• Select class 'activerow': getElementsByClassName('activerow');
• CSS3 organized into separate modules• Easier to implement• Some parts will be done before others
• Will be done when implementations exist and vendor extensions are no longer necessary
• But it’s OK to use vendor extensions:• -moz-• -webkit-• -o-• -ms-
Browser support for CSS3
• WebKit browsers: Safari and Chrome have excellent support for CSS3• Mobile WebKit makes particularly effective use of
CSS3, including hardware acceleration in animation.• Firefox (Gecko): Very good as of 4.0 beta, with
some implementations in 3.5+• Opera (Presto): Very good in recent versions.• IE (Trident): Very good in IE9.• Design for enhanced/extra functionality and design
in browsers that support CSS3.
CSS3 Color
• RGBa – adds the alpha value to RGB, any decimal value from 0 to 1 (.5 = 50%)
• HSL – hue, saturation, luminosity• HSLa – HSL with an alpha value• Opacity• Gradients
1. Make three uniquely-marked-up boxes using your favorite HTML5 element. (<div> is an HTML5 element>)
2. Enter some text into each box.
3. Color the background of the first box using HSL, the second box using HSLa, and the third using RGBa.
4. Use absolute positioning to make the three boxes partially overlap and apply opacity to one or more of the boxes to make the box below it show through partially.
5. Experiment with different values. What happens?
6. How do the various browsers behave?
Selectors
• Allow more fine-grained, conditional control over how elements are targeted.
• EXTREMELY useful for querySelectorAll();• New patterns:
• General sibling combinator (GSC) ~• Attribute matching selectors• Pseudo-classes
Markup for the GSC example
<body> <h1>The Violas of Rome</h1> <p>It was the best of times, it was the worst of times. It was a
dark and stormy night.</p> <p>Her heart was racing as she walked towards the stairs. No-one
would play her viola again. The nightmares would end - tonight.</p>
<h2>A soldier's tale</h2> <p>It all began many years ago, in a small hamlet by the seaside.
Her cousins would knock at the door and they'd go into the village to see their aunt at the shop. Never in her life would she suspect that the hamlet would be the very place that they would come first - the druids that came in from the sea.</p>
<p>That Saturday was Salame and Cheese night. Would she be able to tell her girlfriends the sad truth about her nightmares?</p>
<aside> <p>As an aside, we should note that one should never trouble
• E[instrument^="bass"] – selects any attribute beginning with the string “bass”.
• E[instrument$="bass"] – selects any attribute ending with the string “bass”.
• E[instrument*="bass"] – selects any attribute beginning with the string “bass”.
• String ‘bass’ – no pun intended… ;)
Pseudo-Classes
• E:root – selects the root element. Not a big deal for HTML, but huge for styling XML where the root element may be unknown.
• E:nth-child(n) selects the “nth” child of the given element’s parent. • The (n) part is an expression with a prototype of an+b, in
which the “an” part defines the frequency of any repeating that may occur, and the +b part is a modifier that indicates on which order of the nodes the counting begins.
• The an part or the +b part may each exist on their own, and the operator in between the two may be a plus or minus symbol.
• The keywords odd and even may be used as well.
More Pseudo-Classes
• E:nth-last-child(n) – This pseudo-selector works just like E:nth-child in reverse, counting back from the last child.
• E:nth-of-type(n) – This pseudo-selector works similar to:nth-child, but only selects elements that are of the same type.
• Font Squirrel http://www.fontsquirrel.com/• TypeKit http://typekit.com/• FontDeck http://fontdeck.com/• Fonts.com Web Fonts http://webfonts.fonts.com • Google Font API http://code.google.com/webfonts
• http://html5boilerplate.com/• Cross-browser compatible, including IE6• HTML5 ready. Use the new tags with certainty.• Caching and compression rules for performance• Drop in site configuration defaults.• Mobile browser optimizations.• Unit test framework built in.
• Pick a solution such as Modernizr, HTML5 Boilerplate, the caniuse.com site, or the detection scripts from Mark Pilgrim’s book and create a web page or two that leverage implementable HTML5 and/or CSS3 today!
• What would you do to make your site friendly to mobile devices?
HTML5 and CSS3 for Mobile Apps
Where the money is at
• “The center of financial gravity in the computing world—the Center of Money—has shifted. No longer directed at the PC, the money pump now gushes full blast at the smartphones market.”
—Jean-Louis Gasse, May 2, 2010, commenting on HP’s estimated operating profit from PCs at ~5% ($500M) vs. Apple’s estimated operating profit of 58% ($3B) from iPhones.
Questions to consider
• What is the mobile web?• Why is this important now?• What trends are driving this importance?• What opportunities do mobile devices present to
use in science and information technology?
What is the mobile web
• Web access via mobile wireless devices:• Smartphones
• iPhone• Palm Prē• Android• Modern BlackBerry devices
• Forget about low-end phones with claimed web access.
Mobile Web Use Trends
• Explosive growth:• Bango: Mobile web use in the US experienced three fold
increase in 2007• Juniper: Mobile web users will grow from 577 million in
2008 to more than 1.7 billion in 2013• iPhone leading the way since launch of June 2007:
• AdMob: iPhone in 11/2008 became single most-used web device over any other handset
• Google 2/2008: Apple iPhone generates 50 times more searches than any other device
• Opera is most widely deployed mobile browser: ~54% market share
Expect increased mobile web use
• March 2010: 71% of American smartphone users use their devices for web access.
• Some major sites reporting over 13% of their traffic coming from mobile devices• Weather & Entertainment: often over 20%
• Web-enabled client apps are critical to the market.> 185,000 apps for iPhone App Store> 53,000 for Android Market> 5,000 for Nokia Ovi Store> 2,000 for BlackBerry App World> 1,500 for Palm webOS App Catalog
• Social networking dominates web+app use• Global use > 40% for social networking• USA, South Africa, and Indonesia register > 60% use (Opera, 5/2008)
Advantages for mobile apps• Convenience & Proximity: Always on, always near the owner.
• 60% of mobile users keep their phones bedside at night.
• Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data.
• Location aware: GPS, accelerometers widely available.• Media input: Most smartphones have built-in camera, microphone, speaker,
keyboard.• "An App for That": There are currently over 100K approved apps for the
iPhone, and the rate of growth is phenomenal, more than the rate of growth for desktop software
• Cost: The cost of apps has been decreasing significantly and most of the most popular apps cost $1
• On the Go Messaging: Ability for users to send and receive messages from any location
• Data storage: Users are able to have a significant amount of personal and professional data at their fingertips.• Airlines are allowing users to have e-tickets on their smartphones, these devices are
replacing paper and credit cards to store information.
Mobile Application Challenges
• Small screen size• Navigation differences &
usability• Reduced functionality
• No Flash
• Slow Networks• City congestion/canyons• Major events (i.e. Superbowl)• No 3G
• Lower processing capability• Less CPU power• Less RAM
Use cases for mobile refactoring
• Public web presence• Mobile users on your intranet (travel, time,
information)• Scientific applications
• Lab notes• Notification & access to experiment data• Collaboration• Status & project management• Mobile data distribution to field users, first
responders• Research using mobile data gathering,
crowdsourcing
Web apps vs. thick clients?
• Most applications do not need native device features.
• There are some very good reasons for native clients.
• Let’s weigh the pros and cons for each...
Pros of thick clients
• Access to native hardware features not supported by web frameworks.
• Native performance benefits.• Access to app stores for commercial/public
distribution and one-click payment systems.• Security can be scrutinized across entire data
lifecycle.• In the case of iPhone, Xcode + Cocoa Touch
framework is an elegant and powerful programming environment.
Cons of thick clients
• Have to develop proprietary, device-specific code.• Have to work in proprietary SDKs.• Have to work with languages such as Java or Objective-C.• For iPhone development, have to use a Mac.• For Blackberry development, have to use Windows.• Slow development cycle.• Difficult to deploy.• Difficult to maintain - bug fixes are slow to propagate.• Vendor lock.• May not work on earlier or later OS versions or devices.• Subject to SDK license agreements that can be restrictive.
Pros of web apps
• Build applications using any text editor.
• Develop for any platform. No vendor lock.
• Use skills developers already know: HTML, CSS, JavaScript.
• Do not have to learn new proprietary languages or frameworks.
• Refactor existing web applications with minimal, inexpensive changes.
• Will work on earlier/later OS & devices• Fix bugs and deploy in real time.• Faster development cycle.• For most apps, web functionality is
plenty.• Hardware-accelerated JavaScript and
CSS3 animation and transition effects.• Can avoid client-side storage and so
local data won’t be compromised in case of device loss.
• Mobile web browsers are becoming more powerful and innovative, allowing for delivery of complex applications, tapping into features of mobile devices, and simplifying code development.
• Can leverage advances in W3C's Mobile Web Initiative
• Reduced software development costs.• Free from proprietary SDK license
agreement restrictions.• Deploy any web app to a native client
app platform using a simple wrapper (i.e. UIWebView in Cocoa Touch)
• Option to use PhoneGap to compile web apps as thick clients.
Cons of web apps
• Can't access all hardware features of a mobile device such as the camera, microphone, accelerometer (But GPS can be accessed through JavaScript.)
• Must create your own payment system for commercial applications.
• Can be slow if there is extensive use of high-resolution images, HTML tables, or JavaScript.• Beginning to see hardware JS & CSS3 acceleration.
• Subject to usual web-based security exploits.
Recommendations on web apps vs thick clients
• Consider web apps first. Build web apps whenever possible.
• Begin with a web app, even if it is only basic functionality, and move to thick clients when necessary.
• Use PhoneGap to build web apps in HTML+JS and still take advantage of native core SDK features of iPhone OS, Android, webOS, Symbian, and BlackBerry: http://www.phonegap.com/
• Build dedicated thick clients only when you’ve exhausted all other alternatives.
• Semantics and structure of HTML5• How to insert SVG, MathML, <video>, <audio>, and
<canvas>• How to implement CSS3• How to use HTML5 and CSS3 today!• How to leverage HTML5 and CSS3 for mobile
devices.
HTML5/CSS3 Developer License
• You now have license to implement HTML5 and CSS3 today in your web work.
• You now have license to design using progressive enhancement, providing essential services for legacy users while delivering cutting-edge functionality for modern browsers.
• You now have license to not restrict yourelf to the chains of legacy browsers.
• You now have license to think ahead progressively for the future of your work.
Congratulations!
Thanks!!!
• Joe Lewis• http://www.sanbeiji.com• http://twitter.com/sanbeiji/