Joomla!Day Bangkok 2012 -...

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

Joomla!Day Bangkok 2012 #JoomlaDayBKK

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

http://www.w3.org/html/logo/

The Technology of HTML5 (Editor's Draft 22 February 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

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

Build Your own Joomla! Template

Building a Templates

Get Requiement

and Sketch

Cut Outline

Template

Building

Template Design

• Joomla1.7.x

templates

- beez5

index.php

• Joomla2.5.x

templates

- beez5

index.php

Inside your own Joomla! template structure

Joomla! Templates

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 

& Add HTML5 enabling script

2

1

Your can change with the sample code.

Templates Structure

Your can change Elements with the sample structure.

Templates Structure

HTML 5

HTML 4

-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/

Joomla! Template framework supported HTML5 technology

Joomla! Templates

http://www.yootheme.com/themes/warp-framework ✓ Warp6

Joomla! Template framework supported HTML5 technology

Joomla! Templates

HTML5 in mobile devices Key features for mobile devices

Offline support

Canvas drawing

Video and audio streaming support

GeoLocation API

Advanced forms

Joomla! in mobile devices Showcase mobile devices

Template in mobile devices Showcase for mobile devices

JA Elastica from Joomlart

THANK YOU!

Joomla!Day Bangkok 2012 -...

Documents

Transcript of Joomla!Day Bangkok 2012 -...