HTML5 and Joomla! 2.5 Template
-
Upload
marvelic-engine-co-ltd -
Category
Technology
-
view
18.464 -
download
0
description
Transcript of HTML5 and Joomla! 2.5 Template
![Page 1: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/1.jpg)
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
![Page 2: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/5.jpg)
Build Your own Joomla! Template
Building a Templates
Get Requiementand Sketch
Cut OutlineTemplate
Building Template Design
![Page 6: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/6.jpg)
• Joomla1.7.xtemplates
- beez5 index.php
• Joomla2.5.xtemplates
- beez5 index.php
Inside your own Joomla! template structureJoomla! Templates
![Page 7: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/8.jpg)
Your can change Elements with the sample structure.
Templates Structure
HTML 5
HTML 4
![Page 9: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/9.jpg)
-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/
![Page 10: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/10.jpg)
Joomla! Template framework supported HTML5 technologyJoomla! Templates
http://www.yootheme.com/themes/warp-framework✓ Warp6
![Page 11: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/11.jpg)
Joomla! Template framework supported HTML5 technologyJoomla! Templates
![Page 12: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/12.jpg)
Joomla! Template framework supported HTML5 technologyJoomla! Templates
![Page 13: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/13.jpg)
Joomla! Template framework supported HTML5 technologyJoomla! Templates
![Page 14: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/14.jpg)
HTML5 in mobile devicesKey features for mobile devices
Offline support
Canvas drawing
Video and audio streaming support
GeoLocation API
Advanced forms
![Page 15: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/15.jpg)
Joomla! in mobile devicesShowcase mobile devices
![Page 16: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/16.jpg)
Template in mobile devicesShowcase for mobile devices
JA Elastica from Joomlart
![Page 17: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/17.jpg)
Q & A
![Page 18: HTML5 and Joomla! 2.5 Template](https://reader033.fdocuments.in/reader033/viewer/2022061222/54c0cacb4a7959a62c8b459e/html5/thumbnails/18.jpg)
THANK YOU!