HTML5 and Joomla! 2.5 Template
Download as PPTX, PDF5 likes8,453 views
The document summarizes information presented at the 11th Thailand Open Source Software Festival about HTML5 and building templates for Joomla!. It provides an overview of HTML5, describing it as the new standard for HTML, how it has evolved since HTML 4.01 in 1999, and how major browsers now support many of its new elements and APIs. It also discusses building Joomla! templates, including template structure, using HTML5 elements and enabling scripts, CSS3 features like @font-face, vendor prefixes, and frameworks that support HTML5. Finally, it covers key HTML5 features for mobile devices and showcasing Joomla! templates on mobile.
![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]-->](https://image.slidesharecdn.com/ossfest2012-presentation-120521020751-phpapp02/85/HTML5-and-Joomla-2-5-Template-7-320.jpg)
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!