My name is Stacy London.
I've been doing front-end web development since 1998.
I still love it.
~7 years at JohnsonDiversey on the E-Commerce / Web Team
~2 years at Kohl's on the kohls.com team
~4 years at Northwestern Mutual building web apps
Don't fall asleep developers! This isn't for you :)
HyperText Markup Language is the language web pages are written in. It should be easy to read the tags and understand the content they are describing (semantic).
"The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page." - HTML
Google (Chrome), Microsoft (Internet Explorer), Mozilla (Firefox), Apple (Safari), Opera
Cascading Style Sheets are used to describe the look and feel of a web page (fonts, colors, positions, etc.).
Developers weren't just building web pages to display content but they were building web applications that had deep user interaction.
This was never the original intention of HTML. We needed and demanded more.
In the early 80s a physicist named Sir Tim Berners-Lee, who was a contractor at CERN, devised a way to markup documents to be shared electronically with other scientists. This was the start of HTML.
He later founded the W3C (World Wide Web Consortium) which is the main international standards organization for the WWW.
"W3C was created to ensure compatibility and agreement among industry members in the adoption of new standards. Prior to its creation, incompatible versions of HTML were offered by different vendors, increasing the potential for inconsistency between web pages. The consortium was created to get all those vendors to agree on a set of core principles and components which would be supported by everyone." - W3C
In June 2004, representatives from the semantic web community, major browser vendors, and the W3C met in San Jose, California.
Topic: the W3C's response to the rise of web applications.
Should the W3C should augment HTML and the DOM to address the new requirements of web applications?
"8 for, 14 against."
2 days later...
The WHATWG was formed from the major browser vendors to solve emerging issues: WHATWG WebApps Spec.
Meanwhile, the W3C pushed forward with the XHTML2 spec.
The W3C drops XHTML2 to focus on an aligned HTML5 effort with the WHATWG.
reference: HTML5 History
Even though there is a standards organization, some vendors decided to introduce proprietary functionality in their browser ...
This was the introduction of a nightmare for web developers called "cross-browser compatibility". We were directed to make a web site / application look and function exactly the same in Internet Explorer 6 and in Firefox (as an example).
Web Developers spent countless hours finding and correcting bugs and coding work-arounds because IE6 didn't implement W3C standards while other browsers did.
Even Microsoft now admits how bad it was and how it prevented modern web development from moving forward.
Microsoft created a countdown website, ie6countdown.com, to get the world off of it.
Microsoft is onboard with HTML5 and is evolving its browser to be standards compliant with what the W3C defines. IE10, when released, will be the most standards compliant browser they've ever made and will support a lot of the new HTML5 and CSS3 features.
While it's nice to think they are doing this out of the goodness of their heart it's also a response to shrinking market share of their browser.
HTML5 web application with ability to go offline
Gradients, rounded corners, opacity, transforms, transitionspatterns | animatable | photo gallery
The term "HTML5" is often used as a buzzword to refer to modern web technologies (similar to the term "Web 2.0").
Specifically, it's the 5th major revision of HTML aimed at easing web application development whereas prior versions were aimed at creating static web pages.
When you use the new HTML5 input types and device access, you make filling out forms or showing driving directions easier for your users on tablets/smart phones (a better user experience).
Detect screen size and re-arrange/hide pieces. E.g. make the main navigation into large buttons on a mobile device to make touch interaction easy.
The user gets the best experience for the size device they are using.
Click here and change it!
<p id="editable" contenteditable="true">Click in this text and start changing it!</p>
<progress value="75" max="100">3/4 complete</progress>
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.
"Perhaps 2012. Perhaps 2022. It doesn't matter; what matters is that a lot of it is implemented in browsers now, so it can be used now. Saying that we can't use HTML5 because it isn't finished is like saying we can't speak English because it isn't finished." - Bruce Lawson
We only had 1 1/2 hours. There is much more to explore!