Internet y estándares de diseño web

MULTIMEDIA 1diseñ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 conocimientos, las actitudes, y las conductas de la gente.

multimedia 1 - internet y sitios webviernes 26 de agosto de 2011

OBJETIVO DEL CURSODESARROLLAR 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 predefinido, optimizando el tamaño de los archivos que la componen.

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


๏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

además

viernes 26 de agosto de 2011


peer map por volúmenes de conectividad



como se comporta internet hoy


integración digital de herramientas multimedia para definición de proyectos web


¿que debemos aprender?



estructurar un sitio

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


visto desde el paradigma de un desarrollador web


¿cual es el mercado?



tasa de penetración


de donde venimos con internet y hacia donde vamos


algo de historia



de donde venimos



web semántica

cambio en la curva de aprendizaje

Promueve la separación del contenido sobre el formato



web semántica


diseño basado en estándares


proceso productivo del diseño web



lenguajes de programación

HTMLXHTMLHTML5

CSSCSS2CSS3 JAVASCRIPT

CONTENIDO

what does it mean?¿Qué significa?

PRESENTACIÓN

what does it look like?¿Qué aspecto tiene?

COMPORTAMIENTO

what does it do?¿Qué hace?



arquitectura

define las categorías, páginas y flujo de navegación de un sitio web



wireframe

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



mock up

maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio


html, css, javascript... (html5, css3)


para esto debemos aprender a usar los lenguajes de programación


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

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


html


http://es.wikipedia.org/wiki/Par%C3%A9ntesis

http://es.wikipedia.org/wiki/Par%C3%A9ntesis


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 especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset.


http://www.w3.org/TR/html4/loose.dtd

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>

</html>




http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/Navegador_web

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>

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

</html>

<head>

</head>

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

para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.

<html>

</html>

<head>

</head>


<link vínculo a hojas de estilo />




http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada

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

<html>

</html>

<head>

</head>


<link vínculo a hojas de estilo />

<body>

</body>

las etiquetas se indican por pares y se forman de la siguiente manera:

< etiqueta de apertura >

< /etiqueta de apertura >


básico para recordar

estructura

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

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>


restricciones básicas

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

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




http://www.google.com

3) El valor de los atributos siempre se encierra con comillas:Ejemplo correcto en HTML:

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

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:


editar contenidos



estructura



como funciona


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


Ayuda a marcar secciones de la página aparte de ser títulos. ej:

h1: título del sitio o páginah2: subtítuloh3: título de secciónh4: Subtítulo de secciónh5: Título de elementoh6: subtítulo de elemento


encabezados


<body>

</body>

h1: título del sitio o páginah2: subtítulo

h3: título de secciónh4: Subtítulo de sección

h5: Título de elementoh6: subtítulo de elemento


encabezados



formatos de presentación


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










 párrafo nuevo

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










 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.





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

</ul>

<li> elemento en una lista

<li> -elemento 1</li><li> -elemento 2</li><li> -elemento 3</li><li> -elemento 4</li>


hojas de estilo en cascada CSSintroducció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..., modificando así la apariencia de una página web de una forma más sencilla



web semántica

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.


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.



sintáxis de CSS

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


Internet y estándares de diseño web

Design

Transcript of Internet y estándares de diseño web