HTML5 en Proyectos Reales

70
!"#$%&'#( "%*+%( &#, !"#$%

Transcript of HTML5 en Proyectos Reales

Page 1: HTML5 en Proyectos Reales

!"#$%&'#()"%*+%()&#,)!"#$%

Page 2: HTML5 en Proyectos Reales

!"#$"%&'%()*+'*,&)

!"#$%&'()&*(+%,'-)./01)23)4/5.6/3)72)31)829

:;<=)2>)+%,'-?!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""!!!!!*<2@/>)232025./>)A)1.6B9<./>)+%,'-!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""!!!!!!

#$!%$%&%'()!*+,'-,./!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""!!!!!#$!%$%&%'()!*-01%)/!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""2%)$)+,$03,+04'"!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""56$0+,+0)'%.!78%9,!1%!$:'%,!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

'1).245/3/CD1)+%,'-!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""";%&<'(0+,!=;%&,'(0+.>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""56$0+,+0)'%.!78%9,!1%!$:'%,!?!,$&,+%',&0%'()!$)+,$!=@77$0'%!A!;()9,B%>!!"""""""5++%.)!,!10.6).0(0-).!=C%-0+%!,++%..>!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""D)'%+(0-01,1!=D)'%+(0-0(?>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""E8$(0&%10,!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""FCG!B9<70+).!?!%7%+().!-0.8,$%.!=FCG!29,6H0+.!A!%77%+(.>!!"""""""""""""""""""""""""""""""I%'10&0%'()!%!0'(%B9,+04'!=J%97)9&,'+%!A!K'(%B9,(0)'>!!""""""""""""""""""""""""""""""""L)M,.!1%!%.(0$)!%'!+<.+,1,!=D,.+,10'B!;(?$%!;H%%(.!N!D;;F>!!"""""""""""""""""""""

:%<)51@2C17/6)E1@/6B./)>/F/6.1)+%,'-?!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""E0+9).)7(!K'(%9'%(!#O6$)9%9!=P901%'(!Q!P,.&,'>!!"""""""""""""""""""""""""""""""""""""""""""""""E)30$$,!R09%7)O!=2%+S)>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""2))B$%!DH9)&%!=T%US0(>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""566$%!;,7,90!=T%US0(>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""@6%9,!=J9%.()>!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""P,U$,!+)&6,9,(0-,!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

!"#$%&'()G(HG2.24.157/)41614.26D>.B41>)+%,'-

K'(9)18++04'!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""D,'-,.!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""D,'-,.!(%O(!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""V01%)!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

R)9&,().!1%!-01%)!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""W)+,$!;()9,B%!!""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""T%U!X)9S%9.!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""@77$0'%!T%U!,66$0+,(0)'.!!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

YZZZZZFFFF[[[[[\\\\]]]

^Y_YYYZYZY\Y]Y`

Page 3: HTML5 en Proyectos Reales

!"#$#%&$'(&%')*++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+01."2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

-*./0+2"&3%4++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+*/56"3++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+3&*7"++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+%#$#3++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+0"$++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+89:++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+"5&'$++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+;&0"++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+5#*04++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+<""=++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+0'5"++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+;&0"0'5"++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-*./0+;&0"0'5"+$#%&$++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

>$&%"4#$;"3+0"?0++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,@#35+&/0#A#%/2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,B'%3#;&0&++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

!"#$%&'()%*+,-")./0.1)023)44156)72.2)13728

CDEFG>H+IF'.#+;"+;#%/5"*0#J++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,H$+"$"5"*0#+3&K(+I3##0J++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,H$+"$"5"*0#+4"&;+I"*%&6"(&;#J++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

E#;'A'%&%')*+;"+%&3&%0"3"2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,LK*%/$#2+1+3"$&%'#*"2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

M/"N#2+"$"5"*0#2+2"5O*0'%#2+"*+PFB:Q++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,RE)5#+5&*'./$&*+$#2+*&N"7&;#3"2+&+$#2+"$"5"*0#2+;"2%#*#%';#2S++,,,,,,,,,,,,,,,,,,T30K%/$#2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,H$"5"*0#2+;"+A"%4&+1+4#3&++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,M&N"7&%')*++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,>'U+;"+.O7'*&++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

VWVXYZYZYZYVYVYVYYYYYYY[Y[Y[Y\YQY]Y^

YX[V[Y[Y[[[^[X\Q\]\^\W

Page 4: HTML5 en Proyectos Reales

!"#$%&'()!&"%*(+4)14191072)!60563

H$+"$"5"*0#+E&*N&2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,C'6/_&*;#+A'7/3&2+2'5.$"2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,`'20"5&+;"+%##3;"*&;&2+;"$+"$"5"*0#+a%&*N&2b++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,F3&(&;#2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,F"?0#++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,C"73&;&;#2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,-5O7"*"2++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,Rc/U+.&2&+%#*+-*0"3*"0+H?.$#3"3S++,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

QZQZQ[Q\Q^QX]Y]Q

Page 5: HTML5 en Proyectos Reales

!"#$%&'()&*(

+,-./),(0")1')!(*%2(')31)'")415

Page 6: HTML5 en Proyectos Reales

!"#$%"&'(%)*%+&,-.&*%/)%*(%012%%%%%!%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

34)/.(%(,56*(.%/)%*(%7*(-(8&.'(%/)%+9/45&%(:4).-&%7.);),-(/(%7&.%)*%!"#$%!&'()$!*)+$!+,$#&-.&'/*012<%6,%'(.+&%/)%/);(..&**&%+.)(/&%+&,%)*%&:=)-4>&%/)%(7&?(.%*(%4,,&>(+49,%?%8&'),-(.%)*%+&'7*)-&%7&-),+4(*%@6)%*(%0):%&8.)+)%A&?%),%/B(C

1*%*),56(=)%34567%7.&7&.+4&,(%6,%')/4&%7(.(%*(%);-.6+-6.(+49,%/)%/&+6'),-&;%')/4(,-)%)*%6;&%/)%)*)'),-&;%;)'D,-4+&;%E-B-6*&;F%7D..(8&;F%*4;-(;F%),*(+);F%+4-(;%?%&-.&;%)*)'),-&;GC

34567%;)%);-D%/);(..&**(,/&%+&'&%*(%7.9H4'(%5.(,%.)>4;49,%/)%3456C%1;%7&;4:*)%6-4*4I(.%A&?%),%/B(%*(;%,6)>(;%86,+4&,(*4/(/);%@6)%&8.)+)%34567%7(.(%:),)84+4(.%/)%'(,).(%;45,484+(-4>(%(%*&;%/);(..&**(/&.);%?%*(%)H7).4),+4(%/)%6;6(.4&C

$(%7.)56,-(%(A&.(%);J%KL6M%:),)84+4&;%')%&8.)+)%34567%+&'&%6;6(.4&%84,(*N%

O+-4>4/(/);%+&'&%;6:4.%6,%>4/)&%/)%8&040,+%(%+6(*@64).%:*&5%&%*(%:P;@6)/(%/)%(.-B+6*&;%),%-4),/(;%>4.-6(*);%/);/)%6,%;'(.-7A&,)%;).D,%'6+A&%'D;%;),+4**(;<%*&5.(,/&%(;B%6,(%)H+)*),-)%)H7).4),+4(%'9>4*F%-.(,;7(.),-)%?%6,4>).;(*C

34567%4,+&.7&.(%6,(%;).4)%/)%,6)>&;%)*)'),-&;%?%(-.4:6-&;C%O%+&,-4,6(+49,%;)%/)-(**(.D,%*&;%'D;%4'7&.-(,-);J

67&8)19)+,-./:

Page 7: HTML5 en Proyectos Reales

9($+(+1+-/&$:;<-=<.>

1;%6-4*4I(/&%7(.(%*(%.)7.);),-(+49,%/)%)*)'),-&;%5.D84+&;F%>4/)&=6)5&;%6%&-.&;%)*)'),-&;%>4;6(*);%),%-4)'7&%/)%)=)+6+49,C

9($+(+1+-/&$:=*)+&>

O,-).4&.'),-)%*(%4,;).+49,%/)%>4/)&%),%6,(%7D54,(%0):%;)%*&5.(:(%P,4+('),-)%(%-.(>M;%/)*%6;&%/)%7*654,;%/)%-).+).&;%+&'&%?0*;@4*1+$)+$ABB(+%&%A)&,+$C(<.DC

OA&.(%);%'6+A&%'D;%8D+4*%4,-)5.(.%+&,-),4/&%'6*-4')/4(%')/4(,-)%)*%6;&%/)*%)*)'),-&%Q=*)+&RC%1*%7.4,+47(*%&:=)-4>&%/)%;6;%+.)(/&.);%);%5),).(.%6,%,6)>&%);-D,/(.%7(.(%*(%>4;6(*4I(+49,%/)%>4/)&%),%*B,)(C

E+&(&;<(*F<;*G-

1*%-M.'4,&%SH+&(&;<(*F<;*G-T%,&%);%(*5&%,6)>&%),%*(%0):C%U)%A)+A&F%4,84,4/(/%/)%;4-4&;%7.&>)),%/4+A(%86,+4&,(*4/(/%')/4(,-)%*(%/)-)++49,%/)%/4.)++4&,);%V3%E*&%@6)%A(%7.&74+4(/&%/):(-);%(+).+(%/)%*(%;)56.4/(/GC%$(%7.&76);-(%+&,-),4/(%),%34567%);%6,%'M-&/&%(*-).,(-4>&%7(.(%+&'7(.-4.%*(%6:4+(+49,%/)*%6;6(.4&%),-.)%;6;%+&,-(+-&;%?%(7*4+(+4&,);%/)%+&,84(,I(%(%-.(>M;%/)%);-(+4&,);%.)7)-4/&.(;%E!*IC*%?%EJKGC

AB(*;<;*&-+.$L0+'<$)+$(M-+<

3).'4-),%*(%+&,-4,6(%4,-).(++49,%/)*%6;6(.4&%+&,%(7*4+(+4&,);%?%/&+6'),-&;%(P,%+6(,/&%*(%+&,)H49,%/4;7&,4:*)%;)%.(*),-4+)%&%;)(%,6*(C%3&/)'&;%'),+4&,(.%)*%(++);&%(%+&..)&%)*)+-.9,4+&%/)%'(,).(%*&+(*%+&'&%)=)'7*&C

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% W(7B-6*&%6,&%%%%%"%%%%%%%%%%%%%%%%%

;&1<(9)1'101*%(9)=)"%2>5&%(9)+,-./?

Page 8: HTML5 en Proyectos Reales

!"#$%"&'(%)*%+&,-.&*%/)%*(%012%%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

O%+&,-4,6(+49,%;)%/);+.4:)%+(/(%6,(%/)%*(;%,6)>(;%86,+4&,(*4/(/);%@6)%+&,8&.'(,%(%*(%-)+,&*&5B(%/),&'4,(/(%34567C

K+1N-/*;<$%K+1<-/*;.2O

1*%&:=)-4>&%+),-.(*%/)%*(%;)'D,-4+(%);%/(.%;),-4/&%(%*(%);-.6+-6.(C%X,%+&,=6,-&%'D;%('7*4&%/)%)-4@6)-(;%/4;7&,4:*);F%=6,-&%+&,%PQC<%EY);&6.+)%U);+.47-4&,%Z.(')[&.\%]4,]%(--.4:6-);GF%1*;'&)</&.%?%1*;'&L&'1</&.%7).'4-),%6,(%')=&.%6;(:4*4/(/F%;4-4&;%&.4),-(/&;%(*%'(,)=&%/)%/(-&;%),%0):<%(/)'D;%/)%6,(%')=&.%)H7).4),+4(%7(.(%6;6(.4&;C

AB(*;<;*&-+.$L0+'<$)+$(M-+<$R$<(1<;+-<1*+-/&$(&;<($

%SLL(*-+$T$K/&'<H+2O%

$(;%7&-),-);%+(.(+-).B;-4+(;%/)%34567%EO77%W(+A)F%$&+(*%^-&.(5)F%V,/)H)/%U2%_%-A)%Z4*)%O3V%;7)+484+(-4&,;G%7).'4-),%(%*(;%(7*4+(+4&,);%0):%)=)+6-(.;)%'D;%.D74/('),-)F%4,+*6;&%;4,%+&,)H49,%(%V,-).,)-C

A;;+.&$<$)*.B&.*/*=&.$%Q+=*;+$<;;+..2O

3&-),-);%4,,&>(+4&,);%),%)*%(++);&%(%/4;7&;4-4>&;%A(,%+&'),I(/&%(%4'7*)'),-(.;)%7(.(%7.&>)).%)H7).4),+4(;%+&'7*)-(;%(*%6;6(.4&C%U);/)%*(%`)&*&+(*4I(+49,F%)*%(++);&%(%/4;7&;4-4>&;%/)%),-.(/(%+&'&%*(%+D'(.(%?%)*%'4+.98&,&%A(;-(%*(%4,-).(++49,%+&,%/(-&;F%+&,-(+-&;%?%(5),/(C

.")%1!*('(@$")+,-./

Page 9: HTML5 en Proyectos Reales

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% W(7B-6*&%6,&%%%%%$

#&-+;/*=*)<)$%#&-+;/*=*/R2O$

X,(%+&,)+-4>4/(/%)8)+-4>(%4'7*4+(%'D;%@6)%+A(.*(;%),%-4)'7&%.)(*F%=6)5&;%+&,%6,%')=&.%7).8&.'(,+)%?%')=&.%+&'6,4+(+49,C%W(.(+-).B;-4+(;%+&'&%K+'=+'IK+-/$9=+-/.%?%!+,$K&;@+/.%);-D,%+&,-.4:6?),/&%(%*&5.(.%6,(%4,-).(++49,%97-4'(%),-.)%/(-&;%?%6;6](.4&;%+&'&%,6,+(%(,-);%;)%A(:B(%>4;-&C

50(/*1+)*<O

O%7(.-4.%/)%(A&.(%(6/4&%?%>4/)&%4,-).(+-P(,%),%-&-(*%(.'&,B(%+&,%*(;%(7*4+(+4&,);%?%;4-4&;%/);(..&**(/&;%),%34567C

"QU$H'NL*;&.$R$+L+;/&.$=*.0<(+.$%"QU$E'<BD*;.$T$+LL+;/.2O

OA&.(%);%7&;4:*)%;&.7.),/).%(*%6;6(.4&%+&,%4'7.);4&,(,-);%)8)+-&;%>4;6(*);%(%-.(>M;%/)*%6;&%,(-4>&%/)%+(.(+-).B;-4+(;%+&'&%KVE%E^+(*(:*)%a)+-&.%`.(7A4+;GF%#<-=<.F%!+,E6%E0):]:(;)/%`.(7A4+;%$(,56(5)G%?%#KK"%EW(;+(/4,5%^-?*)%^A))-;GC

P+-)*1*+-/&$+$*-/+H'<;*G-$%J+'L&'1<-;+$T$W-/+H'</*&-2O

U);(..&**(.%(7*4+(+4&,);%0):%?%+&,-),4/&%/4,D'4+&%')/4(,-)%)*%6;&%/)%-)+,&*&5B(;%?%-M+,4+(;%+&'&%!+,$!&'@+'.%_%X3P%Eb#$!--7Y)@6);-G%(A&.(%);%'6+A&%'D;%8D+4*%?%.D74/&C%1*%&:=)-4>&%7.4'&./4(*%);%@6)%)*%6;6(.4&%,&%>6)*>(%(%)H7).4'),-(.%);7).(%(*56,(C

3&Y<.$)+$+./*(&$+-$;N.;<)<$%#<.;<)*-H$K/R(+$KD++/.$Z$#KK"2O

W^^c%&8.)+)%6,(%('7*4(%5('(%/)%);-4*&;%?%)8)+-&;%(7*4+(:*);%(*%/4;)d&%/)%(7*4+(+4&,);%0):%E8.&,-]),/GF%;4,%'&/484+(.%*(%);-.6+-6.(%;)'D,-4+(%&%)*%.),/4'4),-&C%O/)'D;F%)*%6;&%/)%0eZZ%E0):%e7),%Z&,-%Z&.'(-G%7.&7&.+4&,(%8*)H4:4*4/(/%?%6,%+&,-.&*%-47&5.D84+&%'D;%(**D%/)%*&%@6)%;)%A(%>4;-&%(,-).4&.'),-)C

Page 10: HTML5 en Proyectos Reales

O%+&,-4,6(+49,%;)%'6);-.(%6,%.);6'),%/)%*&;%,(>)5(/&.);%'D;%6-4*4I(/&;%?%*(;%7.4,+47(*);%+(.(+-).B;-4+(;%@6)%&8.)+),J

5*;'&.&L/$W-/+'-+/$9[B(&'+'$%4'*)+-/$I$4<.1<-2O

YD74/&%),%5),).(*CU4;)d&%&7-4'4I(/&%?%;4'7*484+(/&CO++);&%(%;4-4&;%8(>&.4-&;%+&,%6,%;&*&%+*4+C2(..(%+&':4,(/(%/)%:P;@6)/(%?%/4.)++4&,);C3D54,(%S,6)>(%7);-(d(T%+&,%6,%/4;)d&%,6)>&CV,-)5.(+49,%+&,%04,/&[;%fCO/'4,4;-.(+49,%/)%+&'7*)'),-&;%')=&.(/(CW&,-.&*%/)%7.4>(+4/(/C#(,-4),)%*(;%/);+(.5(;%&./),(/(;C

5&F*((<$C*'+L&[$%E+;@&2O

a4;6(*4I(%*(;%7D54,(;%0):%'6+A&%'D;%.D74/&C^4,+.&,4I(%*(%,(>)5(+49,%),-.)%>(.4&;%/4;7&;4-4>&;C#4*);%/)%+&'7*)'),-&;%/4;7&,4:*);%7(.(%/);+(.5(C2P;@6)/(%')=&.(/(%/)%;4-4&;CV,-).8(I%4,-64-4>(Cg(>)5(+49,%'6+A&%'D;%8D+4*CO*-&%.),/4'4),-&%?%;)56.4/(/%(>(,I(/(CO++);&%6,4>).;(*C3&/).&;(%7).;&,(*4I(+49,C

E&&H(+$#D'&1+$%!+,@*/2O

U4;)d(/&%7(.(%;).%.D74/&%/)%-&/(;%*(;%8&.'(;%7&;4:*);C$(%>),-(,(%/)*%,(>)5(/&.%);%86,+4&,(*F%+*(.(%?%;),+4**(Ce8.)+)%'(?&.%;)56.4/(/%),%*(%.)/CZ6,+4&,);%P,4+(;%4,-)5.(/(;%E)H-),;4&,);F%-.(/6+-&.F%-)'(;F%)-+CGC

6,&)*"<1@"3(2)A"<(2>%()9(#(2%")+,-./:

!"#$%"&'(%)*%+&,-.&*%/)%*(%012%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Page 11: HTML5 en Proyectos Reales

%%%%%%%%%%%%%%%%%

ABB(+$K<L<'*$%!+,@*/2O

$)+-&.%4,-)5.(/&C#(?&.%+&'7(-4:4*4/(/%+&,%!"#$hC#)=&.%.),/4'4),-&C2P;@6)/(;%+&,%24,5C2(..(%/)%/4.)++4&,);%4,-)*45),-)CO=6;-)%/)%7);-(d(;CO+)*).(+49,%/)%A(./[(.)%7(.(%04,/&[;CV,;7)+-&.%0):%')=&.(/&C

SB+'<$%J'+./&2O

W(.(+-).B;-4+(;%/)%7).;&,(*4I(+49,%')=&.(/(;CX,(%')=&.%)H7).4),+4(%),%)*%6;&%/)%7);-(d(;Ce7+4&,);%@6)%(6'),-(,%*(%7.&/6+-4>4/(/C#)=&.(%),%)*%7.&+);&%/)%:P;@6)/(CX;&%/)%*(;%-)+,&*&5B(;%'D;%(+-6(*);C!)..('4),-(;%7(.(%/);(..&**(/&.);CO++);&%4,-64-4>&%(%;&7&.-)C

4<,(<$;&1B<'</*=<O

1,%*(%;4564),-)%-(:*(%;)%'6);-.(%6,(%+&'7(.(-4>(%/)%+(.(+-).B;-4+(;%!"#$hF%W^^c%?%^a`%;&7&.-(/(;%),%+(/(%6,&%/)%*&;%,(>)5(/&.);%'),+4&,(/&;%(,-).4&.'),-)C%Z6),-)%!!!"#$%&'()"#*+%]%O5&;-&%/)*%ijkkC

W(7B-6*&%6,&%%%%%&%%%%%%%%%%%%%%%%%

Page 12: HTML5 en Proyectos Reales

%%%%%%%%%%%%%%%%%

$(%+&'7(.(+49,%?%+D*+6*&%/)%*(%-(:*(%(,-).4&.%-4),)%+&'&%76,-&%/)%7(.-4/(%)*%;&7&.-)%(%*(;%;4564),-);%86,+4&,(*4/(/);J

O,4'(-)/%3g`%EO3g`GCU.(5%(,/%U.&7C!"#$h%8&.'%8)(-6.);CW^^c%cU%".(,;8&.';CW^^c%O,4'(-4&,CW^^%`.(/4),-;CW^^%W(,>(;%U.([4,5;CW^^%Y)8*)+-4&,;CW^^%#(;\;CV,/)H)/U2C#(-A#$CZ*)H4:*)%2&H%$(?&6-%#&/6*)CZ4*)%O3VC0):%^&+\)-;CW.&;;]e.454,%Y);&6.+)%^A(.4,5CY6:?%(,,&-(-4&,C#31`]lm!Cinl%>4/)&%8&.'(-CW^^c%&:=)+-]84-m&:=)+-]7&;4-4&,Cb#$!--7Y)@6);-%iCU)-(4*;%_%^6''(.?%)*)'),-;CW^^%-)H-];-.&\)C0):%g&-484+(-4&,;CU(-(*4;-%)*)'),-C.)'%E.&&-%)'G%6,4-;C7&4,-).])>),-;%E8&.%!"#$GCZ4*);?;-)'%_%Z4*)0.4-).%O3VC2*&:%XY$;C"?7)/%O..(?;C

!"#$%"&'(%)*%+&,-.&*%/)%*(%012%%%%%'%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

Page 13: HTML5 en Proyectos Reales

!"#$%&'()*(+

,-%-!%".*()!"/"!%-/$+%0!"+)12345

Page 14: HTML5 en Proyectos Reales

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))!)))))))))))))))))))))))))))))))))

