Tracol2 13 Diseño Web

Trabajo Colaborativo 2
GRUPO: 301122_13
PRESENTADO POR: NELSON JAIR OSPINA BETANCUR CDIGO: 75102795 JUAN CARLOS FORERO ARIAS CDIGO 79319421 JHON ALEXANDER CARDENAS
JUAN CARLOS FORERO ARIAS NELSON JAIR OSPINA JUAN CAMILO JIMENEZ JHON ALEXANDER CARDENAS BUENO
DIRECTOR: MAURICIO PERDOMO VARGAS
Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 1 de 16
INTRODUCCIN Mediante el presente trabajo se pretende comprender mejor el desarrollo que ha tenido el diseo web, y la manera como ha venido cambiando su estructura logrando as un significativo cambio y beneficiando a muchas personas y empresas en todo el mundo. 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. Con el presente trabajo buscaremos un conoce de primera mano todo los componentes y evolucin de diseo de sitio web. En la sociedad de hoy, el acceso a cualquier clase de informacin se ve facilitado por diferentes tecnologas, esto hace necesario que se tenga una amplia visin de las ms recientes tecnologas con las que podemos contar. es cierto que es importante conocer la historia y el desarrollo de los temas a objetos del porque con ellos sabemos cmo se ha evolucionado, igualmente es importante definir como se resolvi el tema del diseo de los portales web ya que cada dia se encuentran ms herramienta que nos ayudan a hacer de estos, unos sitios interesantes con mucha de todo tipo: Visual, temtica, en formatos de multimedia imgenes grabaciones y todo esto solo nos indica un camino, y es ponerle mucha creatividad al momento de disear una pgina un sitio un blog, ya que se cuenta con muchas herramientas y cada da salen ms utilidades para que estemos ms actualizados y sea ms fcil los cambios. Los mantenimientos, y en general los nuevos proyectos.
En un mundo en constante evolucin, en el cual establecer un tipo de negocio nos lleva a usar otro tipo de formas de mercadeo, por ende es aqu en donde el diseo de pginas web resulta un factor indispensable en cuanto a la expansin o el fracaso de una empresa.
Al iniciar este proyecto investigativo, tena una idea muy arcaica sobre este tema, sin embargo al practicar e investigar sobre el tema, es muy amplio y productivo lo que se puede realizar, y cuando digo productivo no solo es pensando en factores econmicos sino fines educativos y porque no decirlo recreativos. OBJETIVOS 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.
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.
DESARROLLO DE LA ACTIVIDAD Literal A: Estndar Estndar
Declaracin de tipo DOCTYPE Sintaxis simplicada en la cual hay un <!DOCTYPE HTML PUBLIC "- existencia de un nico tipo de //W3C//DTD HTML 4.01//EN" declaracin DOCTYPE: <!doctype html>. Se incluyen elementos que carecen de ASIDE: Contenido no relacionado contenido, conocidos comnmente como directamente con el resto de la pgina. elementos vacos, lo cuales no tienen etiquetas finales. No es sensible al empleo de maysculas ARTICLE: Contenido independiente en y minsculas una pgina. Encabezado, pie y cuerpo, (por medio de FOOTER: Pi de una seccin. los elementos THEAD, TFOOT y TBODY, respectivamente). Identificar <div> elementos con la etiqueta HEADER: Cabecera de una seccin.
No se permite a los desarrolladores NAV: Seccin marcar reas de la pgina como tal. navegacin Uso basico de colores
con
elementos
de
INPUT permite un mayor nmero de tipos como son: color, date, email,
number, range, search o url entre otros. Uso de Flash CANVAS: empleado conjuntamente con JavaScript, permite generar dinmicamente imgenes, grficos, animaciones y transformaciones, lo que dota de gran interactividad en su diseo a las pginas Web. COMMAND: Se emplea para representar comandos que pueden ser ejecutados en un navegador Web.
No tiene comandos basicos
No permite insertar archivos de audio o Insertar archivos de audio y vdeo video mediante nuevos atributos como son: autofocus, inputmode, max, media, min, pattern o ping. Canvas es un entorno para crear imgenes de forma dinmica. Para crear una seccin o elemento de cambas basta con crear su etiqueta y definir una dimensin. MathML para frmulas matemticas. Estas caractersticas estn diseadas para hacer ms fcil para incluir y manejar multimedia y grfico contenido en la web sin tener que recurrir a las especialidades plugins y APIs La otra sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que no es ms que una sintaxis compatible con XML y documentos correctos en XHTML1. Los documentos servidos con esta sintaxis deben ser servidos mediante el MIME application/xml.
El trmino HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero no compatible con las caractersticas ms esotricas del SGML de HTML4.
El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al principio de la pgina, de esta forma nos aseguramos de que el navegador actualiza la pgina en modo estndar. En cambio para la versin XHTML5 este elemento es opcional debido a que XML acta de diferente manera dentro de nuestro navegador.
En la nueva versin, algunos de los elementos anteriormente desaprobados pasan a ser eliminados definitivamente. Acronym applet basefont big Center dir Font frame frameset isindex noframes noscript (solo en XHTML5) s strike ttu
HTML5 define de forma ms estricta el En HTML4 esto fue considerado como contenido para elementos <div /> y <li />. un bug de la espeficacin ya que Estos elementos ahora pueden contener permita el uso de ambos. contenido de elementos block o inline pero no los dos. Otra cosa que llama la atencin es el Estos elementos de HTML5 son campo INPUT, que ahora tendr muchos imcompatibles con HTML4. ms valores posibles en el atributo type: El elemento <a /> sin href ahora datetime, date, month, week, number, url, crear un enlace al sitio. email, color... El elemento <address /> es ahora un nuevo concepto de seccin. El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia. Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma. <menu /> ha sido redefinido para ser usado con los actuales mens. El elemento <small /> ahora representa una impresin pequea. El elemento <strong /> definitivamente representa el enfasis puesto en trozo de
nuestro texto.
Hay muchos otros esfuerzos ms pequeos tienen lugar en HTML5, como mejor definidos los roles semnticos de los elementos existentes <strong> y <em> ahora realmente significan algo diferente, e incluso <b> y <i> tienen una semntica vagas que deben trabajar bien cuando se analizan documentos antiguos y la adicin de nuevos elementos con semntica tiles <article>, <section>, <header>, <aside> y <NAV> debe sustituir a la mayora de <div> utilizados en una pgina web, por lo que sus pginas un poco ms semnticas, pero lo ms importante, ser ms fcil de leer. No escaneo ms doloroso ver lo que </ div> se cierra - en lugar usted tendr una obvia </ header>, o </ article>, por lo que la estructura de su documento mucho ms intuitivo. HTML5 incluye lo que previamente haba se manejaba en tres documentos separados: HTML4, XHTML1 y DOM2 HTML. Tambin significaba incluyendo significativamente ms detalle que previamente haba considerado la norma. A partir de ahora ya no es necesario poner las comillas en los atributos, y aunque sea una buena prctica hacerlo, ni siquiera ser necesario cerrar los elementos
Estndar CSS1 Webs ms elaboradas y ms dinmicas Separacin entre estilos y contenidos.
Estndar CSS3
Posibilidad de definir el un gradiente de color en el borde de los elementos con css, en un atributo no estndar de firefox Incluyen bordes redondeados, a travs del atributo border-radius, que define la curvatura que debe tener el borde del elemento El navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas El atributo border-image harn posible la utilizacin de imgenes como bordes de los elementos de la pgina, sin cdigo html especial, simplemente con hojas de estilo Podremos aplicar sombras a los elementos de la pgina, sin usar imgenes, javascript ni nada extra Permite decidir la posicin de la imagen de fondo con respecto al borde, padding o el contenido del elemento Definir cmo renderizar un contenido cuando sobrepasa los lmites de un contenedor en la horizontal o vertical Posibilidad de crear animaciones de los elementos de la pgina
Nuevas Propiedades
Bordes: border-color, borderimage, border-radius, boxshadow. Backgrounds: backgroundorigin, background-clip, background-size, layering multiple background images. Color: HSL colors, HSLA colors, RGBA colors opacity. Texto: text-shadow, textoverflow. Interface: box-sizing, resize. Selectores: attribute selectors. Formatos: media queries, multiple column layout, speech.
CSS nos ofrecen la posibilidad de definir las reglas y estilos de representacin en diferentes dispositivos, ya sean pantallas de equipos de escritorio, porttiles, mviles, impresoras u otros dispositivos capaces de mostrar contenidos web. los mltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a ms, es decir, el que est de ltimo es el background de encima.
Entre las principales caractersticas destacan que se podr agregar mltiples background a un objeto, los borders podrn ser redondos con posibilidad de indicar el radio de curvatura. Ahora ser ms sencillo crear diseos con mltiples columnas sin etiquetas adicionales. Esta caracterstica es extraordinaria y muy til.
A partir del ao 2005 se comenz a definir el sucesor de esta versin, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definicin, esta versin nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseo web Nacional actual. Universidad Abierta y A Distancia UNAD Desde opciones de sombreado y Pginas Web Diseo de Pgina 9 de 16 redondeado, hasta funciones
la implementacin de esta opcin en la versin actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multicolumna. La primera versin de CSS fue publicada a fines del ao 1996 y fue logrando popularidad y aceptacin hasta llegar a la versin 2.1, estndar actual que ofrece gran compatibilidad con la mayora de los navegadores del mercado.
avanzadas de movimiento y transformacin, CSS3 es el estndar que dominar la web por los siguientes aos. CSS3 ha sido dividido en diferentes secciones, denominadas mdulos. Cada uno de estos mdulos est haciendo su camino a travs de la W3C en distintas etapas del proceso de recomendacin.
La novedad de opacidad CSS3, esto se hace ahora en un solo paso CSS 3 tiene nuevos elementos como border-radius, sombras de la caja, imgenes de frontera no disponible en CSS. CSS3. Al no tener que cargar imgenes de fondo como mejoras estructurales como PNGs para esquinas redondeadas y gradientes puede ahorrar tiempo en la produccin. CSS3 cargar ms rpido, con un tamao ms pequeo de archivo general y menos peticiones HTTP Tiempo de produccin Tamao 49 minutos 767.9 KB CSS3 33% ms rpido CSS3 9,5% ms pequeo
CSS2 se present como un solo documento con toda la informacin de hojas de estilo en cascada en su interior. Porque cada uno de los mdulos se est trabajando en forma individual, contamos con una gama mucho ms amplia de navegador soporte para mdulos de CSS3. CSS, usted necesita utilizar varios hacks para producir el efecto de opacidad. incluye capacidades como posicionamiento relativo y fijo de elementos
Tiempo de produccin Tamao
73 minutos 849.2 KB
Solicitudes
22
Solicitudes
12
Gradientes CSS3 parecen estar de moda estos das y con razn. Como ya comentamos anteriormente, eran algo que anteriormente slo estaba disponible a travs de algo como Photoshop y la incorporacin de imgenes en su sitio. Ahora sin embargo, puede hacerlo a travs de un poco de magia de CSS3.
Ajuste a pantalla cuntos diferentes tamaos y resoluciones de dispositivo que estn llegando al mercado y se estn adoptando a un ritmo alarmante desde 27'' iMacs a iPod Touches y todo lo dems y todos navegar por la web Los selectores no pueden usarse en orden ascendente segn la jerarqua del DOM (hacia padres u otros ancestros) como se hace mediante XPath.
Capacidades visuales avanzadas: contiene varias mejoras en cuanto a interfaz grfica, posicionamiento y tamao de los objetos, usando condiciones de alineacin para cada uno.
La propiedad position y sus respectivos CSS3 incorpora lo siguiente: se pueden valores: static, relative, absolute, float con las manejar caractersticas de los objetos cuales e pueden hacer varia combinaciones rectangulares, pueden ubicarse varias imgenes como fondo en un bloque (o en la pgina completa), en forma de capas: GRID POSITIONING, Propiedades de identificacin y presentacin Multi-column layout: crear diseos con de listas. mltiples columnas sin etiquetas adicionales , debemos crear dos clases CSS y dos objetos DIV para simular la multicolumna, es ms sencilla y requiere menos procesamiento. Dificultad para el alineamiento vertical; as Hojas de Estilo Aural: Pretende utilizar las como el centrado horizontal se hace de opciones de ciertos dispositivos con manera evidente en CSS2.1, el centrado capacidades de reproduccin de sonido. 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.
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 marginleft: 10% 3em + 4px;). Un borrador de la W3C para CSS3, propone calc() para solventar esta limitacin.
HISTORIA DISEO DE PAGINAS WEB

