Guía básica para pegarle al xhtml (Primera parte)

9,162 views

Published on

Esta presentación es un apoyo para una capacitación que hice a una empresa.

La primera parte presenta aspectos fundamentales del xhtml y la segunda busca explicar conceptos básicos sobre los CSS

(CC Atribución-No Comercial-Licenciar Igual 2.5)

Published in: Technology
4 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
9,162
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
146
Comments
4
Likes
7
Embeds 0
No embeds

No notes for slide

Guía básica para pegarle al xhtml (Primera parte)

  1. 3. Carlos Julio Caicedo C
  2. 4. carloscaicedo.wordpress.com (pronto carloscaicedo.net)
  3. 5. carloscaicedo.wordpress.com [email_address]
  4. 9. ¿?
  5. 10. usando css y xhtml? ¿Por qué hacer un sitio web
  6. 11. para el diseño visual Más posibilidades
  7. 12. www.kiutnorma.com
  8. 13. www.kiutnorma.com
  9. 14. www.kiutnorma.com
  10. 15. www.kiutnorma.com
  11. 16. www.kiutnorma.com
  12. 17. www.kiutnorma.com
  13. 18. útil, ¿no creen? :- )
  14. 19. ¿Más razones?
  15. 20. www.country-boys.net Capas y elementos superpuestos
  16. 21. www.haus-hoyer.de Elementos flotantes e interactivos
  17. 22. www.haus-hoyer.de Ajax, CSS y xhtml hacen un bonito trío
  18. 23. www.haus-hoyer.de Ajax, CSS y xhtml hacen un bonito trío
  19. 24. www.haus-hoyer.de Ajax, CSS y xhtml hacen un bonito trío
  20. 25. … y como si fuera poco…
  21. 26. www.csszengarden.com Un solo documento, varias versiones
  22. 27. www.csszengarden.com Un solo documento, varias versiones
  23. 28. www.csszengarden.com Un solo documento, varias versiones
  24. 29. Pero eso no es todo
  25. 30. Sitios Web Mas livianos
  26. 31. Menos código Menor tiempo de descarga Uso eficiente de la memoria temporal
  27. 32. Además…
  28. 33. Proceso eficiente De desarrollo
  29. 34. Adiós al find+replace p { font-size:14px; color:#000000; }
  30. 35. La estructura separada de la presentación
  31. 36. La estructura separada de la presentación
  32. 37. La estructura separada de la presentación
  33. 38. La estructura separada de la presentación
  34. 39. La estructura separada de la presentación
  35. 40. La estructura separada de la presentación (los ingenieros y los diseñadores no se pisarán las mangueras)
  36. 41. Acordaos
  37. 43. <!-- Sir Tim Berners-Lee @ W3C --> Permitir que mas personas, sin importar sus limitaciones físicas o funcionales puedan consultar la información que se encuentra en Internet.
  38. 44. Para completar
  39. 45. Hacer las cosas bien
  40. 48. Espero haberlos convencido :- D
  41. 50. Bueno pues, ¿Qué necesito para empezar?
  42. 51. Editor de texto
  43. 52. Editor de texto
  44. 53. Editor de texto
  45. 54. Navegador web
  46. 55. Navegador web
  47. 56. Navegador web
  48. 57. Navegador web
  49. 58. Navegador web
  50. 59. Navegador web
  51. 60. Navegador web
  52. 61. DOM Inspector 1.8.0.7 Web Developer 1.0.2 Fire Bug 0.4
  53. 64. Comienza la enunciación de elementos visibles
  54. 65. Comienza la enunciación de elementos visibles Barra de navegación
  55. 66. Comienza la enunciación de elementos visibles Barra de navegación El div es un elemento individual, mientras que un class define características comunes
  56. 68. xml html +
  57. 69. Presentación de datos estructurados en un orden jerárquico. html
  58. 70. Formato abierto. Creación de etiquetas incompatibles. html
  59. 71. flash html vs
  60. 72. flash html vs Colectivo Individual
  61. 73. flash html vs Colectivo Individual Generadores Generador
  62. 74. flash html vs Colectivo Individual Generadores Generador Visores Visor
  63. 75. Desorden html =
  64. 76. Datos . Sintaxis estricta . Propias etiquetas . Información universal . xml
  65. 77. xml html +
  66. 78. Presentación de datos a través de etiquetas . Información disponible para diversos dispositivos. xhtml
  67. 80. Sintaxis
  68. 81. <table cellspacing=“0”>
  69. 82. <table cellspacing=“0”> Etiqueta
  70. 83. <table cellspacing=“0”> Etiqueta Atributo
  71. 84. <table cellspacing=“0”> Etiqueta Atributo Valor
  72. 85. Reglas básicas
  73. 86. 01 Estructura básica
  74. 87. <!DOCTYPE> <html> <head> Información del documento </head> <body> Contenido presentado </body> </html>
  75. 88. 02 Defina el tipo de documento
  76. 89. xhtml estricto <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict // ES &quot; &quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd &quot;>
  77. 90. xhtml de transición <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional // ES &quot; &quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-frameset.dtd &quot;>
  78. 91. xhtml para marcos <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset // ES &quot; &quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd &quot;>
  79. 92. 03 Lo que se abre, se cierra
  80. 93. <p >Párrafo</p> <br /> <input /> <img src=“../igu/imgs/logo.png” /> <meta />
  81. 94. 04 Jerarquía en los elementos
  82. 95. <p ><strong>Párrafo</p></strong>
  83. 96. <p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p>
  84. 97. <p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p> <span><div>Texto</div></span>
  85. 98. <p ><strong>Párrafo</p></strong> <p ><strong>Párrafo</strong></p> <span><div>Texto</div></span> <div><span>Texto</span></div>
  86. 99. 05 Sangrados (Un consejo)
  87. 100. <table> <tr> <th>1</th> <th>2</th> </tr> <tr> <td>Dato01</td> <td>Dato02</td> </tr> </table>
  88. 101. Etiquetas importantes
  89. 102. 01 Contenido
  90. 103. <h1>Título principal</h1> <h2>Título secundario</h2> … <h6>Subtítulo</h6> <p>Párrafo<br /> Continuación del párrafo</p> <ul> <li>Lista desordenada</li> </ul> <ol> <li>Lista ordenada</li> </ol>
  91. 104. 02 Importancia
  92. 105. <p>Dentro de una linea se resaltan <strong> las palabras importantes <strong></p> <p>Así también, se pueden resaltar empleando <em> esta etiqueta </em></h2>
  93. 106. 03 Tipo
  94. 107. <cite>Ser o no ser</cite> <code>funtion validar (busqueda)</code> <abbr>Dir.</abbr> <acronym>DANE</acronym>
  95. 108. 04 Formularios
  96. 109. <form> <fieldset id=“campos”> <p><label>Nombre</label><br /> <input /></p> <p><label>Nombre</label><br /> <input /></p> </fieldset> <fieldset id=“acciones”> <p><button>Enviar</button> o <a>volver</a> al menu anterior</p> </fieldset> </form>
  97. 110. 05 Tablas
  98. 111. <table> <thead> <tr> <th>Col 01</th> <th>Col 02</th> </tr> </thead> <tbody> <tr> <td>Dato 01</td> <td>Dato 02</td> </tr> </tbody> <tfoot> <tr> <td>Resultado 01</td> <td>Resultado 02</td> </tr> </tfoot> </table>
  99. 112. 06 Agrupamiento
  100. 113. <div> <h1>Titulo</h1> <p>Párrafos</p> <table> </table> <p>Otra linea de texto <span>con un texto diferenciado</span> del resto</p> </div>
  101. 114. 07 id - class
  102. 115. <div id=“encabezado”> <h1>Titulo</h1> </div> <div id=“contenidos”> <h2>Noticia 01</h2> <p class=“datos”>17 de Julio</p> <p>Contenido</p> <h2>Noticia 01</h2> <p class=“datos”>18 de Julio</p> <p>Contenido</p> </div>

×