HTML 5   CSS 3
                                                     	
  
                                                 ...
План	
  тренинга	
  
•      Что	
  нового	
  в	
  HTML	
  5	
  
•      Вебшрифты	
  
•      Audio	
  и	
  Video	
  
•     ...
HTML	
  5.	
  Немного	
  истории	
  
         	
  
         1991	
  HTML	
  	
  
         1994	
  HTML	
  2	
  	
  
      ...
HTML	
  5.	
  Уже	
  сейчас	
  
	
  
Правильный	
  Doctype!	
  
     	
  
     <!DOCTYPE	
  html>	
  




 19.08.10	
     ...
HTML	
  5.	
  Уже	
  сейчас	
  

Для	
  IE	
  	
  
<!-­‐-­‐[if	
  IE]>	
  
<script>	
  
document.createElement(’header’);	...
HTML	
  5.	
  Уже	
  сейчас	
  

Мой	
  выбор:	
  
   <!-­‐-­‐[if	
  lte	
  IE	
  8]>	
  
   <script	
  type="text/javascr...
HTML	
  5.	
  Уже	
  сейчас	
  
Для	
  FF	
  2	
  и	
  Camino	
  1:	
  
    <html	
  lang="en"	
  xmlns="hˆp://www.w3.org/...
HTML	
  5.	
  Уже	
  сейчас	
  


•  UTF-­‐8	
  
  	
  <meta	
  charset="UTF-­‐8">	
  




 19.08.10	
                    ...
HTML	
  4	
  Layout	
  
Семантика:	
  
•  Элементы	
  
•  Id	
  и	
  Class	
  
•  Микроформаты	
  


   Семантика	
  	
  
...
HTML	
  5	
  Layout	
  


•      header	
  
•      footer	
  
•      sec€on	
  
•      ar€cle	
  
•      aside	
  
•      ...
HTML	
  5	
  Content	
  
•      audio	
  
•      canvas	
  
•      details      	
  


•      dialog	
  
•      embed	
  
...
HTML	
  5	
  Inline	
  elements	
  
•      mark	
  
•      meter	
  
•      €me	
  (date€me)	
  
•      progress	
  




 ...
HTML	
  5	
  Forms	
  




19.08.10	
  
               hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/form/index.htm	
     1...
HTML	
  5	
  Forms	
  
•  Datalist           	
  



•  Command	
  
<menu>	
  	
  
    <command	
  onclick="alert('first	
 ...
Вебшрифты	
  
•  Всё	
  просто:	
  