1989, Tim BernersLee creo la "World Wide Web"
1995 aparece el navegador de Microsoft Internet Explorer el cual se popularizo porque vena integrado el sistema operativo Windows. 1996, el W3C public la primera recomendacin oficial, conocida como "CSS nivel 1". se permiti dar estilos a cada web con mejores y ms fciles herramientas que llevaron al boom de internet. 1997 HTML 4.0 incorpora opciones graficas tablas e imgenes. 1996 se lanz la primera versin de flash Macromedia programa orientado a aplicaciones de animacin. esta herramienta cambio la concepcin de la presentacin de los productos y la presentacin de la informacin.
1990 se entreg la primera versin de HTML SITIOS BASADOS EN TEXTO 1992 existan alrededor de 50 sitios web 1993 inicio Mosaic Primer diseo de pg. Web. Que en realidad era un navegador, En un ao recibi 2 de visitas. Y fue el origen de Netscape (1994) El diseo web de las paginas en estos inicios era lineal
En octubre de 1994, Berners-Lee fund El Consorcio W3C en el Laboratorio de Ciencias Informtica del Instituto de Tecnologa de Massachusetts 1994 aparece Lycos con el concepto de buscadores de internet estas aplicaciones nos dan las pautas para el posicionamiento de las paginas web en la internet, hoy el mas importante es google
1995 aparece Amazom.com el primer sitio web de comercio electrnico.
SITIOS BASADOS EN TABLAS 1998 aparece XML servira como base para el desarrollo de diferentes estndares, desde firmas digitales y formularios Web, hasta tecnologa en el rea de privacidad.
1998 fue creada google Inc. 2000 El SVG un lenguaje para mostrar grficos de dos dimensiones y aplicaciones grficas en XML SE TRABAJA CON CSS 2002 SE POPULARIZA EL EMPLEO DE JAVASCRIPT PARA EL DISEO DE PAGINAS WEB es una ayuda importante para ejecutar funciones en el navegador del usuario disminuyendo el trfico en la red. 2000, John Allsopp plantea las diferencias entre el diseo impreso y el diseo web 2004 se cre FaceBook la ms popular de las redes sociales en el mundo. 2005 se calcularon alrededor de 8000 de sitios web pero sol es visitado habitual mente el 0.4% de estos. 2006 se creo Twitter otro esquema de redes sociales. 2009, el diseo fluido de Ethan Marcotte solucin para adaptar a la pantalla de cada dispositivo la maquetacin de una pgina web. 2010, el diseo adaptativo. Ethan Marcotte . Colapsar, adaptar e incluso ocultar contenido son las tcnicas
WEB. hacer casi indispensable que los sitios web estn optimizados para mostrarse en mviles, dejando atrs los plugins que no se ven en este tipo de dispositivos.
Los sitios web para mviles permiten que el contenido cargue ms rpido. Los desarrolladores proporcionan aplicaciones y juegos para dispositivos como Iphone, Android o Blackberry
Ell diseo web integra diariamente todas las aplicaciones y elementos multimedia de ltima generacin. Hoy en dia la mayora de los portales web pueden verse desde cualquier dispositivo que se conecte a internet, acercando mucho ms a los usuarios, lo que les permite estar conectados casi todo el tiempo.
2011 se popularizo el acceso de dispositivos mviles a sitios

