posicionamiento web primera parte: estructura de una página web y metadatos lluís codina upf idec...
TRANSCRIPT
![Page 1: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/1.jpg)
Posicionamiento Web Primera Parte: Estructura de una Página Web y
Metadatos
Lluís CodinaUPF
IDEC2010
![Page 2: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/2.jpg)
Cómo vemos nosotros una página web
Octubre 2010 2
![Page 3: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/3.jpg)
Como la ve un buscador
Octubre 2010 3
![Page 4: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/4.jpg)
El código fuente
Texto + Marcado Texto
Contenido textual visible (“para leer”) Marcado
Elementos XHTML Elementos de marcado (<h1>, <h2>, <p>, …) Elementos de sustitución (<a>, <img>, …) Contenido visual no visible directamente: metadatos
En el futuro: HTML 5 + CSS
Octubre 2010 4
![Page 5: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/5.jpg)
Ejemplo de código fuente suficiente
Octubre 2010 5
![Page 6: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/6.jpg)
El código fuente interpretado
Octubre 2010 6
![Page 7: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/7.jpg)
El mismo código completado
Octubre 2010 7
![Page 8: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/8.jpg)
Los metadatos destacados
Octubre 2010 8
![Page 9: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/9.jpg)
Matadatos más importantes
Elemento <title> en <head> Elementos <meta> con atributos name y
content en <head> Ejemplo:
<meta name=«description» content=«Análisis y métodos en documentación» />
Atributo title en elementos <a> (enlaces) Atributo alt en elementos <img>
Octubre 2010 9
![Page 10: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/10.jpg)
Octubre 2010
Práctica - I Crear una página web con el Bloc de Notas Entrar el contenido (archivo anexo):
10
pag01.txt
![Page 11: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/11.jpg)
Práctica - II Marcar la página con elementos estructurales, añadir un
enlace y guardar como pag01.htm
Octubre 2010 11
![Page 12: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/12.jpg)
Práctica - III
Entrar metadatos keyword and description en <head>
Entrar metadato title en el enlace
Octubre 2010 12
![Page 13: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/13.jpg)
Posible solución
Octubre 2010 13
![Page 14: Posicionamiento Web Primera Parte: Estructura de una Página Web y Metadatos Lluís Codina UPF IDEC 2010](https://reader036.vdocuments.site/reader036/viewer/2022062511/54e326ec4a7959ea5c8b541c/html5/thumbnails/14.jpg)
Práctica - IV
Añadir el metadato author (con el elemento <meta> y los atributos name y content)
Añadir un vídeo de YouTube Localizar un vídeo sobre el océano o la vida
marina Identificar la opción para incrustar el vídeo en
nuestra página Añadir o editar el atributo title Poner un encabezado <h2> antes del vídeo
Octubre 2010 14