Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción a la web

650 views

Published on

Introducción a los conceptos preliminares de la producción web, modelo de prototipados y explicación de las etiquetas de marcado.

Published in: Education
  • Be the first to comment

Introducción a la web

  1. 1. PROTOTIPADO WEB DISEÑO Patricio Rodríguez M. @taller_media lunes 12 de agosto de 2013
  2. 2. Diseñador Gráfico/Crossmedia Universidad de Valparaíso Magister en Marketing y Comunicaciones Desarrollador web desde 1998 Diploma Web Manager / Academia Mac Adobe Trainer Director de proyectos y community manager en particulas.cl Patricio Rodríguez M. lunes 12 de agosto de 2013
  3. 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. lunes 12 de agosto de 2013
  4. 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? lunes 12 de agosto de 2013
  5. 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 lunes 12 de agosto de 2013
  6. 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 lunes 12 de agosto de 2013
  7. 7. ESTO ES PARTE DE UN PROCESO lunes 12 de agosto de 2013
  8. 8. lunes 12 de agosto de 2013
  9. 9. lunes 12 de agosto de 2013
  10. 10. INTRODUCCIÓN A LA WEB lunes 12 de agosto de 2013
  11. 11. como se comporta internet hoy (nuestro mercado) lunes 12 de agosto de 2013
  12. 12. como se comporta internet hoy (nuestro mercado) lunes 12 de agosto de 2013
  13. 13. como se comporta internet hoy (nuestro mercado) lunes 12 de agosto de 2013
  14. 14. como se comporta internet hoy (nuestro mercado) lunes 12 de agosto de 2013
  15. 15. COMO BUSCAMOS EN LA WEB lunes 12 de agosto de 2013
  16. 16. lunes 12 de agosto de 2013
  17. 17. integración digital de herramientas multimedia para definición de proyectos web ¿que debemos aprender? lunes 12 de agosto de 2013
  18. 18. armar documentos para la web desde su diseño, optimización y vinculación entre lenguajes de programación lunes 12 de agosto de 2013
  19. 19. diseño basado en estándares proceso productivo del diseño web lunes 12 de agosto de 2013
  20. 20. arquitectura de contenidos define las categorías, páginas y flujo de navegación de un sitio web lunes 12 de agosto de 2013
  21. 21. wireframe estructura de alambre, que define la diagramación de un documento web lunes 12 de agosto de 2013
  22. 22. mock up maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio lunes 12 de agosto de 2013
  23. 23. html, css, javascript... (html5, css3) para esto debemos aprender a usar los lenguajes de programación lunes 12 de agosto de 2013
  24. 24. siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>) html lunes 12 de agosto de 2013
  25. 25. Nuevos elementos, más semánticos Un conjunto de APIs Retrocompatible Una nueva filosofía ¿QUÉ ES HTML5? lunes 12 de agosto de 2013
  26. 26. soporte HTML5 *última beta lunes 12 de agosto de 2013
  27. 27. aplicable dispositivos móviles lunes 12 de agosto de 2013
  28. 28. CODIFICACIÓN !DOCTYPE Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html5. <!DOCTYPE html> HTML 5 lunes 12 de agosto de 2013
  29. 29. CODIFICACIÓN ELEMENTO RAIZ <html lang=es> HTML 5 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> lunes 12 de agosto de 2013
  30. 30. CODIFICACIÓN CODIFICACIÓN <meta charset=”utf-8”/> HTML 5 Esto es para indicarle que estamos trabajando con el idioma español y que nos reconozca los caracteres especiales, tíldes y otros elementos propios del idioma. lunes 12 de agosto de 2013
  31. 31. CODIFICACIÓN LINK <link rel=”stylesheet” href=”style.css”/> HTML 5 Define relaciones con recursos externos, como puede ser el estilo. El atributo rel define el tipo de relación, stylesheet:  Indica que es un recurso de estilo tipo CSS lunes 12 de agosto de 2013
  32. 32. menos código lunes 12 de agosto de 2013
  33. 33. estructura de un documento html lunes 12 de agosto de 2013
  34. 34. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> <link rel=”stylesheet” href=”style.css”/> </head> </html> lunes 12 de agosto de 2013
  35. 35. estructura de las etiquetas <nombre_etiqueta> ............................</nombre_etiqueta> lunes 12 de agosto de 2013
  36. 36. La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto. texto lunes 12 de agosto de 2013
  37. 37. el código es interpretado lunes 12 de agosto de 2013
  38. 38. no basta con codificar para poder encontrar lunes 12 de agosto de 2013
  39. 39. mejorar la situación de un sitio web en buscadores (Google, Yahoo!, Bing, Ask…). Se trata de una disciplina que se desarrolla desde hace años (desde que Google revolucionó la forma que tenemos los usuarios de enfrentarnos a la web) y consiste e preparar los sitios web para que el buscador los encuentre. SEO (SEARCH ENGINE OPTIMIZATION) lunes 12 de agosto de 2013
  40. 40. El robot del buscador se pasa la vida recorriendo la red, de enlace en enlace, sin pausa. Va leyendo las páginas que se encuentra, las interpreta de acuerdo con una serie de criterios y las va guardando en un inmenso índice: la mayor base de datos que existe. ¿CÓMO FUNCIONA? lunes 12 de agosto de 2013
  41. 41. lunes 12 de agosto de 2013
  42. 42. Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad paranavegadores u otros programas que puedan valerse de esta información. Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. <meta> lunes 12 de agosto de 2013
  43. 43. <meta name='atributo' content='contenido del atributo'> <meta> lunes 12 de agosto de 2013
  44. 44. Permite incorporar un resumen que de cuenta cual es la estructura de contenidos del documento html. <meta name='description' content='Sitio dedicado al estudio de los sistemas de representación gráfica'> description lunes 12 de agosto de 2013
  45. 45. Incorporar palabras claves para optimizar el proceso de SEO del documento en los motores de búsqueda. <meta name='keywords' content='geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento'> keywords lunes 12 de agosto de 2013
  46. 46. Integra el nombre del desarrollador o equipo a cargo del documento <meta name='author' content='Patricio RM'> author lunes 12 de agosto de 2013
  47. 47. hoja de estilos en cascada lunes 12 de agosto de 2013
  48. 48. ¿Para que sirve? separación de los contenidos de los documentos escritos en HTML, XML, XHTML, HTML5 de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando así la apariencia de una página web de una forma más sencilla lunes 12 de agosto de 2013
  49. 49. CSS es un lenguaje formal (que se escribe en un archivo de texto), que define la presentación de un documento Html, Xml, Xhtml o Html5. lunes 12 de agosto de 2013
  50. 50. lunes 12 de agosto de 2013
  51. 51. ¿Cómo funciona? El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Debemos seleccionar la etiqueta de HTML que deseamos afectar por medio de atributos visuales para posteriormente asignar valores a los atributos. lunes 12 de agosto de 2013
  52. 52. CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. lunes 12 de agosto de 2013
  53. 53. preguntas?? lunes 12 de agosto de 2013

×