DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB Elaboración de documentos web mediante lenguajes de marcas 3. Lenguajes de Marcado Web
Breve historia del HTML Fue desarrollado por Tim Barnes-Lee en el CERN como una herramienta de transmisión de la información. La primera versión en desplegarse fue la 2.0 en 1994. Se funda la W3C y en 1997 se saca una nueva versión 3.2 La última versión 4.01 data de 1999. HTML5 sigue siendo un draft.
¿Y el XHTML? La W3C lanza la recomendación 1.0 en el año 2000 para intentar volver a convertir HTML en un estándar visual. Sin embargo aunque fue bien recogido por los desarrolladores no por Microsoft y su IE. Posteriores intentos de volver a abrir el estándar han fracasado.
Los tags en XHTML/HTML <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <font> <form> <frame> <frameset> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <iframe> <img> <input> <ins> <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> <samp> <script> <select> <small> <span> <strike> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <u> <ul>
Nuevos tags en HTML5 Semánticos: <article> <aside> <bdi> <command> <details> <dialog> <summary> <figure> <figcaption> <footer> <header> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> Multimedia: <audio> <video> <source> <embed> <track> Formularios: <datalist> <keygen> <output> Eliminados u obsoletos: <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u>
Utilización de etiquetas <etiqueta>Texto</etiqueta> Etiquetas con atributos <etiqueta atributo1=”valor1 atributo2=”valor2”>Texto</etiqueta> Etiquetas sin contenidos <etiqueta /> Comentarios <!-- Esto es un comentario -->
Editores de texto (I) Existen multitud de editores/IDE (Integrated Development Environment) para HTML/CSS/JS y otros lenguages. Cuanto mejor sea la herramienta más eficaces seremos. IDE: Eclipse, Netbeans, Dreamweaver. Editores: Notepad++. Komodo Edit. Sublime Text
Editores de texto (y II) Principales funcionalidades a buscar: - Resaltado de sintaxis - Autocompletado de etiquetas/cierres y atributos - Control de versiones y gestión de diferencias - Herramientas de búsqueda y sust. (regexp y macros)
Estructura de un fichero HTML5 La estructura básica de un fichero HTML5 válido: <!DOCTYPE html> <html lang="es"> <head> <title>Hola</title> <meta charset="utf-8"> </head> <body></body> </html>
Estructura de un fichero HTML5 Cabecera <head></head> Es un contenedor de todos los elementos de la cabecera. <title> <style> <base> <link> <meta> <script> <noscript>
Estructura de un fichero HTML5 Cabecera <title></title> Establecemos el título del documento que estamos editando/mostrando. <title>Texto</title>
Estructura de un fichero HTML5 Cabecera <base /> Establecemos una ruta por defecto y un objetivo para todos los links del documento. <base href="/web/" target="_blank" />
Estructura de un fichero HTML5 Cabecera <link /> Enlazamos con una hoja de estilos CSS externa al documento o anexar favicons/icons. <link rel="stylesheet" type="text/css" href="theme.css" /> <link rel="shortcut icon" href="myicon.ico" />
Estructura de un fichero HTML5 Cabecera <meta /> Nos permite introducir metadatos asociados al documento. <meta name="description" content="Free Web tutorials" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Hege Refsnes" /> <meta http-equiv="refresh" content="300"> <meta name="copyright" content="Piquer" /> <meta charset="utf-8" />
Estructura de un fichero HTML5 Cabecera <script></script> Nos permite insertar código Javascript en nuestro documento. Se puede insertar código directamente o cargar un archivo remoto. <script type=”text/javascript” src=”fichero.js”></script>
Estructura de un fichero HTML5 Cuerpo del documento <body></body> Es donde se incluye la parte visible del documento y que renderiza el navegador con la que interactúa el usuario.
Buenas prácticas al componer - La composición debe de ser simétrica y bien anidada. <p>Este texto es <i>importante pero este <b>aún más</b></i></p> - Siempre elementos de apertura y cierre. - En XHTML todos los tags se cierran.
Páginas de referencia http://www.w3schools.com/ http://librosweb.es/xhtml/ http://www.w3.org/2009/cheatsheet/ http://www.dochub.io
Elementos de texto en HTML (I) Recordemos: Con HTML definimos el valor semántico de los componentes del texto. Con CSS su visualización o maquetación. <p></p> Definimos bloques de texto o párrafo <br /> Salto de linea manual <strong></strong> Definimos semánticamente bloques de importancia extrema. <em></em> Texto enfatizado <b></b> Texto en negrita <i></i> Texto en cursiva <sup></sup> Superíndice <sub></sub> Subíndice <u></u> Subrayado <s></s> Tachado
Elementos de texto en HTML (II) Recordemos: Con HTML definimos el valor semántico de los componentes del texto. Con CSS su visualización o maquetación. <cite></cite> Define el titulo de un libro, obra, etc <q></q> Representa un fragmento de texto de otra fuente <blockquote></blockquote> Fragmento exento de texto citado <pre></pre> ó <code></code> Para representar código en otro lenguaje. <abbr></abbr> Abreviaturas <span></span> Marcar un fragmento de texto sin carga semántica. <time datetime=”1970-01-01 00:00”></time> Marca de tiempo <hr /> Linea horizontal (Rompe temática)
Elementos de texto en HTML (III) <h1></h1> … <h6></h6> Definimos un texto de cabecera como título de los bloques de texto inferiores 1) Se deben de aplicar en orden, de mayor importancia <h1>, a menor importancia <h6> 2) Como todo el HTML tienen carga semántica, no se deben de usar para maquetar. 3) El <h1> Definiría el titular del documento y generalmente es único en todo el documento.
Listas en HTML Permiten agrupar listas de elementos <li>, pudiendo ser: Ordenadas: <ol></ol> - Numerales: <ol type=”1”><ol> (Defecto) - Letras: <ol type=”a”><ol> - Romanos: <ol type=”I”></ol> - Letras Mayúsculas: <ol type=”A”></ol> Comenzar en una posición concreta: <ol start=”3”></ol> No-ordenadas: <ul></ul> Definition list: <dl></dl>
Enlaces Permiten realizar saltos a secciones de texto del mismo documento o a otros documentos. <a></a> href=”” Enlace destino (local o remoto) target=”” Contexto en el que se debe de abrir el enlace _blank _parent _self _top _<frame> id=”” Definimos un anchor (ancla) a donde podremos enlazar. Debe de ser único en cada documento. (Siempre comienza por letra) Email: <a href=”mailto:me@domain.es”>
HTML Entities (I) á = á é = é í = í ó = ó ú = ú Á = Á É = É Í = Í Ó = Ó Ú = Ú ñ = ñ Ñ = Ñ á = á é = é í = í ó = ó ú = ú Á = Á É = É Í = Í Ó = Ó Ú = Ú ñ = ñ Ñ = Ñ " = " & = & < = < > = > € = € = (espacio) ¦ = | ˆ = ^ © = ©
HTML Entities (y II) Listado de HTML entities http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references Conversor HTML Entities y viceversa http://code.cside.com/3rdpage/us/entity/converter.html
Imágenes en HTML (I) <img /> Es una etiqueta única que nos pemite introducir imágenes en el texto. <img src=”imagen.jpg” alt=”Texto Alternativo” title=”Descripción” /> Atributos más importantes: src=”ruta” Ruta a la imagen en nuestro servidor alt=”Texto alternativo” (obligatorio) title=”Título de la imagen” height=”númeropx” Altura en px de la imágen (forzado) width=”númeropx” Anchura en px de la imagen (forzado)
Imágenes en HTML (II) Otros atributos: ismap Definimos la imagen como un mapa de enlaces dentro de un enlace <a href="/camino_hasta_el_mapa/fichero_mapa.map"><img src="camino_imagen_sensible.gif" alt=”mapa” ismap></a> usemap Especifica un mapa concreto a utilizar <img usemap="#mapname"> <mapname="mapname"> <area shape=rect coords="x11,y11,x12,y12" href="URL"> <area shape=rect coords="x21,y21,x22,y22" href="URL"> </map>
Imágenes en HTML (III) JPG: Formato de imagen con pérdida de calidad. Utiliza color real y no soporta transparencia (alpha). 24 bits de color. Utilizado sobre todo en fotografía. No usar en capturas de texto. Reducido tamaño. http://en.wikipedia.org/wiki/JPEG GIF: utilizado sobre todo en la web. No utiliza color real sino indexado (8 bits de color) así que no es recomendable para imágenes de calidad. Soporta transparencia. Utilizado en animaciones. http://es.wikipedia.org/wiki/Graphics_Interchange_Format
Imágenes en HTML (y IV) PNG: Formato de imagen sin pérdida de calidad. Utiliza color real y soporta transparencia (alpha). 24 bits de color + 8 bits alpha. Cada vez más utilizado, pero al no tener pérdida de calidad ocupa más espacio que un JPG en fotografía. Utilizado sobre todo en logotipos y en imágenes que queramos mantener calidad y transparencia. http://es.wikipedia.org/wiki/Png SVG: Es un formato gráfico basado en vectores y no en bitmaps como los anteriores. Dada su naturaleza vectorial se emplea en imágenes que se quieran o deban redimensionar sin pérdida. Ocupan muy poco espacio. Son muy poco utilizados. http://es.wikipedia.org/wiki/Svg
Capas y etiquetas semánticas (I) <div></div> Define una división en el documento agrupando varios elementos, normalmente con fines estéticos o CSS. <div class=”datos_personales”> <p>Nombre: Juan</p> <p>Apellidos: Nadie</p> </div>
Capas y etiquetas semánticas (II) <nav></nav> Define un bloque que contiene listados de enlaces de navegación por la web. <nav class=”principal_nav”> <ul> <li><a href=”/”>Inicio</a></li> <li><a href=”b.html”>Link2</a></li> <li><a href=”c.html”>Link3</a></li> </ul> </nav>
Capas y etiquetas semánticas (III) <section></section> Define una sección con carga semántica en el documento. <section class=”Intro”> <p>Esto es un texto introductorio.</p> <p>Esto es un nuevo párrafo.</p> <ul> <li>Apartado Uno.</li> <li>Apartado Dos.</li> </ul> </section>
Capas y etiquetas semánticas (IV) <article></article> Define un contenido que por sí mismo tiene sentido fuera del documento. Puede ser un post de un blog, una receta, un artículo periodístico, etc <article class=”post”> <p>Esto es un texto introductorio.</p> <p>Esto es un nuevo párrafo.</p> <ul> <li>Apartado Uno.</li> <li>Apartado Dos.</li> </ul> </article>
Capas y etiquetas semánticas (V) <aside></aside> Elemento de jerarquía secundaria. Marcamos de este modo documento de escasa relevancia semántica en el documento: información secundaria, publicidad, etc. <aside> <p><img src=”imagen.jpg” alt=”Cuerpo escultural” />Adelgace 15 kilos en 3 semanas.</p> </aside>
Capas y etiquetas semánticas (VI) <header></header> Marcamos semánticamente un apartado que es la cabecera del documento o de una sección (o article). <section> <header> <h1>Titular de la sección</h1> </header> <p>Un párrafo cualquiera.</p> </section>
Capas y etiquetas semánticas (VII) <footer></footer> Definimos el pie de página de una página o de una sección o article. <section> <p>Un párrafo cualquiera.</p> <footer>Contenido de texto poco importante.</footer> </section>
Capas y etiquetas semánticas (VIII) <figure></figure> Utilizamos este tag como contenedor de una imagen o fotografía. <figcaption></figcaption> Añadimos un pie de foto <figure class=”mapa”> <img src=”mapa.jpg” alt=”Mapa metro” /> <figcaption>Mapa del Metro</figcaption> </figure>
Capas y etiquetas semánticas (y IX) Realmente no define un área, sino que es como un <br /> más avanzado. <wbr /> Word Break Oportunity. Especifica una posible posición donde realizar un salto de linea. <p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p>
Colores en HTML (I) Se pueden aplicar colores a todos los elementos en html tanto al borde, fondo o frente (border, background, color). La profundidad de color en HTML es de 24bits + 8bits de color alpha (transparencia). IE8 NO soporta transparencia Existen un conjunto de combinaciones de 216 colores denominados safecolors que garantiza que se ven exactamente igual en cualquier monitor. http://www.w3schools.com/html/html_colors.asp
Colores en HTML (II) Diferentes tipos de notaciones: Hexadecimal: #FF33CC. Es la más habitual, correspondiendo sólo a los canales RGB, agrupándose por pares en hexadecimal. RGB(A): rgb(255,51,204) ó rgba(255,51,204, 0.5) con valor del canal alpha o de transparencia.
Colores en HTML (y III) Diferentes tipos de notaciones: HSL: hsl(315, 100%, 60%). Corresponde a la notación HUE, Saturation, Lightness Namecolors: 140 colores cuentan con un nombre asignado y se puede asignar el color con dicho nombre http://www.w3schools.com/html/html_colornames.asp
Tablas en HTML (I) Las tablas se utilizan para presentar tabla de datos. No se deben de utilizar como recurso para maquetar y estructurar gráficamente.
Tablas en HTML (II) <table></table> Definimos apertura y cierre de tabla. Contenedor de los datos. <tr></tr> Table Row. Definimos una fila de datos <td></td> Table Data. Tuplas en donde incluimos datos <th></th> Table Header. Tuplas donde incluimos cabeceras (descripción de los datos).
Tablas en HTML (III) <caption></caption> Se emplea para definir la leyenda o título de una tabla. <table> <caption>Esto es una tabla</caption> ... </table>
Tablas en HTML (IV) Atributos especiales <td></td> y <th></th> De cara a la composición podemos unir columnas y filas. colspan=”número” → Número de columnas que ocupa esta celda o tupla rowspan=”número” → Número de filas que ocupa esta celda o tupla
Tablas en HTML (V) <thead></thead> Definimos la cabecera de la tabla, como un contenedor de <th> <tfooter></tfooter> Definimos un pie de tabla como otro contenedor de <th> <tbody></tbody> Conformaría el cuerpo de la tabla como un contenedor de datos <td> y <th>
Tablas en HTML (VI) <table> <caption>Título de tabla</caption> <thead> ... </thead> <tfoot> </tfoot> <tbody> </tbody> </table>
Tablas en HTML (VII) <col></col> Permite especificar una clase, id, o cambiar el background y el ancho de unas tablas. Se puede combinar para hacer referencia a varias columnas con el atributo span=”número”. <colgroup></colgroup>Agrupa las declaraciones de <col>. Se puede aplicar también el atributo span para hacer referencia a varias columnas.
Tablas en HTML (y VIII) <table> <caption>Título de tabla</caption> <colgroup> <col span=”3” style=”width: 20%”> <col style=”background: gray”> </colgroup> ... </table>