HTML5

Presenter Notes

Logo

./img/html5-logo.png

Presenter Notes

Usage

./img/HTML5.jpg

Presenter Notes

WHY

Presenter Notes

W3C-world wide web consortium

  • HTML4.0 :

    MIME:text/html 结构松散,标签不严谨

  • XHTML1.0 :

    MIME:application/xhtml+xml标签,语法严格

  • XHTML1.1 :

    MIME:application/xhtml+xml,全部,xml 所以很多用户开始以text/html做声明,XHTML写文件

  • XHTML2.0 :Never finished

Presenter Notes

./img/fuck_w3c.jpg

Presenter Notes

The Future of The Web

  • Backward compatibility, clear migration path
  • Well-defined error handling
  • Users should not be exposed to authoring errors
  • Practical use
  • Scripting is here to stay
  • Device-specific profiling should be avoided
  • Open process

Presenter Notes

WHATWG

./img/apple.jpg ./img/Opera.png ./img/firefox.jpg

Features:

  • Web Forms 2.0
  • Web Applications 1.0

Presenter Notes

Here it is!!!

  • 1991 HTML
  • 1997 HTML4
  • 1999 HTML4.01
  • XHTML1.0+CSS 假XML
  • XHTML1.1 XML
  • 06/2004 WHATWG 诞生
  • 08/2006 W3C和WHATWG合作 将Web Applications 1.0改名为HTML 5
  • 2005 AJAX
  • 08/2009 W3C关闭XHTML2工作组
  • 2009 HTML5
  • 2010/4 Apple block Flash

Presenter Notes

HTML + CSS3 + Javascript

Presenter Notes

Canvas

作用:Canvas使用JS在网页上绘图,画布为矩形,多种绘制方法

绘制实色图形

<canvas id="myCanvas1" width="200" height="100"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas1");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000"
    cxt.fillRect(0,0,150,75)
</script>

放置图片

<canvas id="myCanvas2" width="200" height="100"></canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var img=new Image()
    img.src="flower.png"
    cxt.drawImage(img,0,0);
</script>

Presenter Notes

Video

作用:视频,摆脱第三方插件如Flash

3种视频格式:

  • Ogg: Theora 视频编码和 Vorbis 音频编码
  • MPEG4: H.264 视频编码和 AAC 音频编码
  • WebM: VP8 视频编码和 Vorbis 音频编码

例子

<video src="./movie/big_buck_bunny.webm" controls="controls" >
</video>

Presenter Notes

Audio

作用:音频

3种音频格式:

  • MP3
  • Ogg
  • WAV

例子

<audio src="./movie/audacity_tremolo.ogg" controls="controls">
</audio>

Presenter Notes

Storage

localStorage

特点:没有时间限制

<script type="text/javascript">
    localStorage.lastname="Smith";
    document.write(localStorage.lastname);
</script>

sessionStorage

特点:真对一个session进行数据存储,窗口关闭后数据删除

<script type="text/javascript">
    sessionStorage.lastname="Smith";
    document.write(sessionStorage.lastname);
</script>

Presenter Notes

Form Input

新增的类型

  • email
  • url
  • number
  • range
  • Date pickers(date, month, week, time, datetime, datetime-local)
  • search
  • color

email

E-mail:<input type="email" name="user_email"/>

Presenter Notes

Form&&Input Attribute

Forms Input
  • autocomplete
  • novalidate
  • autocomplete
  • autofocus
  • form
  • form overrides
  • height
  • list
  • min,max,step
  • multiple
  • pattern(regexp
  • placeholder
  • required

Presenter Notes

Geolocation

作用:识别地理位置,进一步可以分享

例子

<script type="text/javascript">
function loadDemo() {
    if(navigator.geolocation) {//检测浏览器是否支持Geolocation
        navigator.geolocation.getCurrentPosition(updateLocation);
    }
}
function updateLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    if (!latitude || !longitude) {
        return;
    }
    document.getElementById("latitude").innerHTML = latitude;
    document.getElementById("longitude").innerHTML = longitude;
}
</script>

Presenter Notes

Drag-in

拖拽文件

document.querySelector('#dropzone').addEventListener('drop', function(e) {
  var reader = new FileReader();
  reader.onload = function(evt) {
    document.querySelector('img').src = evt.target.result;
  };

  reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);

Presenter Notes

Semantic content

./img/semantic.jpg

Presenter Notes

<!DOCTYPE html>

Presenter Notes

CSS3 Borders

Rounded Corners

div
{
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px;
}

Box Shadow

div
{
    box-shadow: 10px 10px 5px #888888;
}

Border image

div
{
    border-image:url(border.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round;
    -webkit-border-image:url(border.png) 30 30 round;
    -o-border-image:url(border.png) 30 30 round;
}

Presenter Notes

Text Effects

Text Shadow

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

Word Wrapping

p{word-warp:break-word;}

Presenter Notes

2D Transforms

  • translate
  • rotate
  • scale
  • skew
  • matrix

translate

div
{
    transform: translate(50px,100px);
    -ms-transform: translate(50px,100px);
    -webkit-transform: translate(50px,100px);
    -o-transform: translate(50px,100px);
    -moz-transform: translate(50px,100px);
}

Presenter Notes

Animations

模拟动画

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    -moz-animation-name: myfirst;
    -moz-animation-duration: 5s;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

Presenter Notes

HTML5 Slide

reStructured Text WYTIWYG

目的

  1. 建立一套标准语法来使用纯文本内容来表达内容的结构
  2. 将这类文档转换为有效的结构化数据模式

优点

  • 易于阅读,纯文本标记语法和解析系统
  • 易于使用,优秀扩展性
  • 足够强大的语法来产生结构化文档
  • 可处理各种自然语言
  • MultiOutput:HTML,XML,LaTex,PDF,s5,man,odt,xml.xetex
  • Python官方文档

landslide

Github https://github.com/adamzap/landslide

Presenter Notes

Useful links

  • HTML5test test your browser's support for html5

Presenter Notes

Thank you!

Presenter Notes