34%&'()4&)&%5"6%'(*)74",#*%)4&%)896-&%):";),")6"&"*%)%4#(79#-$%7"&#")4&)!"#$%&'()*+,&#()-".&/)<0('"=()>;?"#()'")!($47"&#(@)"=)$4%=)",)4&%)$(="$$-A&)'")(;?"#(,)B4")*"8*","&#%&)$%'%)"="7"&#()01-2)"&)4&),-#-(C)/('(,)=(,)(;?"#(,)'"=)!*-)$(78%*#"&)$-"*#%,)$%*%$#"*+,#-$%,D)%4&B4")%=64&(,)8(,""&)79,)B4")(#*(,C)

EF-,#"&)$4%#*()#G$&-$%,);9,-$%,)8%*%)=%)'"#"$$-A&)H),(8(*#")'")$%*%$#"*+,#-$%,)01-23)"&)4&)&%5"6%'(*C)/*%;%?%*"7(,)'")=%)79,),-78=")%)=%)79,)$(78="?%C

I"*-J-$%7(,),-)'"#"*7-&%'%)8*(8-"'%')"F-,#")"&)4&)(;?"#()6=(;%=)<$(7()8(*)"?"78=()K45'."4L)()K'67586("9L@C

3*"%7(,)4&)"="7"&#()H)8*($"'"7(,)%)5"*-J-$%*),-)'"#"*7-&%'%)8*(8-"'%')"F-,#")"&)'-$M()"="7"&#(C

3*"%7(,)4&)"="7"&#()8%*%)"&,"64-'%)5"*-J-$%*),-)'"#"*7-&%'()7G#('()"F-,#")"&)G=N)8*($"'"7(,)'",84G,)%)-&5($%*)%=)7G#('()H)5"*-J-$%*)"=)5%=(*)'")*"#(*&(C

3*"%7(,)4&)"="7"&#()H)"&,"64-'%)",#%;="$"7(,)4&)5%=(*)%)4&%)8*(8-"'%')",8"$-J-$%N)8*($"'"7(,)"&#(&$",)%)5"*-J-$%*),-)=%)8*(8-"'%')"&)$4",#-A&)*"#-"&")"=)5%=(*)",#%;="$-'(C)

,-%-!%".*()!"/"!%-/$+%0!"+)12345

:;

<;

=;

>;

Page 15: HTML5 en Proyectos Reales

01-23)'"J-&")%=)"="7"&#()#6'76?)$(7()4&)7%8%)'");-#,)'")*",(=4$-A&)'"8"&'-"&#")4#-=-O%'()8%*%)"=)74",#*"()'")-796"&",D)#*%'4$$-A&)'")6*9J-$(,)"&)5-'"(?4"6(,)H)(#*(,)"="7"&#(,)5-,4%=",)"&)#-"78()'")"?"$4$-A&C

E&)#G*7-&(,)6"&"*%=",)"=)"="7"&#()#6'76?)",)4&)*"$#9&64=()-&,"*#%'()"&)4&%)896-&%):";)'A&'")%)#*%5G,)'")@676A#95B()",)8(,-;=")'-;4?%*)$4%=B4-"*)$(,%C)

01-23)8(,"")4&)$(&?4&#()'")J4&$-(&",)<C6'76?)DEF@)8%*%)=%)6"&"*%$-A&)'")J(*7%,D)'"J-&-$-A&)'")#*%H"$#(*-%,D)$*"%$-A&)'")$(=(*",)'"6*%'%'(,)H)%8=-$%$-A&)'")#*%&,J(*P7%$-(&",C

E,)8(,-;=")'"#"*7-&%*)"=),(8(*#")%)#6'76?)%)#*%5G,)'")=%),-64-"&#")J4&$-A&Q

function soporteCanvas() { return !!document.createElement('canvas').getContext;

}

3(&)"=)4,()'")0('"*&-O*)8*($"'"*"7(,)'")=%),-64-"&#")J(*7%Q

function soporteCanvas() { if(Modernizr.canvas) { return true; } else { return false; }

}

))))))))))))))))))))))))))))))))) 3%8+#4=()'(,)))))"#)))))))))))))))))

6".7"+

Page 16: HTML5 en Proyectos Reales

)))))))))))))))))

E=),(8(*#")'")4&)&%5"6%'(*)%)=%)RST)'")#6'76?)&()-78=-$%)"=),(8(*#")%)#6'76?)(&G(C)

3%;")7"&$-(&%*)B4")=%,)J4&$-(&",)'")'-;4?()J4"*(&)%U%'-'%,)%&#",)'")$(78="#%*)"&#"*%7"&#")=%)",8"$-J-$%$-A&)8%*%)#6'76?D)#(7%&'()"&)$4"&#%)"=),(8(*#")%)#"F#(D)"=)$4%=),")%U%'-A)%=)J-&%=C

S%*%)'"#"*7-&%*)"=),(8(*#")%)#6'76?)(&G()4#-=-O%*"7(,Q

function soporteCanvasText() { if(!soporteCanvas()) { return false; } var pruebaCanvas = document.createElement('canvas'); var contexto = pruebaCanvas.getContext('2d'); return typeof contexto.fillText == 'function';

}

3(&)"=)4,()'")-".&9'5H9)8('"7(,)5"*-J-$%*)"=),(8(*#")%)#6'76?)(&G(Q

function soporteCanvasText() { if(Modernizr.canvastext) { return true; } else { return false; }

}

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))"")))))))))))))))))

6".7"+)%-8%

Page 17: HTML5 en Proyectos Reales

)))))))))))))))))

01-23)-&$(*8(*%)4&)&4"5()"="7"&#()'"&(7-&%'()75.&"D)"=)$4%=)",)4#-=-O%'()8%*%)=%)-&$=4,-A&)'")$(&#"&-'()74=#-7"'-%)"&)4&%)896-&%):";C

R&#"*-(*7"&#")=%)-&$(*8(*%$-A&)'")5-'"(),")=(6*%;%)%)#*%5G,)'"=)4,()'")B/$85'?)'")#"*$"*(,)$(7()I$5#J15%&)'")DBB/&)()D."+&)K/6?LC

E=)"="7"&#()75.&")",#9)'-,"U%'()8%*%),"*)4#-=-O%'(),-&)&-&6V&),$*-8#)'")'"#"$$-A&C)

E,)8(,-;=")",8"$-J-$%*)'-J"*"&#",)#-8(,)'")%*$M-5(,)'")5-'"()H)$%'%)&%5"6%'(*)$(&),(8(*#")%)01-23)"="6-*9)"=)J(*7%#()%)4#-=-O%*C

1(,)&%5"6%'(*",)B4")&(),(8(*#%&)01-23)-6&(*%*9&)8(*)$(78="#()"=)4,()'")=%)"#-B4"#%)5-'"(D)8(*)=()B4")"=)4,()'")8=46-&,)"F#"*&(,),"*9)8*-7(*'-%=C)

S%*%)'"#"*7-&%*)"=),(8(*#")%)75.&")4#-=-O%*"7(,Q

function soporteVideo() { return !!document.createElement('video').canPlayType;

}

K"9%6("?).&)75.&"C

S%*%)B4")4&)&%5"6%'(*)*"8*('4O$%)5-'"()",)&"$",%*-()B4")"&#-"&'%)"=)="&64%?")"&)"=)B4")J4")$('-J-$%'(C)E=)K/&'8$6,&L)'")4&)5-'"(),")'"&(7-&%)K#".&#L)<%=6(*-#7()4#-=-O%'()8%*%)=%)$('-J-$%$-A&)"&),"$4"&$-%,)'");-#,@C)W-)#(7%7(,)"&)$4"&#%)B4")"F-,#"&)4&%)6*%&)$%&#-'%')'")#".&#?)"&)=%):";D)X$49=)'")"==(,)'";"7(,)4#-=-O%*Y)

3%8+#4=()'(,)))))"$)))))))))))))))))))))))))))))))))

90*-(

Page 18: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

!",%J(*#4&%'%7"&#")&(),")M%)",#%&'%*-O%'()%V&)"=)4,()'")4&),A=()#".&#)'")5-'"()8%*%)=(,)&%5"6%'(*",)$(&),(8(*#")%)01-23C)W-&)"7;%*6(D)"F-,#"&)'(,)%=#"*&%#-5%,)B4"),(&)=%,)79,)4#-=-O%'%,C)1%)8*-7"*%)",);%?()=-$"&$-%)H)J4&$-(&%)"&)A6M695)H)5EL"'&N)=%),"64&'%)",)'")$A'-6()%;-"*#()H),")4#-=-O%)"&)-"H5//6)K59&M"G)H)N""8/&)CL9"%&C

S%*%)'"#"$#%*)"=),(8(*#")%)5-'"()"&)A6M695)")5EL"'&)4#-=-O%*"7(,)=%),-64-"&#")J4&$-A&Q

function soporteVideoH264() { if(!soporteVideo()) { return false; } var video = document.createElement('video'); return video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

}

Z&)J(*7%#()'")5-'"()",)*"%=7"&#")=%)$(7;-&%$-A&)'")5%*-(,)J%$#(*",C)E&)#G*7-&(,)#G$&-$(,)",#%7(,)5"*-J-$%&'()B4")"=)&%5"6%'(*)84"'%)*"8*('4$-*)5-'"()0;<O>)H)%4'-()DDCP2C)QD.76'#&.)D$.5")C".5'8)R)2"4PC"%B/&G5(S)B9"M5/&T)"&)4&)$(&#"&"'(*)$(&),(8(*#")%)-EUNP>C

1%)J4&$-A&)'"&(7-&%'%)#6'E/6S1SB&QT)'"54"=5")4&%)$%'"&%)B4")84"'"),"*)-&#"*8*"#%'%)%)#*%5G,)'")=%),-64-"&#")=-,#%Q

KB9"+6+/SV)R)E9"+6+/&%&'(&Q)1%)*"8*('4$$-A&)'")'-$M()J(*7%#()",)$%,-),"64*%CK%6S+&V)R)16/)7&HQ))E=)&%5"6%'(*)-&#"&#%*9)=%)*"8*('4$$-A&)'")",#")J(*7%#()'")5-'"(CWV)R)C6.&'6)76#X6Q)[()"F-,#"),(8(*#")%)",#")J(*7%#()'")5-'"(C

1%),-64-"&#")J4&$-A&)5"*-J-$%)"=),(8(*#")'"=)J(*7%#()'")$A'-6()%;-"*#()8%*%)5-'"()"&)-"H5//6)K59&M"G)H)(#*(,)&%5"6%'(*",),-7-=%*",C)E=)8*($",()",)"F%$#%7"&#")"=)7-,7(N)=%)V&-$%)'-J"*"&$-%)",#9)"&)=%)$%'"&%)B4")8%,%7(,)%)=%)J4&$-A&)#6'E/6S1SB&QTC)E&)#G*7-&(,)#G$&-$(,)",#%7(,)5"*-J-$%&'(),-)"=)&%5"6%'(*)84"'")*"8*('4$-*)4&)5-'"()"&)J(*7%#()1L&"96)H)%4'-()Y"9+5?)"&)4&)$(&#"&"'(*)*88C

function soporteVideoOggTheora() { if(!soporteVideo()) { return false; } var video = document.createElement('video'); return video.canPlayType('video/ogg; codecs="theora, vorbis"');

}

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))"%)))))))))))))))))

Page 19: HTML5 en Proyectos Reales

S(*)V=#-7(D)Z&+-)",)4&()'")=(,)79,)*"$-"&#",)#".&#?)'")$A'-6()%;-"*#()-&$=4-'()"&)=%,)&4"5%,)5"*,-(&",)'")=(,)&%5"6%'(*",)N""8/&)CL9"%&D)-"H5//6)K59&M"G)H)*B&96C)E=),(8(*#")%)'-$M()J(*7%#(),")84"'")5"*-J-$%*)%)#*%5G,)'")=%),-64-"&#")J4&$-A&Q

function soporteVideoWebM() { if(!soporteVideo()) { return false; } var video = document.createElement('video'); return video.canPlayType('video/webm; codecs="vp8, vorbis"');

}

3(&)"=)4,()'")-".&9'5H9)8('"7(,)'"#"*7-&%*)"=),(8(*#")%)5-'"()%)#*%5G,)'"Q)

function soporteVideo() { if(Modernizr.video) { return true; } else { return false; }

}

S%*%)'"#"*7-&%*)"&)-".&9'5H9)"=)#-8()'")5-'"()%)4#-=-O%*)8*($"'"*"7(,)'")=%),-64P-"&#")J(*7%Q

function soporteTipoVideo() { if(Modernizr.video) { if(Modernizr.video.ogg) { return "Soporte a Ogg Theora + Vorbis en contenedor Ogg"; } else if (Modernizr.video.h264) { return "Soporte a H.264 + ACC audio en contenedor MP4"; } else { return "Soporte a video desconocido"; } } else { return "Sin soporte a video"; }}

3%8+#4=()'(,)))))"&)))))))))))))))))))))))))))))))))

Page 20: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

S"*7-#")%)=(,)&%5"6%'(*",)%=7%$"&%*)-&J(*7%$-A&)"&)=%)$(784#%'(*%)8%*%)'",84G,)*"$48"*%*=%C)E=)$(&$"8#()",),-7-=%*)%)=%,)#""J5&?D)$(&)=%)'-J"*"&$-%)'")B4")2"#6/)?("968&)",#9)'-,"U%'()8%*%)6*%&'",)$%&#-'%'",)'")-&J(*7%$-A&C)

E=)4,()'")#""J5&?)",#9)=-7-#%'()8(*)"=)#%7%U()H)J4&$-(&%7-"&#(N)G,#%,),")"&5+%&)'")54"=#%)%=),"*5-'(*)$%'%)5"O)B4"),"),(=-$-#%)4&%)&4"5%)896-&%D)=()B4")*"8"*$4#")"&)"=)%&$M()'");%&'%)H)"=)#-"78()'")*",84",#%C)2"#6/)?("968&)8"*7%&"$")"&)=%)$(784#%P'(*%)H)=(,),-#-(,):";)84"'"&)%$$"'"*)%)=%)-&J(*7%$-A&)%=7%$"&%'%)7"'-%&#")"=)4,()'")@676A#95B()'",84G,)'")B4"),")$%*6%)=%)896-&%):";C

S%*%)'"#"*7-&%*)"=),(8(*#")'")4&)&%5"6%'(*)%)2"#6/)?("968&)4#-=-O%*"7(,Q

function soporteLocalStorage() { return('localStorage' in window) && window['localStorage'] !== null;

}

/%7;-G&)",)8(,-;=")'"#"*7-&%*)"=),(8(*#")%)2"#6/)?("968&)$(&)-".&9'5H9Q

function soporteLocalStorage() { if(Modernizr.localstorage) { return true; } else { return false; }

}

4(!"'):%(/";-<

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))"'))))))))))))))))

Page 21: HTML5 en Proyectos Reales

))))))))))))))))

1(,)Z&+)4"9J&9?)8*(5""&)=%)$%8%$-'%')'")"?"$4#%*)$A'-6()@676A#95B()"&),"64&'()8=%&(C)E,)8(,-;=")6"&"*%*)7V=#-8=",)8*($",(,)7"'-%&#")"=)4,()'")KL5/"?L)<$9=$4=(,)7%#"79#-$(,)$(78="?(,D)8"#-$-(&",)'")*"'D)%=7%$"&%7-"&#()%)#*%5G,)'")2"#6/)?("968&@)7-"&#*%,)=%)896-&%):";)-&#"*%$#V%)$(&)"=)4,4%*-()<,")6"&"*%)4&)'",8=%O%7-"&#(D)$=-$)()7-"&#*%,),")",$*-;"@C

