Introducción a la asignatura de prototipo web, comprensión del lenguaje HTML y su incidencia en la búsqueda de información en la web.

1. prototipado
WEB
Patricio Rodríguez M.
@taller_media

2. Diseñador Gráfico/Crossmedia Universidad de Valparaíso
Desarrollador web desde 1998
Diploma Crossmedia y Web Manager / Academia Mac
Adobe Trainer
Certificación Photoshop ACA, Dreamweaver ACA
Docente Crossmedia en Academia Mac
Director de proyectos y community manager en pandres.net
Patricio Rodríguez M.

3. Presentación
del curso
REALIZAR MAQUETAS DE CORRECCIÓN Y
PRESENTACIÓN DE PROYECTOS DE DISEÑO, PARA
DIFERENTES MEDIOS Y SOPORTES DE ACUERDO A
LOS REQUERIMIENTOS DEL PROYECTO.

4. Identifica lenguaje de marcado para codificación de documentos web,
de acuerdo a los requerimientos del proyecto.
Codifica documentos web aplicando lenguaje de marcado, en función
de los requerimientos del proyecto.
Genera maquetas de prueba de sitios web usando lenguaje de marcado
y hojas de estilo, de acuerdo a los requerimientos del proyecto a
representar.
Aplica aspectos visuales en prototipo utilizando lenguaje de hojas de
estilos, según requerimientos de diseño del proyecto.
Identifica lenguajes de hojas de estilo que definen aspectos visuales del
diseño, de acuerdo a los requerimientos del proyecto web.
¿qué debe de
aprender el alumno?

5. Identifica lenguaje de marcado para codificación de documentos web,
de acuerdo a los requerimientos del proyecto.
Codifica documentos web aplicando lenguaje de marcado, en función
de los requerimientos del proyecto.
Genera maquetas de prueba de sitios web usando lenguaje de marcado
y hojas de estilo, de acuerdo a los requerimientos del proyecto a
representar.
Aplica aspectos visuales en prototipo utilizando lenguaje de hojas de
estilos, según requerimientos de diseño del proyecto.
Identifica lenguajes de hojas de estilo que definen aspectos visuales del
diseño, de acuerdo a los requerimientos del proyecto web.
¿qué debe de
aprender el alumno?
HTML5

6. Identifica lenguaje de marcado para codificación de documentos web,
de acuerdo a los requerimientos del proyecto.
Codifica documentos web aplicando lenguaje de marcado, en función
de los requerimientos del proyecto.
Genera maquetas de prueba de sitios web usando lenguaje de marcado
y hojas de estilo, de acuerdo a los requerimientos del proyecto a
representar.
Aplica aspectos visuales en prototipo utilizando lenguaje de hojas de
estilos, según requerimientos de diseño del proyecto.
Identifica lenguajes de hojas de estilo que definen aspectos visuales del
diseño, de acuerdo a los requerimientos del proyecto web.
¿qué debe de
aprender el alumno?
CSS3

7. ESTO ES PARTE DE
UN PROCESO

10. introducción
A LA WEB

11. did you know?

12. como se comporta
internet hoy

13. como se comporta
internet hoy

14. como se comporta
internet hoy

16. Internet sigue masificándose, llegando a un 65% de penetración el
2012, un 12% más que el 2011.
Alcanzando un crecimiento de 38% en los últimos 5 años y un 81%
acumulado desde el 2004.
Evolución Penetración Internet
36% 38% 40%
44% 47%
52%
58% 58%
65%
2004 2005 2006 2007 2008 2009 2010 2011 2012
81%
38%
penetración de
internet

17. Según Edad
15-24 años 21,8 1.850
25-34 años 18,9 1.569
35-44 años 17,2 1.411
45-54 años 18,3 1.493
55+ años 18,1 1.329
13,8
17,2
18,8
18,9
19,5
21,5
24,1
35,6
26,1
Puerto Rico
Venezuela
México
Colombia
Chile
Perú
Argentina
Brasil
Latinoamérica
Horas Promedio Online Mes – Marzo 2013
promedio horas
online

18. 64%
65%
69%
72%
73%
74%
94%
Blogs
Música
Juegos
E-mail
Televisión
Retail
Noticias/Info.
ALCANCE POR TIPO DE SITIOS
Alcance de Categorías Clave - Marzo 2013
El uso de internet de los chilenos no sólo es intensivo en cantidad de horas, si no
también es extensivo en cantidad y diversidad de contenidos. Es así como, casi la
94%
95%
96%
96%
96%
97%
97%
97%
Multimedia
Redes Sociales
Directorios
Portales
Estilo de vida
Entretenimiento
Servicios
Búsqueda/ Navegación
Mundial
89%
94%
91%
70%
95%
80%
88%
80%
80%
77%
39%
67%
55%
47%
55%
Mundial
navegación por
categorías

