Información general. Últimas noticias

Transcripción

1 Información general Últimas noticias 1

2 Registro de miembros Texto informativo { Registro nuevo usuario { 2

3 Registro de miembros 1) Acceder a secciones privadas de la página. 2) Acceso a contenido descargable exclusivo (presentaciones de las charlas, actividades, recursos...) 3) Posibilidad de comentar y participar en los artículos y debates organizados en la web (BETA) 4) Leer noticias exclusivas de la asociación. 5) Acceso al newsletter de AWC con las últimas novedades de la asociación. Y mucho más! 3

4 Sección miembros Miembros de AWC { 4

5 Boletín de noticias Título y fecha { Orden del día { Información adicional { 5

6 Introducción a la maquetación web Introducción a (X)HTML por Darío Balbontín 6

7 Plan de vuelo 1) Antecedentes. 2) Elementos y estructura. 2.1) Estructura básica. 2.2) Estructura de contenido. 3) Etiquetas. 3.1) Formato de textos (Encabezados, énfasis...). 3.2) Listas ordenadas, desordenadas y anidadas. 3.3) Formularios. 4) Enlaces. 6) Imágenes. 7) Tablas. 7

8 Qué es HTML? HyperText Markup Language («lenguaje de marcado de hipertexto»). Tim Berners-Lee creó la primera descripción HTML (HTML Tags) en 1991 con 22 elementos, 13 de los cuales siguen vigentes en HTML4. Pseudolenguaje de programación basado en eitquetas. Actualmente se utiliza junto a CSS y Javascript para maquetar los sitios web. Características: - Multiplataforma. - Simple. - Está en todos lados. - Es simplemente texto. - Libre. 8

9 Todo en HTML está estructurado, organizado y segmentado en bloques 9

10 Estructura Todo documento HTML tiene 2 elementos básicos: HEAD: Datos relevantes sobre el documento; título, descripción, doctype, codificación, palabras clave, etc. BODY: Contenido de la web propiamente dicho; texto, imágenes, menús, pié de página, etc. 10

11 Estructura Esta podría ser la estructura básica de cualquier documento HTML: <! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>título de la página</title>  </head> <body>  </body> </html> 11

12 Estructuración de contenido Es bueno organizar el contenido de los documentos HTML. Estructuras basadas en bloques, capas o DIVs. La estructura más común: - Cabecera. - Cuerpo de la web. - Contenido. - Menú lateral. - Pié de página. 12

13 Estructuración de contenido Estructura básica de cualquier documento HTML con el contenido organizado: <! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head> <title>título de la página</title>  </head> <body> <div id= header >  </div> <div id="container"> <div id="content">  </div> <div id="sidebar">  </div> </div> <div id="footer">  </div> </body> </html> 13

14 Etiquetas Pseudolenguaje basado en etiquetas. Todo contenido va incrustado en etiquetas. Jerarquía de contenido. Formato de texto (negrita, cursiva...). Listados. Tablas. Formularios. Scripts (javascript). 14

15 Formato de textos Titulares <h*> y </h*> son sus etiquetas de apertura y cierre respectivamente. Donde * es el nivel del titular. También llamados encabezados. Sirven para dividir el texto en secciones. Disponemos de seis niveles de titulares. h1 es el mayor tanto en tamaño como en relevancia. h6 es el menor en tamaño y relevancia. <h1>encabezado 1</h1> - Encabezado 1 <h2>encabezado 2</h2> - Encabezado 2 <h3>encabezado 3</h3> - Encabezado 3 <h4>encabezado 4</h4> - Encabezado 4 <h5>encabezado 5</h5> - Encabezado 5 <h6>encabezado 6</h6> - Encabezado 6 15

16 Formato de textos Párrafos <p> y </p> son sus etiquetas de apertura y cierre respectivamente. Delimitan, como su nombre indica, párrafos. Los propios navegadores insertan los saltos de línea entre párrafos. Salto de línea con <br />. Podemos insertar comentarios entre las etiquetas . Textos literales con <pre> y </pre>. <p>esto es un ejemplo de párrafo</p><br /> <p>esto sería otro ejemplo de párrafo</p>  16

17 Formato de textos Énfasis Podemos añadir énfasis o resaltar partes del texto de acuerdo a su importancia. Las etiquetas más comunes para formato de texto son: - Negrita o strong; etiquetas <strong> y </strong>. - Itálica o cursiva; etiquetas <em> y </em>. - Otras etiquetas menos relevantes; small, big, cite, sup y sub, etc. <p>esto es un ejemplo de párrafo en el que <strong>resalto esto en negrita</strong> y <em>esto otro en cursiva</em>.</p> 17

18 Formato de textos Ejemplo de un texto con formato: <p>en esta presentación estamos aprendiendo a <strong>maquetar páginas webs desde 0</strong> con <em>html</em> y <em>css</em>.</p> <p>también aprenderemos, en un futuro no muy lejano, a <strong>crear listas<em>ordenadas</em> y <em>desordenadas</em></strong></p> En esta presentación estamos aprendiendo a maquetar páginas webs desde 0 con HTML y CSS. También aprenderemos, en un futuro no muy lejano, a crear listas ordenadas y desordenadas. 18