E=),(8(*#")8%*%)Z&+)4"9J&9?),")5"*-J-$%)'")=%),-64-"&#")J(*7%Q

function soporteWebWorkers() { return !!window.Worker;

}

3(&)"=)4,()'")-".&9'5H9)",)8(,-;=")'"#"*7-&%*)"=),(8(*#")%)Z&+)4"9J&9?Q

function soporteWebWorkers() {if(Modernizr.webworkers) { return true; } else { return false; }

}

=->)?(/@-/+

3%8+#4=()'(,)))))"()))))))))))))))))))))))))))))))))

Page 22: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

1%)5-,4%=-O%$-A&)"&)=+&"%)'")896-&%,):";)",#9#-$%,)",)J9$-=C)S"*()XB4G)8%,%)$(&)"=)4,()'")%8=-$%$-(&",):";)$(7()N%65/)()N""8/&)!"#?)$4%&'()&(),")",#9)$(&"$#%'(Y)\*%$-%,)%)01-23)$4%=B4-"*)8"*,(&%)84"'")$(&,#*4-*)4&%)%8=-$%$-A&)J4&$-(&%=D)#*%;%?%&'()%V&),-&)$(&"F-A&C

/('%,)=%,)*MM/5'&)Z&+)DBB/5#6(5"'?)$(7-"&O%&),-"&'()%8=-$%$-(&",)"&)=+&"%C)1%)8*-7"*%)5"O)B4"),")5-,-#%)4&),-#-()$(&),(8(*#")%)8*($",(,),-&)$(&"F-A&D)"=),"*5-'(*):";)=")-&'-$%)%=)&%5"6%'(*)$4%=",),(&)=(,)%*$M-5(,)H)*"$4*,(,)&"$",%*-(,)8%*%),4)J4&$-(&%7-"&#()J4"*%)'")=+&"%)<"="7"&#(,)01-2D)$A'-6()@676A#95B(D)-796"&",)()-&$=4,()5-'"(,@C)Z&%)5"O)*"$(8-=%'(,)",)8(,-;=")-&#"*%$#4%*)$(&)=%)%8=-$%$-A&)'",$%*6%'%D)8%*%)'",84G,N)%$#4%=-O%*)8*($",(,D)-&J(*7%$-A&)()*"$4*,(,)4&%)5"O)B4"),")",#G)"&)=+&"%)&4"5%7"&#"C

S%*%)'"#"$#%*)"=),(8(*#")%)*MM/5'&)Z&+)DBB/5#6(5"'?)4#-=-O%*"7(,Q)

function soporteOfflineWebApp() { return !!window.applicationCache;

}

/%7;-G&)",)8(,-;=")'"#"*7-&%*)"=),(8(*#")%)*MM/5'&)Z&+)DBB/5#6(5"'?)$(&)-".&9'5H9Q

function soporteOfflineWebApp() { if(Modernizr.applicationcache) { return true; } else { return false; }

}

ABB'0.-)=->)"##'0!"%0(.+

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))")))))))))))))))))

Page 23: HTML5 en Proyectos Reales

S"*7-#")%5"*-64%*)=%)8(,-$-A&)'")4&)4,4%*-()"&)"=)74&'()H)<(8$-(&%=7"&#"@)$(78%*P#-*=%)$(&),4,)$(&#%$#(,)()%8=-$%$-(&",)'")$(&J-%&O%C)EF-,#"&)7V=#-8=",)7%&"*%,)'")%5"*-64%*)=%)=($%=-O%$-A&)'")4&)4,4%*-()H%),"%)%)#*%5G,)'"),4)'-*"$$-A&)TSD)=%)$(&"F-A&)'")*"')-&%=97;*-$%D)%&#"&%,)'")#"="J(&+%)7A5-=)4#-=-O%'%,)()M%*']%*")\SW)'"'-$%'(C

S%*%)'"#"*7-&%*)"=),(8(*#")%)N&"/"#6/5H6#5[')4#-=-O%*"7(,Q

function soporteGeolocation() { return !!navigator.geolocation;

}

3(&)"=)4,()'")-".&9'5H9)8('"7(,)'"#"*7-&%*)"=),(8(*#")%)N&"/"#6/5H6#5[')'")=%),-64-"&#")7%&"*%Q

function soporteGeolocation() { if(Modernizr.geolocation){ return true; } else { return false; }

}

C-('(!"'0D"!0E.

3%8+#4=()'(,)))))"*)))))))))))))))))))))))))))))))))

Page 24: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

1%)",8"$-J-$%$-A&)01-23)'"J-&")&4"5(,)"="7"&#(,)5'B$()(SB&)8%*%),"*)4#-=-O%'(,)"&)J(*74=%*-(,C)R)$(&#-&4%$-A&),")74",#*%)4&%)=-,#%)$(&)7%H(*)'"#%==")'")4,()H)J4&$-(&P%7-"&#(Q

\5'B$()(SB&]V?&69#LV^)P)S%*%)"="7"&#(,)'");V,B4"'%C\5'B$()(SB&]V'$%+&9V^)P)S%*%)-&J(*7%$-A&)"&)J(*7%#()&47G*-$(C\5'B$()(SB&]V96'8&V^)P)S%*%)"="7"&#(,)'")*%&6()()'",=-O%;=",C\5'B$()(SB&]V#"/"9V^)P)S%*%),"="$$-(&%'(*",)'")$(=(*C\5'B$()(SB&]V(&/V^)P)S%*%)J(*7%#()'")&V7"*(,)#"="JA&-$(,C\5'B$()(SB&]V$9/V^)P)S%*%)*"$4*,(,)H)'-*"$$-(&",):";C\5'B$()(SB&]V&%65/V^)P)S%*%)'-*"$$-(&",)'")$(**"()"="$#*A&-$(C\5'B$()(SB&]V.6(&V^)P)S%*%),"="$$-(&%'(*",)'")J"$M%,C\5'B$()(SB&]V%"'(LV^)P)S%*%)J"$M%,D)",8"$+J-$%7"&#"),"="$$-A&)'")7",C\5'B$()(SB&]V4&&JV^)P)S%*%)J"$M%,D)",8"$+J-$%7"&#"),"="$$-A&)'"),"7%&%C\5'B$()(SB&]V(5%&V^)P)S%*%)-&J(*7%$-A&)"&)J(*7%#()'")M(*%C\5'B$()(SB&]V.6(&(5%&V^)P)S%*%)-&J(*7%$-A&)8*"$-,%)'")J"$M%)H)M(*%C\5'B$()(SB&]V.6(&(5%&P/"#6/V^)P)S%*%)J"$M%)H)M(*%)*"6-(&%=)(),"$#(*",)",8"$+J-$(,C

R)$(&#-&4%$-A&),")'"#%==%&)$%'%)4&%)'")=%,)J4&$-(&",)'")'"#"$$-A&)'"),(8(*#")%)=(,)'-J"*"&#",)"="7"&#(,)5'B$()(SB&)H),4)$(&#*%8%*#")"&)-".&9'5H9Q

F.#&%)%G#-+

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))"!))))))))))))))))

Page 25: HTML5 en Proyectos Reales

3%8+#4=()'(,)))))$#)))))))))))))))))))))))))))))))))

F'B$()?&69#L;

function soporteInputSearch() { var i = document.createElement("input"); i.setAttribute("type","search"); return i.type == "search";

}

function soporteInputSearch() { if(Modernizr.inputtypes.search) { return true; } else { return false; }

}

F'B$()'$%+&9;) ) )

function soporteInputNumber() { var i = document.createElement("input"); i.setAttribute("type","number"); return i.type == "number";

}

function soporteInputNumber() { if(Modernizr.inputtypes.number) { return true; } else { return false; }

}

F'B$()96'8&;

function soporteInputRange() { var i = document.createElement("input"); i.setAttribute("type","range"); return i.type == "range";

}

function soporteInputRange() { if(Modernizr.inputtypes.range) { return true; } else { return false; }

}

Page 26: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

F'B$()#"/"9;) )

function soporteInputColor() { var i = document.createElement("input"); i.setAttribute("type","color"); return i.type == "color";

}

function soporteInputColor() { if(Modernizr.inputtypes.color) { return true; } else { return false; }

}

F'B$()(&/;

function soporteInputTel() { var i = document.createElement("input"); i.setAttribute("type","tel"); return i.type == "tel";

}

function soporteInputTel() { if(Modernizr.inputtypes.tel) { return true; } else { return false; }

}

F'B$()_`2;

function soporteInputUrl() { var i = document.createElement("input"); i.setAttribute("type","url"); return i.type == "url";

}

function soporteInputUrl() { if(Modernizr.inputtypes.url) { return true; } else { return false; }

}

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))$"))))))))))))))))

Page 27: HTML5 en Proyectos Reales

3%8+#4=()'(,)))))$$)))))))))))))))))))))))))))))))))

F'B$()&%65/;

function soporteInputEmail() { var i = document.createElement("input"); i.setAttribute("type","email"); return i.type == "email";

}

function soporteInputEmail() { if(Modernizr.inputtypes.email) { return true; } else { return false; }

}

F'B$().6(&;) ) )

function soporteInputDate() { var i = document.createElement("input"); i.setAttribute("type","date"); return i.type == "date";

}

function soporteInputDate() { if(Modernizr.inputtypes.date) { return true; } else { return false; }

}

F'B$()%"'(L;

function soporteInputMonth() { var i = document.createElement("input"); i.setAttribute("type","month"); return i.type == "month";

}

function soporteInputMonth() { if(Modernizr.inputtypes.month) { return true; } else { return false; }

}

Page 28: HTML5 en Proyectos Reales

))))))))))))))))))))))))))))))))) !"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))$%

F'B$()4&&J;) ) )

function soporteInputWeek() { var i = document.createElement("input"); i.setAttribute("type","week"); return i.type == "week";

}

function soporteInputWeek() { if(Modernizr.inputtypes.week) { return true; } else { return false; }

}

F'B$()(5%&;

function soporteInputTime() { var i = document.createElement("input"); i.setAttribute("type","time"); return i.type == "time";

}

function soporteInputTime() { if(Modernizr.inputtypes.time) { return true; } else { return false; }

}

F'B$().6(&(5%&;) )

function soporteInputDatetime() { var i = document.createElement("input"); i.setAttribute("type","datetime"); return i.type == "datetime";

}

function soporteInputDatetime() { if(Modernizr.inputtypes.datetime) { return true; } else { return false; }

}

Page 29: HTML5 en Proyectos Reales

F'B$().6(&(5%&)/"#6/;

function soporteInputDatetimeLocal() { var i = document.createElement("input"); i.setAttribute("type","datetime-local"); return i.type == "datetime-local";

}

function soporteInputDatetimeLocal() { if(Modernizr.inputtypes.datetime-local) { return true; } else { return false; }

}

3%8+#4=()'(,)))))$&)))))))))))))))))))))))))))))))))

Page 30: HTML5 en Proyectos Reales

)))))))))))))))))))))))))))))))))

R'"79,)'")=(,)&4"5(,)"="7"&#(,)5'B$()(SB&D)=%)",8"$-J-$%$-A&)01-23)$4"&#%)$(&)7"?(*%,)"&)"=)7%&"?()'")J(*74=%*-(,N)4&%)'")"==%,)",)=%)$%8%$-'%')'")",#%;="$"*)K(&G(")B696)%69#6."9).&)B"?5#5['L)"&)4&)$%78()'")"&#*%'%C)E=)#"F#()8(*)'"J"$#()%8%*"$"*9)V&-$%7"&#"),-)"=)$%78()"&)$4",#-A&),")"&$4"&#*%)5%$+()H)&()M%;-=-#%'()<,"="$$-(&%'(@C

E=),(8(*#")%)'-$M%)8*(8-"'%')84"'")5"*-J-$%*,")%)8%*#-*)'")=%),-64-"&#")J4&$-A&Q

function soportePlaceholderText() { var i = document.createElement('input'); return 'placeholder' in i;

}

/%7;-G&)",)8(,-;=")'"#"$#%*)"=),(8(*#")%)E/6#&L"/.&9)(&G()$(&)-".&9'5H9Q

function soportePlaceholderText() { if(Modernizr.input.placeholder) { return true; } else { return false; }

}

H'"!-I('*-/)%-8%

!"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))$'

Page 31: HTML5 en Proyectos Reales

3%8+#4=()'(,)))))$()))))))))))))))))))))))))))))))))

04$M(,),-#-(,):";)4#-=-O%&)@676A#95B()8%*%)M%;-=-#%*)'")7%&"*%)%4#(79#-$%)"=)8*-7"*)$%78()'")#"F#()'"&#*()'")4&)J(*74=%*-(D)=()B4")8*(5"")%)=(,)4,4%*-(,)=%)$%8%$-'%')'")$(7"&O%*)%)",$*-;-*)-&7"'-%#%7"&#"C

S%*%)'"#"*7-&%*)"=),(8(*#")%)M"9%)6$("M"#$?)4#-=-O%*"7(,Q

function soporteInputAutofocus() { var i = document.createElement('input'); return 'autofocus' in i;

}

E&)$(&#*%8%*#"D)%)#*%5G,)'")-".&9'5H9)8('"7(,)'"#"*7-&%*)"=),(8(*#")%)M"9%)6$("M"#$?Q

function soporteInputAutofocus() { if(Modernizr.input.autofocus) { return true; } else { return false; }

}

J(/K)"&%(B(!&+

Page 32: HTML5 en Proyectos Reales

))))))))))))))))))))))))))))))))) !"#"$#%&'()$%*%$#"*+,#-$%,)./012)))))$)

