1 / 18

HTML5 and Joomla ! Template

The 11 th Thailand Open Source Software Festival. HTML5 and Joomla ! Template. Name : Supachai Teasakul Location: Bangkok, Thailand

pravat
Télécharger la présentation

HTML5 and Joomla ! Template

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The 11th Thailand Open Source Software Festival HTML5 and Joomla! Template Name:SupachaiTeasakul Location: Bangkok, Thailand Position:JoomlaTranslation WG - Joomla.org, DOCMan Translation,LaiThaiDeveloper Team, Project Manager - Marvelic Engine Co.,Ltd.Twitter: @supa_chai

  2. About HTML5 What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, the major browsers 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) 3D, Graphics & Effects Semantics Offline & Storage Performance & Integration Device Access CSS3 Connectivity Multimedia http://www.w3.org/html/logo/ New Class: Offline, Nuts & Bolts

  4. About HTML5 WWW ? http://www.w3.org/TR/html5/ 1 http://dev.w3.org/html5/spec/Overview.html 2 ✓ http://thaicss.com/ 3 ✓ 4 http://www.blognone.com/topics/html5 5 http://www.w3schools.com/html5/default.asp 6 http://www.html5rocks.com/ 7 http://diveintohtml5.info http://www.alistapart.com/articles/previewofhtml5 8

  5. Building a Templates Build Your own Joomla! Template Get Requiementand Sketch Building Template Design Cut OutlineTemplate

  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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Change from 3 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/ 1 <!DOCTYPE html> to 2 <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> & Add HTML5 enabling script

  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 http://dev.w3.org/csswg/css3-fonts/ 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"); } 1 2 CSS3 -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- http://www.css3.info/ IE support css3 from http://css3pie.com/

  10. Joomla! Templates Joomla! Template framework supported HTML5 technology ✓ http://www.yootheme.com/themes/warp-framework Warp6

  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

  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!

More Related