HTML 5

2,243 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,243
On SlideShare
0
From Embeds
0
Number of Embeds
1,112
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML 5

  1. 1. <html5>Desenvolvimento web madsondias.net
  2. 2. O que são padrões w eb? d e no r m a s e ã o conju n to Pa drões web s s pelo W 3 C. s produ z ido re comen da çõe L XH TM L HTM PNG S XM L tistas pa ra dores e proje CS in a do a desenvolve a cria çã o de É dest possibilitem o u so de prá ticas qu e . sível a todos um a W eb a ces madsondias.net
  3. 3. web sem padrões... a n ut e n ç ã o ; vimento e M de desen vol #Dificu ldade # Sem sign ifica do r a s Ju n ta s #F orma ta ç ã o e estru tu #Excesso de código a ra má qu in a s preen sível p # C ódigo icom madsondias.net
  4. 4. Divisão em camada s javascript L H TM xhtml css madsondias.net
  5. 5. Anotem isso! m a qu estã o w e b nã o é uTra ba lh ar c om pa drões s elas por div’ de troca r ta b s tã o d e s e mântica! é uma que madsondias.net
  6. 6. Tableless Vs Webs tandarts o popular no e ficou muit Ta bleles sé um termo qu uita gente. confundir m B rasil, e qu e acaba por site desenv olvido sem o Table less significa um layout, e sim organizar o uso das tabelas para us ando C SS. a que esteja s não signific m site Tableles muito além Criar u W eb , que vão seguindo os Padrões preocupaçõ es maiores o válido, e tem de um códig s sibilidade. ica e a A ce com o a S e m ânt madsondias.net
  7. 7. Estrutura a çã o, como ra de in form U ma estru tu deve conter s e m H T ML , d o cu m en tos escrito ape nas marca ç õe s c om d ev ido sig nificado. a çõ e s s e m Ad icion a r ma rc p a ra do a p o d e s e r co m sign ifica d o em u m site co a u m livro na s e m b r an iversa s pá gia dicion a r d madsondias.net
  8. 8. Um código semânti co ... emsigniifccado. S o ânt i a Refere-se a o estudo d p a ra o q u e d a m a r ca çã o tiliza mos ca tru in do um Q ua n d o u esta mos con s t e foi cria da , ela rea lmen m â n t i c o ”. “ Có d i g o S e so va i ali...” vem a qu i, is sa r em “isso Pa ra r de pe n f o r m a ç ão ” . s tr u tu r a d a I n ep e ns a r n a “ E g n i f i c a do ” ç ão com Si C ria r u m a “ Ma r c a madsondias.net
  9. 9. Compreensivel m õ e s ú teis e nform açIsso possib ilita ria qu e i eg ra d a s o ssem in t diferente s sistemas f d as p e s s o a s . pa ra fa c ilitar a vida Interopel abilidade madsondias.net
  10. 10. Marcação Semânt ica os ta bu la re s . pe n a s p a ra d a d e > < / a bl e > a t Us a r < t a bl h 6> pa ra títu lo s h >a té < h 6 > </ U sa r <h 1 ></ 1 ra <u l > < / l > pa u as O rde n a da s e l i > / l o > p ar a L i s t le m e n to < l i > < / U s a r < o l> < , se g u id o s d o e O rd e n a d a s L is ta s N ã o a </ s t r o n g > pa r ase, e <s t r o n g > em > pa ra E n f U sar < em > < / E n fa se F o rt e em tific a r ca m po s la be l > pa ra ide n Us a r < l a be l > < / fo rm u lá rio s madsondias.net
  11. 11. Marcação Semânt ica Mnoéo aã s Suficiente madsondias.net
  12. 12. html5 5 di to r do H TML# Ia n H icks o n é o e ho s ta d o s ra s cu n m se nd o a p r e s e n# De s d e 2 00 8 v ê ) (W o rkin g Dra ft m e ra d a a in d a e ve rs ão s e ja lib qu e e s sa n o v a #E s pe ra -s e 2 01 0 en d a ç ão ” é com or ne um a “re o pa r a q u e se t # A p r ev i sã par a 2012 s a is re ce n te s do e la s v e rs õ e s m #Já é co m p r e en d i d o p B ro w s e rs madsondias.net
  13. 13. html5 , F irefox 3 .5, ogle C h rome Br o w s er como o G o s u p o r t e ao fari 4 já dã oIn ter n et Ex plorer 8 e Sa gin a s já vã o o a lgu ma s pá H TM L 5 , e com iss ova versã o a derin do a n madsondias.net
  14. 14. html5 rá ficos 2 D, cria ção de G API’s para a tim ídia , údo m ul le de conte a m e nt o d ocontro r ros e a primo r melh or d ep u r a çã o d e e e s d a no v a da s n ovida d uso offlin e sã o a lgu mas versã o madsondias.net
  15. 15. html5 n t ific a r pa ra ideN o vo s e lem en to s t eú d o s, m elh or os con a beçalh o e o t e r > pa ra c co o m o < he a der > e <f o ma pá gin a sessões de u é, < se c t i o n > p a ra a rtigo ou u m roda p iden tificar u m ou < a r t i c l e > pa ra post. madsondias.net
  16. 16. html5 < h ead er > a pá gin a o ca beça lh o dPa ra defin ir o nd e s e r á < fo o ter > pá gin a ou d a o roda p é da Pa ra defin ir on de será sessã o madsondias.net
  17. 17. html5< a sid e> rin cipa l, com o o co n t e ú d o pIn forma çõe s rela tiva s a po de bu scaum m e n u o u ca m <ar ticle> da pá gin a , ç ã o prin cipa l Pa ra defin ir a in forma e ú do em si. sta rá o con t n ela é on de e madsondias.net
  18. 18. html5< figu r e> o m legen da e ima gen s cP a ra a in serção d <figu re id=”1 ”> ” descriçã o”> g src=”ima g em.jpg” a lt= <im /legen d> d a I m ag e m < <lege n d > L e g e nd a </figu re> madsondias.net
  19. 19. html5< a u dio> n g de á u dio, o d e s tr e a m i xibe qu a lq u er elemen t e con troles ouE a exibição d rco m atribu tos pa execu çã o a u tomatica . ”con trols”> g” con trols= <au dio s rc=”h orse.og se recu rso o su porta es Seu N a vega dor n ã </a u dio> madsondias.net
  20. 20. html5< video > e con troles o m exibição d os n a pá gin a , c a rrega do.Exibe víde to o vídeo é c gem en qu a ne de uma ima ”con trols”> gg” con trols= <video src=”movie.o s se recu rso ão su porta e Seu n av e g a d o r n </video> madsondias.net
  21. 21. html5< n a v> do a la do’. p ara lin ks ‘laSessã o de n a vega çã o, < n a v> ” >Home</a > <a h ref= ”defa u lt.a sp terior</a > eter.a sp”>An <a hr e f = ” t a g _ m ó ximo</a > c ript.a sp”>Pr <a h r ef=”ta g_n os < / na v > madsondias.net
  22. 22. Obrigado! Mads on Dias s c a em escola Professor d e I n fo r m á ti profissio n a liz a n tes. @ o m ad s o n ma dso n dias.n et madsondias.net

×