19 Listas Mecanismo para especificar listas de información. Deben contener al menos un elemento. Pueden ser de tres tipos: - Ordenadas. - Desordenadas. - Definiciones (Poco utilizadas). Cada elemento de una lista se introduce entre las etiquetas <li> y </li>. Lista de la compra: Queso. Jamón. Refrescos. Lista de Tareas: 1.- Llamar a Pepe. 2.- Estudiar HTML. 3.- Comprar. 19

20 Listas desordenadas Lista en la que los elementos NO tienen orden. Sus etiquetas son <ul> y </ul>. ul = Unordenated List. Lista de la compra: <ul> <li>queso.</li> <li>jamón.</li> <li>refrescos.</li> </ul> Lista de la compra: Queso. Jamón. Refrescos. 20

21 Listas ordenadas Lista en la que los elementos SI tienen orden. Sus etiquetas son <ol> y </ol>. ol viene de Ordenated List. Lista de tareas: <ol> <li>llamar a Pepe.</li> <li>estudiar HTML.</li> <li>comprar.</li> </ol> Lista de Tareas: 1.- Llamar a Pepe. 2.- Estudiar HTML. 3.- Comprar. 21

22 Listas anidadas Se pueden anidar listas entre sí. <ol> <li>características e historia</li> <li>elementos y estructura <ol> <li>estructura básica</li> <li>estructura de contenido</li> </ol> </li> <li>etiquetas <ol> <li>formato de Textos</li> <li>listas</li> </ol> </li> 1.- Características e historia 2.- Elementos y estructura 1.- Estructura básica 2.- Estructura de contenido 3.- Etiquetas 1.- Formato de textos 2.- Listas 22

23 Listas anidadas También se pueden combinar ambos tipos de listas y anidarlos. Cosas por hacer: <ol> <li>llamar a Pepe.</li> <li>comprar: <ul> <li>queso.</li> <li>jamón.</li> <li>refrescos.</li> </ul> </li> <li>estudiar HTML.</li> </ol> Cosas por hacer: 1.- Llamar a Pepe. 2.- Comprar: Queso. Jamón. Refrescos. 3.- Estudiar HTML. 23

24 Formularios Sirve para enviar datos a un agente para que sean procesados (servidor web, servidor de correo...). Está formado por: - Contenido normal. - Código. - Controles (Checkboxes, radio buttons, etc). - Rótulos o labels. Sus etiquetas son <form> y </form>. Generalmente se definen los atributos action y method para indicar a quién se le envían los datos y por qué vía. **Esto será explicado en futuras presentaciones junto con php. 24

25 Formularios <FORM action="donde_mandar_losdatos" method="post"> <LABEL for="nombre">nombre: </LABEL> <INPUT type="text" id="nombre"><br> <LABEL for="apellido">apellido: </LABEL> <INPUT type="text" id="apellido"><br> <LABEL for=" "> </LABEL> <INPUT type="text" id=" "><br> <INPUT type="radio" name="sexo" value="varón"> Varón<BR> <INPUT type="radio" name="sexo" value="mujer"> Mujer<BR> <INPUT type="submit" value="enviar"> <INPUT type="reset"> </FORM> 25

26 Enlaces (Links o permalinks) Internet se basa en compartir y enlazar. Los enlaces permiten: - Estructurar contenidos por ficheros; mayor organización. - Adjuntar documentos para descargas. - Enlazar a: Secciones dentro del mismo documento. Enlazar a otra página local. Otra dirección de Internet. Direcciones de correo electrónico. La apariencia básica de un enlace es: Ir al Inicio. Ejemplos de enlaces: <a href= #inicio >Ir al Inicio.</a> <a href= cancion.mp3 >Descargar canción.</a> <a href= >AWCantabria</a> 26

27 Imágenes Es posible introducir imágenes en HTML. Se utiliza la etiqueta IMG. Su etiqueta no tiene cierre, se cierra al final con />. En el atributo src indicamos la ruta de la imagen; bien local o remota. Accesibilidad y posicionamiento; texto alternativo alt. Título con el atributo title. Ejemplo de imagen: <img src= imagen1.jpg alt= Imagen de un paisaje /> 27

28 Tablas Surgieron con la versión 3 de HTML. Nos permiten: - Representar y ordenar elementos en filas y columnas - Organizar datos. - Agrupar datos. Sus etiquetas son <table> y </table> - Las filas se definen con <tr> y </tr>. - Las celdas se definen con <td> y <th> y sus respectivos cierres. - <th> indica una celda encabezado de tabla(suele visualizarse en negrita). Se definen fila a fila y celda a celda. 28

29 Tablas Ejemplo de tabla. <TABLE BORDER="1"> <TR> <TH>Cabereca 1</TH> <TH>Cabereca 2</TH> <TH>Cabereca 3</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> <TD>Dato 3</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> <TD>Dato 6</TD> </TR> </TABLE> 29

30 Una visión al futuro 30

31 Una visión al futuro 31

