Prototipado Web
1 recomendación995 vistas
El documento es una presentación del curso de prototipado web a cargo de Patricio Rodríguez, que abarca la creación de maquetas y codificación de documentos web utilizando HTML5 y CSS3. Se establece la importancia de entender la estructura de la web, el uso de HTML como lenguaje de marcado y las mejoras introducidas por HTML5. También se presenta un panorama sobre el crecimiento de Internet y su uso en Chile, destacando la penetración y la diversidad de contenidos consumidos.
Prototipado Web
- 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
- 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
- 20. ¿cómo buscamos EN LA WEB?
- 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 *
- 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.
- 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.