Cristian Riffo Huez
<ul><li>Que es CSS </li></ul><ul><li>Porqué CSS </li></ul><ul><li>HTML </li></ul><ul><li>Orden Lógico </li></ul><ul><li>No...
+
<ul><li>Separa Información del Estilo </li></ul><ul><li>Fácil mantención </li></ul><ul><li>Fácil manejo desde JavaScript <...
<ul><li>Evolución del HTML </li></ul><ul><li>XHTML </li></ul>
<ul><li><body> </li></ul><ul><li><div>  </li></ul><ul><li><h1> </li></ul><ul><li><ul>  </li></ul><ul><li><h2>  </li></ul><...
 
<ul><li>W3C </li></ul><ul><li>WAI – WCAG ( Web Accessibility Initiative, Web Content Accessibility Guidelines ) </li></ul>...
<ul><li>Con tablas es más fácil </li></ul><ul><li>¿Porqué no? </li></ul><ul><li>Tableless </li></ul><ul><li>Divs vs Tablas...
<ul><li>Navegadores del mercado </li></ul><ul><ul><li>Firefox 2, 3 </li></ul></ul><ul><ul><li>Internet Explorer 6, 7 </li>...
 
 
<ul><li>CSS vs JavaScript </li></ul><ul><li>CSS Zen garden </li></ul>
<ul><li>porquero.blogspot.com </li></ul><ul><li>www.guiaweb.gov.cl </li></ul><ul><li>www.w3schools.com </li></ul><ul><li>w...
Gracias [email_address]
<ul><li>Comportamiento hover CSS/JavaScript </li></ul>JavaScript CSS
Código html+javascript <ul> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’” onmouseout=“this.style.backgr...
<ul><li>Código html </li></ul><ul><li><ul> </li></ul><ul><li><li><a href=“#”>Inicio</a></li> </li></ul><ul><li><li><a href...
<ul><li>Ver archivo </li></ul>
Upcoming SlideShare
Loading in...5
×

MaquetacióN Css

645

Published on

Maquetación CSS

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

No Downloads
Views
Total Views
645
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MaquetacióN Css

  1. 1. Cristian Riffo Huez
  2. 2. <ul><li>Que es CSS </li></ul><ul><li>Porqué CSS </li></ul><ul><li>HTML </li></ul><ul><li>Orden Lógico </li></ul><ul><li>Normas y Accesibilidad </li></ul><ul><li>Tablas Navegadores </li></ul><ul><li>Qué debe saber un buen desarrollador web </li></ul><ul><li>Ejemplos y Otros </li></ul><ul><li>Links de Interés </li></ul>
  3. 3. +
  4. 4. <ul><li>Separa Información del Estilo </li></ul><ul><li>Fácil mantención </li></ul><ul><li>Fácil manejo desde JavaScript </li></ul><ul><li>Compatibilidad con dispositivos </li></ul><ul><li>Accesibilidad (Personalización) </li></ul><ul><li>Código HTML más limpio </li></ul><ul><li>Programable </li></ul>
  5. 5. <ul><li>Evolución del HTML </li></ul><ul><li>XHTML </li></ul>
  6. 6. <ul><li><body> </li></ul><ul><li><div> </li></ul><ul><li><h1> </li></ul><ul><li><ul> </li></ul><ul><li><h2> </li></ul><ul><li>contenido </li></ul>
  7. 8. <ul><li>W3C </li></ul><ul><li>WAI – WCAG ( Web Accessibility Initiative, Web Content Accessibility Guidelines ) </li></ul><ul><li>Contenido para todos </li></ul><ul><ul><li>Sin CSS </li></ul></ul><ul><ul><li>Sin Javascript </li></ul></ul><ul><ul><li>Sin Flash </li></ul></ul><ul><ul><li>Sin Imágenes </li></ul></ul><ul><ul><li>Sin Periféricos </li></ul></ul><ul><ul><li>Sistemas Operativos </li></ul></ul>
  8. 9. <ul><li>Con tablas es más fácil </li></ul><ul><li>¿Porqué no? </li></ul><ul><li>Tableless </li></ul><ul><li>Divs vs Tablas </li></ul>
  9. 10. <ul><li>Navegadores del mercado </li></ul><ul><ul><li>Firefox 2, 3 </li></ul></ul><ul><ul><li>Internet Explorer 6, 7 </li></ul></ul><ul><ul><li>Safari (Win, Mac) </li></ul></ul><ul><li>Móviles </li></ul>
  10. 13. <ul><li>CSS vs JavaScript </li></ul><ul><li>CSS Zen garden </li></ul>
  11. 14. <ul><li>porquero.blogspot.com </li></ul><ul><li>www.guiaweb.gov.cl </li></ul><ul><li>www.w3schools.com </li></ul><ul><li>www.csszengarden.com </li></ul><ul><li>delicious.com/popular/css </li></ul><ul><li>www.mootools.net </li></ul><ul><li>www.w3c.org </li></ul><ul><li>developer.yahoo.com/yui/reset/ </li></ul>
  12. 15. Gracias [email_address]
  13. 16. <ul><li>Comportamiento hover CSS/JavaScript </li></ul>JavaScript CSS
  14. 17. Código html+javascript <ul> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’” onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’” ><a href=“#”>Inicio</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’” onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’” ><a href=“#”>Quienes Somos</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’” onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’” ><a href=“#”>Contacto</a></li> <li onmouseover=“this.style.background=‘url(pub/imgs/img1.jpg)’” onmouseout=“this.style.background=‘url(pub/imgs/img0.jpg)’” ><a href=“#”>Clientes</a></li> </ul>
  15. 18. <ul><li>Código html </li></ul><ul><li><ul> </li></ul><ul><li><li><a href=“#”>Inicio</a></li> </li></ul><ul><li><li><a href=“#”>Quienes Somos</a></li> </li></ul><ul><li><li><a href=“#”>Contacto </a></ li> </li></ul><ul><li><li><a href=“#”>Clientes</a></li> </li></ul><ul><li></ul> </li></ul>Código CSS li a:hover { background-image: url(pub/imgs/img0.jpg); }
  16. 19. <ul><li>Ver archivo </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×