UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

ACT. 10 TRABAJO COLABORATIVO N 2 EVOLUCIN DEL DISEO WEB

CURSO DISEO 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 PINZN CORREA 1.073.236.273

UNAD INGENIERIA DE SISTEMAS 2012

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

TABLA DE CONTENIDO

INTRODUCCION 1. OBJETIVOS 1.2 GENERALES 1.3 ESPECFICOS 2. DESARROLLO DE LAS ACTIVIDADES 2.1 LITERAL A 2.2 LITERAL B 3. CONCLUSIONES 4. BIBLIOGRAFIA

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

INTRODUCCIN

En un principio las pginas web eran slo texto, pero a medida que ha evolucionado la tecnologa, tanto los ordenadores como las redes de telecomunicaciones, se ha generado nuevas formas de desarrollar la web. La inclusin de imgenes fue la evolucin ms significativa, pero tambin debemos mencionar el video y la animacin, o los espacios 3D, lo que aporta valores estilsticos, de diseo y de interactividad jams imaginados antes. El diseo de pginas web se ha desarrollado a medida que ha evolucionado Internet. Con el presente trabajo buscaremos un acercamiento a toda la evolucin del diseo web y las aplicaciones que durante su evolucin fueron tambin evolucionando como html.css

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

1. OBJETIVOS

1.2 OBJETIVOS GENERALES Conocer las diferentes tecnologas y herramientas que se han venido desarrollando en el diseo de pginas Web. Identificar qu aspectos han influenciado la evolucin del Diseo Web.

1.3 OBJETIVOS ESPECIFICOS Determinar los avances ms representativos en la evolucin del Diseo Web Desarrollar competencias que se ajusten al contexto del mundo actual para satisfacer las necesidades de los navegadores. Conocer los conceptos ms importantes en que tuvieron lugar en el desarrollo de sitios web.

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

2. DESARROLLO DE ACTIVIDADES

2.1 LITERAL A ESTNDAR HTML 4.0 VS ESTNDAR HTML 5 Html4.0 Html5.0 Address: representa la informacin de Reconocer otras tecnologas contacto y se aplica al documento como un como por ejemplo PHP. todo.

dinmicas

Encierra el texto que debe ser traducido por Tratar las pginas como aplicaciones el navegador como negrita. interactivas en lugar de documentos estticos. SGML HTML4 como instrucciones de Reconocer otras tecnologas dinmicas procesamiento y de marcado abreviado como por ejemplo PHP <big> Aumenta el tamao MIME, que es un estndar para alertar al software integrado el tipo de contenido que est procesando. Nuevos elementos <audio> y <video>

<center> permite alinear el texto

<dir>Lista de directorio, con elementos El elemento nuevo <men> puede ser marcados con <LI no soportado por htm5 utilizado no solo para los mens convencionales, sino tambin para las barras de herramientas y mens contextuales. <Font> Definicin de la fuente no soportado <Section> y <article> en HTML5 permitir a por htm5 los desarrolladores marcar estas reas de la pgina como tal. <frames> no soportado por htm5 <noframes> no soportado por htm5 Elemento <canvas> y su utilidad para la representacin de grficos. Elemento DOCTYPE que debe ser declarado al principio de la pgina. <article /> Elemento que nos permite declarar un trozo del contenido como artculo. Ideal para blogs o peridicos.

<strike> no soportado por htm5

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

ESTNDAR CSS1 VS ESTNDAR CSS3 Css1 Css3 Los selectores no pueden usarse en orden Capacidades visuales avanzadas: contiene ascendente segn la jerarqua del DOM varias mejoras en cuanto a interfaz grfica, (hacia padres u otros ancestros) como se posicionamiento y tamao de los objetos, hace mediante XPath. usando condiciones de alineacin 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 caractersticas de los objetos rectangulares, pueden ubicarse varias imgenes como fondo en un bloque (o en la pgina completa), en forma de capas: GRID POSITIONING, Multi-column layout: crear diseos con mltiples columnas sin etiquetas adicionales , debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna, es ms sencilla y requiere menos procesamiento. Hojas de Estilo Aural: Pretende utilizar las opciones de ciertos dispositivos con capacidades de reproduccin de sonido.

Propiedades de identificacin y presentacin de listas.

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 estndares. Es una propiedad abreviada para establecer Se podr agregar mltiples background a un las propiedades individuales del fondo (es objeto, los borders podrn ser redondos con decir, 'background-color', 'background- posibilidad de indicar el radio de curvatura. image', 'background-repeat', 'backgroundattachment' y 'background-position') en el mismo lugar en la hoja de estilos. Las pseudo-clases dinmicas (como: hover) no se pueden controlar o deshabilitar desde el navegador, lo que las hace susceptibles de abuso por parte de los diseadores en banners, o ventana emergentes.

