Post on 29-Jul-2020
HTML5 and Joomla! Template Name: Supachai Teasakul
Location: Bangkok, Thailand
Position: Joomla Translation WG - Joomla.org, DOCMan Translation,
LaiThai Developer Team, Project Manager - Marvelic Engine Co.,Ltd. Twitter: @supa_chai
Joomla!Day Bangkok 2012 #JoomlaDayBKK
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 Technology of HTML5 (Editor's Draft 22 February 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 Requiement
and Sketch
Cut Outline
Template
Building
Template Design
• Joomla1.7.x
templates
- beez5
index.php
• Joomla2.5.x
templates
- beez5
index.php
Inside your own Joomla! template structure
Joomla! 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 technology
Joomla! Templates
http://www.yootheme.com/themes/warp-framework ✓ Warp6
Joomla! Template framework supported HTML5 technology
Joomla! Templates
Joomla! Template framework supported HTML5 technology
Joomla! Templates
Joomla! Template framework supported HTML5 technology
Joomla! Templates
HTML5 in mobile devices Key features for mobile devices
Offline support
Canvas drawing
Video and audio streaming support
GeoLocation API
Advanced forms
Joomla! in mobile devices Showcase mobile devices
Template in mobile devices Showcase for mobile devices
JA Elastica from Joomlart
Q & A
THANK YOU!