trabajo final de diseño de sitios web numero 2

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Básicas Tecnología e Ingeniería

UNAD INGENIERIA DE SISTEMAS | 2012

ACT. 10 TRABAJO COLABORATIVO N° 2

EVOLUCIÓN DEL DISEÑO WEB

CURSO

DISEÑO DE SITIOS WEB

TUTOR

MAURICIO PERDOMO VARGAS (Director)

CURSO

301122_55

INTEGRANTES

ANGIE ANDREA LOPEZ RUIZ C/c1.072.235.994

JORGE LUIS MIRANDA RUZ 1.072.254.484

IVONN PINZÓN CORREA 1.073.236.273

UNAD

INGENIERIA DE SISTEMAS

2012



TABLA DE CONTENIDO

INTRODUCCION

1. OBJETIVOS

1.2 GENERALES

1.3 ESPECÍFICOS

2. DESARROLLO DE LAS ACTIVIDADES

2.1 LITERAL A

2.2 LITERAL B

3. CONCLUSIONES

4. BIBLIOGRAFIA



INTRODUCCIÓN

En un principio las páginas web eran sólo texto, pero a medida que ha evolucionado la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusión de imágenes fue la evolución más significativa, pero también debemos mencionar el video y la animación, o los espacios 3D, lo que aporta valores estilísticos, de diseño y de interactividad jamás imaginados antes. El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. Con el presente trabajo buscaremos un acercamiento a toda la evolución del diseño web y las aplicaciones que durante su evolución fueron también evolucionando como html.css



1. OBJETIVOS

1.2 OBJETIVOS GENERALES

Conocer las diferentes tecnologías y herramientas que se han venido desarrollando

en el diseño de páginas Web.

Identificar qué aspectos han influenciado la evolución del Diseño Web.

1.3 OBJETIVOS ESPECIFICOS

Determinar los avances más representativos en la evolución del Diseño Web

Desarrollar competencias que se ajusten al contexto del mundo actual para satisfacer

las necesidades de los navegadores.

Conocer los conceptos más importantes en que tuvieron lugar en el desarrollo de

sitios web.



2. DESARROLLO DE ACTIVIDADES

2.1 LITERAL A

ESTÁNDAR HTML 4.0 VS ESTÁNDAR HTML 5

Html4.0 Html5.0

Address: representa la información de

contacto y se aplica al documento como un

todo.

Reconocer otras tecnologías dinámicas

como por ejemplo PHP.

Encierra el texto que debe ser traducido por

el navegador como negrita.

Tratar las páginas como aplicaciones

interactivas en lugar de documentos

estáticos.

SGML HTML4 como instrucciones de

procesamiento y de marcado abreviado

Reconocer otras tecnologías dinámicas

como por ejemplo PHP

<big> Aumenta el tamaño MIME, que es un estándar para alertar al

software integrado el tipo de contenido que

está procesando.

<center> permite alinear el texto Nuevos elementos <audio> y <video>

<dir>Lista de directorio, con elementos

marcados con <LI no soportado por htm5

El elemento nuevo <menú> puede ser

utilizado no solo para los menús

convencionales, sino también para las

barras de herramientas y menús

contextuales.

<Font> Definición de la fuente no soportado

por htm5

<Section> y <article> en HTML5 permitirá a

los desarrolladores marcar estas áreas de la

página como tal.

<frames> no soportado por htm5 Elemento <canvas> y su utilidad para la

representación de gráficos.

<noframes> no soportado por htm5 Elemento DOCTYPE que debe ser

declarado al principio de la página.

<strike> no soportado por htm5 <article /> Elemento que nos permite

declarar un trozo del contenido como

artículo. Ideal para blogs o periódicos.

http://www.ordenadores-y-portatiles.com/software.html



ESTÁNDAR CSS1 VS ESTÁNDAR CSS3

Css1 Css3

Los selectores no pueden usarse en orden

ascendente según la jerarquía del DOM

(hacia padres u otros ancestros) como se

hace mediante XPath.

Capacidades visuales avanzadas: contiene

varias mejoras en cuanto a interfaz gráfica,

posicionamiento y tamaño de los objetos,

usando condiciones de alineación para cada

uno.

La propiedad position y sus respectivos

valores: static, relative, absolute, float con

las cuales e pueden hacer varia

combinaciones

CSS3 incorpora lo siguiente: se pueden

manejar características de los objetos

rectangulares, pueden ubicarse varias

imágenes como fondo en un bloque (o en la

página completa), en forma de capas: GRID

POSITIONING,

Propiedades de identificación y presentación

de listas.

Multi-column layout: crear diseños con

múltiples columnas sin etiquetas adicionales

, debemos crear dos clases CSS y dos

objetos DIV para simular la multi-columna,

es más sencilla y requiere menos

procesamiento.

Dificultad para el alineamiento vertical; así

como el centrado horizontal se hace de

manera evidente en CSS2.1, el centrado

vertical requiere de diferentes reglas en

combinaciones no evidentes, o no

estándares.

Hojas de Estilo Aural: Pretende utilizar las

opciones de ciertos dispositivos con

capacidades de reproducción de sonido.

Es una propiedad abreviada para establecer