32 Antecedentes HTML Tim Berners-Lee creó la primera descripción HTML en Divulgación de textos científicos. Describir semánticamente el texto. Pseudolenguaje de programación basado en etiquetas. Víctima de guerra de navegadores. Internet explorer ganó a Netscape. :( Retroespecificado en varias ocasiones. 32

33 Antecedentes XHTML (Futuro prometido) Mucho más estricto. Basado en XML. Mucho más difícil. Mejor para las máquinas. Un imposible por la web que estaba sucediendo... 33

34 Antecedentes Web 2.0 Aplicaciones web. Fin de las páginas estáticas. Cloud computing. La nube. Ajax. Web móvil. Segunda guerra de navegadores. (Nacen Firefox, Chrome, Safari, Opera...) 34

35 Timeline tecnologías web 1991 HTML 1994 HTML CSS 1 + JavaScript 1996 HTML CSS XHTML Diseño web sin tablas 2005 AJAX 2009? 35

36 HTML5 Qué es? Especificación para suplir necesidades actuales (Web applications) WHATWG - Web Application Technology Working Group. - Apple, Mozilla, Opera. - Ian Hickson (Google). Retroespecificación. 36

37 Novedades HTML5 Novedades Nuevas etiquetas. Eliminación de etiquetas. Soporte nativo multimedia. Sintaxis más simple para el ser humano. Formularios mejorados. Nuevas tecnologías (Canvas, geolocalización, almacenamiento offline...). 37

38 Novedades HTML5 Estructura básica <! DOCTYPE html> <html lang= es-es > <head> <title>título de la página</title> <meta charset= UTF-8 > </head> <body>  </body> </html> 38

39 Novedades HTML5 Doctype XHTML 1.1 <! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" " HTML5 <! DOCTYPE html> 39

40 Novedades HTML5 Declaración html XHTML 1.1 <html xmlns= lang= es xml:lang= es > HTML5 <html lang= es > 40

41 Novedades HTML5 Codificación de caracteres XHTML 1.1 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> HTML5 <meta charset= utf-8 > 41

42 Etiquetas semánticas Etiquetas semánticas Etiqueta <p> <li> <ol> <blink> Significado Párrafo Elemento de lista. Ordered list.... NO SON SUFICIENTES 42

43 Etiquetas semánticas Blog <div id= container > <div id= header > <h1>mi blog</h1> </div> <div id= main_menu class= navigation > <ul>  </ul> </div> <div id= main > <div class= post > <h2>titulo de la entrada</h2> <span class= date >...</span>...  </div>... </div> <div id= sidebar >  </div> </div> <div id= footer >  </div> 43

44 Blog Etiquetas semánticas <div id= container > <header> <h1>mi blog</h1> </header> <nav id= main > <ul>  </ul> </nav> <section id= main > <article> <header> <h2>titulo de la entrada</h2> <time datetime= pubdate>...</span> <nav class= category >...</nav>... </header>  <footer>  </footer> </article>  </section> <aside>  </aside> </div> <footer>  <footer> 44

45 Etiquetas semánticas Desaparecen <accronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <s> <strike> <tt> <u> <xmp> 45

46 Etiquetas semánticas Nuevas etiquetas <article> <aside> <audio> <canvas> <command> <datalist> <details> <dialog> <embed> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <time> <video> 46

47 Etiquetas semánticas Nuevas etiquetas Etiqueta <section> <nav> <article> <aside> <hgroup> Significado Sección genérica. Elemento de navegación, colección de enlaces. Unidad de contenido. Contenido relacionado. Colección de encabezados 47

48 Etiquetas semánticas Nuevas etiquetas Etiqueta <header> <footer> <time> <mark> Significado Cabecera de documento o sección. Pié de página o de sección. Fecha u hora. Texto resaltado. wtf? 48

49 Etiquetas semánticas Formularios Inputs viejos Text Password Radio Checkbox File Texto plano. Contraseñas. Opción dentro de grupo. Opciones si o no. Adjuntar ficheros. 49

50 Etiquetas semánticas Formularios Inputs nuevos search number range date, week, month, datetime tel, , url Campo de búsqueda. Campos numéricos Rango numérico. Campo de fecha. Obvio. 50

51 Etiquetas semánticas Video Soporte nativo para video. <video> No plugins. No IE! Firefox, Chrome, Safari... Guerra de codecs. Firefox vs Safari. Theora vs H.264. Chrome. 51

52 Etiquetas semánticas Video <video src= video.mp4 > <video src= video.mp4 width=320 height=240> <video src= video.mp4 width=320 height=240 controls> <video src= video.mp4 width=320 height=240 controls autobuffer (activo por defecto salvo en firefox ) autoplay> 52

53 Futuro Mirada al futuro Canvas Geolocation API Offline support Local databases Tecnología para dibujar en el navegador. Apple. Geolo... qué?. Aplicaciones fuera de línea. Aplicaciones de escritorio? Bases de datos locales (sqlite) 53

54 PREGUNTAS? 49

55 Darío Balbontín Fernández contacto@dariobf.com 55