@font-face {
  font-family: ‘MyFont';
  src: url('myfont.eot'); /* IE6+ */
  src: loc...
Вебшрифты	
  
•  sIFR	
  
•  Typekit	
  
•  Cufon	
  
•  Typotheque	
  
	
  
(Flash	
  /	
  JS	
  /	
  SVG	
  /	
  VML)	
 ...
HTML	
  5	
  Audio	
  

                              <audio	
  controls	
  autobuffer>	
  
                              	...
HTML	
  5	
  Video	
  
•  Было:	
  
    <object	
  classid="clsid:d27cdb6e-­‐ae6d-­‐11cf-­‐96b8-­‐444553540000"	
  width="...
HTML	
  5	
  Video	
  




19.08.10	
                              19	
  
Canvas	
  &	
  SVG	
  




                hˆp://babarun.ru/content/canvas/	
  
                	
  
19.08.10	
           ...
Canvas	
  &	
  SVG	
  




               hˆp://9elements.com/io/projects/html5/canvas/	
  
               	
  
19.08.10	
...
Canvas	
  &	
  SVG	
  




               hˆp://svg-­‐edit.googlecode.com/svn/branches/2.4/editor/svg-­‐editor.html	
  
19...
Canvas	
  &	
  SVG	
  




               hˆp://ie.microso².com/testdrive/Graphics/55TagCloud/Default.xhtml	
  
19.08.10	
...
HTML	
  5.	
  Drag	
  &	
  Drop	
  




               hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/drag/index.htm	
  
19....
CSS	
  3	
  




.box_round	
  {	
  	
  
	
  	
  	
  	
  -­‐moz-­‐border-­‐radius:	
  15px;	
  /*	
  FF1+	
  */	
  	
  
	
...
CSS	
  3	
  




.box_shadow	
  {	
  	
  
	
  	
  	
  	
  -­‐moz-­‐box-­‐shadow:	
  0px	
  0px	
  20px	
  #ffffff;	
  /*	
  F...
CSS	
  3	
  




.box_gradient	
  {	
  	
  
	
  	
  	
  	
  background-­‐image:	
  	
  
                      	
  -­‐moz-­...
CSS	
  3	
  




.box_rotate	
  {	
  	
  
	
  	
  	
  	
  -­‐moz-­‐transform:	
  rotate(7.5deg);	
  /*	
  FF3.5+	
  */	
  ...
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...
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...
(CSS)
•  hˆp://www.css3.info/	
  
•  hˆp://css3please.com/	
  
•  hˆp://css3generator.com/	
  




 19.08.10	
            ...
Upcoming SlideShare
Loading in …5
×

Html5 and-css3

1,735 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,735
On SlideShare
0
From Embeds
0
Number of Embeds
238
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 and-css3

  1. 1. HTML 5 CSS 3         Александр  Котоманов   Верстальщик   19.08.10   1  
  2. 2. План  тренинга   •  Что  нового  в  HTML  5   •  Вебшрифты   •  Audio  и  Video   •  Canvas  и  SVG   •  Drag&Drop   •  Формы   •  CSS  3   •  JS  APIs   •  Поддержка  браузерами   19.08.10   2  
  3. 3. 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  
  4. 4. HTML  5.  Уже  сейчас     Правильный  Doctype!     <!DOCTYPE  html>   19.08.10   4  
  5. 5. 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  
  6. 6. 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  
  7. 7. 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  
  8. 8. HTML  5.  Уже  сейчас   •  UTF-­‐8    <meta  charset="UTF-­‐8">   19.08.10   8  
  9. 9. HTML  4  Layout   Семантика:   •  Элементы   •  Id  и  Class   •  Микроформаты   Семантика     (фр.  séman€que     от  греч.  σημαντικός  —    обозначающий)   19.08.10   9  
  10. 10. HTML  5  Layout   •  header   •  footer   •  sec€on   •  ar€cle   •  aside   •  nav   19.08.10   10  
  11. 11. HTML  5  Content   •  audio   •  canvas   •  details   •  dialog   •  embed   •  figure   •  source   •  video   19.08.10   11  
  12. 12. HTML  5  Inline  elements   •  mark   •  meter   •  €me  (date€me)   •  progress   19.08.10   12  
  13. 13. HTML  5  Forms   19.08.10   hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/form/index.htm   13  
  14. 14. 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  
  15. 15. Вебшрифты   •  Всё  просто:   @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  
  16. 16. Вебшрифты   •  sIFR   •  Typekit   •  Cufon   •  Typotheque     (Flash  /  JS  /  SVG  /  VML)   19.08.10   16  
  17. 17. 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  
  18. 18. 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  
  19. 19. HTML  5  Video   19.08.10   19  
  20. 20. Canvas  &  SVG   hˆp://babarun.ru/content/canvas/     19.08.10   20  
  21. 21. Canvas  &  SVG   hˆp://9elements.com/io/projects/html5/canvas/     19.08.10   21  
  22. 22. Canvas  &  SVG   hˆp://svg-­‐edit.googlecode.com/svn/branches/2.4/editor/svg-­‐editor.html   19.08.10   22    
  23. 23. Canvas  &  SVG   hˆp://ie.microso².com/testdrive/Graphics/55TagCloud/Default.xhtml   19.08.10   23    
  24. 24. HTML  5.  Drag  &  Drop   hˆp://pepelsbey.net/pres/html5-­‐in-­‐fact/e/drag/index.htm   19.08.10   24  
  25. 25. 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  
  26. 26. 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  
  27. 27. 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  
  28. 28. 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  
  29. 29. CSS  анимация   19.08.10   hˆp://pepelsbey.net/pro/2009/12/special-­‐effects-­‐tea/5.htm   29    
  30. 30. JS  APIs   •  Web  Storage   •  Web  SQL  Database   •  Applica€on  Cache  API   •  No€fica€ons   •  Drag  and  Drop   •  Geoloca€on   19.08.10   30  
  31. 31. hˆp://html5test.com/   19.08.10   31  
  32. 32. hˆp://www.findmebyip.com/litmus/   19.08.10   32  
  33. 33. hˆp://html5readiness.com/   19.08.10   33  
  34. 34. (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  
  35. 35. (CSS) •  hˆp://www.css3.info/   •  hˆp://css3please.com/   •  hˆp://css3generator.com/   19.08.10   35  

×