S*(8(*$-(&%),"79&#-$%)%'-$-(&%=)8%*%)$(78%*#-*)%)#*%5G,)'")'-J"*"&#",)7"'-(,)=%)-&J(*7%$-A&)"&)=(,),-#-(,):";C)S('"7(,)4#-=-O%*)%5#9".6(6)8%*%)-&$=4-*)'%#(,),(;*")=-$"&$-%7-"&#()'")4&%)J(#(6*%J+%)()-7%6"&D)8*(5""*)4&%),"$$-A&)KR$"*$%)'"L)()-&$=4,()$*"%*)4&%)#%*?"#%)"&)J(*7%#()7#69.)8%*%)-&J(*7%$-A&)'")$(&#%$#(C

E=),(8(*#")%)%5#9".6(6),")'"#"*7-&%*)%)#*%5G,)'"=),-64-"&#")$A'-6(Q

function soporteMicrodata() { return !!document.getItems;

}

[(#%)-78(*#%&#"Q)-".&9'5H9)&()$4"&#%)$(&)J4&$-A&)%=64&%)8%*%)=%)'"#"$$-A&)'"),(8(*#")%)%5#9".6(6C

30!/(*"%"

Page 33: HTML5 en Proyectos Reales

!"#$%&'()%*+,

-.)/01/+)1(,)''+2")%(/()+,%(3

Page 34: HTML5 en Proyectos Reales

!"#$%&$'#&%(#))*+,#-%$%#*(-%.#####!"#################################

/,#$*0),1,023&#$*#-24%#$*#$%056*&-%#$*7*#(*1#),#4126*1,#2&(-150023&#*&#5&#,1082+%#!"#$9#2&0)5(%#,&-*(#:5*#),#62(6,#*-2:5*-,#%&'()*;

/,#$*0),1,023&#$*#-24%#$*#$%056*&-%#&%#(*#0%&(2$*1,#5&,#*-2:5*-,9#*(#5&,#2&(-150023&#:5*#)*#2&$20,#,)#&,+*<,$%1#,0*10,#$*#),#+*1(23&#!"#$#5-2)2=,$,#4,1,#),#0%$2>20,023&#$*#),#4?<2&,#@*7;

/,#$*0),1,023&#$*#-24%#$*#$%056*&-%#(*#1*>2*1*#0%6A&6*&-*#0%6%#+"+,-+./0(12',"341,+15626'6.27;#B)#+"+#*(4*02>20,#),(#1*<),(#5-2)2=,$,(#4,1,#*)#)*&<5,C*#!"#$9#$*#6%$%#:5*#0,$,#&,+*<,$%1#45*$,#1*41*(*&-,1#*)#0%&-*&2$%#0%11*(4%&$2*&-*#$*#6,&*1,#0%11*0-,;

+1/)898/6.21:,+;<"=>?,@6:4.26A)1:,3,91/.(12@8@8:,4.9,)8,BC<D

!"#$,EDFG,H'96/'D#E%&-2*&*##-%$%(#)%(#,-1275-%(#F#*)*6*&-%(#!"#$#*G0)5F*&$%#*)*6*&-%(#$*#41*(*&-,023&#%#*&#$*(5(%#HI5.2'J9#4%1#*C*64)%K;#/%(#6,10%(#&%#*(-?&#(%4%1-,$%(;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!"#$,EDFG,"982:6'6.28)D#E%&-2*&*#-%$%(#)%(#,-1275-%(#F#*)*6*&-%(#!"#$9#2&0)52$%(#*)*6*&-%(#$*#41*(*&-,023&#F#*&#$*(5(%#HI5.2'J9#4%1#*C*64)%K;#/%(#6,10%(#&%#*(-?&#(%4%1-,$%(;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!"#$,EDFG,I98(1:1'D#B(#2$'&-20%#,#),#$*0),1,023&#!"#$,EDFG,"982:6'6.28)#0%&#),#$2>*1*&02,#$*#:5*#4*162-*#*)#5(%#$*#6,10%(#*&#*)#0%&-*&2$%;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

456789:);7<#()/+)/(!&=+1%(>?

Page 35: HTML5 en Proyectos Reales

J!"#$,GDF,H'96/'D#E%&-2*&*#-%$%(#)%(#,-1275-%(#F#*)*6*&-%(#!"#$9#*G0)5F*&$%#*)*6*&-%(#$*#41*(*&-,023&#%#*&#$*(5(%#HI5.2'J9#4%1#*C*64)%K;#/%(#6,10%(#&%#*(-?&#(%4%1-,$%(;#/,#*(-150-51,#$*#0,$,#,1082+%#!"#$#$*7*#0%11*(4%&$*1(*#$*#,05*1$%#,#),#*(4*02>20,023&#J#$;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

J!"#$,GDF,"982:6'6.28)D#E%&-2*&*#-%$%(#)%(#,-1275-%(#F#*)*6*&-%(#!"#$9#2&0)5F*&$%#*)*6*&-%(#$*#41*(*&-,023&#%#*&#$*(5(%#HI5.2'J9#4%1#*C*64)%K;#/%(#6,10%(#&%#*(-?&#(%4%1-,$%(;#/,#*(-150-51,#$*#0,$,#,1082+%#!"#$#$*7*#0%11*(4%&$*1(*#$*#,05*1$%#,#),#*(4*02>20,023&#J#$;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

J!"#$,GDF,I98(1:1'D#B(#2$'&-20%#,#),#$*0),1,023&#J!"#$,GDF,"982:6'6.28)#0%&#),#$2>*1*&02,#$*#:5*#4*162-*#*)#5(%#$*#6,10%(#*&#*)#0%&-*&2$%;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

J!"#$,GDGD#B(#2$'&-20%#,#),#$*0),1,023&#J!"#$,GDF,H'96/'#0%&#),#$2>*1*&02,#$*#:5*#4*162-*#,<1*<,1#63$5)%(#H4%1#*C*64)%9#41%4%102%&,#(%4%1-*#,#K0A3#*&#2$2%6,(#$*#"(2,#L12*&-,)K;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

/,#$*0),1,023&#$*#-24%#$*#$%056*&-%#4,1,#!"#$L#*(D

%M+;<"=>?,&'()*

M*0%1$*6%(#:5*#$208,#2&(-150023&#$*7*#(*1#),#4126*1,#)N&*,#*&#&5*(-1%(#,1082+%(#!"#$;#O2#*G2(-*#5&,#)N&*,#,&-*(#$*)#+;<"=>?9#2&0)5F*&$%#)N&*,(#*&#7),&0%P#02*1-%(#&,+*<,$%1*(#$*-*162&,1?&#),#,5(*&02,#$*#-24%#$*#$%056*&-%#*&#),#4?<2&,#@*7#F#,0-2+,1?&#*)#6%$%#Q,&3&26%R;

################################# E,4N-5)%#-1*(######$#################

Page 36: HTML5 en Proyectos Reales

#################

S&,#4?<2&,#*&#!"#$#(*#$*>2&*#0%6%#5&,#(*12*#$*#*)*6*&-%(#,&2$,$%(;#/,#*(-150-51,#$*#0,$,#,1082+%#*(#4,1*02$,#,#),#$*#5&#?17%)9#$%&$*#,)<5&%(#*)*6*&-%(#(%&#),(#1,6,(#H&6N.:K#:5*#(*#*G-2*&$*&#$*)#62(6%#-1%&0%;#O2<52*&$%#*(-,#,&,)%<N,9#,)<5&%(#*)*6*&-%(#45*$*&#(*1#82C%(#$*#%-1%(#*)*6*&-%(9#0%6%#5&,#4*:5*T,#1,6,#(*#*G-2*&$*#$*($*#5&,#1,6,#6?(#<1,&$*#H5&#*)*6*&-%#:5*#0%&-2*&*#%-1%(#*)*6*&-%(#*(#0%6A&6*&-*#)),6,$%#2.@.,48@91K;#"#)%(#*)*6*&-%(#:5*#0,1*0*&#$*#82C%(#(*#)*(#$*&%62&,#2.@.:,&.N8;#/,#*-2:5*-,#I&'()J#*(#*)#*)*6*&-%#6?(#*G-*1&%#*&#),#*(-150-51,#H1)1(12'.,98OPQ,9..'K9#4,$1*#$*#-%$%(#)%(#*)*6*&-%(#$*&-1%#$*#5&,#4?<2&,#U*7;

B&#&5*(-1,#4?<2&,#$*#*C*64)%9#*)#*)*6*&-%#1,N=#5-2)2=,$%#*(D

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

#V%#*G2(-*#*11%1#*&#*(-,#$*0),1,023&#F#*(#+?)2$,#4,1,#!"#$L9#(2&#*67,1<%9#,)<5&,(#4,1-*(#&%#(%&#&*0*(,12,(#4,1,#*(-,#&5*+,#*(4*02>20,023&;

B)#4126*1#4,1?6*-1%#,#$2(05-21#(*1?#G6)&(#H41%42*$,$#*&#$*(5(%#$*#),#*(4*02>20,023&#J!"#$,GDFK;##W&$20,#:5*#0,$,#*)*6*&-%#$*#),#*(-150-51,#*(-?#$*>2&2$%#*&#*)#Q*(4,02%#$*#&%671*(R#J!"#$#H8--4DXXUUU;UY;%1<XZ[[[X#G8-6)K;#

B&#!"#$L#-%$%(#)%(#*)*6*&-%(#*(-?&#$*>2&2$%(#*&#*)#Q*(4,02%#$*#&%671*(RP#4%1#)%#-,&-%9#&%#*(#&*0*(,12,#&2&<5&,#$*0),1,023&#*G4)N02-,;#S&,#4?<2&,#0%$2>20,$,#*&#!"#$L#-1,7,C,1?#*G,0-,6*&-*#2<5,)#*&#-%$%(#)%(#&,+*<,$%1*(#6%$*1&%(9#,5&:5*#*)#,-1275-%#R()2:#*(-'#$2(4%&27)*#%#&%;

\,(-,#*(-*#45&-%#&5*(-1,#$*0),1,023&#:5*$,#$*#),#(2<52*&-*#>%16,D

<html lang="en" xml:lang="en">#

/%(#$%(#,-1275-%(#1*(-,&-*(#Q)82SR#F#QR()T)82SR#$*>2&*&#*)#2$2%6,#5-2)2=,$%#*&#&5*(-1,#4?<2&,#U*7;#B)#+,)%1#Q12R#(*#5-2)2=,#4,1,#2&<)'(#HB&<)2(8K;#B)#5(%#$*#*(-%(#$%(#,-1275-%(#+2*&*#8*1*$,$%#$*#),#*(4*02>20,023&#J!"#$P#(2&#*67,1<%9#(3)%#Q)82SR#-2*&*#*>*0-%#*&#!"#$L;#B(#4%(27)*#6,&-*&*1#*)#,-1275-%#QR()T)82SR#-*&2*&$%#052$,$%#$*#:5*#(*#0%11*(4%&$,#0%&#*)#+,)%1#,(2<&,$%#,#Q)82SR;

]*&2*&$%#*&#05*&-,#),(#*(4*02>20,02%&*(#,&-*12%1*(9#&5*(-1%#*)*6*&-%#1,N=#:5*$,1?#$*#),#(2<52*&-*#>%16,D

<html lang="en">

!"#$%&$'#&%(#))*+,#-%$%#*(-%.######%#################

:')+'+=+1%()*"$@);*((%>

Page 37: HTML5 en Proyectos Reales

#################

B)#*)*6*&-%#I&18@J#*(#5(5,)6*&-*#*)#4126*1#82C%#$*)#*)*6*&-%#1,N=#*&#5&#,1082+%#!"#$;#^208%#*)*6*&-%#0%&-2*&*#)%(#(1'8@8'.:#_#2&>%16,023&#1*)*+,&-*#,0*10,#$*#),#4?<2&,#`;#/,#&5*+,#*(4*02>20,023&#!"#$L#&%#%>1*0*#0,672%#,)<5&%#*&#$208%#*)*6*&-%9#(2&#*67,1<%9#)%#:5*#1*,)6*&-*#&%(#2&-*1*(,#*(-?#$*&-1%#$*#');

a,(?&$%&%(#*&#*)#(2<52*&-*#*C*64)%#4%$1*6%(#41%>5&$2=,1#*&#*)#-*6,D

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mi primera página en HTML5</title>

<link rel="stylesheet" type="text/css" href="estilosGenerales.css" />

<link rel="alternate" type="application/atom+xml"title="Mi fuente Web"href="/feed/" />

<link rel="search" type="application/opensearchdescription+xml"title="Mi servicio de busqueda"href="opensearch.xml" />

<link rel="shortcut icon" href="/favicon.ico" /></head>

E%6*&=,1*6%(#0%&#*)#*)*6*&-%#I(1'8J;

<.@656/8/6U2,@1,/898/'191:D

E5,&$%#4*&(,6%(#*&#Q'1R'.R#,5-%6?-20,6*&-*#(*#&%(#+2*&*#,#),#6*&-*#*)#Q5(%#$*#0,1,0-*1*(#F#(N67%)%(#:5*#(*#+2(5,)2=,&#*&#),#4,&-,)),R;#O2&#*67,1<%9#),(#0%645-,$%`1,(#&%#6,&*C,&#0,1,0-*1*(#&2#(N67%)%(9#5-2)2=,&#1*41*(*&-,02%&*(#7,(,$,(#*&#72-(#F#7F-*(;#E,$,#(*0023&#$*#-*G-%#(*#,)6,0*&,#*&#5&,#0%$2>20,023&#$*#0,1,0-*1*(#*(4*0N`>20,;#BG2(-*&#$2+*1(,(#0%$2>20,02%&*(P#,)<5&,(#$*#*)),(#%4-262=,$,(#4,1,#2$2%6,(#0%6%#*)#M5(%9#E82&%#*#W&<)'(;#"#<1,&$*(#1,(<%(9#),#0%$2>20,023&#$*#0,1,0-*1*(#*(-,`7)*0*#5&,#0%11*(4%&$*&02,#*&-1*#)%#:5*#+*6%(#*&#4,&-,)),#F#)%#:5*#1*,)6*&-*#(*#,)6,0*&,#*&#6*6%12,#%#$2(0%;

E,4N-5)%#-1*(######!#################################

:')+'+=+1%()A+"/);+1!"B+@"/(>

Page 38: HTML5 en Proyectos Reales

#################################

]%6,&$%#*&#05*&-,#:5*#*G2(-*&#+,12%(#0,1,0-*1*(#*&#0%6A&#41*(*&-*(#*&#6A)-24)*(#0%$2>20,02%&*(9#0,$,#5&,#$*#*)),(#45*$*#5-2)2=,1#5&,#(*05*&02,#$*#7F-*(#$2>*1*&-*#4,1,#,)6,0*&,1#*&#6*6%12,#%#$2(0%#),(#1*41*(*&-,02%&*(#0%11*(4%&$2*&-*(;#b%1#)%#-,&-%9#4%$*6%(#4*&(,1#*&#),#0%$2>20,023&#$*#0,1,0-*1*(#0%6%#5&,#*(4*02*#$*#0),+*#4,1,#*)#02>1,$%#$*#-*G-%;#E,$,#+*=#:5*#(*#%7-2*&*#5&,#(*05*&02,#$*#7F-*(#*-2:5*-,$,#0%6%#-*G-%#(*#1*:52*1*#5&,#0%$2>20,023&#*(4*02>20,#4,1,#),#-1,$50023&#%#$*0%$2>2`0,023&#0%11*0-,;

B&-%&0*(#!036%#8,0*&#)%(#&,+*<,$%1*(#,0-5,)*(#4,1,#$*-*162&,1#),#0%$2>20,023&#$*#0,1,0-*1*(#5-2)2=,$,#,)#-1,$5021#5&,#(*05*&02,#$*#7F-*(#:5*#*&+N,#5&#(*1+2$%1.#/,#(2<52*&-*#)N&*,#$*#03$2<%#&%(#,F5$,1?#,#*G4)20,1)%D

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

B&#*(-*#*C*64)%#(*#5-2)2=,#),#0%$2>20,023&#$*#0,1,0-*1*(#V"IWX#4,1,#6%(-1,1#),#4?<2&,#*&#05*(-23&#(%71*(01272*&$%#),#*-2:5*-,#I(1'8J#0%&#)%(#4,1?6*-1%(#0%11*(4%&$2`*&-*(;

/,#)N&*,#,&-*12%1#*(#+?)2$,#*&#!"#$L9#(2&#*67,1<%9#*G2(-*#5&,#6,&*1,#6?(#(264)*#4,1,#)%<1,1#*)#62(6%#1*(5)-,$%D

<meta charset="utf-8" />

#/,#)N&*,#,&-*12%1#>5&02%&,#*&#-%$%(#)%(#&,+*<,$%1*(;

B(#264%1-,&-*#*(4*02>20,1#(2*641*#5&,#0%$2>20,023&#$*#0,1,0-*1*(#4,1,#0,$,#4?<2&,#@*7#:5*#$2(*T*6%(9#4,(,1#4%1#,)-%#*(-,#-,1*,#45*$*#<*&*1,1#+5)&*1,72)2$,$*(#*&#),#(*<512$,$#$*)#(2-2%;

YO2/0).:,3,91)8/6.21:D

B)#%7C*-2+%#>5&$,6*&-,)#$*#)%(#)2&c(#%#+N&05)%(#$*&-1%#$*#5&,#4?<2&,#@*7#*(#*)#$*#,45&-,1#,#%-1,#4?<2&,#%#1*051(%9#-,)#0%6%D

S&,#&.N8,@1,1:'6).:,-<HH7#:5*#0%&-2*&*#1*<),(#:5*#*)#&,+*<,$%1#$*7*#,4)20,1#,)#$%056*&-%;S&#511@#H>5*&-*#@*7K#:5*#41%+**#,)#5(5,12%#$*#5&,#1*$2>5(23&#$*#0%&-*&2$%(#*&#>%16,-%#:5*#4*162-*#),#(5(0124023&;S&,#-1,$50023&#$*#),#4?<2&,#*&#%-1%#2$2%6,;/,#62(6,#4?<2&,#+2(5,)2=,$,#*&#>%16,-%#>+I;B)#(2<52*&-*#0,4N-5)%#$*#5&#)271%#*&#)N&*,#H1A..ZK#$*)#:5*#),#4?<2&,#,0-5,)#-,672'&#*(#4,1-*;B-0;

!"#$%&$'#&%(#))*+,#-%$%#*(-%.########################

Page 39: HTML5 en Proyectos Reales

/,#*(4*02>20,023&#!"#$L#$2+2$*#,#)%(#+N&05)%(#*&#$%(#0,-*<%1N,(D#

dN&05)%(#8,02,#1*051(%(#*G-*1&%(#:5*#*&12:5*0*&#,)#$%056*&-%(#,0-5,);dN&05)%(#8,02,#%-1%(#$%056*&-%(;

B)#0%64%1-,62*&-%#$*#)%(#+N&05)%(#,#1*051(%(#*G-*1&%(#$*4*&$*#$*#),#1*),023&#*G,0-,#:5*#$*>2&*#*)#-24%#$*#*&),0*#0%11*(4%&$2*&-*;

e*&*1,)6*&-*#),(#1*),02%&*(#$*#*&),0*#(*#$*-*162&,&#,#-1,+'(#$*#*-2:5*-,(#I)62ZJ#$*&-1%#$*)#*&0,7*=,$%#I&18@J#$*#5&,#4?<2&,#@*7;#],672'&#*(#4%(27)*#*&0%&-1,1#*(-*#-24%#$*#1*),02%&*(#*&#*)*6*&-%(#I8J#(2*&$%#&%#-,&#0%6A&;#W&0)5(%#4%$*6%(#8,7),1#$*#1*),02%&*(#$*#*&),0*#*&#*)*6*&-%(#I8918J#,5&:5*#),#*(4*02>20,023&#!"#$L#)%#4*162-*9#*(#65F#1,1%#*&0%&-1,1),(;#

91),[,:'3)1:&11'

rel= stylesheet<link rel="stylesheet" href="estilosGenerales.css" type="text/css" />

B(#),#1*),023&#$*#*&),0*#6?(#5-2)2=,$,#*&#*)#65&$%#H)2-*1,)6*&-*K;#/,#)N&*,#$*#03$2<%#,&-*12%1#,45&-,#8,02,#5&#,1082+%#*G-*1&%#*&#*)#:5*#(*#,)6,0*&,&#1*<),(#$*#*(-2)%#*&#0,(0,$,#H<HH,\,<8:/8@62S:,H'3)1,H&11':K;#S&#0%&(*C%#4,1,#),#%4-262=,023&#$*#03$2<%#*(#%62-21#*)#,-1275-%#Q'341R;#BG2(-*#(3)%#5&#)*&<5,C*#$*#*(-2)%#4,1,#),#@*7#H<HHK#:5*#(2*641*#(*#-%6,#0%6%#+,)%1#4%1#$*>*0-%;

%)62Z,91)[]:'3)1:&11'],&915[]:'3)1W.96S628)D/::],^*

rel = alternate<link rel="alternate" type="application/atom+xml" title="Mi fuente Web" href="/feed/" />

B(-,#1*),023&#$*#*&),0*#-,672'&#*(#7,(-,&-*#0%6A&;#B)#*)*6*&-%#I)62Z,91)[_8)'1928'1_J#0%672&,$%#0%&#'341#0%&#+,)%1*(#QKHHR#%#Q`'.(,(1@68R#4*162-*#8,72)2-,1#,<1*<,$%1*(#%#)*0-%1*(#$*#>5*&-*(#@*7#Ha..S)1,K18@19#4%1#*C*64)%K#%#,45&-,1#,)#62(6%#0%&-*&2$%#*&#>%16,-%#>+I;#"#$2>*1*&02,#$*#),(#8%C,(#$*#*(-2)%#*&#0,(0,$,9#*)#,-1275-%#'341#*(#264%1-,&-*;

E,4N-5)%#-1*(######&###############################

Page 40: HTML5 en Proyectos Reales

###############################

L-1,(#1*),02%&*(#$*#*&),0*#4,1,#\]f/g;

91)[]89/&6b1:]

W&$20,#5&#$%056*&-%#$*#1*>*1*&02,#:5*#$*(0127*#5&,#0%)*0023&#$*#1*<2(-1%(9#$%056*&-%(#5#%-1%(#6,-*12,)*(#$*#2&-*1'(#01%&%)3<20%;#

91)[_80'&.9_

W&>%16,023&#,0*10,#$*)#,5-%1#$*#),#4?<2&,#@*7;

91)[_1R'1928)_

W&$20,#:5*#*)#*&),0*#0%&$50*#,#%-1%#$%056*&-%#:5*#&%#>%16,#4,1-*#$*)#(2-2%#,0-5,);

91)[_:'89'_Q,91)[_491b_Q,91)[_21R'_

^*>2&*#),(#1*),02%&*(#*G2(-*&-*(#*&-1*#4?<2&,(#:5*#>%16,&#4,1-*#$*#5&,#(*12*#H0,4N-5)%(#$*#5&#)271%#%#,1-N05)%(#*&#5&#7)%<K;#!"#$L#2&0)5F*#91)[_569:'_#4,1,#1*>*121(*#,#),#4126*1,#4?<2&,#$*#5&,#(*12*#H91)[_:'89'_#(*#6,&-2*&*#4,1,#0%6`4,-272)2$,$#0%&#+*1(2%&*(#,&-*12%1*(K;#O*#05*&-,#-,672'&#0%&#91)[_491b_#H,&-*12%1K#F#91)[_21R'_#H(2<52*&-*K9#-,)#05,)#0%6%#*&#!"#$E#H(%4%1-,&$%#$*#2<5,)#>%16,#91)[_491b6.0:R9#91)[_)8:'R#F#91)[_04R#4,1,#0%64,-272)2$,$#8,02,#,7,C%K;

91)[_6/.2_

/%(#412&024,)*(#&,+*<,$%1*(#4*162-*&#,(%02,1#5&#4*:5*T%#N0%&%#,#5&,#4?<2&,#@*7#H<*&*1,)6*&-*#6%(-1,$%#*&#),#7,11,#$*#$21*002%&*(#$*)#&,+*<,$%1#%#*&#),#4*(-,T,#412&024,)K;#B&#!"#$L#*(#4%(27)*#$*-*162&,1#*)#-,6,T%#$*)#N0%&%#5-2)2`=,$%#,#-1,+'(#$*)#,-1275-%#Q:6P1:R;

91)[_)6/12:1_

W&$20,#5&,#1*>*1*&02,#,)#$%056*&-%#:5*#0%&-2*&*#)%(#-'162&%(#F#0%&$202%&*(#$*#)20*&02,#$*#),#4?<2&,#,0-5,)6*&-*#6%(-1,$,;

!"#$%&$'#&%(#))*+,#-%$%#*(-%.######'################

Page 41: HTML5 en Proyectos Reales

################

91)[_2.5.)).c_