19. evolución de la
comunicación

20. ¿cómo buscamos
EN LA WEB?

23. el código es
interpretado

24. lenguaje
HTML
siglas de Hyper Text Markup Language (Lenguaje de
Marcado de Hipertexto)
HTML se escribe en forma de «etiquetas», rodeadas por
corchetes angulares (<,>)

25. ¿qué es
HTML5?
Lo primero que debemos saber es que HTML sea cual sea su
versión no es un lenguaje de programación, tan solo es un
lenguaje de marcas, se usan una serie de etiquetas
estandarizadas, HTML se usa para crear la estructura de una
web, y se ha puesto de moda para las aplicaciones móviles,
gracias a Frameworks como PhoneGap

26. ¿qué es
HTML5?
Una de las grandes innovaciones de HTML5 ha sido la de
introducir semántica en nuestro código html de forma que
de nuestra web se pueda extraer más información de la que
ofrecemos mediante nuestros contenidos.

27. mejoras de
HTML5
HTML5 es un lenguaje más simple: El HTML 5 disminuye el tiempo de
carga de tus páginas y también ayuda a bajar el ratio de texto/HTML
HTML5 es un lenguaje más semántico: En otras palabras, se dota de un
significado a las diferentes partes de la páginas Web, de forma que el navegador
puede distinguir
HTML5 incluye más elementos gráficos y multimedia: Permite la
inserción de etiquetas canvas, que sustituyen a las animaciones en Flash y también
permite incluir de forma muy sencilla vídeos, música y otros

28. soporte
HTML5
*

29. dispositivos
móviles

30. elementos
HTML
Los documentos HTML estan compuestos por elementos, estos
a su vez por etiquetas, atributos y el contenido del elemento:
Este es un elemento de párrafo, <p> viene de paragraph. Todas
los elementos tienen como inicial sus nombres en ingles.

31. la estructura de este lenguaje es:
<etiqueta> contenido </etiqueta>
LAS ETIQUETAS SE ABREN Y CIERRAN
PARA PODER VISUALIZAR EL CONTENIDO
EN UN NAVEGADOR

32. comentarios
HTML
Es importante en un lenguaje de programación que se sepa usar
comentarios ya que estos sirven como guia. Un comentario en
HTML empieza con <!—y termina con –>

33. concepto de
sitio web
Un sitio web es una colección de páginas de internet
relacionadas y comunes a un dominio de Internet o subdominio
en la World Wide Web en Internet1 Una página web es un
documento HTML/XHTML que es accesible generalmente
mediante el protocolo HTTP de Internet.
Todos los sitios web públicamente accesibles constituyen una
gigantesca World Wide Web de información (un gigantesco
entramado de recursos de alcance mundial).

34. concepto de
sitio web
La forma habitual de crear un sitio consiste en crear una carpeta
en el disco local. Los documentos HTML normalmente se crean
dentro de dicha carpeta, mientras que para contener las
imágenes, las animaciones, archivos de tipos específico, etc., se
deben crear nuevas carpetas dentro de ésta, con el objetivo de
tener una mejor organización de los archivos a la hora de
trabajar.
Esto es lo que se conoce como sitio local.

36. etiquetas básicas
HTML

37. <!doctype>
Esta instrucción le indica al navegador que el documento debe
procesarse según la codificación html

38. <html>…</html>
Le indica al navegador donde comienza y termina el contenido
html del documento.
En realidad todo el documento debe estar contenido entre las
etiquetas <html></html>, con la única excepción de la
instrucción <!DOCTYPE html>

39. <head>…</head>
Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
No se visualiza en un navegador, pero es información relevante
para los motores de búsqueda a fin de interpretar un documento
y posicionarlo.

40. <meta>…</meta>
La etiqueta <meta> se utiliza para añadir información sobre la
página. Esta información puede ser utilizada por los buscadores.
Los buscadores consultan la información de la etiqueta <meta>
de las páginas, buscando coincidencias con lo que el usuario
pretende encontrar.
author: expresa quien es el autor del contenido del documento
description: entrega una breve descripción o resumen del
contenido ordenado del documento

41. <title>…</title>
Define el título del documento, el cual se muestra en la barra de
título del navegador o en las pestañas de página. Solamente
puede contener texto y cualquier otra etiqueta contenida no será
interpretada.