• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 and-css3
 

Html5 and-css3

on

  • 1,808 views

 

Statistics

Views

Total Views
1,808
Views on SlideShare
1,600
Embed Views
208

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 208

http://alex.kotomanov.com 208

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html5 and-css3 Html5 and-css3 Presentation Transcript

    • HTML 5 CSS 3         Александр  Котоманов   Верстальщик   19.08.10   1  
    • План  тренинга   •  Что  нового  в  HTML  5   •  Вебшрифты   •  Audio  и  Video   •  Canvas  и  SVG   •  Drag&Drop   •  Формы   •  CSS  3   •  JS  APIs   •  Поддержка  браузерами   19.08.10   2  
    • HTML  5.  Немного  истории     1991  HTML     1994  HTML  2     1996  CSS  1  +  JavaScript     1997  HTML  4     1998  CSS  2     2000  XHTML  1     2005  AJAX     2009  HTML  5       19.08.10   3  
    • HTML  5.  Уже  сейчас     Правильный  Doctype!     <!DOCTYPE  html>   19.08.10   4  
    • HTML  5.  Уже  сейчас   Для  IE     <!-­‐-­‐[if  IE]>   <script>   document.createElement(’header’);   document.createElement(’footer’);   document.createElement(’sec€on’);   document.createElement(’aside’);   document.createElement(’nav’);   document.createElement(’ar€cle’);   </script>     <![endif]-­‐-­‐>     19.08.10   5  
    • HTML  5.  Уже  сейчас   Мой  выбор:   <!-­‐-­‐[if  lte  IE  8]>   <script  type="text/javascript"  src="hˆp://html5shiv.googlecode.com/svn/ trunk/html5.js"></script>   <![endif]-­‐-­‐>     19.08.10   6  
    • HTML  5.  Уже  сейчас   Для  FF  2  и  Camino  1:   <html  lang="en"  xmlns="hˆp://www.w3.org/1999/xhtml">   Content-­‐type  из  text/html  в  applica€on/xhtml +xml   RewriteCond  %{REQUEST_URI}  .html$   RewriteCond  %{HTTP_USER_AGENT}  rv:1.(([1-­‐8]|9pre|9a|9b[0-­‐4]). [0-­‐9.]+).*Gecko   RewriteRule  .*  -­‐  [T=applica€on/xhtml+xml]     или   if  (preg_match('/rv:1.(([1-­‐8]|9pre|9a|9b[0-­‐4]).[0-­‐9.]+).*Gecko/',  $_SERVER ['HTTP_USER_AGENT']))  {      header('Content-­‐type:  applica€on/xhtml+xml');   }   19.08.10   7  
    • HTML  5.  Уже  сейчас   •  UTF-­‐8    <meta  charset="UTF-­‐8">   19.08.10   8  
    • HTML  4  Layout   Семантика:   •  Элементы   •  Id  и  Class   •  Микроформаты   Семантика     (фр.  séman€que     от  греч.  σημαντικός  —    обозначающий)   19.08.10   9  
    • HTML  5  Layout   •  header   •  footer   •  sec€on   •  ar€cle   •  aside   •  nav   19.08.10   10  
    • HTML  5  Content   •  audio   •  canvas   •  details   •  dialog   •  embed   •  figure   •  source   •  video   19.08.10   11  
    • HTML  5  Inline  elements   •  mark   •  meter   •  €me  (date€me)   •  progress   19.08.10   12  
    • HTML  5  Forms   19.08.10   hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/form/index.htm   13  
    • HTML  5  Forms   •  Datalist   •  Command   <menu>     <command  onclick="alert('first  command')"  label="Do  1st  Command"/>    <command  onclick="alert('second  command')"  label="Do  2nd  Command"/>    <command  onclick="alert('third  command')"  label="Do  3rd  Command"/>     </menu>   •  Autofocus,  Required   •  Type=number,  email,  url,  date,  range   •  Output     19.08.10   14  
    • Вебшрифты   •  Всё  просто:   @font-face { font-family: ‘MyFont'; src: url('myfont.eot'); /* IE6+ */ src: local('MyFont'), url('myfont.woff') format('woff'), /* FF3.6 */ url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */ } 19.08.10   15  
    • Вебшрифты   •  sIFR   •  Typekit   •  Cufon   •  Typotheque     (Flash  /  JS  /  SVG  /  VML)   19.08.10   16  
    • HTML  5  Audio   <audio  controls  autobuffer>      <source  src="elvis.ogg"  />      <source  src="elvis.mp3"  />   </audio>   Кроссбраузерное  решение:   hˆp://www.happyworm.com/jquery/jplayer/   19.08.10   17  
    • HTML  5  Video   •  Было:   <object  classid="clsid:d27cdb6e-­‐ae6d-­‐11cf-­‐96b8-­‐444553540000"  width="425"  height="344"   codebase="hˆp://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0">   <param  name="allowFullScreen"  value="true"  />   <param  name="allowscriptaccess"  value="always"  />   <param  name="src"  value="hˆp://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"  />   <param  name="allowfullscreen"  value="true"  />   <embed  type="applica€on/x-­‐shockwave-­‐flash"  width="425"  height="344"  src="hˆp:// www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"  allowscriptaccess="always"   allowfullscreen="true">   </embed>   </object>   •  Стало:   <video  width="640"  height="360"  src="hˆp://www.youtube.com/demo/google_main.mp"   autobuffer  controls  poster="whale.png">   <a  href="hˆp://www.youtube.com/demo/google_main.mp4">download  the  video</a   </video>   19.08.10   18  
    • HTML  5  Video   19.08.10   19  
    • Canvas  &  SVG   hˆp://babarun.ru/content/canvas/     19.08.10   20  
    • Canvas  &  SVG   hˆp://9elements.com/io/projects/html5/canvas/     19.08.10   21  
    • Canvas  &  SVG   hˆp://svg-­‐edit.googlecode.com/svn/branches/2.4/editor/svg-­‐editor.html   19.08.10   22    
    • Canvas  &  SVG   hˆp://ie.microso².com/testdrive/Graphics/55TagCloud/Default.xhtml   19.08.10   23    
    • HTML  5.  Drag  &  Drop   hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/drag/index.htm   19.08.10   24  
    • CSS  3   .box_round  {            -­‐moz-­‐border-­‐radius:  15px;  /*  FF1+  */            -­‐webkit-­‐border-­‐radius:  15px;  /*  Saf3+,  Chrome  */            border-­‐radius:  15px;  /*  Opera  10.5,  IE  9  */            }   19.08.10   25  
    • CSS  3   .box_shadow  {            -­‐moz-­‐box-­‐shadow:  0px  0px  20px  #ffffff;  /*  FF3.5+  */            -­‐webkit-­‐box-­‐shadow:  0px  0px  20px  #ffffff;  /*  Saf3.0+,  Chrome  */            box-­‐shadow:  0px  0px  20px  #ffffff;  /*  Opera  10.5,  IE  9.0  */            }   19.08.10   26  
    • CSS  3   .box_gradient  {            background-­‐image:      -­‐moz-­‐linear-­‐gradient(top,  #444444,  #999999);  /*  FF3.6  */            background-­‐image:  -­‐webkit-­‐gradient(linear,le²  top,le²  boˆom,    color-­‐stop(0,  #444444),color-­‐stop(1,  #999999));  /*  Saf4+,  Chrome  */              }   19.08.10   27  
    • CSS  3   .box_rotate  {            -­‐moz-­‐transform:  rotate(7.5deg);  /*  FF3.5+  */            -­‐o-­‐transform:  rotate(7.5deg);  /*  Opera  10.5  */            -­‐webkit-­‐transform:  rotate(7.5deg);  /*  Saf3.1+,  Chrome  */            }   19.08.10   28  
    • CSS  анимация   19.08.10   hˆp://pepelsbey.net/pro/2009/12/special-­‐effects-­‐tea/5.htm   29    
    • JS  APIs   •  Web  Storage   •  Web  SQL  Database   •  Applica€on  Cache  API   •  No€fica€ons   •  Drag  and  Drop   •  Geoloca€on   19.08.10   30  
    • hˆp://html5test.com/   19.08.10   31  
    • hˆp://www.findmebyip.com/litmus/   19.08.10   32  
    • hˆp://html5readiness.com/   19.08.10   33  
    • (HTML) •  Черновик  спецификации   hˆp://dev.w3.org/html5/spec/Overview.html   •  hˆp://html5doctor.com/   •  hˆp://diveintohtml5.org/   •  hˆp://html5gallery.com/   •  hˆp://html5demos.com/   •  hˆp://www.quackit.com/html_5/tags/   •  hˆp://media.smashingmagazine.com/cdn_smash/wp-­‐ content/uploads/images/html5-­‐cheat-­‐sheet/html5-­‐ cheat-­‐sheet.pdf   19.08.10   34  
    • (CSS) •  hˆp://www.css3.info/   •  hˆp://css3please.com/   •  hˆp://css3generator.com/   19.08.10   35