W&$20,#:5*#*)#*&),0*#&%#(*#*&05*&-1,#,+,),$%#4%1#*)#,5-%1#%#*$2-%1#%12<2&,)#$*#),#4?<2&,#@*7;#

91)[]2.91519919]W&$20,#:5*#&%#*G2(-*#2&>%16,023&#$*#1*>*1*&02,#4,1,#>2)-1,1#*)#*&),0*;

91)[_462SA8/Z_

b1%+**#5&#6*0,&2(6%#4,1,#),#&%-2>20,023&#,5-%6?-20,#$*#&5*+,(#*&-1,$,(#*&#5&,#4?<2&,#@*7;

91)[_49151'/&_

b*162-*#),#41*0,1<,#$*#*)*6*&-%(#:5*#(*#0%&(2$*1,&#&*0*(,12%(#4,1,#),#&,+*`<,023&#$*)#5(5,12%;

91)[]:189/&]

W&$20,#:5*#*)#$%056*&-%#$*#1*>*1*&02,#41%4%102%&,#5&,#2&-*1>,=#*(4*0N>20,#4,1,#7A(:5*$,#F#1*051(%(#1*),02%&,$%(;

91)[_:6@1A89_

W&$20,#:5*#5&#$%056*&-%#$*#1*>*1*&02,#(*,#6%(-1,$%#*&#5&#0%&-*G-%#$*#&,+*`<,023&#,)-*1&,-2+%#%#(*05&$,12%#H(3)%#(2#(*#1*054*1,#%#(*#,T,$*#,#5&#6,10,$%1K;

91)[_'8S_

"(%02,#0,-*<%1N,(9#4,),71,(#0),+*#%#*-2:5*-,(#0%&#6*&(,C*(#2&$2+2$5,)*(#5-2)2=,`$,(#4%1#)%(#6%-%1*(#$*#7A(:5*$,;

E,4N-5)%#-1*(######(#################################

Page 42: HTML5 en Proyectos Reales

#################################

/,#*(4*02>20,023&#!"#$L#$*>2&*#5&,#(*12*#$*#&5*+%(#*)*6*&-%(#(*6?&-20%(#:5*#(*#*&)2(-,&#,#0%&-2&5,023&D

%:1/'6.2*M*41*(*&-,#5&,#(*0023&#<*&'120,#$*&-1%#$*#5&#$%056*&-%#%#,4)20,023&#H7)%:5*#-*6?-20%#$*#0%&-*&2$%#:5*#05*&-,#4%1#)%#<*&*1,)#0%&#5&#-N-5)%K;

%28b*B)*6*&-%#$*#&,+*<,023&#:5*#0%&-2*&*#+N&05)%(#8,02,#%-1,(#4?<2&,(;#V%#-%$%(#)%(#*)*6*&-%(#$*#*&),0*#&*0*(2-,&#*(-,1#$*&-1%#$*#*)*6*&-%(#$*#&,+*<,023&#H(3)%#)%(#6?(#264%1-,&-*(K;#B(#0%6A&#:5*#),#(*0023&#$*#Q461,@1,4dS628R#0%&`-*&<,#+N&05)%(#8,02,#2&>%16,023&#,0*10,#$*)#,5-%19#4?<2&,#$*#2&202%#%#-'162&%(#F#0%&$202%&*(9#*&#*(-*#0,(%#*(#264*1,-2+%#5-2)2=,1#*)#*)*6*&-%#I5..'19J;

%89'6/)1*M*41*(*&-,#5&,#(*0023&#$*#0%&-*&2$%#2&$*4*&$2*&-*9#$2(-127527)*#F#1*5-2)2=,7)*#$*&-1%#$*#5&,#4?<2&,#@*7#%#,4)20,023&;#BC*64)%(#$*#*(-*#-24%#$*#*)*6*&-%#4%$1N,&#(*1D#5&#6*&(,C*#*&#5&#>%1%9#5&,#*&-1,$,#*&#5&#7)%<#%#5&#0%6*&-,12%;

%8:6@1*O*#5-2)2=,#4,1,#1*41*(*&-,1#(*002%&*(#$*#0%&-*&2$%#1*),02%&,$%#0%&#*)*6*&-%(#,)1*$*$%1#$*#*)),(#F#:5*#$*7*&#0%&(2$*1,1(*#2&$*4*&$2*&-*(;#E%6%#*C*64)%(#$*#5(%#4%$*6%(#6*&02%&,1#),#457)202$,$#),-*1,)#F#*)*6*&-%(#$*#&,+*<,023&;

%&S9.04*O*#5-2)2=,#<*&*1,)6*&-*#4,1,#,<154,1#*)*6*&-%(#$*#*&0,7*=,$%#H8Z`8hK#*&#+,12%(#&2+*)*(#H(57-N-5)%(9#-*G-%(#,)-*1&,-2+%(9#*-0;K;

%&18@19*M*41*(*&-,#5&,#(*0023&#$*#0%&-*&2$%#2&-1%$50-%12%#%#0%&(*C%(#$*#&,+*<,023&;#S(5,)6*&-*#(*#5-2)2=,#4,1,#,<154,1#*)*6*&-%(#I&S9.04J#H&%#0%&-,&$%#0%6%#75*&,#41?0-20,K;#],672'&#*(#4%(27)*#5-2)2=,1#*)#*)*6*&-%#I&18@19J#4,1,#,<154,1#-,7),(#$*#0%&-*&2$%9#75(0,$%1*(#%#05,):52*1#)%<%-24%;

%5..'19*M*41*(*&-,#*)#42'#$*#4?<2&,#$*#5&#,1082+%#@*7#%#,4)20,023&;#e*&*1,)6*&-*#0%&-2*&*#2&>%16,023&#,0*10,#$*#),#(*0023&#$*#),#05,)#>%16,#4,1-*#H0%&-,0-%9#*&),0*(#,#$%056*&-%(#1*),02%&,$%(9#$,-%(#$*#)20*&02,62*&-%9#$*1*08%(#$*#,5-%19#,4'&$20*(9#N&$20*(#5#%-1%#0%&-*&2$%K;

C&+2(,)+'+=+1%(,),+=D1%<!(,)+1)E7FGH

!"#$%&$'#&%(#))*+,#-%$%#*(-%.######)################

Page 43: HTML5 en Proyectos Reales

%'6(1*O*#5-2)2=,#4,1,#),#1*41*(*&-,023&#$*#*)*6*&-%(#$*#>*08,#F#8%1,;

%(89Z*B)*6*&-%#5-2)2=,$%#4,1,#),#1*41*(*&-,023&#$*#6,10,(#$*#1*>*1*&02,#8,02,#0%&-*`&2$%;

E,4N-5)%#-1*(######*#################################

Page 44: HTML5 en Proyectos Reales

#################################

E,$,#&,+*<,$%1#05*&-,#0%&#5&,#-,7),#6,*(-1,#$*#*)*6*&-%(#!"#$#(%4%1-,$%(;#b%1#*C*64)%9##.P6))8,I6915.R#),#,)6,0*&,#*&#Q2:?)1(12'"8A)1D/44R;#]%$%#*)*6*&-%#:5*#(*#*&05*&-1*#>5*1,#(*#*-2:5*-,#0%6%#Q@1:/.2./[email protected];

BG2(-*&#$%(#41*<5&-,(#>5&$,6*&-,)*(#,0*10,#$*#036%#(*#65*(-1,&#)%(#*)*6*&-%(#$*(0%&%02$%(#*&#)%(#&,+*<,$%1*(D

e<U(.,@1A12,:19,'98'8@.:,8),(.(12'.,@1,84)6/89:1,1:'6).:,8,).:,1)1(12'.:,@12'9.,@1,028,4dS628,B1Af

b%1#$*>*0-%9#,#)%(#*)*6*&-%(#I4J#(*#)*(#,(2<&,#5&#*(4,02,$%#(54*12%1#*#2&>*12%19#,#IA)./Zg0.'1J#(*#)*#,(2<&,#5&#6,1<*&#2=:52*1$%#F#)%(#*)*6*&-%(#$*#*&0,7*=,$%#I&GJ#(*#65*(-1,&#0%&#5&,#>5*&-*#$*#6,F%1#-,6,T%;

e<U(.,:1,.9S826P8,/8@8,1)1(12'.,12,1),+;#,-+./0(12',;AN1/',#.@1)7f

/,#)2(-,#Q2:?)1(12'"8A)1D/44R#$*##.P6))8,I6915.R#0%&-2*&*#2&>%16,023&#,0*10,#$*#:5'#*)*6*&-%(#45*$*&#-1,-,1(*#0%6%#0%&-*&*$%1*(#$*#%-1%(#*)*6*&-%(;#O2#(*#2&0)5F*#5&,#)N&*,#0%6%#I4JI4J9#*)#(*<5&$%#*)*6*&-%#$*#4?11,>%#0*11,1?#$*#>%16,#264)N02-,#,)#4126*1%#4%1#)%#:5*#)%(#*)*6*&-%(#:5*$,&#0%6%#8*16,&%(9#F#&%#0%6%#4,$1*#*#82C%;#O2&#*67,1<%9#(2#-*&*6%(#I4JI:482J9#*)#*)*6*&-%#I:482J#&%#02*11,#,)#*)*6*&-%#I4J#F,#:5*#I6915.R#-1,-,#,#)%(#4?11,>%(#0%6%#*)*6*&-%(#$*#7)%:5*#:5*#45*$*&#0%&-*&*1#$*&-1%#*)*6*&-%(#*&#)N&*,;#b%1#)%#-,&-%#I:482J#(*#0%&(2$*1,#82C%#$*#I4J#*&#*(-*#0,(%;

O*#$*7*#0%&(2$*1,1#:5*#0,$,#&,+*<,$%1#6,&*C,#$*#>%16,#$2>*1*&-*#,#)%(#*)*6*&-%(#F#*(-2)%#$*#)%(#62(6%(;#

O2#5&#&,+*<,$%1#(*#*&05*&-1,#0%&#5&#*)*6*&-%#$*(0%&%02$%#&%#)*#2&0)521?#&2&<A&#*(-2)%#*(4*02,)9#7,(-,1?#0%&#8*1*$,1#),(#41%42*$,$*(#<HH#0%11*(4%&$2*&-*(#%#*&#(5#$*>*0-%9#$*C,1#),#1*(4%&(,72)2$,$#,)#,5-%1#$*)#(2-2%#4,1,#:5*#0,$,#%0511*&02,#$*)#*)*6*&-%#&%#0%&%02$%#(*,#-1,-,$%#0%&#)%(#*(-2)%(#0%11*(4%&$2*&-*(;#O2&#*67,1<%9#h2'1921',?R4).919#H,&-*12%1#,#),#+*1(23&#[K#&%#4*162-*#,4)20,1#*(-2)%(#,#)%(#*)*6*&-%(#$*(0%&%02$%(;#d*,6%(#5&#*C*64)%D

-60=()="1<#&'"1)'(,)1"2+I"/(*+,)")'(,)+'+=+1%(,)/+,!(1(!</(,3

!"#$%&$'#&%(#))*+,#-%$%#*(-%.######"################

Page 45: HTML5 en Proyectos Reales

E,4N-5)%#-1*(#####&$#################################

<style type="text/css"> article { display: block; border: 1px solid red }

</style> ... <article>

<h1>Encabezado de página</h1> <p>Prueba de texto <span>anidado</span>.</p>

</article>

h2'1921',?R4).919#F#+*1(2%&*(#,&-*12%1*(#&%#4%&$1?&#5&#7%1$*#1%C%#,)#*)*6*&-%#I89'6/)1J;

B)#(2<52*&-*#41%7)*6,#0%&#*)#:5*#&%(#-%4,6%(#*(#036%#(*#+*#,>*0-,$%#*)#+;##05,&$%#)%(#&,+*<,$%1*(#(*#*&05*&-1,&#0%&#*)*6*&-%(#&%#(%4%1-,$%(#%#$*(0%&%02`$%(;#^*#&5*+,#05*&-,9#*)#&,+*<,$%1#6?(#41%7)*6?-20%#*&#*(-*#(*&-2$%#*(#h2'1921',?R4).919;#O2#h2'1921',?R4).919#&%#1*0%&%0*#$*#6,&*1,#*G4)N02-,#*)#&%671*#$*#5&#*)*6*&-%9#)%#2&(*1-,1?#$*&-1%#$*)#+;##0%6%#5&#&%$%#+,0N%#(2&#82C%(;#]%$%(#)%(#*)*6*&-%(#:5*#(*#0%&(2$*1*&#82C%(#$*)#*)*6*&-%#$*(0%&%02$%#(*1?&#-1,-,$%(#0%6%#8*16,&%(;

"#0%&-2&5,023&#(*#65*(-1,#),#$2>*1*&02,#*&-1*#0%6%#(*#*(-150-51,#*)#+;##$*)#*C*64)%#,&-*12%1#*&#!"#$L#F#)%#:5*#1*,)6*&-*#01*,#h2'1921',?R4).919;

article|+-- h1 (hijo de article)| || +-- Nodo de texto “Encabezado de página”|+-- p (hijo de article, hermano de h1) | +-- Nodo de texto (“Prueba de texto”) | +-- span | | | +-- Nodo de texto “anidado” | +-- Nodo de texto “.”

Page 46: HTML5 en Proyectos Reales

#################################

article (sin hijos)|h1 (hermano de article)|+-- Nodo de texto “Encabezado de página”|p (hermano de h1)|+-- Nodo de texto (“Prueba de texto”)|+-- span| | | +-- Nodo de texto “anidado”|+-- Nodo de texto “.”

BG2(-*#5&,#*G0*)*&-*#>%16,#$*#(%)502%&,1#*(-*#41%7)*6,;#^*7*6%(#01*,1#5&#*)*6*&-%#>20-202%#$*#-24%#I89'6/)1J#5(,&$%#i8b8H/964';#"5-%6?-20,6*&-*#(*#6%(-1,1?#*)#*)*6*&-%#$*(0%&%02$%#F#(*#1*>)*C,1?&#)%(#*(-2)%(#,4)20,$%(#,#');#a,(-,#0%&#<*&*1,1#5&#(%)%#*)*6*&-%#>20-202%#4,1,#:5*#h2'1921',?R4).919#)%#1*0%&%=0,#F#45*$,#5-2)2=,1)%#,#)%#),1<%#$*#),#4?<2&,#@*7;

<html> <head> <style> article { display: block; border: 1px solid red } </style> <script> document.createElement("article"); </script> </head> <body> <article> <h1>Encabezado de página</h1> <p>Prueba de texto <span>anidado</span>.</p> </article> </body> </html>

B)#03$2<%#,&-*12%1#>5&02%&,#*&#-%$,(#),(#+*1(2%&*(#$*#h2'1921',?R4).919;#b%$*6%(#*G-*&$*1#*(-,#-'0&20,#4,1,#01*,1#0%42,(#>20-202,(#$*#-%$%(#)%(#&5*+%(#*)*6*&-%(#!"#$L#,#),#+*=#_#)%(#*)*6*&-%(#&%#(*#2&(*1-,1?&#*&#*)#+;#9#4%1#)%#:5*#&%#)%(#+*1*6%(#$*#6,&*1,#<1?>20,#_#$*(45'(#4%$*6%(#0%6*&=,1#,#5-2)2=,1)%(#(2&#41*%05`4,1&%(#,0*10,#$*#)%(#&,+*<,$%1*(#:5*#&%#(%4%1-*&#*(-,(#&5*+,(#*-2:5*-,(;

!"#$%&$'#&%(#))*+,#-%$%#*(-%.#####&%################

Page 47: HTML5 en Proyectos Reales

E,4N-5)%#-1*(#####&!#################################

K1(3,H&894#<*&*13#5&,#15-2&,#$*&%62&,$,#Q!"#$L,128A)62S,:/964'R;#B)#(0124-#8,#4,(,$%#4%1#6A)-24)*(#1*+2(2%&*(9#4*1%#),#2$*,#7?(20,#*(D

Ii``j2>#)-#WB#[kJ#<script>

var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); }

</script> <![endif]-->

