Información general. Últimas noticias

(1)

Información general

(2)

Registro de miembros

Texto informativo

{

(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.

(4)

Sección miembros

(5)

Boletín de noticias

Orden del día

{

Título y fecha

{

(6)

Introducción a la maquetación web

Introducción a (X)HTML

(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.

(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.

(9)

“Todo en HTML está estructurado, organizado y segmentado en ‘bloques’”

(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.

(11)

Estructura

Esta podría ser la estructura básica de cualquier

documento HTML:

<! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Título de la página</title>  </head>

<body>

</body>

(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.

(13)

Estructura básica de cualquier documento HTML con el contenido organizado:

<! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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>

Estructuración de contenido

(14)

Etiquetas

· Pseudolenguaje basado en etiquetas.

· Todo contenido va incrustado en etiquetas. · Jerarquía de contenido.

· Formato de texto (negrita, cursiva...). · Listados.

· Tablas.

· Formularios.

(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

(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>

(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>

(18)

Formato de textos

<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>

Ejemplo de un texto con formato:

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.

(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.

(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: · Queso. · Jamón. · Refrescos. Lista de la compra: <ul> <li>Queso.</li> <li>Jamón.</li> <li>Refrescos.</li> </ul>

(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: 1.- Llamar a Pepe. 2.- Estudiar HTML. 3.- Comprar. Lista de tareas: <ol> <li>Llamar a Pepe.</li> <li>Estudiar HTML.</li> <li>Comprar.</li> </ol>

(22)

Listas anidadas

· Se pueden anidar listas entre sí.

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 <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>

(23)

Listas anidadas

· También se pueden combinar ambos tipos de listas y anidarlos.

Cosas por hacer: 1.- Llamar a Pepe. 2.- Comprar: · Queso. · Jamón. · Refrescos. 3.- Estudiar HTML.

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>

(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.

(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="email">email: </LABEL> <INPUT type="text" id="email"><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>

(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>

(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:

(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).

(29)

Tablas

<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> Ejemplo de tabla.

(30)

(31)

(32)

Antecedentes

· Tim Berners-Lee creó la primera descripción HTML en 1991.

· 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.

(33)

Antecedentes

· 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...

(34)

Antecedentes

· 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...)

(35)

Timeline tecnologías web

1991 HTML 1994 HTML 2 1994 CSS 1 + JavaScript 1996 HTML 4 1998 CSS 2 2000 XHTML 1

2002 Diseño web sin tablas

2005 AJAX

(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.

(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...).

(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>

(39)

Novedades HTML5

Doctype

<! DOCTYPE html> <! DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.1 HTML5

(40)

Novedades HTML5

Declaración html

<html lang=”es”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”es” xml:lang=”es”> XHTML 1.1 HTML5

(41)

Novedades HTML5

Codificación de caracteres

(42)

Etiquetas semánticas

Significado · Párrafo · Elemento de lista. · Ordered list. · ... Etiqueta <p> <li> <ol> <blink>

NO SON SUFICIENTES

(43)

Etiquetas semánticas

<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>

Blog

(44)

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>

</aside>

(45)

Etiquetas semánticas

Desaparecen

(46)

Etiquetas semánticas

Nuevas etiquetas

(47)

Etiquetas semánticas

Nuevas etiquetas

Significado · Sección genérica. · Elemento de navegación, colección de enlaces. · Unidad de contenido. · Contenido “relacionado”. · Colección de encabezados Etiqueta <section> <nav> <article> <aside> <hgroup>

(48)

Etiquetas semánticas

Nuevas etiquetas

Significado

· Cabecera de documento o sección.

· Pié de página o de sección. · Fecha u hora. · Texto resaltado. wtf? Etiqueta <header> <footer> <time> <mark>

(49)

Etiquetas semánticas

Formularios

· Texto plano. · Contraseñas.

· Opción dentro de grupo. · Opciones si o no. · Adjuntar ficheros. Text Password Radio Checkbox File Inputs viejos

(50)

Etiquetas semánticas

Formularios

· Campo de búsqueda. · Campos numéricos · Rango numérico. · Campo de fecha. · Obvio. search number range

date, week, month, datetime

tel, email, url

(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.

(52)

Etiquetas semánticas

Video

<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 )

(53)

Futuro

Mirada al futuro

· Tecnología para dibujar en el navegador. Apple.

· Geolo... ¿qué?.

· Aplicaciones fuera de línea. ¿Aplicaciones de escritorio? Bases de datos locales (sqlite) Canvas

Geolocation API Offline support Local databases

(54)

(55)

Darío Balbontín Fernández

www.dariobf.com - www.katharsix.com Twitter: @BalfeR