1. MULTIMEDIA 1
diseño basado en estándares web
taller_media
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
3. OBJETIVO DEL CURSO
DESARROLLAR UN PROYECTO MULTIMEDIA EN
INTERNET CON HERRAMIENTAS DIGITALES
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
6. peer map por volúmenes de conectividad
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
7. como se comporta internet hoy
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
8. como se comporta internet hoy
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
9. como se comporta internet hoy
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
10. como se comporta internet hoy
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
11. como se comporta internet hoy
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
12. ¿que debemos
aprender?
integración digital de herramientas multimedia para
definición de proyectos web
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
14. ¿cual es el
mercado?
visto desde el paradigma de un desarrollador web
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
15. tasa de penetración
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
16. tasa de penetración
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
17. algo de historia
de donde venimos con internet y hacia donde vamos
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
18. de donde venimos
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
19. cambio en la curva de
aprendizaje
Promueve la separación del
contenido sobre el formato
web semántica
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
20. web semántica
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
21. proceso productivo
del diseño web
diseño basado en estándares
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
23. define las categorías, páginas y flujo de navegación de un sitio web
arquitectura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
24. estructura de alambre,
que define la
diagramación de un
documento web
wireframe
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
27. para esto debemos
aprender a usar los
lenguajes de
programación
html, css, javascript... (html5, css3)
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
29. estructura de un
documento html
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
36. <body>
</body>
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
43. estructura
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
44. como funciona
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
48. encabezados
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
49. formatos de
presentación
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
57. hojas de estilo en
cascada CSS
introducción
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
61. enlace de CSS
multimedia 1 - internet y sitios web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011
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 web
viernes 26 de agosto de 2011