1                              computación                              mul t im e d ia                                   ...
El problema central del diseñador no es                     la gráfica, sino el impacto que ella tiene                     ...
POR TANTO... la gráfica                      cumple un rol fundamental                      en la comunicación y en        ...
Patricio Rodríguez M.      Diseñador Gráfico/Crossmedia      Universidad de Valparaíso      Desarrollador web desde 1998   ...
computación  mu ltime di a 1  objetivo de la asignatura  DESARROLLAR UN PROYECTO  MULTIMEDIA EN INTERNET CON  HERRAMIENTAS...
computación  mu ltime di a 1  al finalizar el semestre el alumno será capaz de:  Armar páginas Web a partir de un Diseño  ...
computación  mu ltime di a 1  además:  1. conocer estándares para el diseño de  documentos web  2. utilizar lenguajes de p...
computación  mu ltime di a 1  además:  1. conocer estándares para el diseño de  documentos web  2. utilizar lenguajes de p...
computación  mu ltime di a 1  además:  2. utilizar lenguajes de programación,  pensando en una web semántica (con sentido ...
computación  mu ltime di a 1  además:  3. realizar dirección de arte para web  2. utilizar lenguajes de programación,  pen...
como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
¿que debemos       aprender?     integración digital de herramientas multimedia para     definición de proyectos webmartes ...
armar documentos para la web desde       su diseño, optimización y vinculación       entre lenguajes de programaciónmartes...
proceso productivo       del diseño web         diseño basado en estándaresmartes 14 de agosto de 2012
arquitectura de contenidos     define las categorías, páginas y flujo de navegación de un sitio webmartes 14 de agosto de 2012
wireframe   estructura de alambre,   que define la   diagramación de un   documento webmartes 14 de agosto de 2012
mock up   maqueta final que   presenta la propuesta   gráfica de un documento,   línea visual de un sitiomartes 14 de agosto...
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 «etiq...
estructura de un     documento htmlmartes 14 de agosto de 2012
<!DOCTYPE HTML>                       Etiqueta especial que defina la estructura de su contenido.                       Est...
<!DOCTYPE HTML>             <html>                              elemento raíz: define el inicio del                        ...
<!DOCTYPE HTML>             <html>                <head>                     </head>                              encabeza...
<!DOCTYPE HTML>             <html>                <head>                       <meta charset=”utf-8”/>                    ...
<!DOCTYPE HTML>             <html>                <head>                       <meta charset=”utf-8”/>                    ...
<!DOCTYPE HTML>             <html>                <head>                       <meta charset=”utf-8”/>                    ...
estructura de las     etiquetas            <nombre_etiqueta> ............................</nombre_etiqueta>martes 14 de ag...
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    ...
encabezadosmartes 14 de agosto de 2012
párrafos                <body>                              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  ...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                              Proi...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                              Proi...
<body>                      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.                              Proi...
preguntas??martes 14 de agosto de 2012
Upcoming SlideShare
Loading in …5
×

Estructura de un documento html

1,057 views

Published on

Presentación de los conceptos básicos de internet y la estructura fundamental de un documento html para poder estructurar semánticamente la información en la web.

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

No Downloads
Views
Total views
1,057
On SlideShare
0
From Embeds
0
Number of Embeds
365
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Estructura de un documento html

  1. 1. 1 computación mul t im e d ia patricio rodríguez m. @taller_mediamartes 14 de agosto de 2012
  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 webmartes 14 de agosto de 2012
  3. 3. POR TANTO... la gráfica cumple un rol fundamental en la comunicación y en esta asignatura multimedia 1 - internet y sitios webmartes 14 de agosto de 2012
  4. 4. Patricio Rodríguez M. Diseñador Gráfico/Crossmedia Universidad de Valparaíso Desarrollador web desde 1998 Diploma Web Manager / Academia Mac Adobe Trainer (Photoshop, Dreamweaver, Flash) Director de proyectos y community manager en pandres.netmartes 14 de agosto de 2012
  5. 5. computación mu ltime di a 1 objetivo de la asignatura DESARROLLAR UN PROYECTO MULTIMEDIA EN INTERNET CON HERRAMIENTAS DIGITALESmartes 14 de agosto de 2012
  6. 6. computación mu ltime di a 1 al finalizar el semestre el alumno 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.martes 14 de agosto de 2012
  7. 7. computación mu ltime di a 1 además: 1. conocer estándares para el diseño de documentos web 2. utilizar lenguajes de programación, pensando en una web semántica (con sentido para el usuario) 3. realizar dirección de arte para webmartes 14 de agosto de 2012
  8. 8. computación mu ltime di a 1 además: 1. conocer estándares para el diseño de documentos web 2. utilizar lenguajes de programación, pensando en una web semántica (con sentido diagramación, dimensiones, para el usuario) uso tipográfico, paletas cromáticas, manejo de 3. realizar dirección de arte para web dispositivosmartes 14 de agosto de 2012
  9. 9. computación mu ltime di a 1 además: 2. utilizar lenguajes de programación, pensando en una web semántica (con sentido para el usuario) 2. utilizar lenguajes de programación, programar, para poder dar pensando en una web semántica (con sentido sentido al diseño, aprender para el usuario) un modelo de desarrollo 3. realizar dirección de arte para web profesionalmartes 14 de agosto de 2012
  10. 10. computación mu ltime di a 1 además: 3. realizar dirección de arte para web 2. utilizar lenguajes de programación, pensando en una web semántica (con sentido tener conceptos para el usuario) y compositivos, estéticos 3. realizar dirección de arte para web técnicos para desarrollar sitios webmartes 14 de agosto de 2012
  11. 11. como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
  12. 12. como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
  13. 13. como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
  14. 14. como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
  15. 15. como se comporta internet hoy (nuestro mercado)martes 14 de agosto de 2012
  16. 16. ¿que debemos aprender? integración digital de herramientas multimedia para definición de proyectos webmartes 14 de agosto de 2012
  17. 17. armar documentos para la web desde su diseño, optimización y vinculación entre lenguajes de programaciónmartes 14 de agosto de 2012
  18. 18. proceso productivo del diseño web diseño basado en estándaresmartes 14 de agosto de 2012
  19. 19. arquitectura de contenidos define las categorías, páginas y flujo de navegación de un sitio webmartes 14 de agosto de 2012
  20. 20. wireframe estructura de alambre, que define la diagramación de un documento webmartes 14 de agosto de 2012
  21. 21. mock up maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitiomartes 14 de agosto de 2012
  22. 22. para esto debemos aprender a usar los lenguajes de programación html, css, javascript... (html5, css3)martes 14 de agosto de 2012
  23. 23. html siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)martes 14 de agosto de 2012
  24. 24. estructura de un documento htmlmartes 14 de agosto de 2012
  25. 25. <!DOCTYPE HTML> Etiqueta especial que defina la estructura de su contenido. Esta etiqueta viene a marcar las reglas con las que está creada una página concreta.martes 14 de agosto de 2012
  26. 26. <!DOCTYPE HTML> <html> elemento raíz: 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>martes 14 de agosto de 2012
  27. 27. <!DOCTYPE HTML> <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>martes 14 de agosto de 2012
  28. 28. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”/> </head> codificación: determina como se verán ciertos caracteres </html>martes 14 de agosto de 2012
  29. 29. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”/> <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>martes 14 de agosto de 2012
  30. 30. <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”/> <title>título del documento</title> </head> <body> define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador. </body> </html>martes 14 de agosto de 2012
  31. 31. estructura de las etiquetas <nombre_etiqueta> ............................</nombre_etiqueta>martes 14 de agosto de 2012
  32. 32. 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.martes 14 de agosto de 2012
  33. 33. 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 elementomartes 14 de agosto de 2012
  34. 34. encabezadosmartes 14 de agosto de 2012
  35. 35. párrafos <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</p> </body>martes 14 de agosto de 2012
  36. 36. <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>martes 14 de agosto de 2012
  37. 37. <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>martes 14 de agosto de 2012
  38. 38. <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>martes 14 de agosto de 2012
  39. 39. preguntas??martes 14 de agosto de 2012

×