HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers.
If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions:
What is HTML5?
How does HTML 4.01/ XHTML 1.0 compare with the new HTML5?
What are the new HTML5 structural elements?
What do you need to do to build a Drupal 7 theme in HTML5?
What is CSS3?
What are the new CSS3 properties and techniques?
What CSS3 techniques should be used in Drupal?
What are some advanced CSS3 techniques?
About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.
5. Bachelor of Fine Arts in Graphic
Design from Savannah College
of Art & Design (SCAD)
Creative Director at
Mediacurrent
Working in the web space for
about 12 years
Working with Drupal sense
version 4.7
Favorite Drupal Install is
WatchGMC.com
6. ABOUT ME
DANTÉ TAYLOR
Bachelor of Fine Arts in Graphic
Design from Savannah College
of Art & Design (SCAD)
Creative Director at
Mediacurrent
Working in the web space for
about 12 years
Working with Drupal sense
version 4.7
Favorite Drupal Install is
WatchGMC.com
7. BASIC ASSUMPTIONS
Basic understanding of HTML
& CSS markup
Basic understating about
Drupal & Theming.
Familiar with modern
browsers such as Firefox,
Safari, Chrome & Internet
Explorer
8. BASIC ASSUMPTIONS
Basic understanding of HTML
& CSS markup
Basic understating about
Drupal & Theming.
Familiar with modern
browsers such as Firefox,
Safari, Chrome & Internet
Explorer
10. IN THE NEXT
45 MINUTES
What’s NEW in HTML5 & CSS3
How both technologies will effect the way you develop,
work & experience the Web
Why HTML5 & CSS3 is important, who is interested in it
and what you should be doing.
15. WHO CARES ABOUT
HTML5 & CSS3
First of all, just as he did during his time on stage, Taylor
made it very clear that there are two key high-level
focuses for Facebook in 2011 from a technology
perspective: HTML5 and mobile. And actually, as he sees
them, those are both very much related as well.
"over the next couple of years, a large percentage [of development teams] will be
working on mobile primarily," ~ Facebook's CTO, Bret Taylor
Source: Tech Crunch
Facebook CTO Bret Taylor On HTML5, Mobile As The Future, And Yes, FriendFeed : Posted June 3, 2011 : By MG Siegler
18. WHO CARES ABOUT
HTML5 & CSS3
Apple is one of the biggest supporters of HTML5, and
Steve Jobs clearly thinks this new standard is the future of
the web. To show why Flash is no longer
necessary, Apple has launched a HTML5 showcase
displaying what an HTML5-capable browser can do
without the need of additional plugins.
Source: Mashable
Apple Shows Us What HTML5 Can Do : Posted June 4, 2010 : Stan Schroeder
19.
20.
21. WHO CARES ABOUT
HTML5 & CSS3
The software giant shared the new interface with
WinRumors earlier this week in preparation for
improvements the company is planning across its
Windows Phone operating system. Microsoft
is overhauling the user interface of SkyDrive. The new
interface will include a HTML5 version of its image
viewer, alongside a refreshed interface to view documents
and files uploaded to the free service.
Source: WinRumors
Microsoft reveals HTML5 overhaul of Windows Live SkyDrive : Posted May 24, 2011 : Tom Warren
22.
23.
24. WHO CARES ABOUT
HTML5 & CSS3
As a result, come August 1, Google Apps will no longer
provide support for Firefox 3.5, IE7, Safari 3, or previous
versions of those browsers. At first, on these browsers,
Google features like Gmail, Google Calendar, Google
Talk, and Google Docs may not work properly, but
eventually they may completely stop functioning.
"Older browsers just don't have the chops to provide you with the same
high-quality experience…" ~ Google's vice president of engineering,
Venkat Panchapakesan
Source: PC Magazine
Google Apps Giving Older Browsers the Boot : Posted June 3, 2011 : By Hillary Scott
25.
26.
27. WHO CARES ABOUT
HTML5 & CSS3
I believe in HTML5 enough that I wanted to make
it one of the top 5 initiatives for Drupal 8; and
switch Drupal's default doctype from XHTML to HTML5.
This is the fifth official Drupal 8 initiative after the
Configuration Management, Design, Web Services and
Multilingual initiatives.
"HTML5 is about to rock our world" ~ Dries Buytaert
Source: Bries Buytaert Blog
HTML5 in Drupal 8 : Posted May 18, 2011 : By Dries Buytaert
28.
29. HMMM! WHATS SO
SPECIAL ABOUT
HTML5
DIFFERENCES BETWEEN
HTML 4.01, XHTML, HTML5
36. HTML5
SEMANTICS
Giving meaning to structure,
semantics are front and
center with HTML5. A richer
set of tags, along with RDFa,
microdata, and microformats,
are enabling a more useful,
data driven web for both
programs and your users.
Source: w3c.org
37. HTML5
OFFLINE & STORAGE
Web Apps can start faster
and work even if there is no
internet connection, thanks to
the HTML5 App Cache, as
well as the Local Storage,
Indexed DB, and the File API
specifications.
Source: w3c.org
38. HTML5
DEVICE ACCESS
Beginning with the
Geolocation API, Web
Applications can present rich,
device-aware features and
experiences. Incredible device
access innovations are being
developed and implemented,
from audio/video input access
to microphones and cameras,
to local data such as contacts
& events, and even tilt
orientation.
Source: w3c.org
39. HTML5
CONNECTIVITY
More efficient connectivity
means more real-time chats,
faster games, and better
communication. Web Sockets
and Server-Sent Events are
pushing (pun intended) data
between client and server
more efficiently than ever
before.
Source: w3c.org
42. HTML5
MULTIMEDIA
Audio and video are first class
citizens in the HTML5 web,
living in harmony with your
apps and sites. Lights, camera,
action!
Source: w3c.org
43. HTML5
3D, GRAPHICS, EFFECTS
Between SVG, Canvas,
WebGL, and CSS3 3D
features, you're sure to amaze
your users with stunning
visuals natively rendered in
the browser.
Source: w3c.org
44. HTML5
PERFORMANCE &
INTEGRATION
Make your Web Apps and
dynamic web content faster
with a variety of techniques
and technologies such as Web
Workers & XMLHttpRequest
2. No user should ever wait
on your watch.
Source: w3c.org
45. HTML5
PERFORMANCE &
INTEGRATION
CSS3 delivers a wide range of
stylization and effects,
enhancing the web app
without sacrificing your
semantic structure or
performance. Additionally
Web Open Font Format
(WOFF) provides typographic
flexibility and control far
beyond anything the web has
offered before.
Source: w3c.org
61. HTML5 DOCTYPE
USE CASE
The HTML syntax of HTML5 requires a DOCTYPE to be specified
to ensure that the browser renders the page in standards mode. The
DOCTYPE has no other purpose and is therefore optional for
XML. Documents with an XML media type are always handled in
standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-
insensitive in the HTML syntax. DOCTYPEs from earlier versions of
HTML were longer because the HTML language was SGML-based
and therefore required a reference to a DTD. With HTML5 this is
no longer the case and the DOCTYPE is only needed to enable
standards mode for documents written using the HTML syntax.
Browsers already do this for <!DOCTYPE html>.
Source: w3.org
66. HTML5 HEADER
USE CASE
Ideal for use in defining global page structure.
Usually intended to contain sections headings h1- h6
& navigation.
This could also be used inside of section containers to help identify
the section purpose or relevancy.
Source: www.essentaste.com
70. HTML5 NAV
CODE SAMPLE
<header>
<!-- begin: primary nav -->
<nav>
<a href=”home.html”>Home</a>
<a href=”about.html”>About</a>
</nav>
<!-- end: primary nav -->
</header>
Example: www.essentaste.com
71. HTML5 NAV
USE CASE
Set primary navigation in header inside header tags.
Use to define secondary navigation in left and right
sidebar rails.
Use anywhere on side that requires navigation or site
toolbars functionality.
Source: www.essentaste.com
76. HTML5 SECTION
USE CASE
Use to group content into logical category or sections
With very few exceptions, section should not be used if
there is no natural heading for it.
Section should not be used like aside or nav containers
just to position content
Check work in a HTML5 Outliner Tool
Source: HTML5 Doctor
81. HTML5 ARTICLE
USE CASE
The article element represents a component of a page
that consists of a self-contained composition in a
document, page, application, or site and that is intended to
be independently distributable or reusable, e.g. in
syndication.
This could be a forum post, a magazine or newspaper
article, a blog entry, a user-submitted comment, an
interactive widget or gadget, or any other independent
item of content.
Source: HTML5 Doctor
85. HTML5 VIDEO
CODE SAMPLE
<!-- begin: video -->
<video id="vid1" poster="http://v.com/video.jpg>
<source type="video/webm" src="http://v.com/vid.webm" />
<source
src="http://v.com/vid.m4v"/>
<source src="http://v.com/vid.ogv" />
</video>
<!-- end: video -->
Example: kaltura.org
86. HTML5 VIDEO
USE CASE
To make the video work in Internet Explorer, Safari and
future versions of Chrome, we must add a MPEG4 and
WebM file.
The video element allows multiple source elements.
Source elements can link to different video files. The
browser will use the first recognized format:
Tools for HTML5 Video (Kaltura & HTML)
Source: HTML5Video.org & w3school.org
90. HTML5 ASIDE
CODE SAMPLE
<!-- begin: aside right -->
<aside id=”aside-right”>
<nav>
<ul>
<li><a href=”link.html”>noop</a></li>
<li><a href=”link.html”>zoop</a></li>
<li><a href=”link.html”>Link 3</a></li>
</ul>
</nav>
<p>Space Matter And Time (SMAT)</p>
</aside>
<!-- end: aside right -->
Example: www.essentaste.com
91. HTML5 ASIDE
USE CASE
Intended to be used to support surrounding elements
With the new definition of aside, it’s crucial to remain aware
of its context. When used within an article element, the
contents should be specifically related to that article (e.g., a
glossary).
When used outside of an article element, the contents
should be related to the site (e.g., a blogroll, groups of
additional navigation, and even advertising if that content is
related to the page).
Source: HTML5 Doctor
96. HTML5 FOOTER
USE CASE
An important point to note is that you are not restricted
to use one <footer> element per site, you can use
multiple footers, each of which will then become the
<footer> for that section of the document.
You could therefore have a <footer> for a <section> or
an <article>.
Source: HTML5 Doctor
98. HTML5 CANVAS
CODE SAMPLE
<!-- begin: canvas graphic -->
<canvas id="myCanvas">Browser Not Supported</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<!-- end: canvas graphic -->
Example: w3schooling.com
99. HTML5 CANVAS
USE CASE
The <canvas> tag is used to display drawn graphics.
The <canvas> tag is only a container for graphics, you
must use a script to actually paint graphics.
Any text inside the between <canvas> and </canvas>
will be displayed in browsers that does not support the
canvas element.
Canvas API
Example: w3schooling.com
124. CSS3
CODE SAMPLE
@font-face {
font-family: "your FontName";
/* IE */
src: url(/location/of/font/FontFileName.eot);
/* non-IE */
src: local("real FontName"), url(FontFileName.ttf)
format("truetype");
}
/* THEN use like you would any other font */
.element {
font-family:"your FontName", helvetica, sans-serif;
}
142. DRUPAL HTML5
CONTRIBUTED THEMES
Omega By Jake Strawn
http://drupal.org/project/omega
Zentropy By Alex Weber
http://drupal.org/project/zentropy
960gs By Jake Strawn
http://drupal.org/project/panels_960gs
AdaptiveThemes By Jeff Burnz
http://drupal.org/project/adaptivetheme
143.
144. GOOD
RESOURCES
Introductin HTML5 by Burce Lawson & Remy Sharp
Pro HTML5 Programming by Peter Lubbers, Brian Albers & Frank Salim
Visual Quickstart Guide CSS3 by Jason Cranford Teague
Pro Drupal 7 Development by Tood Tomlinson and John K. VanDyk