Fuentes: Nuevas funciones sobre todo encaminadas a brindar un mejor soporte a mltiples lenguajes. Se pretende volver a incluir el @font-face para utilizar fuentes externas.

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera Ofrece la ventaja de la compatibilidad del cdigo entre los diferentes navegadores web. El uso de soluciones propietarias, como es el caso de muchas etiquetas o patrones usadas por Microsoft. CSS nos va a permitir tambin maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso. CSS 3 permitiran entre otras cosas usar imgenes para los bordes, redondear y/o agregar sombras. Posicionamiento de elementos en pantalla.

CSS 3 contiene varias mejoras en cuanto a interfaz grfica, posicionamiento y tamao de los objetos, usando condiciones de alineacin para cada uno. El objetivo es que sea ms sencillo posicionar los controles dentro de la pgina. Pretende utilizar las opciones de ciertos dispositivos con capacidades de reproduccin de sonido. El mdulo de audio podra agregar sonidos de fondo o efectos de transicin que se activaran mediante determinado evento. Bordes y Fondos: permitiran entre otras cosas usar imgenes para los bordes, redondear y/o agregar sombras. Posicionamiento de elementos en pantalla: se podr controlar de mejor manera los objetos y su direccin (horizontal o vertical).

A veces, dependiendo del navegador (Acid test), la pgina que ha sido maquetada con CSS puede verse distinta (Aunque, si hemos seguido los estndares web de forma correcta, el problema es del navegador).

Ausencia de expresiones de clculo numrico para especificar valores (por ejemplo margin-left: 10% 3em + 4px;). Un borrador de la W3C para CSS3, propone calc() para solventar esta limitacin.

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

2.2 . LITERAL B LINEA DEL TIEMPO EVOLUCION DEL DISEO WEB DIPITY Abordada del ao 1990 hasta el 2008 Dipity, el diseo web ha evolucionado de forma imparable desde la web textual a la web mvil y multimedia, la primera pgina web se public hace 20 aos. En la Lnea de Tiempo podemos observar por cada uno de los momentos que ha pasado el Diseo Web los cuales hemos establecido con diversas imagines para su mejor visualizacin en cuanto al conocimiento histrico por el cual paso y sus acontecimientos los cuales fueron muy representativos para el diseo junto con su duracin; pasando por una serie de periodos que abarcan el inicio del diseo por parte de Tim Berners Lee quien es conocido como el padre de (W3C) quien permiti por medio de la creacin de un sistema de hipertexto para facilitar el intercambio de informacin; de esta manera desarrollando un programa que diera la posibilidad de acceder a este tipo de red de informacin llamado World Wide Web. Dndonos a conocer los avances que se han tenido en cuanto en cuanto a los estndares de la Web, para la visualizacin y en equipos y mviles, con el desarrollo de una aplicacin e forma de reproductor creado por Macromedia inicialmente, partiendo de avances como estos para ir avanzando en el diseo, con aplicaciones y unas grandes facilidades a los usuarios para trabajar en una comunidad virtual. De esta manera aportndonos un gran conocimiento desde que empez y hasta el da de hoy lo que se ha llegado a desarrollar con su legado el cual ha sido muy interesante e importante para seguir en la bsqueda de estar en la ultima tecnologa y no dejarnos sobrepasar tanto por parte de otros pases, donde lo ideal es estar en igualdad de condiciones.

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

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

3. CONCLUSIONES

En la evolucin del diseo web podemos evidenciar cuatro generaciones: Primera: la estructuracin era bastante desordenada con imgenes dispuestas horizontalmente lneas 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 cdigo HTML Standard definido Tercera: los diseadores tienen ms dinamismo al aparecer el plugins de Macromedia Flash, generando una navegabilidad estructurada e intuitiva Cuarta: el diseo web ya est enfocado totalmente a la multimedia (dispositivos mviles) a la par con los navegadores que soportan estos elementos y la aparicin de las redes sociales.

Diseo web econmico o de Bajo Costo son conceptos que han estado en evolucin en los ltimos 20 aos, atendiendo los requerimientos de la situacin socioeconmica y tecnolgica del mundo. Permiti conocer cada uno de las etapas por la que se dio conocer la evolucin del diseo web el cual ha llevado al desarrollo de grandes aplicaciones que hoy en da son utilizadas a nivel mundial.

UNAD INGENIERIA DE SISTEMAS | 2012

UNIVERSIDADNACIONALABIERTAYADISTANCIAUNAD Escuela de Ciencias Bsicas Tecnologa e Ingeniera

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://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/

UNAD INGENIERIA DE SISTEMAS | 2012