La pgina The Boston Globe es una de las ms importantes muestras de diseo web adaptativo
CONCLUSIONES La utilizacin de CSS3 y HTML5 proporciona a los desarrolladores de pginas web elemento ms llamativos en estos sitios en menor tiempo y maximizando los recursos de canal y conexin. Estos elemento innovadores ayudan a mejorar en un alto grado los diseos de los sitios web. Es un poco complejo realizar un diferenciador entre las dos versiones, ms que esto se destac una serie de caractersticas nuevas que seran las diferencias generales, tendramos que revisar punto a punto cuales fueron los cambios y en realidad son muchas las mejoras y tambin muchas las nuevas instrucciones, los nuevos atributos. El reconocimiento del desarrollo del Direo web a travs del tiempo nos muestra que es una actividad relativamente joven pero que ha evolucionado de una forma abismal, esto quiere decir que hace aproximadamente 20 aos se veian los portales de navegacin que eras las primeras pginas web supremamente planos cuadrados y sin mayores opciones, hoy nos encontramos con verdaderas joyas de arte, y adicionalmente con muchas funcionalidades, son portales interactivos, son transaccionales, agiles, entre otras caractersticas, todo esto gracias a la evolucin de las herramientas de desarrollo, a las teoras del diseo que se van generando de acuerdo a la evolucin de la industria de la computacin, porque se debe reconocer que esta actividad de la computacin es uno de los elementos mas sobresalientes en la tecnologa de punta. Hoy no podramos determinar un punto final a el diseo de las paginas, y todo gracias a la tendencia de tener toda la informacion el internet, gracias a la globalizacin del planeta o podramos arriegarnos a decir que gracias a esta evolucin se podo pensar en unir el planeta al reddor de todos estos gigantes avances tecnolgicos.
CIBERGRAFIA
http://www.dugage.cm/blog/blog2.html http://tupaginatuweb.com/index.php/articulos/7-blog/9-historia-del-diseno-web http://altamiraweb.net/historia-del-diseno-web#ixzz2Sna4lyeu http://luisportafolio.com/2011/05/cronologia_historia_diseno_web_infografia_espanol.php
http://www.anieto2k.com/2007/06/16/las-principales-diferencias-entre-html5-y-html4/ http://www.w3.org/TR/2009/WD-html5-diff-20090212/ http://www.w3.org/TR/html5-diff/ [4] http://www.w3.org/Style/CSS/ http://gabrielrodriguez.net/comparativa -de-css3-vs-css/ Modulo diseo de sitios WEB Universidad Nacional Abierta y a Distancia, UNAD. Jorge
Eduardo Salazar Ziga, Orlando Puentes Andrade. Revisin Y Modificacin Mauricio Perdomo Vargas La Plata Huila 10 De Diciembre De 2009.

Tracol2 13 Diseño Web

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tracol2 13 Diseño Web

Загружено:

Авторское право:

Доступные форматы

Trabajo Colaborativo 2

DIRECTOR: MAURICIO PERDOMO VARGAS

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 1 de 16

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 2 de 16

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 3 de 16

DESARROLLO DE LA ACTIVIDAD Literal A: Estndar Estndar

No tiene comandos basicos

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 7 de 16

Estndar CSS1 Webs ms elaboradas y ms dinmicas Separacin entre estilos y contenidos.

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 8 de 16

Tiempo de produccin Tamao

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 11 de 16

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 12 de 16

HISTORIA DISEO DE PAGINAS WEB

1995 aparece Amazom.com el primer sitio web de comercio electrnico.

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 13 de 16

2011 se popularizo el acceso de dispositivos mviles a sitios

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 15 de 16

Universidad Nacional Abierta y A Distancia UNAD Diseo de Pginas Web Pgina 16 de 16

Вам также может понравиться