las propiedades individuales del fondo (es

decir, 'background-color', 'background-

image', 'background-repeat', 'background-

attachment' y 'background-position') en el

mismo lugar en la hoja de estilos.

Se podrá agregar múltiples background a un

objeto, los borders podrán ser redondos con

posibilidad de indicar el radio de curvatura.

Las pseudo-clases dinámicas (como: hover)

no se pueden controlar o deshabilitar desde

el navegador, lo que las hace susceptibles

de abuso por parte de los diseñadores en

banners, o ventana emergentes.

Fuentes: Nuevas funciones sobre todo

encaminadas a brindar un mejor soporte a

múltiples lenguajes. Se pretende volver a

incluir el @font-face para utilizar fuentes

externas.



Ofrece la ventaja de la compatibilidad del

código entre los diferentes navegadores

web. El uso de “soluciones propietarias”,

como es el caso de muchas etiquetas o

patrones usadas por Microsoft.

CSS 3 permitirían entre otras cosas usar

imágenes para los bordes, redondear y/o

agregar sombras. Posicionamiento de

elementos en pantalla.

CSS nos va a permitir también maquetar

separadamente el contenido de nuestra web

para ser mostrado en pantalla o para ser

impreso.

CSS 3 contiene varias mejoras en cuanto a

interfaz gráfica, posicionamiento y tamaño

de los objetos, usando condiciones de

alineación para cada uno. El objetivo es que

sea más sencillo posicionar los controles

dentro de la página.

A veces, dependiendo del navegador (Acid

test), la página que ha sido maquetada con

CSS puede verse distinta (Aunque, si hemos

seguido los estándares web de forma

correcta, el problema es del navegador).

Pretende utilizar las opciones de ciertos

dispositivos con capacidades de

reproducción de sonido. El módulo de audio

podría agregar sonidos de fondo o efectos

de transición que se activarían mediante

determinado evento.

Ausencia de expresiones de cálculo

numérico para especificar valores (por

ejemplo margin-left: 10% – 3em + 4px;). Un

borrador de la W3C para CSS3, propone

calc() para solventar esta limitación.

Bordes y Fondos: permitirían entre otras cosas usar imágenes para los bordes, redondear y/o agregar sombras. Posicionamiento de elementos en pantalla: se podrá controlar de mejor manera los objetos y su dirección (horizontal o vertical).



2.2 . LITERAL B

LINEA DEL TIEMPO EVOLUCION DEL DISEÑO WEB DIPITY

Abordada del año 1990 hasta el 2008 Dipity, el diseño web ha evolucionado de forma

imparable desde la web textual a la web móvil y multimedia, la primera página web se

publicó hace 20 años.

En la Línea de Tiempo podemos observar por cada uno de los momentos que ha pasado

el Diseño Web los cuales hemos establecido con diversas imagines para su mejor

visualización en cuanto al conocimiento histórico por el cual paso y sus acontecimientos

los cuales fueron muy representativos para el diseño junto con su duración; pasando por

una serie de periodos que abarcan el inicio del diseño por parte de Tim Berners Lee quien

es conocido como el padre de (W3C) quien permitió por medio de la creación de un

sistema de hipertexto para facilitar el intercambio de información; de esta manera

desarrollando un programa que diera la posibilidad de acceder a este tipo de red de

información llamado World Wide Web.

Dándonos a conocer los avances que se han tenido en cuanto en cuanto a los estándares

de la Web, para la visualización y en equipos y móviles, con el desarrollo de una

aplicación e forma de reproductor creado por Macromedia inicialmente, partiendo de

avances como estos para ir avanzando en el diseño, con aplicaciones y unas grandes

facilidades a los usuarios para trabajar en una comunidad virtual.

De esta manera aportándonos un gran conocimiento desde que empezó y hasta el día de

hoy lo que se ha llegado a desarrollar con su legado el cual ha sido muy interesante e

importante para seguir en la búsqueda de estar en la ultima tecnología y no dejarnos

sobrepasar tanto por parte de otros países, donde lo ideal es estar en igualdad de

condiciones.

Link: http://www.dipity.com/angiealoru/Evolucion-del-Dise-o-Web/?s=t

http://www.dipity.com/angiealoru/Evolucion-del-Dise-o-Web/?s=t



3. CONCLUSIONES

En la evolución del diseño web podemos evidenciar cuatro generaciones:

Primera: la estructuración era bastante desordenada con imágenes dispuestas

horizontalmente líneas de texto separadoras por lo cual se estableció un consorcio

para crear unas normas y pautas para el futuro desarrollo de la web, el W3C.

Segunda: las paginas empiezan a utilizar iconos en lugar de algunas palabra, uso

de botones y del

código HTML Standard definido

Tercera: los diseñadores tienen más dinamismo al aparecer el plugins de

Macromedia Flash, generando una navegabilidad estructurada e intuitiva

Cuarta: el diseño web ya está enfocado totalmente a la multimedia (dispositivos

móviles) a la par con los navegadores que soportan estos elementos y la aparición

de las redes sociales.

Diseño web económico o de Bajo Costo son conceptos que han estado en evolución

en los últimos 20 años, atendiendo los requerimientos de la situación socio-

económica y tecnológica del mundo.

Permitió conocer cada uno de las etapas por la que se dio conocer la evolución del

diseño web el cual ha llevado al desarrollo de grandes aplicaciones que hoy en día

son utilizadas a nivel mundial.



4. REFERENCIAS BIBLIOGRAFICAS

http://es.wikipedia.org

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

http://www.w3c.es

http://www.lsi.us.es/docencia/get.php?id=2780

http://www.hooping.net/faq-historia-diseno-web.aspx

http://es.scribd.com/doc/63426583/Diferencias-Entre-HTML-y-HTML-5

http://www.w3schools.com/tags/tag_video.asp


http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/

http://es.wikipedia.org/


http://www.w3c.es/

http://www.lsi.us.es/docencia/get.php?id=2780

http://www.hooping.net/faq-historia-diseno-web.aspx

http://es.scribd.com/doc/63426583/Diferencias-Entre-HTML-y-HTML-5

http://www.w3schools.com/tags/tag_video.asp


http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/

trabajo final de diseño de sitios web numero 2

Documents