K1(3,H&894#0%64,0-3#*)#(0124-#,&-*12%1#F#)%#-2*&*#$2(4%&27)*#*&#Qa..S)1,>9.N1/',!.:'62SR#H(*#0%&(2$*1,#0%6%#41%F*0-%#$*#03$2<%#,72*1-%#F#*(#4%(27)*#5-2)2=,1)%#*&#05,):52*1#4?<2&,#@*7K;#O2#(*#$*(*,#5-2)2=,1#(264)*6*&-*#7,(-,#0%&#<*&*1,1#5&#)2&c#,#),#+*1(23&#$2(4%&27)*#*&#),#@*7;

<head> <meta charset="utf-8" /> <title>Mi página Web</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->

</head>

"8%1,#*(-,6%(#)2(-%(#4,1,#5-2)2=,1#)%(#&5*+%(#*)*6*&-%(#(*6?&-20%(#$*#!"#$L#*&#&5*(-1%(#41%F*0-%(#@*7;

?2/8A1P8@.:D

O2<,6%(#0%&#&5*(-1%#*C*64)%;#"8%1,#41%(*<526%(#0%&#)%(#*&0,7*=,$%(D

<div id="header"> <h1>Mi página Web</h1> <p class="lineaTiempo">Texto de línea de tiempo.</p>

</div>...<div class="entrada">

<h2>Primer encabezado secundario</h2></div>...<div class="entrada">

<h2>Segundo encabezado secundario</h2></div>

Page 48: HTML5 en Proyectos Reales

################################# !"#$%&$'#&%(#))*+,#-%$%#*(-%.#####&#

/,#*(-150-51,#6%(-1,$,#,&-*12%16*&-*#*(#+?)2$,#*&#!"#$L;#b5*$*#6,&-*&*1(*#(2#(*#$*(*,9#(2&#*67,1<%9#),#&5*+,#*(4*02>20,023&#41%+**#*)*6*&-%(#(*6?&-20%(#4,1,#)%(#*&0,7*=,$%(#F#),(#(*002%&*(;

B&#4126*1,#2&(-,&02,#&%(#$*(8,1*6%(#$*)#,-1275-%#6@[_&18@19_#:5*#0%&-2*&*#*)#*)*6*&-%#I@6bJ;#B(#5&,#41?0-20,#65F#0%6A&9#(2&#*67,1<%#&2#*)#*)*6*&-%#&2#*)#,-1275-%#$*>2&*&#),#(*6?&-20,#0%11*(4%&$2*&-*;

/,#*(4*02>20,023&#!"#$L#$*>2&*#5&#&5*+%#*)*6*&-%#(*6?&-20%#$*&%62&,$%#I&18@19J#4,1,#*(-*#41%43(2-%;#"#0%&-2&5,023&#+*1*6%(#5&#*C*64)%D

<header> <h1>Mi página Web</h1> <p class="lineaTiempo">Texto de línea de tiempo.</p> ...

</header>

/%(#*)*6*&-%(#&G#F#&j#$,&#*(-150-51,#,#),#4?<2&,;#B&#0%&C5&-%9#01*,&#5&#*(:5*6,#:5*#*(#5-2)2=,$%#4,1,#+2(5,)2=,1#%#&,+*<,1#$*&-1%#$*)#(2-2%;#BG2(-*&#$2+*1(,(#8*11,62*&-,(#*&#)N&*,#:5*#$,&#5&,#+2(5,)2=,023&#0%64)*-,#$*#$208%#*(:5*6,;B&#!"#$E#)%(#*)*6*&-%(#I&GJ#`#I&kJ#*1,&#),#A&20,#6,&*1,#$*#01*,1#5&#*(:5*6,#$*#$%056*&-%;#d*,6%(#<1?>20,6*&-*#&5*(-1%#*C*64)%D

Mi página Web (h1)|+-- Primer encabezado secundario (h2)|+-- Segundo encabezado secundario (h2)

/,#*(-150-51,#*(#0%11*0-,9#(2&#*67,1<%9#&%#*G2(-*#6,&*1,#$*#6,10,1#,)#*)*6*&-%#Q]*G-%#$*#)N&*,#$*#-2*64%;R;#O2#(*#<*&*1,#0%6%#I&jJ9#01*,1N,6%(#5&#&%$%#>,&-,(6,#*&#*)#*(:5*6,#$*)#$%056*&-%;

Mi página Web (h1)|+-- Texto de línea de tiempo. (h2)|+-- Primer encabezado secundario. (h2)|+-- Segundo encabezado secundario. (h2)

B)#03$2<%#,&-*12%1#&%#*(#),#*(-150-51,#:5*#(*#*(4*1,#$*)#$%056*&-%;#B)#-*G-%#,<1*<,$%#&%#(*#0%&(2$*1,#5&,#(*0023&9#(264)*6*&-*#*(#5&#*&0,7*=,$%#6?(;S&#0,62&%#,)-*1&,-2+%#(*1N,#0%&(2$*1,1#,)#-*G-%#0%6%#I8lJ#F#6,10,1#0,$,#&%$%#2&>*12%1#0%6%#I8YJ;#B(-%#*(#,A&#4*%1;

Page 49: HTML5 en Proyectos Reales

Mi página Web (h1)|+-- Texto de línea de tiempo. (h2) | +-- Primer encabezado secundario. (h3) | +-- Segundo encabezado secundario. (h3)

"8%1,#-*&*6%(#5&#&%$%#>,&-,(6,#*&#&5*(-1%#*(:5*6,#$*#$%056*&-%#:5*#(*#,$C5$203#,#)%(#82C%(#:5*#$*#412&0242%#4*1-*&*0*&#,)#&%$%#1,N=;

/,#*(4*02>20,023&#!"#$L#41%+**#5&,#(%)5023&D#B)#*)*6*&-%#I&S9.04J#,0-A,#0%6%#0%&-*&*$%1#4,1,#$%(#%#6?(#*)*6*&-%(#$*#*&0,7*=,$%#:5*#-*&<,&#1*),023&;V5*(-1%#*C*64)%#(2<52*&$%#),(#&5*+,(#*(4*02>20,02%&*(#(*#65*(-1,#,#0%&-2&5,023&D

<header> <hgroup> <h1>Mi página Web</h1> <h2>Texto de línea de tiempo.</h2> </hgroup>…</header>…<div class=”entrada”>

<h2>Primer encabezado secundario.</h2></div>…<div class=”entrada”>

<h2>Segundo encabezado secundario.</h2></div>

B)#*(:5*6,#$*#$%056*&-%#1*(5)-,&-*#(*#65*(-1,#,#0%&-2&5,023&D

Mi página Web (h1 del elemento hgroup)|+-- Primer encabezado secundario. (h2)|+-- Segundo encabezado secundario. (h2)

B(#4%(27)*#41%7,1#&5*(-1,#4?<2&,#@*7#4,1,#,(*<51,1&%(#:5*#5-2)2=,#)%(#*)*6*&-%(#$*)#*(:5*6,#$*#$%056*&-%#0%11*0-,6*&-*#*&#),#(2<52*&-*#$21*0023&D#8--4DXX<(&*$$*1(;8-6)g;%1<X%5-)2&*1X

E,4N-5)%#-1*(#####&&#################################

Page 50: HTML5 en Proyectos Reales

#################################

`9'O/0).:D

E%&-2&5*6%(#0%&#&5*(-1,#4?<2&,#$*#*C*64)%;

<div class="entrada"> <p class="fechaArticulo">22 de Octubre del 2011</p> <h2> <a href="#" rel="bookmark" title="Vínculo al artículo”> Primer artículo</a> </h2>

... </div>

B)#03$2<%#,&-*12%1#*(#+?)2$%#4,1,#!"#$L9#(2&#*67,1<%9#),#&5*+,#*(4*02>20,023&#41%+**#*)*6*&-%(#*(4*0N>20%(#4,1,#2&(*1-,1#5&,#(*0023&#$*#,1-N05)%#HI89'6/)1JK#*&#&5*(-1,(#4?<2&,(#@*7;

<article> <p class="fechaArticulo">22 de Octubre del 2011</p> <h2> <a href="#" rel="bookmark" title="Vínculo al artículo">Primer artículo</a> </h2>

...</article>

^*7*6%(#-*&*1#*&#05*&-,#:5*#&%#*(#-,&#(264)*#036%#4,1*0*;#^*7*&#,4)20,1(*#6?(#0,672%(#4,1,#)%<1,1#),#*(-150-51,#$*#$%056*&-%#$*(*,$,;

<article> <header> <p class="fechaArticulo">22 de Octubre del 2011</p> <h1> <a href="#" rel="bookmark" title=”Vínculo al artículo">Primer artículo</a> </h1> </header>

... </article>

O*#8,&#0,672,$%#)%(#*)*6*&-%(#I&jJ#,#I&GJ#F#,8%1,#*(-?&#0%&-*&2$%(#$*&-1%#$*)#*)*6*&-%#I&18@19J;#B(#-2*64%#$*#+*1#,#*(-*#*)*6*&-%#*&#,0023&;#O5#41%43(2-%#*(#*)#$*#6,&-*&*1#C5&-%(#-%$%(#)%(#*)*6*&-%(#:5*#>%16,&#4,1-*#$*)#*&0,7*=,$%#$*#5&#,1-N05)%#H*&#*(-*#0,(%9#),#>*08,#$*#457)20,023&#F#*)#-N-5)%K;#B&#*(-*#45&-%#(,)*#,#1*)5021#),#(2<52*&-*#,>216,023&D#]%$%#$%056*&-%#*&#!"#$#(3)%#$*7*#0%&-*&*1#5&#*)*6*&-%#I&GJ;#"#0%&-2&5,023&#*G4)20,1*6%(#,#$*-,))*D

!"#$%&$'#&%(#))*+,#-%$%#*(-%.#####&'

Page 51: HTML5 en Proyectos Reales

E,4N-5)%#-1*(#####&(#################################

B&#!"#$E#),#A&20,#6,&*1,#$*#01*,1#5&#*(:5*6,#$*#$%056*&-%#*1,#6*$2,&-*#*)#5(%#$*#*&0,7*=,$%(#I&GJ`I&kJ;#O2#(*#$*(*,7,#0%&-,1#0%&#5&#(%)%#*)*6*&-%#1,N=#(*#6,10,7,#0%&#I&GJ;#O2&#*67,1<%9#),#&5*+,#*(4*02>20,023&#!"#$L#$*>2&*#5&#,)<%12-6%#4,1,#),#<*&*1,023&#$*)#*(:5*6,#$*#$%056*&-%#:5*#2&0%14%1,#&5*+%(#*)*6*&-%(#(*6?&-20%(;#^208%#,)<%12-6%#2&$20,#:5*#5&#*)*6*&-%#I89'6/)1J#<*&*1,1?#5&,#&5*+,#(*0023&#:5*#>%16,1?#4,1-*#$*)#*(:5*6,#0%6%#5&#&%$%;#m#0,$,#(*0023&#45*$*#0%&`-*&*1#(5#41%42%#*&0,7*=,$%#I&GJ;

B)#*)*6*&-%#I89'6/)1J#$*>2&*#5&,#(*0023&#$*#0%&-*&2$%#2&$*4*&$2*&-*#$*&-1%#$*)#*(:5*6,#$*#$%056*&-%9#*)#*)*6*&-%#I&GJ#41%+**#$*#5&#-N-5)%#,#$208%#&%$%#F#-%$%(#)%(#$*6?(#*)*6*&-%(#(*05&$,12%(#:5*$,1?&#*&#*)#&2+*)#$*#,&2$,62*&-%#0%11*(4%&$2*&-*;

?)1(12'.:,@1,51/&8,3,&.98D

O2<52*&$%#0%&#&5*(-1%#*C*64)%9#-*&*6%(D

<div class="entrada"> <p class="fechaArticulo">22 de Octubre del 2011</p> <h2>Primer encabezado secundario.</h2>

</div>

B&#*)#03$2<%#,&-*12%1#-*&*6%(#5&,#0),(*#,4)20,$,#,#5&#*)*6*&-%#I@6bJ#:5*#$*>2&*#),#>*08,#$*#457)20,023&#$*#5&#,1-N05)%9#(2&#*67,1<%9#*)#*)*6*&-%#&%#05*&-,#0%&#6,1`0,$%#(*6?&-20%#:5*#)%#1*(4,)$*;#/,#&5*+,#*(4*02>20,023&#!"#$L#41%+**#5&,#(%)5023&#*(4*02>20,#4,1,#*(-*#-24%#$*#(2-5,02%&*(D#*)#*)*6*&-%#I@8'1J;

<time datetime="2011-10-22" pubdate>22 de Octubre del 2011</time>

BG2(-*&#-1*(#4,1-*(#>5&$,6*&-,)*(#$*)#*)*6*&-%#I$,-*JD

S&,#6,10,#$*#-2*64%;]*G-%#$*#0%&-*&2$%;a,&$*1,#4,1,#),#>*08,#$*#457)20,023&#H%402%&,)K;

B&#*(-*#*C*64)%9#*)#,-1275-%#Q@8'1'6(1R#(3)%#*(4*02>20,#5&,#>*08,9#&%#5&,#8%1,;#B)#>%16,-%#5-2)2=,$%#*(D#n#$N<2-%(#4,1,#*)#,T%9#l#$N<2-%(#4,1,#*)#6*(#F#l#$N<2-%(#4,1,#*)#$N,P#-%$%(#(*4,1,$%(#4%1#<52%&*(;

<time datetime="2011-10-22" pubdate>22 de Octubre del 2011</time>

Page 52: HTML5 en Proyectos Reales

################################# !"#$%&$'#&%(#))*+,#-%$%#*(-%.#####&)

O2#$*(*,6%(#2&0)521#-,672'&#),#8%1,9#,<1*<,1*6%(#5&,#)*-1,#Q"R#$*(45'(#$*#),#>*08,#(*<52$,#$*#),#8%1,#$*(*,$,#*&#>%16,-%#$*#ln#8%1,(#F#),#=%&,#8%1,12,#0%11*(4%&$2`*&-*;

<time datetime="2011-10-22T13:59:47-04:00" pubdate> 22 de Octubre del 2011 - 1:59pm EDT

</time>

B(#264%1-,&-*#6*&02%&,1#:5*#*)#>%16,-%#5-2)2=,$%#4,1,#>*08,#F#8%1,#*(#65F#4%0%#>)*G27)*;

/,#A)-26,#42*=,#$*)#1%64*0,7*=,(#*(-?#*&#),#,4)20,023&#$*)#,-1275-%#Q40A@8'1R;#B(#5&#+,)%1#$*#-24%#A..)182#:5*#2&$20,#),#>*08,#$*#457)20,023&P#(2#(*#*&05*&-1,#$*&-1%#$*#5&#*)*6*&-%#I89'6/)1J#&%(#$,1?#),#>*08,#$*#457)20,023&#$*)#,1-N05)%9#(2#*(-?#>5*1,#&%(#$,1?#),#>*08,#$*#457)20,023&#$*#-%$%#*)#$%056*&-%;

<time datetime="2011-10-22" pubdate>22 de Octubre del 2011</time><time datetime="2011-10-22" pubdate="pubdate">22 de Octubre del 2011</time>

"#0%&-2&5,023&#(*#65*(-1,#&5*(-1%#*C*64)%#0%&#*(-,(#&5*+,(#0,1,0-*1N(-20,(D

<article> <header> <time datetime="2011-10-22" pubdate>22 de Octubre del 2011</time> <h1> <a href="#" rel="bookmark" title=”Vínculo al artículo">Primer artículo</a> </h1> </header> <p>Lorem ipsum dolor sit amet...</p>

</article>

l8b1S8/6U2D

S&,#$*#),(#05*(-2%&*(#6?(#264%1-,&-*(#*&#05,):52*1#(2-2%#@*7#*(#),#&,+*<,023&;#V5*(-1%#*C*64)%#05*&-,#0%&#5&,#7,11,#$*#&,+*<,023&#*&#*)#*&0,7*=,$%#:5*#2&0)5F*#+,12%(#*&),0*(#,#$2>*1*&-*(#(*002%&*(#HQW&202%R9#Qa)%<R9#Qe,)*1N,R#F#Q"0*10,#$*RK;

Page 53: HTML5 en Proyectos Reales

E,4N-5)%#-1*(#####&*

/,#*(-150-51,#$*#),#7,11,#$*#&,+*<,023&#*(D

<div id="nav"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Galería</a></li> <li><a href="#">Acerca de</a></li> </ul>

</div>

B)#03$2<%#,&-*12%1#*(#+?)2$%#4,1,#!"#$L9#(2&#*67,1<%9#&%#*G2(-*#(*6?&-20,#,)<5&,#:5*#&%(#2&$2:5*#:5*#),#)2(-,#&%#%1$*&,$,#>%16,#4,1-*#$*#),#&,+*<,023&#$*)#(2-2%;#/,#&5*+,#*(4*02>20,023&#!"#$L#41%+**#5&#*)*6*&-%#:5*#$*-*162&,#5&,#(*0023&#*(4*02>20,#4,1,#),#&,+*<,023&9#*)#*)*6*&-%#I28bJ;

<nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Galería</a></li> <li><a href="#">Acerca de</a></li> </ul>

</nav>

>6m,@1,4dS628D

"8%1,#,&,)2=,1*6%(#),#A)-26,#4,1-*#$*#&5*(-1%#*C*64)%9#*)#42*#$*#4?<2&,;

<div id="footer"> <p>&#169; 2011 - <a href="#">tidyKite</a></p></div>

B)#03$2<%#,&-*12%1#*(#+?)2$%#4,1,#!"#$L9#(2&#*67,1<%9#),#&5*+,#*(4*02>20,023&#41%+**#*)*6*&-%(#*(4*0N>20%(#4,1,#*(-*#-24%#$*#(*002%&*(D#*)#*)*6*&-%#I5..'19J;

<footer> <p>&#169; 2011 - <a href="#">tidyKite</a></p>

</footer>

S&#42*#$*#4?<2&,#<*&*1,)6*&-*#0%&-2*&*#2&>%16,023&#,0*10,#$*)#,5-%19#*&),0*(#,#$%056*&-%(#1*),02%&,$%(9#$,-%(#$*#0%&-,0-%#F#-'162&%(#$*)#0%&-1,-%#$*#)20*&02,;

Page 54: HTML5 en Proyectos Reales

