Colaborativo Final 2 Diseño Sitios Web

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ESCUELA DE CIENCIAS BÁSICAS TECNOLOGÍA E INGENIERÍA – ECBTI

INGENIERIA DE SISTEMAS

DISEÑO DE SITIOS WEB– 301122

CEAD PASTO

GRUPO 3

ACTIVIDAD NÚMERO 10: TRABAJO COLABORATIVO 2

PRESENTADO POR:

MEDARDO ALFREDO VALLEJO CABRERA

ANDRES MOSQUERA

FERNANDO BURGOS

JORGE ELIECER LOPEZ

PABLO ISIDRO ORDOÑEZ

TUTOR:

MAURICIO PERDOMO VARGAS

MAYO DE 2013

2

TABLA DE CONTENIDO

Pág.

INTRODUCCIÓN

3

OBJETIVOS

4

1.1 OBJETIVO GENERAL

4

1.2 OBJETIVOS ESPECÍFICOS

4

2. CUADROS COMPARATIVOS

5

2.1 CUADRO COMPARATIVO ESTÁNDAR HTML 4.0 VS ESTÁNDAR HTML 5

5

2.2 CUADRO COMPARATIVO ESTÁNDAR CSS1 VS ESTÁNDAR CSS3

6

3. DESCRIPCIÓN GENERAL LÍNEA DE TIEMPO EVOLUCIÓN DEL DISEÑO WEB

8

4. CONCLUSIONES

9

BIBLIOGRAFÍA

10

3

INTRODUCCION

La globalización junto con la propagación que se está generando hoy en día por adquisición de tecnología cada vez más sofisticada y el alcance masivo de los medios de comunicación ha llevado a la sociedad actual a utilizar técnicas y herramientas de última tecnología aplicable a todos los contextos como el laborar, educativo, comercial y de entretenimiento, para la difusión de todo tipo de información la cual toma mayor sentido, atención, coherencia y estilo gracias a la infinidad de sitios web difundidos a través de la red de redes “Internet”.

Todo esto se debe a los avances que se están dando en el campos de la informática, la computación y las telecomunicaciones, además de la masificación que se está generando en la sociedad por cuenta de la utilización de las nuevas tecnologías de la información y la comunicación TIC y el uso cada día más frecuente de internet. Hoy al encender nuestro Smart TV, nuestra Tablet, nuestro Smart Phone o nuestra computadora, cuando navegamos por internet o cuando vemos televisión, nos encontramos con un sinnúmero websites que inundan nuestros sentidos con información de toda clase.

Por tal razón se hace necesario conocer la fundamentación teórica necesarios para poder realizar la planificación y construcción de proyectos de Diseño Web, haciendo uso de las mejores prácticas de programación para internet donde se complementen diferentes tipos de herramientas para la creación de websites como HTML5, PHP, JavaScrip, CSS3, Flash entre otros que nos permitan crear sitios web modernos e interactivos

De esta manera este segundo trabajo colaborativo busca que nosotros como estudiantes activos en nuestra carrera profesional estemos en la capacidad de planificar y construir proyectos de Diseño de sitios Web que al final permitan la construcción, consolidación y apropiación del conocimiento útil en nuestra etapa universitaria y profesional.

4

1. OBJETIVOS

1.1 OBJETIVO GENERAL

Adquirir los conocimientos necesarios para poder realizar la planificación y construcción de proyectos de Diseño Web.

1.2 OBJETIVOS ESPECÍFICOS

Realizar una lectura autorregulada de la unidad uno módulo correspondiente a vínculos, búsquedas y tipografía para el diseño web.

Realizar tablas comparativas donde se especifique las diferencias más significativas entre el Estándar HTML 4.0 VS Estándar HTML 5 y el Estándar CSS1 VS Estándar CSS3.

construir una bitácora de tiempo sobre la evolución del diseño web con personajes, fechas y los sucesos más representativos.

Construir una línea de tiempo Online mediante la herramienta Dipity donde se refleje los acontecimientos más importantes de la evolución del diseño web.

Elaborar un documento donde se resalten las tablas comparativas en las que se especifique las diferencias más significativas entre el Estándar HTML 4.0 VS Estándar HTML 5 y el Estándar CSS1 VS Estándar CSS3 y la información general de las temáticas abordadas en línea de tiempo elaborada en dipity.

Comprender de manera más detallada sobre las generalidades del diseño web y su aplicabilidad en el diseño e implementación de sitios web.

5

2. CUADROS COMPARATIVOS

2.1 CUADRO COMPARATIVO ESTÁNDAR HTML 4.0 VS ESTÁNDAR HTML 5

