HTML5 and Joomla! 2.5 Template
•Download as PPTX, PDF•
5 likes•8,444 views
OSSFest2012 Presentation (The 11th Thailand Open Source Software Festival)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to HTML5 and Joomla! 2.5 Template
Similar to HTML5 and Joomla! 2.5 Template (20)
Recently uploaded
Recently uploaded (20)
HTML5 and Joomla! 2.5 Template
- 1. The 11th Thailand Open Source Software Festival 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
- 2. About HTML5 What is HTML5? 1. HTML5 will be the new standard for HTML. 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 CSS JavaScript support many of the new HTML5 elements and APIs.
- 3. About HTML5 HTML + CSS + DOM + JavaScript The Tech-nology of HTML5 (Editor's Draft 15 May 2012) Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3 http://www.w3.org/html/logo/ New Class: Offline, Nuts & Bolts
- 4. About HTML5 WWW ? 1 http://www.w3.org/TR/html5/ 2 http://dev.w3.org/html5/spec/Overview.html ✓ 3 http://thaicss.com/ ✓ 4 http://www.blognone.com/topics/html5 5 http://www.w3schools.com/html5/default.asp 6 http://www.html5rocks.com/ 7 http://diveintohtml5.info 8 http://www.alistapart.com/articles/previewofhtml5
- 5. Building a Templates Build Your own Joomla! Template Get Requiement and Sketch Building Template Design Cut Outline Template
- 6. Joomla! Templates Inside your own Joomla! template structure • Joomla1.7.x templates - beez5 index.php • Joomla2.5.x templates - beez5 index.php
- 7. Templates Structure Your can change with the sample code. Change from <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> to The html5.js and must be inserted in the head element (this is because IE needs to know about the element <!DOCTYPE html> before it comes to render them - so it can't sit in the footer 2 of the page, i.e. below the elements in question). http://remysharp.com/2009/01/07/html5-enabling-script/ & Add HTML5 enabling script <!--[if lt IE 9]> 3 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
- 8. Templates Structure Your can change Elements with the sample structure. HTML 4 HTML 5
- 9. Templates CSS Your can used with the sample code CSS3 http://dev.w3.org/csswg/css3-fonts/ 1 @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"); } CSS3 2 -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- IE support css3 from http://css3pie.com/ http://www.css3.info/
- 10. Joomla! Templates Joomla! Template framework supported HTML5 technology ✓ Warp6 http://www.yootheme.com/themes/warp-framework
- 11. Joomla! Templates Joomla! Template framework supported HTML5 technology
- 12. Joomla! Templates Joomla! Template framework supported HTML5 technology
- 13. Joomla! Templates Joomla! Template framework supported HTML5 technology
- 14. HTML5 in mobile devices Key features for mobile devices Advanced GeoLocation forms API Video and audio streaming Canvas support drawing Offline support
- 15. Joomla! in mobile devices Showcase mobile devices
- 16. Template in mobile devices Showcase for mobile devices JA Elastica from Joomlart
- 17. Q&A
- 18. THANK YOU!