!"#$%&'()!&"%*(

+'),',-,.%()/".0"1

Page 55: HTML5 en Proyectos Reales

!"#$"$%$&'(#)*&+*,#####!"##############################

-*#&.$+*#$,/$01210*013&#!"#$%#4$21&$#*"#0(%/(&$&'$#5&'()'*6#0(%(#7.&#"1$&8(#4$#%*/*#4$#91',#4$#:$,(".013&#4$/$&41$&'$#.'1"18*4(#/*:*#"*#:$/:$,$&'*013&#4$#;:<210(,=#+14$(>.$;(,#?#(':(,#$"$%$&'(,#+1,.*"$,#$&#'1$%/(#4$#$>$0.013&@A#!"#$"$%$&'(#5&'()'*6#&(#$,#%<,#B.$#.&#:$0'<&;."(#1&0:.,'*4(#$&#&.$,':*#/<;1&*#C$9#4(&4$#/(4$%(,#419.>*:#0.*"B.1$:#0(,*#%$41*&'$#$"#.,(#4$#+')',&-./0A

!,#/(,19"$#'$&$:#+*:1(,#$"$%$&'(,#5&'()'*6#$&#"*#%1,%*#/<;1&*A#)*4*#$"$%$&'(#5&'()'*6#'$&4:<#,.#/:(/1(#$,'*4(#?#,$:<#%(,':*4(#$&#$"#12##D$,#/(,19"$#*00$4$:#*#0*4*#1&,'*&01*#;$&$:*4*#*#':*+E,#4$"#*':19.'(#7.3@FA

)(%$&8*:$%(,#/(:#%*B.$'*:#.&#"1$&8(#$&#$"#0.*"#419.>*:$%(,#&.$,':(#/:1%$:#$>$%/"(G

<canvas width=”300” height=”225”></canvas>#

H*:*#/(4$:#*00$4$:#*#&.$,':(#$"$%$&'(#5&'()'*6#"$#*&$I*:$%(,#.&#*':19.'(#7.3@#0(&#,.#+*"(:#0(::$,/(&41$&'$G

<canvas id=”canvas001” width=”300” height=”225”></canvas>

J$#$,'*#%*&$:*#,$:<#%.?#2<01"#$&0(&':*:#&.$,':(#0(%/(&$&'$#5&'()'*6#$&#$"#12#A

var canvas001= document.getElementById(“canvas001”);

1.45+'(3678.95-'*7*.:/;<*=

)*4*#$"$%$&'(#5&'()'*6#0(%1$&8*#0(%(#.&#"1$&8(#$&#9"*&0(A#H(&;*%(,#%*&(,#*#"*#(9:*#/*:*#;$&$:*:#.&#%*&$>*4(:#4$#'1/(#76(&;.&>@#B.$=#*#':*+E,#4$"#""*%*4(#*#.&*#2.&013&=#419.>$#.&#:$0'<&;."(A

function dibujarRectangulo() {var canvas001 = document.getElementById("canvas001");var contexto001 = canvas001.getContext("2d");contexto001.fillRect(50,25,150,100);

}

+'),',-,.%()/".0"12

Page 56: HTML5 en Proyectos Reales

-*#/:1%$:*#"K&$*#4$#"*#2.&013&#&(#$,#&*4*#$,/$01*"L#,1%/"$%$&'$#:$*"18*#"*#9M,B.$4*#4$"#$"$%$&'(#5&'()'*6#$&#$"#12#A#N#/*:'1:#4$#"*#,$;.&4*#"K&$*#$"#$>$%/"(#,$#'(:&*#1&'$:$,*&'$A#)*4*#$"$%$&'(#5&'()'*6#/(,$$#.&#0(&'$I'(#4$#419.>(#D*#':*+E,#4$"#0.*"#/(4$%(,#;$&$:*:#0.*"B.1$:#$"$%$&'(#;:<210(FA#O&*#+$8#B.$#P$%(,#"(0*"18*4(#*"#$"$%$&'(#5&'()'*6#$&#$"#12##D.,*&4(#$"#%E'(4(#4(0.%$&'A;$'!"$%$&'Q?R4DFF#4$9$%(,#:$*"18*:#.&*#""*%*4*#*"#%E'(4(#9<0?6(0<@0AB#/*,*&4(#"*#0*4$&*#7C3@#0(%(#/*:<%$':(A

function dibujarRectangulo() {var canvas001 = document.getElementById("canvas001");var contexto001 = canvas001.getContext("2d");contexto001.fillRect(50,25,150,100);

}

DE*7/6*.4;<750.;.F'-75(7&6(0<@0673<73.45+67G17<(75(7<;<:<(067

H&'()'*IJ

S*,'*#$,'$#%(%$&'(#&(#$,#/(,19"$A#-*#$,/$01210*013&#!"#$%#*M&#&(#$,'<#$,'*&4*:18*4*=#/(:#"(#B.$#0*4*#2*9:10*&'$#,$#$&0.$&':*#$&#/:(0$,(#4$#$I/$:1%$&'*013&#0(&#,.#/:(/1*#KLM#4$#419.>(#':141%$&,1(&*"#$&#5&'()'*6A

!"#0(&'$I'(#$,#4(&4$#,$#4$21&1:<&#'(4(,#"(,#%E'(4(,#?#/:(/1$4*4$,#4$#419.>(A#!I1,'$#.&#0(%/"$'(#0(&>.&'(#4$#/:(/1$4*4$,#?#%E'(4(,#/*:*#$"#':*8*4(#4$#:$0'<&;."(,A

-*#/:(/1$4*4#78.;;,0N;<@#/.$4$#0(&'$&$:#.&#0("(:#$&#2(:%*'(#P$I*4$01%*"#0(%(#$&#?,,=#.&#/*':3&#(#.&#4$;:*4*4(A#T.#+*"(:#/(:#4$2$0'(#$,#7*6;.374;'&>7O7*P;.367(<9-6@=#/$:(#$,#/(,19"$#0*%91*:"(#/(:#$"#+*"(:#4$,$*4(A#J$9$%(,#'(%*:#$&#0.$&'*#B.$#0*4*#0(&'$I'(#4$#419.>(#%*&'1$&$#,.,#/:(/1$4*4$,#%1$&':*,#"*#/<;1&*#C$9#$,'E#*91$:'*=#(#P*,'*#B.$#.&#*;$&'$#$I'$:&(#:$1&101$#*"#$"$%$&'(#5&'()'*6A

78.;;Q<&[email protected]<.9T0B@#419.>*#.&#:$0'<&;."(#0(&#:$""$&(#.'1"18*&4(#$"#$,'1"(#*0'.*"#4$21&14(#$&#"*#/:(/1$4*4#78.;;,0N;<@A

-*#/:(/1$4*4#7*0-6><,0N;<@#$,#,1%1"*:#*#78.;;,0N;<@=#/.$4$#0(&'$&$:#.&#0("(:#$&#2(:%*'(#P$I*4$01%*"#0(%(#$&#)TT=#.&#/*':3&#(#.&#4$;:*4*4(A

7*0-6><Q<&[email protected]<.9T0B@#419.>*#.&#:$0'<&;."(#,1&#:$""$&(#.'1"18*&4(#$"#+*"(:#4$21&14(#$&#7*0-6><,0N;<@#/*:*#"(,#9(:4$,A

7&;<'-Q<&[email protected]<.9T0B@#"1%/1*#(#9(::*#"(,#/1I$"$,#0(&'$&14(,#$&#"*#,$0013&#4$21&14*A

############################## )*/K'."(#0.*':(#####!##################

Page 57: HTML5 en Proyectos Reales

#################

DE*7/6*.4;<7-<.(.&.'-75(7<;<:<(067H&'()'*IJ

T1A#N"#*>.,'*:#$"#*&0P(#(#$"#*"'(#4$#.&#$"$%$&'(#5&'()'*6#,$#$"1%1&*:<#'(4(#,.#0(&'$&14(#?#'(4*,#"*,#/:(/1$4*4$,#*,(01*4*,#*"#0(&'$I'(#4$#419.>(#,$#:$1&101*"18*:<&#*#,.,#+*"(:$,#/:$4$'$:%1&*4(,A#U(#$,#&$0$,*:1(#0*%91*:#$"#+*"(:#4$"#*&0P(#(#*"'(=#9*,'*#0(&#$,'*9"$0$:#$"#+*"(:#*0'.*"A#V$*%(,#.&#$>$%/"(G

var = canvas001 = document.getElementById(“canvas001”);canvas001.width = canvas001.width;

W$;:$,*&4(#*#&.$,':(#0341;(#4$#$>$%/"(G

function dibujarRectangulo() {var canvas001 = document.getElementById("canvas001");var contexto001 = canvas001.getContext("2d");contexto001.fillRect(50,25,150,100);

}

N"#""*%*:#*"#%E'(4(#78.;;Q<&0AB@#,$#419.>*:<#.&#:$0'<&;."(#:$""$&(#0(&#"(,#+*"(:$,#*0'.*"$,#4$21&14(,#/*:*#78.;;,0N;<@#D/(:#4$2$0'(#&$;:(FA#!"#:$0'<&;."(#$&#0.$,'13&#$,'*:<#4$"1%1'*4(#/(:#"*#$,B.1&*#,./$:1(:#18B.1$:4*#DXY=#ZXF=#.&#*&0P(#4$#D[XYF#?#.&*#*"'.:*#4$#D[YYFA#H*:*#'$&$:#.&*#%$>(:#/$:,/$0'1+*#4$#03%(#':*9*>*#$"#$"$%$&'(#5&'()'*6#4$%(,#.&#+1,'*8(#*"#,1,'$%*#4$#0((:4$&*4*,#B.$#%*&$>*A

!"#$"$%$&'(#)*&+*,#####!$#################

Page 58: HTML5 en Proyectos Reales

#################

!"#$"$%$&'(#5&'()'*6#&(#$,#%<,#B.$#.&*#0.*4:10."*#4$#4(,#41%$&,1(&$,A#-*,#0((:4$&*4*,#DY=YF#,$#,1'M*&#$&#"*#$,B.1&*#,./$:1(:#18B.1$:4*#4$"#0(%/(&$&'$A#N#"(#"*:;(#4$"#$>$#7\@#"(,#+*"(:$,#,$#1&0:$%$&'*&#P*,'*#'(/*:#0(&#$"#9(:4$#4$:$0P(=#%1$&':*,#B.$#$&#$"#$>$#7]@#"(,#+*"(:$,#,$#1&0:$%$&'*&#P*,'*#$"#9(:4$#1&2$:1(:#4$"#%1,%(A

-*#,1;.1$&'$#21;.:*#%.$,':*#.&#41*;:*%*#4$#0((:4$&*4*,#B.$#,$#$"*9(:3#*#':*+E,#4$"#.,(#4$#5&'()'*6A#J10P(#41*;:*%*#,$#0(%/(&$#4$G

O&#0(&>.&'(#4$#"K&$*,#+$:'10*"$,#?#P(:18(&'*"$,#B.$#,1%."*&#.&#0.*4:10."*4(AJ(,#"K&$*,#P(:18(&'*"$,#$&#0("(:#&$;:(AJ(,#"K&$*,#41*;(&*"$,#/$B.$^*,#$&#0("(:#&$;:(#B.$#2(:%*&#.&*#2"$0P*AJ(,#"K&$*,#+$:'10*"$,#$&#0("(:#&$;:(AJ(,#"K&$*,#41*;(&*"$,#/$B.$^*,#$&#0("(:#&$;:(#B.$#2(:%*&#.&*#2"$0P*A-*#"$':*#7I@A-*#"$':*#7?@A!"#'$I'(#7DY=YF@#0$:0*&(#*#"*#$,B.1&*#,./$:1(:#18B.1$:4*A!"#'$I'(#7DXYY=_`XF@#0$:0*&(#*#"*#$,B.1&*#1&2$:1(:#4$:$0P*AO&#/.&'(#$&#"*#$,B.1&*#,./$:1(:#18B.1$:4*#?#(':(#$&#"*#$,B.1&*#1&2$:1(:#4$:$0P*A

)*/K'."(#0.*':(#####!%#################################

341%,-")5,)!((*5,."5"1)5,'),',-,.%()6!".0"172

Page 59: HTML5 en Proyectos Reales

#################################

N#0(&'1&.*013&#4$,0:191:$%(,#"*#%*&$:*#4$#419.>*:#"*#21;.:*#*&'$:1(:A

-(#/:1%$:(#B.$#4$9$%(,#P*0$:#$,#4$21&1:#$"#*&0P(#DS.30TF#?#*"'(#DT<.9T0F#4$"#$"$%$&'(#5&'()'*6#*#.'1"18*:A

<canvas id=”canvasCoordenadas” height=”375” width=”500”></canvas>

!&,$;.14*#;$&$:*:$%(,#.&#,0:1/'#/*:*#"(0*"18*:#*"#$"$%$&'(#5&'()'*6#$&#$"#12##?#4$,/.E,#*,1;&*:"$#.&#0(&'$I'(#4$#419.>(A

var canvasCoordenadas = document.getElementById("canvasCoordenadas");var contextoCoordenadas = canvasCoordenadas.getContext("2d");

NP(:*#0(%$&8*%(,#*#419.>*:#0*4*#"K&$*#?#"(,#$"$%$&'(,#:$,'*&'$,A

8*"9"5(1-*#2(:%*#4$#0(%$&8*:#*#0:$*:#$"$%$&'(,#;:<210(,#$&#5&'()'*6#$,#*#':*+E,#4$#"*#;$&$:*013&#4$#':*?$0'(:1*,#D0(%$&8*%(,#;$&$:*&4(#9(0$'(,#*#"</18#/*:*#4$,/.E,#':*8*:"(,#4$#%*&$:*#4$21&1'1+*#0(&#$"#.,(#4$#'1&'*FA

H*:*#,1%."*:#$"#':*8*4(#4$#"K&$*,#*#"</18#.'1"18*:$%(,G

:6)<"6A@R7NB#a#b.$+$#"*#/.&'*#4$"#"</18#*#.&#4$'$:%1&*4(#/.&'(#4$#/*:'14*A;.(<"6A@R7NB#a#J19.>*#.&*#"K&$*#P*,'*#$"#/.&'(#$,/$01210*4(A

!&':$#%<,#.'1"10$%(,#"*,#2.&01(&$,#:6)<"6AB#?#;.(<"6AB#%*?(:#,$:<#"*#:.'*#;$&$:*4*#/*:*#&.$,':(#':*8*4(A#U(#("+14$%(,#B.$#$,'*,#2.&01(&$,#&(#'1$&$&#:$/:$,$&'*013&#;:<210*#$&#5&'()'*6#P*,'*#B.$#,$#.'1"10$&#%E'(4(,#/*:*#"*#*/"10*013&#4$#'1&'*A

)(%$&0$%(,#0(&#$"#':*8*4(#4$#"*#0.*4:K0."*G

for(var x=0.5; x<500; x+=10) {contextoCoordenadas.moveTo(x, 0);contextoCoordenadas.lineTo(x, 375);

}for(var y=0.5; y<375; y+=10) {

contextoCoordenadas.moveTo(0, y);contextoCoordenadas.lineTo(500, y);

}

!"#$"$%$&'(#)*&+*,#####!&#################

Page 60: HTML5 en Proyectos Reales

W$0(:4$%(,#B.$#"*,#2.&01(&$,#*&'$:1(:%$&'$#.'1"18*4*,#,(&#%E'(4(,#/*:*#7':*8*4(#$&#"</18@=#/(:#"(#B.$#&(#P*9:<#:$/:$,$&'*013&#;:<210*#$&#&.$,':(#$"$%$&'(#5&'()'*6#P*,'*#B.$#,$#.'1"10$&#%E'(4(,#4$#7'1&'*@A

0(&'$I'()((:4$&*4*,A,':(c$T'?"$#d#7e$$$@L0(&'$I'()((:4$&*4*,A,':(c$DFL

!"#%E'(4(#7*0-6><AB@#,$#4$21&$#0(%(#4$#'1/(#7'1&'*@#?#$,#$"#$&0*:;*4(#4$#'(%*:#'(4(,#"(,#':*8*4(,#*&'$:1(:%$&'$#4$21&14(,#0(&#"*,#2.&01(&$,#7:6)<"6@#?#7;.(<"6@#/*:*#':*8*:"(,#4$#%*&$:*#/$:%*&$&'$#$&#$"#0(%/(&$&'$#5&'()'*6A#-*#/:(/1$4*4#7*0-6><U,0N;<@#0(&':("*#$"#0("(:#4$#"*,#"K&$*,#*#419.>*:A#N#0(&'1&.*013&#,$#%.$,':*#$"#:$,."'*4(G

NP(:*#419.>*:$%(,#"*#2"$0P*#P(:18(&'*"A#f(4*,#"*,#"K&$*,#?#0.:+*,#B.$#0(&2(:%*&#.&#':*8*4(#,$:<&#419.>*4*,#$&#$"#%1,%(#0("(:=#4$21&14(#*&'$,#4$"#%E'(4(#D*0-6><ABF#7'1&'*@A#!&#&.$,':(#$>$%/"(#4$,$*%(,#'$&$:#.&#$,'1"(#4$#"K&$*#412$:$&'$#/(:#"(#B.$#&$0$,1'*%(,#0(%$&8*:#.&#&.$+(#':*8*4(A

)*/K'."(#0.*':(#####!!###############################

Page 61: HTML5 en Proyectos Reales

###############################

contextoCoordenadas.beginPath();contextoCoordenadas.moveTo(0, 40);contextoCoordenadas.lineTo(240, 40);contextoCoordenadas.moveTo(260, 40);contextoCoordenadas.lineTo(500, 40);contextoCoordenadas.moveTo(495, 35);contextoCoordenadas.lineTo(500, 40);contextoCoordenadas.lineTo(495, 45);

!"#':*8*4(#4$#"*#2"$0P*#+$:'10*"#$,#%.?#,1%1"*:#?#/*:'1$&4(#4$"#P$0P(#4$#B.$#,$:<#4$"#%1,%(#0("(:#B.$#"*#"K&$*#P(:18(&'*"=#&(#$,#&$0$,*:1(#0(%$&8*:#.&#&.$+(#':*8*4(A#-*,#4(,#2"$0P*,#,(&#/*:'$#4$"#%1,%(#9(0$'(A

contextoCoordenadas.moveTo(60, 0); contextoCoordenadas.lineTo(60, 153); contextoCoordenadas.moveTo(60, 173); contextoCoordenadas.lineTo(60, 375); contextoCoordenadas.moveTo(65, 370); contextoCoordenadas.lineTo(60, 375); contextoCoordenadas.lineTo(55, 370);

!&#&.$,':(#$>$%/"(#"*,#"K&$*,#*&'$:1(:$,#,$:<&#':*8*4*,#$&#0("(:#&$;:(A#W$0(:4$%(,#B.$#$"#+*"(:#4$#7*0-6><,0N;<@#B.$43#4$21&14(#$&#0("(:#;:1,#D78.;;,0N;<@#?#7*0-6><,0N;<@#&(#:$;:$,*&#*#,.,#+*"(:$,#/(:#4$2$0'(#*"#0(%$&8*:#.&#&.$+(#':*8*4(FA#T1#4$,$*%(,#4$21&1:#.&#&.$+(#0("(:#/*:*#410P*,#"K&$*,#'$&4:$%(,#B.$#,(9:$,0:191:#$"#+*"(:#/*:*#7*0-6><,0N;<@#4$#"*#,1;.1$&'$#2(:%*G

contextoCoordenadas.strokeStyle = "#000"; contextoCoordenadas.stroke();

!&#"*#,1;.1$&'$#21;.:*#,$#%.$,':*#$"#:$,."'*4(G

!"#$"$%$&'(#)*&+*,#####!'################

Page 62: HTML5 en Proyectos Reales

################

8,:%(N4$%<,#4$#419.>*:#"K&$*,#?#':*8*4(,#$&#5&'()'*6=#'*%91E&#$,#/(,19"$#*^*41:#'$I'(A#N#412$:$&01*#4$"#'$I'(#1&0:.,'*4(#$&#.&*#/<;1&*#C$9=#$"#'$I'(#4$&':(#4$#5&'()'*6#&(#,$#+$#*2$0'*4(#/(:#$"#%(4$"(#4$#0*>*,=#/(:#"(#B.$#$"#.,(#4$#'E0&10*,#?,,#$,#&."(A#H*:'1:$%(,#4$"#P$0P(#4$#$,'*9"$0$:#.&#'1/(#4$#"$':*=#*";.&(,#*':19.'(,=#,$"$001(&*:#.&#/.&'(#4$#/*:'14*#$&#&.$,':(#"1$&8(#$#1&0:.,'*:#$"#'$I'(#*PKA

-(,#,1;.1$&'$,#*':19.'(,#4$#2.$&'$#$,'<&#41,/(&19"$#$&#$"#0(&'$I'(#4$#419.>(G

86(0#a#R&0".?$#$,'1"(#4$#2.$&'$=#+*:1*&'$=#;:(,(:=#'*%*^(=#$,/*01*4(#4$#"K&$*#?#2*%1"1*A0<@0K;.9(#a#)(&':("*#"*#*"1&$*013&#4$"#'$I'(A#!,#,1%1"*:#*#"*#:$;"*#0<@0U';.9(#$&#?,,A#J$&':(#4$#"(,#+*"(:$,#/(,19"$,#/*:*#$,'$#*':19.'(#$,'<&G#*0'-0=#<(3=#;<80=#-.9T0#?#&<(0<-A0<@0V'*<;.(<#a#)(&':("*#"*#/(,1013&#4$"#'$I'(#0(&#9*,$#$&#$"#/.&'(#4$#/*:'14*#$,/$01210*4(A#J$&':(#4$#"(,#+*"(:$,#/(,19"$,#/*:*#$,'$#*':19.'(#$,'<&G#06/=#T'(9.(9=#:.33;<=#';/T'4<0.&=#.3<69-'/T.&#?#46006:A

H*:*#*"2*9$'(,#,1%/"$,#0(%(#$"#.,*4(#$&#$"#141(%*#R&;"E,#$,#,$;.:(#.'1"18*:#06/=#:.33;<#(#46006:#0(%(#+*"(:$,#/*:*#"*#/:(/1$4*4#0<@0V'*<;.(<A

!"#'$I'(#1&0:.,'*4(#4$&':(#4$#.&#$"$%$&'(#5&'()'*6#P$:$4*#$"#'*%*^(#4$#2.$&'$#?#$"#$,'1"(#*,(01*4(,#*#,.#0(&'$&$4(:#D$"#%1,%(#0(%/(&$&'$#5&'()'*6FA#U(#("+14$%(,#B.$#$,#/(,19"$#,(9:$,0:191:#$"#+*"(:#4$#"*#/:(/1$4*4#2(&'#$&#$"#0(&'$I'(#4$#419.>(G

contextoCoordenadas.font = “bold 12px sans-serif”;contextoCoordenadas.fillText(“x”, 248, 43);contextoCoordenadas.fillText(“y”, 58, 165);

!"#%E'(4(#21""f$I'#1&0:.,'*#$"#'$I'(#B.$#,$#/*,*#0(%(#*:;.%$&'(A

contextoCoordenadas.font = “bold 12px sans-serif”;contextoCoordenadas.fillText(“x”, 248, 43);contextoCoordenadas.fillText(“y”, 58, 165);

DE*7/6*.4;<750.;.F'-70':'W6*73<785<(0<7-<;'0.)6*7/'-'70<@067<(7

&'()'*J

T1A#)(%(#$&#0.*"B.1$:#(':(#$"$%$&'(#!"#$=#$"#$"$%$&'(#5&'()'*6#0*"0."*#$"#'*%*^(#4$#2.$&'$#*#.'1"18*:#0(&#9*,$#$&#"*,#:$;"*,#?,,#*,(01*4*,#*#&.$,':*#/<;1&*A#T1#,$#$,'*9"$0$#.&#'*%*^(#4$#2.$&'$#:$"*'1+(#/*:*#$"#+*"(:#$&#"*#/:(/1$4*4#&6(0<@0=86(0#D/(:#$>$%/"(G#[AX$%#3#[XYgF=#$"#&*+$;*4(:#"(#%."'1/"10*:<#/(:#$"#'*%*^(#4$#2.$&'$#4$"#$"$%$&'(#5&'()'*6#*2$0'*4(A

)*/K'."(#0.*':(#####!(#################################

Page 63: HTML5 en Proyectos Reales

#################################

0(&'$I'()((:4$&*4*,A'$I'Q*,$"1&$#d#h'(/hL#0(&'$I'()((:4$&*4*,A21""f$I'DhD#Y#=#Y#Fh=#i=#XFL0(&'$I'()((:4$&*4*,A'$I'N"1;&#d#h:1;P'hL#0(&'$I'()((:4$&*4*,A'$I'Q*,$"1&$#d#h9(''(%hL#0(&'$I'()((:4$&*4*,A21""f$I'DhD#XYY#=#_`X#Fh=#jkZ=#_`YFL

H*:*#"(,#/.&'(,#,1'.*4(,#$&#"*,#$,B.1&*,#,./$:1(:#18B.1$:4*#$#1&2$:1(:#4$:$0P*#419.>*:$%(,#4(,#:$0'<&;."(,#/$B.$^(,#.'1"18*&4(#$"#,1;.1$&'$#0341;(G

contextoCoordenadas.fillRect(0, 0, 3, 3); contextoCoordenadas.fillRect(497, 372, 3, 3);

-*#+1,'*#21&*"#4$#&.$,':(#$>$:0101(#,$#%.$,':*#$&#"*#,1;.1$&'$#21;.:*A

!"#$"$%$&'(#)*&+*,#####!)################

Page 64: HTML5 en Proyectos Reales

;,<*"5"5(1

!&#$,'*#,$0013&#*/:$&4$:$%(,#0(%(#419.>*:#.&#:$0'<&;."(#0(&#:$""$&(#4$;:*4*4(A

)(%$&8*%(,#/(:#0:$*:#.&*#1&,'*&01*#4$#5&'()'*6#B.$#.'1"18*:$%(,#0(%(#"1$&8(#/*:*#&.$,':(#$>$%/"(A

<canvas id=”canvasDegradado” width=”300” height=”225”></canvas>

!&,$;.14*#;$&$:*%(,#.&#,0:1/'#4$#9M,B.$4*#4$"#$"$%$&'(#5&'()'*6=#/*:*#4$,/.E,#*,1;&*:"$#.&#0(&'$I'(#4$#419.>(A

var canvasDegradado = document.getElementById(“canvasDegradado”);var contextoDegradado = canvasDegradado.getContext(“2d”);

O&*#+$8#$,'*9"$014(#$"#0(&'$I'(#4$#419.>(=#0(%$&8*%(,#/(:#4$21&1:#$"#4$;:*4*4(#*#.'1"18*:A

O&#4$;:*4*4(#,$#4$21&$#0(%(#"*#':*&,1013&#,.*+$#$&':$#4(,#(#%<,#0("(:$,A#!"#$"$%$&'(#5&'()'*6#,(/(:'*#4(,#'1/(,#4$#4$;:*4*4(,G

1<9-'3'367;.(<';#O7&-<'0<$.(<'-X-'3.<(0A@YR7NYR7@ZR7NZB#a#f:*&,1013&#4$#0("(:#*#"(#"*:;(#4$#"*#"K&$*#4$"1%1'*4*#$&':$#DIY=#?YF#?#DI[=#?[FA1<9-'3'367-'3.';7O7&-<'0<Q'3.';X-'3.<(0A@YR7NYR7-YR7@ZR7NZR7-ZB#a#f:*&,1013&#4$#0("(:#*#"(#"*:;(#4$#.&#0(&(#4$"1%1'*4(#/(:#4(,#0K:0."(,A#-(,#':$,#/:1%$:(,#/*:<%$':(,#:$/:$,$&'*&#*"#0K:0."(#1&101*"=#0(&#(:1;$&#$&#DIY=#?YF#?#:*41(#D:YFA#-(,#':$,#M"'1%(,#/*:<%$':(,#:$/:$,$&'*&#*"#0K:0."(#21&*"=#0(&#(:1;$&#$&#DI[=#?[F#?#:*41(#D:[FA

)(%$&8*%(,#*#;$&$:*:#.&#4$;:*4*4(#"1&$*"A#U(#4$9$%(,#("+14*:#B.$#"(,#4$;:*4*l4(,#/.$4$&#,$:#4$#0.*"B.1$:#'*%*^(#D/*:*#&.$,':(#$>$%/"(#(0./*:$%(,#_YY#/KI$"$,#4$#*&0P(=#$"#[YYg#4$"#*&0P(#4$#&.$,':(#$"$%$&'(#5&'()'*6FA

var degradadoLineal = contextoDegradado.createLinearGradient(0, 0, 300, 0);

)(%(#/(4$%(,#(9,$:+*:=#"(,#+*"(:$,#/*:*#$"#$>$#7]@#D/*:<%$':(,#Z#?#jF#'1$&$&#*,1;&*4(#.&#+*"(:#4$#0$:(=#(0*,1(&*&4(#B.$#$"#4$;:*4*4(#,$#4$,/"*0$#4$#18B.1$:4*#*#4$:$0P*A

)*/K'."(#0.*':(#####!*#################################

Page 65: HTML5 en Proyectos Reales

#################################

O&*#+$8#B.$#'$&$%(,#$"#(9>$'(#?#"*#2(:%*#4$"#4$;:*4*4(#/:(0$4$%(,#*#4$21&1:#"(,#0("(:$,#*#.'1"18*:A#O&#4$;:*4*4(#,$#0(%/(&$#4$#4(,#(#%<,#$'*/*,#4$#0("(:#D"*,#0.*"$,#/.$4$&#$,'*:#,1'.*4*,#$&#0.*"B.1$:#/.&'(#*#"(#"*:;(#4$"#<:$*#+1,.*"#4$"#4$;:*4*4(FA#H*:*#*;:$;*:#.&*#$'*/*#4$#0("(:=#$,#&$0$,*:1(#$,/$01210*:#,.#/(,1013&#D$&':$#Y#?#[FA

!&#&.$,':(#$>$%/"(#0:$*:$%(,#.&#4$;:*4*4(#4$#&$;:(#*#9"*&0(A

degradadoLineal.addColorStop(0, “black”);degradadoLineal.addColorStop(1, “white”);

-*#4$21&1013&#4$#.&#4$;:*4*4(#&(#'1$&$#:$/:$,$&'*013&#;:<210*#$&#$"#$"$%$&'(#5&'()'*6=#$,#&$0$,*:1(#*,1;&*:"(#*#"*#/:(/1$4*4#78.;;,0N;<@#?#/:(,$;.1:#0(&#"*#0:$*013&#4$#.&*#21;.:*#D.&#:$0'<&;."(#(#.&*#"K&$*#/(:#$>$%/"(FA

contextoDegradado.fillStyle = degradadoLineal;contextDegradado.fillRect(0, 0, 300, 225);

T1#:$B.$:1%(,#.&#4$;:*4*4(#4$#*::19*#P*01*#*9*>(=#0:$*%(,#$"#(9>$'(#4$;:*4*4(#%*&'$&1$&4(#"(,#+*"(:$,#4$#7I@#0(&,'*&'$,#D/*:<%$':(,#.&(#?#':$,F#?#*,1;&*:$%(,#+*"(:$,#/*:*#7?@#$&':$#Y#?#"*#*"'.:*#4$#&.$,':(#$"$%$&'(#5&'()'*6A

var degradadoLineal = contextoDegradado.createLinearGradient(0, 0, 0, 225);degradadoLineal.addColorStop(0, "black"); degradadoLineal.addColorStop(1, "white"); contextoDegradado.fillStyle = degradadoLineal;contextoDegradado.fillRect(0, 0, 300, 225);

!"#$"$%$&'(#)*&+*,#####'"################

Page 66: HTML5 en Proyectos Reales

)*/K'."(#0.*':(#####'##################################

f*%91E&#$,#/(,19"$#0:$*:#4$;:*4*4(,#$&#41*;(&*"A

var degradadoLineal = contextoDegradado.createLinearGradient(0, 0, 300, 225);degradadoLineal.addColorStop(0, "black"); degradadoLineal.addColorStop(1, "white"); contextoDegradado.fillStyle = degradadoLineal;contextoDegradado.fillRect(0, 0, 300, 225);

Page 67: HTML5 en Proyectos Reales

#################################

=-><,.,12)!"#0(&'$I'(#4$#419.>(#4$"#$"$%$&'(#5&'()'*6#4$21&$#+*:1(,#%E'(4(,#/*:*#%(,':*:#.&*#1%*;$&A

3-'SM:'9<A.:'9<(R73@R73NB#a#f(%*#.&*#1%*;$&#?#"*#1&0:.,'*#$&#$"#$"$%$&'(#50*&+*,6A#-(,#+*"(:$,#74I@#?#74?@#,$#'(%*:<&#0(%(#"*,#0((:4$&*4*,#/*:*#"*#$,B.1&*#,./$:1(:#18B.1$:4*#4$#"*#1%*;$&A#H(:#$>$%/"(=#"*,#0((:4$&*4*,#DY=YF#1&0:.,'*:<&#"*#1%*;$&#$&#"*#$,B.1&*#,./$:1(:#18B.1$:4*#4$"#0(%/(&$&'$A3-'SM:'9<A.:'9<(R73@R73NR73SR73TB#a#N/"10*#.&*#$,0*"*#*#"*#1%*;$&#0(&#9*,$#*"#*&0P(#4$21&14(#$&#74m@#?#*"#*"'(#$&#74P@L#/*:*#4$,/.E,=#1&0:.,'*:"*#$&#"*,#0((:4$&*4*,#D4I=#4?FA3-'SM:'9<A.:'9<(R7*@R7*NR7*SR7*TR73@R73NR73SR73TB7a#W$0(:'*#"*#1%*;$&#0(&'$&14*#4$&':(#4$"#:$0'<&;."(#2(:%*4(#/(:#7,I@=#7,?@=#7,m@=#7,P@#/*:*#4$,/.E,#$,0*"*:"*#0(&#9*,$#*#"(,#+*"(:$,#74m@#?#74P@#$#1&0:.,'*:"*#$&#"*,#0((:4$&*4*,#D4I=#4?FA

-*#$,/$01210*013&#!"#$%#4$21&$#*#"(,#/*:<%$':(,#4$#3-'SM:'9<AB#0(%(#,1;.$G

!"#:$0'<&;."(#(:1;$&#$,#$"#<:$*#4$"1%1'*4*#D4(&4$#:$,14$#"*#1%*;$&F#0.?*,#$,B.1&*,#2(:%*&#"(,#0.*':(#/.&'(,#4$21&14(,#/(:#D,I=#,?F=#D,In,m=#,?F=#D,In,m=#,?n,PF=#D,I=#,?n,PFA

!"#:$0'<&;."(#4$,'1&(#$,#$"#<:$*#4$"1%1'*4*#D4$&':(#4$"#0(%/(&$&'$#5&'()'*6F#0.?*,#$,B.1&*,#2(:%*&#"(,#0.*':(#/.&'(,#4$21&14(,#/(:#D4I=#4?F=#D4In4m=#4?F=#D4In4m=#4?n4PF=#D4I=#4?n4PFA

-*#,1;.1$&'$#21;.:*#%.$,':*#.&*#:$/:$,$&'*013&#;:<210*#4$#410P(,#/*:<%$':(,G

!"#$"$%$&'(#)*&+*,#####'$################

Page 68: HTML5 en Proyectos Reales

)*/K'."(#0.*':(#####'%#################################

!,#/(,19"$#1&0:.,'*:#.&#$"$%$&'(#!"#$#5.:96#4$&':(#4$#.&#0(%/(&$&'$#5&'()'*6#(#;$&$:*:#.&#(9>$'(#4$#'1/(#M:'9<#0(&#+')',&-./0A#J$#0.*"B.1$:#2(:%*=#$,#&$0$,*:1(#*,$;.:*:,$#4$#B.$#"*#1%*;$&#$,'E#0(%/"$'*%$&'$#0*:;*4*#*&'$,#4$#/(4$:#1&0:.,l'*:"*A

T1#.,*%(,#.&#$"$%$&'(#5.:96#$I1,'$&'$=#$,#,$;.:(#B.$#"*#1%*;$&#,$#1&0:.,'$#$&#$"#0(%/(&$&'$#5&'()'*6#*"#$>$0.'*:,$#$"#$+$&'(#S.(36S=6(;6'3A

window.onload = function() { var canvasImagenes = document.getElementById("canvasImagenes"); var contextoImagenes = canvasImagenes.getContext("2d"); var logotipoHTML5 = document.getElementById("logotipoHTML5"); contextoImagenes.drawImage(logotipoHTML5, 0, 0);

};

-(,#/*:<%$':(,#(/01(&*"$,#':$,#?#0.*':(#4$"#%E'(4(#3-'SM:'9<AB#0(&':("*&#"*#$,0*"*#4$#"*#1%*;$&A#-*#,1;.1$&'$#21;.:*#%.$,':*#$"#"(;('1/(#4$#!"#$%#$,0*"*4(#$#1&0:.,'*4(#+*:1*,#+$0$,#$&#.&#%1,%(#$"$%$&'(#5&'()'*6A

Page 69: HTML5 en Proyectos Reales

################################# !"#$"$%$&'(#)*&+*,#####'&

window.onload = function() { var canvasImagenes = document.getElementById("canvasImagenes"); var contextoImagenes = canvasImagenes.getContext("2d"); var logotipoHTML5 = document.getElementById("logotipoHTML5"); for(var x=0, y=0; x<512 && y<512; x+=25, y+=25) { contextoImagenes.drawImage(logotipoHTML5, x, y, 64, 64); }

};

Page 70: HTML5 en Proyectos Reales

?@&A)#"1")!(.)=.%,*.,%)+:#'(*,*Bb10:(,('#R&'$:&$'#!I/"(:$:#i#?#+$:,1(&$,#*&'$:1(:$,#&(#,(/(:'*&#"*#KLM#4$"#$"$%$&'(#5&'()'*6A#T1&#$%9*:;(#R&'$:&$'#!I/"(:$:#i#$,#0(%/*'19"$#0(&#"*#'$0&("(;K*#/:(/1$'*:1*#4$&(%1&*4*#[#$#B.$#$%."*#"*,#%1,%*,#2.&01(&*"14*4$,A

E@/;6-<-?'()'*7O7<@&'()'*=+*#a#$,#.&*#"19:$:K*#+')',&-./0#4$#0341;(#*91$:'(#/$:'$&$01$&'$#*#N/*0P$#B.$#1%/"$%$&'*#"*#KLM#4$#5&'()'*6#$&#R&'$:&$'#!I/"(:$:A#H*:*#.'1"18*:"*#$,#&$0$,*:1(#1&0".1:#$"#,1;.1$&'$#,0:1/'#$&#"*#/*:'$#,./$:1(:#4$#&.$,':*#/<;1&*#C$9A

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"> <title>Incluir soporte a canvas en IE</title> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--> </head> <body> ... </body>

</html>

-*,#"K&$*,#4$#0341;(#75ollp12#R!q6@#?#75op$&412qll6@#,$#0(&(0$&#0(%(#0(%$&'*:1(,#0(&4101(&*"$,A#R&'$:&$'#!I/"(:$:#"(,#1&'$:/:$'*#0(%(#.&*#,$&'$&01*#7R2@#a#7,1#$"#&*+$;*4(:#*0'.*"#$,#.&*#+$:,13&#4$#R&'$:&$'#!I/"(:$:=#$>$0.'*#$"#,1;.1$&'$#9"(B.$@A#).*"B.1$:#(':(#&*+$;*4(:#':*'*:<#410P*#,$&'$&01*#0(%(#.&#0(%$&'*:1(#!"#$#&(:%*"A#!"#(9>$'1+(#/:1%(:41*"#$,#B.$#M(0<-(<07E@/;6-<-#4$,0*:;.$#$"#,0:1/'#7<@&'()'*=+*@#?#"(#$>$0.'$L#"(;:*&4(#4$#$,'*#%*&$:*#.&*#,1%."*013&#0(%/"$'*#4$#5&'()'*6A

O&*#+$8#1&0".14(#$"#,0:1/'#7<@&'()'*=+*@#$&#$"#$"$%$&'(#5T<'36#4$#&.$,':*#/<;1&*#$,#/(,19"$#.'1"18*:#5&'()'*6#&(:%*"%$&'$#D1&0:.,'*&4(#$&#&.$,':(#0341;(#"*,#$'1B.$'*,#0(::$,/(&41$&'$,#(#.'1"18*:#+')',&-./0#/*:*#"*#;$&$:*013&#*.'(%<'10*FA#T1&#$%9*:;(=#$I1,'$&#*";.&*,#"1%1'*&'$,#B.$#,$#$&"1,'*&#*#0(&'1&.*013&G

T3"(#/.$4$&#.'1"18*:,$#4$;:*4*4(,#"1&$*"$,A#-(,#4$;:*4*4(,#:*41*"$,#&(#$,'<&#,(/(:'*4(,A-(,#/*':(&$,#4$9$:<&#:$/$'1:,$#$&#*%9*,#41:$001(&$,A!"#.,(#4$#:$;1(&$,#4$#:$0(:'$#&(#$,'<#,(/(:'*4(AU(#$I1,'$#.&#,(/(:'$#0(%/"$'(#*#7$,0*"*#&(#.&12(:%$@A-*#':*4.0013&#P*01*#.&*#'$0&("(;K*#0(%/"$'*%$&'$#412$:$&'$#:*"$&'18*#$"#/:(0$,(#$&#$"#':*8*4(#4$#21;.:*,#0(%/"$>*,#?#*&1%*01(&$,A

)*/K'."(#0.*':(#####'!