Embed Size (px)
DESCRIPTION
OSSFest2012 Presentation (The 11th Thailand Open Source Software Festival)
Citation preview
HTML5 and Joomla! TemplateName: Supachai TeasakulLocation: Bangkok, ThailandPosition: Joomla Translation WG - Joomla.org, DOCMan Translation,
LaiThai Developer Team, Project Manager - Marvelic Engine Co.,Ltd.Twitter: @supa_chai
The 11th Thailand Open Source Software Festival
1. HTML5 will be the new standard for HTML.
2. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.
3. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
HTML
JavaScript CSS
What is HTML5?
About HTML5
http://www.w3.org/html/logo/
The Tech nology of HTML5 (Editor's Draft 15 May 2012)
HTML + CSS + DOM + JavaScript
About HTML5
Semantics Offline & Storage Device Access Connectivity
Multimedia 3D, Graphics & Effects Performance & Integration CSS3
New Class: Offline, Nuts & Bolts
http://www.w3.org/TR/html5/
http://thaicss.com/
http://www.html5rocks.com/
http://dev.w3.org/html5/spec/Overview.html
http://www.w3schools.com/html5/default.asp
http://diveintohtml5.info
✓
7
6
5
4
3
2
1
8 http://www.alistapart.com/articles/previewofhtml5
http://www.blognone.com/topics/html5✓
WWW ?
About HTML5
Build Your own Joomla! Template
Building a Templates
Get Requiementand Sketch
Cut OutlineTemplate
Building Template Design
• Joomla1.7.xtemplates
- beez5 index.php
• Joomla2.5.xtemplates
- beez5 index.php
Inside your own Joomla! template structureJoomla! Templates
The html5.js and must be inserted in the head element (this is because IE needs to know about the element before it comes to render them - so it can't sit in the footer of the page, i.e. below the elements in question).
http://remysharp.com/2009/01/07/html5-enabling-script/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Change from
<!DOCTYPE html>
to
3<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
& Add HTML5 enabling script
2
1
Your can change with the sample code.
Templates Structure
Your can change Elements with the sample structure.
Templates Structure
HTML 5
HTML 4
-prefix-Supported by Internet Explorer with the prefix -ms-Supported by Firefox with the prefix -moz-Supported by Google Chrome with the prefix -webkit-Supported by Safari with the prefix -webkit-Supported by Opera with the prefix -o-
CSS3
CSS3
@font-face {font-family: 'Titillium Maps';src: url("../fonts/TitilliumMaps29L002.eot");src: local('Titillium Maps'), local('TitilliumMaps'),
url("../fonts/TitilliumMaps29L002.otf") format("opentype"),url("../fonts/TitilliumMaps29L002.woff") format("woff");}
2
1
Your can used with the sample code
Templates CSS
IE support css3 from http://css3pie.com/
http://dev.w3.org/csswg/css3-fonts/
http://www.css3.info/
Joomla! Template framework supported HTML5 technologyJoomla! Templates
http://www.yootheme.com/themes/warp-framework✓ Warp6
Joomla! Template framework supported HTML5 technologyJoomla! Templates
Joomla! Template framework supported HTML5 technologyJoomla! Templates
Joomla! Template framework supported HTML5 technologyJoomla! Templates
HTML5 in mobile devicesKey features for mobile devices
Offline support
Canvas drawing
Video and audio streaming support
GeoLocation API
Advanced forms
Joomla! in mobile devicesShowcase mobile devices
Template in mobile devicesShowcase for mobile devices
JA Elastica from Joomlart
Q & A
THANK YOU!
