The 11th Thailand Open Source Software Festival        HTML5 and Joomla! Template        Name:     Supachai Teasakul      ...
About HTML5 What is HTML5?                      1.   HTML5 will be the new standard for                           HTML.   ...
About HTML5               HTML + CSS + DOM + JavaScript               The Tech-nology of HTML5 (Editors Draft 15 May 2012)...
About HTML5                  WWW ?    1   http://www.w3.org/TR/html5/    2   http://dev.w3.org/html5/spec/Overview.html✓  ...
Building a Templates                  Build Your own Joomla! TemplateGet Requiement  and Sketch   BuildingTemplate Design ...
Joomla! TemplatesInside your own Joomla! template structure   • Joomla1.7.x       templates          - beez5           in...
Templates StructureYour can change with the sample code. Change from       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr...
Templates StructureYour can change Elements with the sample structure.HTML 4HTML 5
Templates CSS Your can used with the sample codeCSS3                                     http://dev.w3.org/csswg/css3-font...
Joomla! TemplatesJoomla! Template framework supported HTML5 technology✓   Warp6   http://www.yootheme.com/themes/warp-fram...
Joomla! TemplatesJoomla! Template framework supported HTML5 technology
Joomla! TemplatesJoomla! Template framework supported HTML5 technology
Joomla! TemplatesJoomla! Template framework supported HTML5 technology
HTML5 in mobile devicesKey features for mobile devices                                                  Advanced          ...
Joomla! in mobile devicesShowcase mobile devices
Template in mobile devicesShowcase for mobile devices JA Elastica from Joomlart
Q&A
THANK YOU!
Upcoming SlideShare
Loading in …5
×

HTML5 and Joomla! 2.5 Template

19,298 views
19,056 views

Published on

OSSFest2012 Presentation (The 11th Thailand Open Source Software Festival)

Published in: Technology, Design
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
19,298
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
154
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

HTML5 and Joomla! 2.5 Template

  1. 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. 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 browsersCSS JavaScript support many of the new HTML5 elements and APIs.
  3. 3. About HTML5 HTML + CSS + DOM + JavaScript The Tech-nology of HTML5 (Editors Draft 15 May 2012) Semantics Offline & Storage Device Access Connectivity Multimedia 3D, Graphics & Effects Performance & Integration CSS3http://www.w3.org/html/logo/ New Class: Offline, Nuts & Bolts
  4. 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. 5. Building a Templates Build Your own Joomla! TemplateGet Requiement and Sketch BuildingTemplate Design Cut Outline Template
  6. 6. Joomla! TemplatesInside your own Joomla! template structure • Joomla1.7.x templates - beez5  index.php • Joomla2.5.x templates - beez5  index.php
  7. 7. Templates StructureYour 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 cant 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. 8. Templates StructureYour can change Elements with the sample structure.HTML 4HTML 5
  9. 9. Templates CSS Your can used with the sample codeCSS3 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. 10. Joomla! TemplatesJoomla! Template framework supported HTML5 technology✓ Warp6 http://www.yootheme.com/themes/warp-framework
  11. 11. Joomla! TemplatesJoomla! Template framework supported HTML5 technology
  12. 12. Joomla! TemplatesJoomla! Template framework supported HTML5 technology
  13. 13. Joomla! TemplatesJoomla! Template framework supported HTML5 technology
  14. 14. HTML5 in mobile devicesKey features for mobile devices Advanced GeoLocation forms API Video and audio streaming Canvas support drawing Offline support
  15. 15. Joomla! in mobile devicesShowcase mobile devices
  16. 16. Template in mobile devicesShowcase for mobile devices JA Elastica from Joomlart
  17. 17. Q&A
  18. 18. THANK YOU!

×