HTML 4.0 HTML 5 CODIFICACIÓN DE CARACTERES: uso de un meta elemento con un conjunto de caracteres que especifica el atributo de codificación dentro de los primeros 1024 bytes del documento. Por ejemplo, <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> CODIFICACIÓN DE CARACTERES: uso de un meta elemento con un conjunto de caracteres que especifica el atributo de codificación dentro de los primeros 1024 bytes del documento. Por ejemplo, <meta charset="UTF-8"> MathML y SVG: La sintaxis de HTML HTML4 no permite MathML y SVG. Se podrían usar elementos comopor ejemplo textoM y foreignObject , MathML y SVG: La sintaxis de HTML HTML5 permite MathML y SVG elementos que se utilizarán dentro de un documento. <article /> no corresponde a un elemento que hace parte de este estándar. <article /> elemento que nos permite declarar un trozo del contenido como artículo. Ideal para blogs o periódicos. <dialog /> no corresponde a un elemento que hace parte de este estándar. <dialog /> elemento que permite representar conversaciones. <figure /> no corresponde a un elemento que hace parte de este estándar. <figure /> podrás usarlo para asociar con un caption un contenido incrustado, como por ejemplo gráficos o vídeo <footer /> no corresponde a un elemento que hace parte de este estándar. <footer />representa la sección del pie de la página. <header /> no corresponde a un elemento que hace parte de este estándar. <header /> representa la sección del encabezado de la página. <nav /> no corresponde a un elemento que hace parte de este estándar. <nav /> representa la sección de la página orientada a la navegación. <section /> no corresponde a un elemento que hace parte de este estándar. <section /> para identificar porciones significativas del contenido de la página <audio /> y <video /> para el contenido multimedia. <audio /> y <video /> para el contenido multimedia. El Doctype: La declaración de tipo de documento para la sintaxis HTML es <! DOCTYPE html> y distingue entre mayúsculas y minúsculas. Doctypes eran más largos porque el lenguaje HTML fue basado en SGML y por lo tanto requiere una referencia a una DTD. El Doctype: La declaración de tipo de documento para la sintaxis HTML es <! DOCTYPE html> y distingue entre mayúsculas y minúsculas. Con HTML5 esto ya no es el caso y el tipo de documento sólo es necesario para habilitar el modo estándar para los documentos escritos con la sintaxis HTML. Utiliza Flash el cual ha sido para muchos una maravillosa herramienta, como para otros un dolor de cabeza. Flash puede ser reemplazado por <canvas> en HTML5. Nuevo elementos <Canvas> para reemplazar el obsoleto y fastidiosos Flash, El cual demora en cargar videos, causando en el usuario desespero y aburrimiento. Se espera que este nuevo elemento satisfaga todos los requerimientos del usuario. los contenidos multimedia HTML 4 no posee API, y presenta ciertos errores que son corregidos en este nuevo elemento. API usadas: Todos los atributos IDL: Por ejemplo, HTMLBodyElement, bgcolor. Las interfaces HTMLIsIndexElement Los miembros del HTMLDocument. - Se ha introducido un conjunto de APIs (Interfaces de programación de aplicaciones), los cuales permiten la creación de páginas WEB, de manera cómoda y eficiente. Elementos cambiados no son compatibles con HTML4. <a /> sin href; <address /> ; <b /> ; <label />; <menu />; <small /> ; <strong /> Elementos cambiados en la versión HTML5. <a /> sin href ahora creará un enlace al sitio. <address /> es ahora un nuevo concepto de sección. <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia. <label /> el navegador no debe mover el foco desde

6

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 menús. <small /> ahora representa una impresión pequeña. <strong /> definitivamente representa el enfasis puesto en trozo de nuestro texto. Es un poco más pesada que la nueva versión. Es compatible con navegadores antiguos. Contiene elementos como: Siglas, subprograma, isindex y dir. Los cuales se centran en la presentación y el aspecto visual de un sitio web. Los elementos siguientes no se incluyen debido a que no se han utilizado a menudo, creado confusión o puede ser manejado por otros elementos: Siglas, subprograma, isindex y dir. No permite JavaScript para funcionar en el navegador. JS se ejecuta en el mismo subproceso que la interfaz del navegador. Permite Javascript para funcionar en segundo plano. Esto es posible debido a la JS Web trabajador API de HTML5 Funciona con todos los navegadores antiguos La mayoría de los navegadores modernos han comenzado a apoyar la especificación HTML5 por ejemplo Firefox, Mozilla, Opera, Chrome, Safari, etc Audio y video no son parte de la especificación HTML 4 Audio y Vídeo son parte integrante de las especificaciones de HTML5 por ejemplo etiquetas <audio> y <video> Es casi imposible conseguir cierta GeoLocation de usuario al navegar por cualquier página web, especialmente si se trata de dispositivos móviles.

...