MULTIMEDIA 1      diseño basado en estándares web                      taller_mediaviernes 26 de agosto de 2011
El problema central del diseñador no es                la gráfica, sino el impacto que ella tiene                en los con...
OBJETIVO DEL CURSO      DESARROLLAR UN PROYECTO MULTIMEDIA EN      INTERNET CON HERRAMIENTAS DIGITALES     multimedia 1 - ...
AL FINALIZAR EL CURSO EL      ESTUDIANTE SERÁ CAPAZ      DE:      Armar páginas Web a partir de un Diseño predefinido,     ...
además      ๏conocer    estándares para el diseño de documentos web      ๏utilizar lenguajes de programación, pensando en ...
peer map por volúmenes de conectividad     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como se comporta internet hoy     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como se comporta internet hoy     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como se comporta internet hoy     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como se comporta internet hoy     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como se comporta internet hoy     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
¿que debemos       aprender?      integración digital de herramientas multimedia para      definición de proyectos web     ...
armar documentos para la     web desde su diseño,     optimización y vinculación     entre lenguajes de     programación  ...
¿cual es el       mercado?      visto desde el paradigma de un desarrollador web     multimedia 1 - internet y sitios webv...
tasa de penetración     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
tasa de penetración     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
algo de historia      de donde venimos con internet y hacia donde vamos     multimedia 1 - internet y sitios webviernes 26...
de donde venimos     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
cambio en la curva de     aprendizaje     Promueve la separación del     contenido sobre el formato                       ...
web semántica     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
proceso productivo       del diseño web         diseño basado en estándares     multimedia 1 - internet y sitios webvierne...
HTML                           CSS               XHTML                          CSS2               HTML5                  ...
define las categorías, páginas y flujo de navegación de un sitio web                                                        ...
estructura de alambre,                                            que define la                                            ...
maqueta final que                                            presenta la propuesta                                         ...
maqueta final que                                            presenta la propuesta                                         ...
para esto debemos       aprender a usar los       lenguajes de       programación         html, css, javascript... (html5,...
html      siglas de HyperText Markup Language (Lenguaje de      Marcado de Hipertexto)      HTML se escribe en forma de «e...
estructura de un      documento html     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">                ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">              <h...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">              <h...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">              <h...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">              <h...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">              <h...
<body>                               </body>     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
básico para recordar      las etiquetas se indican por pares y se forman de la      siguiente manera:      < etiqueta de a...
<nombre_etiqueta> ............................</nombre_etiqueta>                                                          ...
restricciones básicas      1) Las etiquetas se tienen que cerrar de acuerdo a como      se abren:      Ejemplo correcto en...
restricciones básicas      2) Los nombres de las etiquetas y atributos siempre se      escriben en minúsculas:      Ejempl...
restricciones básicas      3) El valor de los atributos siempre se encierra con      comillas:      Ejemplo correcto en HT...
editar contenidos      La tarea inicial del editor de contenidos HTML consiste en      estructurar el texto original defini...
estructura     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
como funciona     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
texto      La mayor parte del contenido de las páginas HTML      habituales está formado por texto, llegando a ser más del...
encabezados      Ayuda a marcar secciones de la página aparte de ser      títulos. ej:      h1: título del sitio o página ...
<body>                    h1: título del sitio o página                    h2: subtítulo                                  ...
encabezados     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
formatos de      presentación     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                               Pro...
hojas de estilo en     cascada CSS      introducción     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
¿Para que sirve?      separación de los contenidos de los documentos escritos      en HTML, XML, XHTML, HTML5 de la presen...
CSS es un lenguaje formal (que se escribe en un     archivo de texto), que define la presentación de un     documento Html,...
Dónde escribo la     parte de CSS?      Hay dos opciones para insertar estilos en un documento      HTML. Lo más normal es...
enlace de CSS     multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
¿Cómo funciona?      El lenguaje CSS se basa en una serie de reglas que rigen      el estilo de los elementos en los docum...
CSS define una serie de términos que permiten                               describir cada una de las partes que componen l...
Upcoming SlideShare
Loading in …5
×

Internet y estándares de diseño web

1,923 views

Published on

