Internet y estándares de diseño web

MULTIMEDIA 1
diseño basado en estándares web

taller_media
viernes 26 de agosto de 2011

El problema central del diseñador no es
la gráﬁca, sino el impacto que ella tiene
en los conocimientos, las actitudes, y las
conductas de la gente.

multimedia 1 - internet y sitios web

OBJETIVO DEL CURSO
DESARROLLAR UN PROYECTO MULTIMEDIA EN
INTERNET CON HERRAMIENTAS DIGITALES


AL FINALIZAR EL CURSO EL
ESTUDIANTE SERÁ CAPAZ
DE:
Armar páginas Web a partir de un Diseño predeﬁnido,
optimizando el tamaño de los archivos que la componen.

Integrar las páginas en la constitución de un sitio Web.


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


peer map por volúmenes de conectividad

como se comporta internet hoy


¿que debemos
aprender?
integración digital de herramientas multimedia para
deﬁnición de proyectos web


armar documentos para la
web desde su diseño,
optimización y vinculación
entre lenguajes de
programación

estructurar un sitio

¿cual es el
mercado?
visto desde el paradigma de un desarrollador web


tasa de penetración

algo de historia
de donde venimos con internet y hacia donde vamos


de donde venimos

cambio en la curva de
aprendizaje

Promueve la separación del
contenido sobre el formato

web semántica

web semántica

proceso productivo
del diseño web
diseño basado en estándares


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é signiﬁca? ¿Qué aspecto ¿Qué hace?
tiene?

lenguajes de programación

deﬁne las categorías, páginas y ﬂujo de navegación de un sitio web

arquitectura

estructura de alambre,
que deﬁne la
diagramación de un
documento web

wireframe

maqueta ﬁnal que
presenta la propuesta
gráﬁca de un
documento, línea
visual de un sitio

mock up

para esto debemos
aprender a usar los
lenguajes de
programación
html, css, javascript... (html5, css3)


html
siglas de HyperText Markup Language (Lenguaje de
Marcado de Hipertexto)

HTML se escribe en forma de «etiquetas», rodeadas por
corchetes angulares (<,>)

estructura de un
documento html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Le indica al navegador que especiﬁcación de HTML se está
utilizando
HTML 4.01: los tipos de documento que deﬁne son: strict,
transitional y frameset.

<html>

deﬁne el inicio del documento HTML, le indica al navegador
que lo que viene a continuación debe ser interpretado como
código HTML

</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>

<html>
<head>
<title>título del documento</title>

</head>

deﬁne 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>

<html>
<head>
<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>

<html>
<head>
<link vínculo a hojas de estilo />
</head>

<body>

deﬁne 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 deﬁnirse propiedades comunes a
toda la página

</body>
</html>

básico para recordar
las etiquetas se indican por pares y se forman de la
siguiente manera:

< etiqueta de apertura >

< /etiqueta de apertura >

<nombre_etiqueta> ............................</nombre_etiqueta>

estructura

restricciones básicas
1) Las etiquetas se tienen que cerrar de acuerdo a como
se abren:
Ejemplo correcto en HTML:

Este es un párrafo con <a>un enlace</a>

2) Los nombres de las etiquetas y atributos siempre se
escriben en minúsculas:

Este es un párrafo con <a href="http://
www.google.com">un enlace</a>

3) El valor de los atributos siempre se encierra con
comillas:

Este es un párrafo con <a href="http://
www.google.com">un enlace</a>

editar contenidos
La tarea inicial del editor de contenidos HTML consiste en
estructurar el texto original deﬁniendo sus párrafos,
titulares y títulos de sección, como se muestra en la
siguiente imagen:


estructura

como funciona

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 deﬁne
HTML para el manejo del texto.


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


<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>

encabezados

formatos de
presentación


<body>
 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árrafo nuevo
</body>

<body>
Proin non suscipit sem. Duis quis diam sed
metus luctus pellentesque. Mauris magna
tortor, sodales eu elementum non, congue eu sem.



 Resalta una palabra o grupo
de palabras
</body>

<body>


 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.


 deﬁne una palabra o grupo de
palabras en cursiva
</body>

<body>


 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, <del>congue eu sem.</del>


<del> texto tachado
</body>

<body>


<ul>

</ul>

<ul> lista sin ordenar, uso de viñetas
</body>

<body>


<ul>
<li> -elemento 1</li>
</ul>

<li> elemento en una lista
</body>

hojas de estilo en
cascada CSS
introducción


¿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..., modiﬁcando así la apariencia de una página
web de una forma más sencilla


CSS es un lenguaje formal (que se escribe en un
archivo de texto), que deﬁne la presentación de un
documento Html, Xml, Xhtml o Html5.

web semántica

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" />

enlace de CSS

¿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.


CSS deﬁne una serie de términos que permiten
describir cada una de las partes que componen los
estilos CSS.

sintáxis de CSS

Internet y estándares de diseño web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Ähnlich wie Internet y estándares de diseño web

Ähnlich wie Internet y estándares de diseño web (20)

Mehr von iConstruye

Mehr von iConstruye (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Internet y estándares de diseño web