Definición del estado actual de internet, el crecimiento de la información y su administración por medio de estándares.

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,923
On SlideShare
0
From Embeds
0
Number of Embeds
340
Actions
Shares
0
Downloads
49
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Internet y estándares de diseño web

  1. 1. MULTIMEDIA 1 diseño basado en estándares web taller_mediaviernes 26 de agosto de 2011
  2. 2. El problema central del diseñador no es la gráfica, sino el impacto que ella tiene en los conocimientos, las actitudes, y las conductas de la gente. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  3. 3. OBJETIVO DEL CURSO DESARROLLAR UN PROYECTO MULTIMEDIA EN INTERNET CON HERRAMIENTAS DIGITALES multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  4. 4. AL FINALIZAR EL CURSO EL ESTUDIANTE SERÁ CAPAZ DE: Armar páginas Web a partir de un Diseño predefinido, optimizando el tamaño de los archivos que la componen. Integrar las páginas en la constitución de un sitio Web. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  5. 5. además ๏conocer estándares para el diseño de documentos web ๏utilizar lenguajes de programación, pensando en una web semántica (con sentido para el usuario) ๏realizar dirección de arte para web multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  6. 6. peer map por volúmenes de conectividad multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  7. 7. como se comporta internet hoy multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  8. 8. como se comporta internet hoy multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  9. 9. como se comporta internet hoy multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  10. 10. como se comporta internet hoy multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  11. 11. como se comporta internet hoy multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  12. 12. ¿que debemos aprender? integración digital de herramientas multimedia para definición de proyectos web multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  13. 13. armar documentos para la web desde su diseño, optimización y vinculación entre lenguajes de programación estructurar un sitio multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  14. 14. ¿cual es el mercado? visto desde el paradigma de un desarrollador web multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  15. 15. tasa de penetración multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  16. 16. tasa de penetración multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  17. 17. algo de historia de donde venimos con internet y hacia donde vamos multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  18. 18. de donde venimos multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  19. 19. cambio en la curva de aprendizaje Promueve la separación del contenido sobre el formato web semántica multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  20. 20. web semántica multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  21. 21. proceso productivo del diseño web diseño basado en estándares multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  22. 22. HTML CSS XHTML CSS2 HTML5 CSS3 JAVASCRIPT CONTENIDO PRESENTACIÓN COMPORTAMIENTO what does it what does it what does it mean? look like? do? ¿Qué significa? ¿Qué aspecto ¿Qué hace? tiene? lenguajes de programación multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  23. 23. define las categorías, páginas y flujo de navegación de un sitio web arquitectura multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  24. 24. estructura de alambre, que define la diagramación de un documento web wireframe multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  25. 25. maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio mock up multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  26. 26. maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio mock up multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  27. 27. para esto debemos aprender a usar los lenguajes de programación html, css, javascript... (html5, css3) multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  28. 28. html siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>) multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  29. 29. estructura de un documento html multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  30. 30. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Le indica al navegador que especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  31. 31. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML </html> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  32. 32. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> encabezado de la página - aquí se coloca titulo, metatags, e información para buscadores entre otras cosas. Está información no es visible. </html> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  33. 33. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>título del documento</title> </head> define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana. </html> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  34. 34. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>título del documento</title> <link vínculo a hojas de estilo /> </head> para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/ css">. </html> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  35. 35. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>título del documento</title> <link vínculo a hojas de estilo /> </head> <body> define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página </body> </html> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  36. 36. <body> </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  37. 37. básico para recordar las etiquetas se indican por pares y se forman de la siguiente manera: < etiqueta de apertura > < /etiqueta de apertura > multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  38. 38. <nombre_etiqueta> ............................</nombre_etiqueta> estructura multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  39. 39. restricciones básicas 1) Las etiquetas se tienen que cerrar de acuerdo a como se abren: Ejemplo correcto en HTML: <p>Este es un párrafo con <a>un enlace</a></p> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  40. 40. restricciones básicas 2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas: Ejemplo correcto en HTML: <p>Este es un párrafo con <a href="http:// www.google.com">un enlace</a></p> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  41. 41. restricciones básicas 3) El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en HTML: <p>Este es un párrafo con <a href="http:// www.google.com">un enlace</a></p> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  42. 42. editar contenidos La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus párrafos, titulares y títulos de sección, como se muestra en la siguiente imagen: multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  43. 43. estructura multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  44. 44. como funciona multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  45. 45. texto 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. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  46. 46. encabezados Ayuda a marcar secciones de la página aparte de ser títulos. ej: h1: título del sitio o página h2: subtítulo h3: título de sección h4: Subtítulo de sección h5: Título de elemento h6: subtítulo de elemento multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  47. 47. <body> h1: título del sitio o página h2: subtítulo h5: Título de elemento h3: título de sección h6: subtítulo de elemento h4: Subtítulo de sección </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  48. 48. encabezados multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  49. 49. formatos de presentación multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  50. 50. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. Duis quis diam sed metus luctus pellentesque. Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. Duis quis diam sed metus luctus pellentesque. Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <p> párrafo nuevo </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  51. 51. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. Duis quis diam sed metus luctus pellentesque. Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <strong> Resalta una palabra o grupo de palabras </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  52. 52. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <p> <em>Lorem ipsum dolor sit amet,</em>consectetur adipiscing elit. Proin non suscipit sem. Duis quis diam sed metus luctus pellentesque. Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <em> define una palabra o grupo de palabras en cursiva </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  53. 53. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <p> <em>Lorem ipsum dolor sit amet,</em>consectetur adipiscing elit. Proin non suscipit sem. Duis quis diam sed metus luctus pellentesque. Mauris magna tortor, sodales eu elementum non, <del>congue eu sem.</del> </p> <del> texto tachado </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  54. 54. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <ul> </ul> <ul> lista sin ordenar, uso de viñetas </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  55. 55. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <ul> </ul> <ul> lista sin ordenar, uso de viñetas </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  56. 56. <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non suscipit sem. <strong>Duis quis diam sed metus luctus pellentesque.</strong> Mauris magna tortor, sodales eu elementum non, congue eu sem. </p> <ul> <li> -elemento 1</li> <li> -elemento 2</li> <li> -elemento 3</li> <li> -elemento 4</li> </ul> <li> elemento en una lista </body> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  57. 57. hojas de estilo en cascada CSS introducción multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  58. 58. ¿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 multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  59. 59. 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. web semántica multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  60. 60. Dónde escribo la parte de CSS? Hay dos opciones para insertar estilos en un documento HTML. Lo más normal es hacerlo en un archivo externo (que se llama hoja de estilos) y enlazarlo desde nuestro documento HTML. <link href="nuestra_hoja.css" rel="stylesheet" type="text/css" /> multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  61. 61. enlace de CSS multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  62. 62. ¿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. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos. multimedia 1 - internet y sitios webviernes 26 de agosto de 2011
  63. 63. CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. sintáxis de CSS multimedia 1 - internet y sitios webviernes 26 de agosto de 2011

×