MODULO IV SOFTWARE DE DISEÑO

SUBMODULO 1 PAGINAS WEB

TEMA: INTRODUCCIÓN AL DISEÑO WEB

CATEGORÍA Piensa crítica y reflexivamente

COMPETENCIA GENÉRICA 5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.
5.6 Utiliza las tecnologías de la información y la comunicación para procesar e interpretar
información.
7. Aprende por iniciativa e interés propio a lo largo de la vida.
7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

COMPETENCIAS 1. Integra información digital mediante la creación de documentos electrónicos, empleando

PROFESIONALES BÁSICAS software de aplicación, como procesadores de texto y editor de imágenes de manera
responsable y creativa en ámbitos laborales, escolares y de la vida cotidiana.
3 Plantea el uso, creación y administración de plataformas electrónicas de consulta,
comunicación y distribución de contenidos multimedia, proponiendo comunidades virtuales
que le permitan comunicarse, favoreciendo su autoaprendizaje en un ambiente innovador en
sus diferentes contextos.

SESIÓN 2
ACTIVIDAD 2 : HISTORIA DE LAS PAGINAS WEB

 ESTRATEGIA DE ENSEÑANZA APRENDIZAJE: línea del tiempo

¿Qué es?
Es un conjunto de gráficos mediante el cual se ordenan una secuencia de eventos sobre un tema en particular, permite
entre otras cosas visualizar una relación espacio-cronológica de los periodos más relevantes del tema a tratar. Para
elaborar una línea del tiempo es necesario identificar los eventos y/o periodos más destacados, así como las fechas
iniciales y finales si se cuenta con ellas.

El alumno leerá la información proporcionada por el docente y la ordenara de acuerdo a ideas principales y relevantes
para la elaboración de su trabajo.

 Forma de entrega:

El alumno realizara una línea del tiempo creativa, presentable y entendible apoyándose de un software gratuito
llamado Visme o de forma escrita apoyándose de recortes o dibujos.

Entrega en la fecha indicada por el docente para la asignación de su calificación.

Actividad individual
 Puntos a evaluar:
1) Entrega en la fecha indicada (.2)
2) Datos de la actividad(fecha, sesión, nombre y número de la actividad, tema, nombre el alumno ) (.2)
3) Creatividad y / diseño (.2)
4) Información importante (.2)
5) Uso de imágenes y/o recortes (.2)
 CONTENIDO

 Historia de Internet y del Diseño Web

La historia del diseño de páginas web es corta, cambia a pasos agigantados, pues va de la mano con la historia de
Internet. Cambia así mismo de manera radical incluso la forma en que vivimos nuestras vidas. Más importante
aún, Internet ha creado miles de empleos y de nuevas profesiones que a pesar de que van cambiando de
nombre, apareciendo y desapareciendo, hay muchas que se van consolidando y se vuelven una importante
fuente de empleo de manera global en el sector servicio.
El primer navegador de uso popular que permitía el acceso a contenidos en línea por parte de los usuarios fue
Mosaic. En la década de los 90, la conexión a Internet era sumamente lenta, por lo que el diseño de páginas web
prácticamente no existía. Los sitios de la época únicamente contaban con unos pocos elementos de texto, sin
ningún tipo de archivo multimedia y animación. Por aquel entonces ya se hacía uso del lenguaje HTML.
Entre las nuevas profesiones que han surgido están incluidas, el social media manager, el community manager,
que luego evolucionan en la estrategia digital, así como el maketing online, posicionamiento en buscadores SEO,
los bloggers y por supuesto, el diseño web.
Aunque el diseñar páginas web es una profesión que sólo ha estado con nosotros durante las últimas décadas, se
ha convertido en una parte importante de nuestras vidas.
Se imaginan un Internet sin animaciones, diseño adaptable, fuentes incrustadas ni hojas de estilos. El diseñador
web es quien se encarga de estos aspectos.
Rápidamente el diseño web ha ido evolucionando a medida que ha evolucionado Internet. Al principio los
portales eran construidos con solo texto, pero poco a poco la inclusión de imágenes, videos y animación 3D
ayudaron a caracterizar los sitios en la red, volviéndolos más interesantes e interactivos.

 Nacimiento de Internet y del Diseño Web

El primer servidor web fué puesto en línea en agosto de 1991, aproximadamente hace unos 20 años, pero
Internet nació en los años 70, época en la cual no era tan rápido, sin embargo las transmisión de datos e
información entre computadoras era bastante eficiente, lo que lo llevó a ser utilizado por científicos, médicos,
educadores, el gobierno y principalmente militares para transferir información eficiente dentro de un grupo
especificado.
En estos primeros tiempos de Internet era indispensable tener un computador, un módem y una línea telefónica.
En los años 90 fué presentado al público, Mosaic, un programa explorador gratuito, Mosaic fué el primer
navegador comercial que permitió el acceso del público a los contenidos en línea.
Fué diseñado por Marc Andeesen y Eric Bina, corría originalmente en el sistema Unix. En 1994 se puso a
disposición de otros sistemas operativos como Mac, Windows y Amiga OS, el navegador web del Mosaic.
 

Durante los años 90, el mundo aún se conectaba a Internet a través de las líneas telefónicas. Los archivos se
veían en lenguaje de hipertexto HTML y todos podían acceder a los documentos y archivos de la red al estar en
línea. Los primeros sitios web tenían gran cantidad de texto, colores limitados y gráficos en disposición lineal
solamente, estos sitios son conocidos como sitios de primera generación. Estas primeras versiones de HTML eran
pensadas más para una comunicación funcional que para el entretenimiento, a diferencia de hoy en día, además
no se hubieran podido cargar gráficos de alta definición en esa época y mucho menos video, debido a que aún
era demasiado lenta la velocidad de conexión.
Es por esto que los primeros sitios fueron creados para que la transferencia de datos fuera optimizada a
pesar de la lenta conexión de ese entonces.

 HTML – Primera Generación del Diseño Web

Así era la primera página web

El concepto de hipertexto fue creado por Ted Nelson en los años 60, pero fue usado sólo varias décadas después.
Desde la década de 1980, Tim Berners-Lee propuso un proyecto basado en el hipertexto, luego desde el 89
estuvo tratando de lanzar la propuesta de la Internet y utilizó lenguaje de codificación de hipertexto o HTML,
creando la primera página web en 1991 con un computador Next junto con el primer navegador y el primer al
que llamó httpd (HyperText Transfer Protocol daemon).
Allí los visitantes podían aprender sobre el proyecto, aprender sobre el hipertexto y también podían encontrar
en el portal detalles técnicos para crear una página web, también se encontraban consejos para buscar
información en la web, ya que en ese entonces no existían los buscadores.

La World Wide Web WWW nació en 1994. El HTML era la única forma de codificación para el diseño web en ese
entonces y tampoco había mucha libertad a la hora de diseñar páginas web.
Debido a esto los primeros diseñadores web sólo podían crear diseños sencillos, con texto, tablas y vínculos con
muy pocos gráficos. A esta esta se le podría llamar la edad de bronce del diseño web. Sin embargo aún desde esa
época, los desarrolladores ya andaban pensado como hacer que los sitios fueran más atractivos visualmente.

El W3C o Wide Web Consortium se creó para evitar que las grandes compañías monopolizaran el negocio del
diseño web. Si sólo hubiera existido una empresa que controlara la codificación de la web, la historia de Internet
y del diseño de sitios web hubiera sido muy diferente.
Aún hoy en día el W3C es responsable de gobernar las técnicas de codificación, normas y directrices para hacer la
web siempre de mejor calidad. El W3C tiene una extensa documentación en donde se actualiza a los diseñadores
web sobré los cambios que se realicen, es importante seguir las pautas que nos impone el W3C para optimizar
nuestros sitios en calidad y limpieza de programación y por ende de funcionamiento.
Luego de Mosaic, surgió en noviembre de 1994 el navegador Netscape, no transcurrió mucho tiempo antes que
se volviera el navegador líder en la web, Netscape comenzó a crear sus propias etiquetas y la World Wide Web lo
siguió.

 Segunda Generación

Entre los años 1992 y 1994 los desarrolladores empezaron a agregar sus propios fragmentos de código HTML, lo
cual empezó a extender bastante la primera versión del lenguaje de hipertexto, así, para evitar mayores
confusiones, se dió origen a el HTML 2. Con la una velocidad de conexión más rápida y diseñadores web con más
capacidades y opciones de HTML. El código se vuelve más complejo y con más cantidad de gráficos.

Un avance notorio que se da en el diseño web es cuando se empiezan a utilizar algunos iconos en vez de
palabras, las páginas empiezan a tener imágenes de fondo, aparece el uso de banners en vez de cabecera, el uso
de botones, y la organización de textos por medio de menús y listados, aparecen monitores y tarjetas gráficas
que mejoran el color y la resolución, mejorando la calidad del diseño.

 Tercera Generación

En 1995 surgieron muchas más etiquetas HTML y con esto se dió origen a HTML 3. Los diseñadores tienes muchas
más opciones y posibilidades a la mano como tablas y hojas de estilo CSS, ese mismo año surge el controvertido
navegador de Microsoft, Internet Explorer.
Durante esta época, se introducen muchas más posibilidades de incorporar la estética y mejorar la parte visual
en sus diseños web. Los sitios de tercera generación pueden ya tener fondos a color o con un patrón gráfico, así
mismo se introduce la animación al diseño web con el nacimiento del formato Gif, también llega Flash dándole
bastante capacidad de innovación gráfica a los sitios web, más no un código abierto. El panorama del diseño web
cambia de estático a dinámico.
En la tercera etapa empieza a destacarse el trabajo de los diseñadores web, las paginas se diseñan de acuerdo a
las necesidades de las mismas, el diseño empieza a adecuarse a las funciones de las mismas, aparecen las páginas
de publicidad y venta de productos y servicios lo que permite que el diseño web se expanda y sea utilizado por
más personas.
A finales de los años 90 llegó HTML3, que ofrecía una mayor flexibilidad. Además, de forma paralela surgieron las
hojas de estilo CSS, de forma que la estética de las páginas web dio un paso de gigante. Aunque la gran novedad
de la época fue sin duda la introducción de las animaciones, lo que se conoce como formato GIF. También
apareció Flash, de manera que las páginas pasaron de ser estáticas a dinámicas.
Uno de los grandes saltos cualitativos del diseño web a lo largo de la historia tuvo lugar con el avance de CSS; los
diseñadores podían trabajar contenido y diseño por separado. Además, se avanzó considerablemente hacia una
mayor usabilidad y una mejor experiencia de uso en las páginas; comenzaron a introducirse más espacios en
blanco, se apostaba por páginas cada vez más minimalistas.

 El Diseño Web de hoy: Sitios Web de cuarta generación

Los sitios web de hoy en día se denominan sitios web de cuarta generación. Aparte del lenguaje HTML que es
básicamente la parte de la estructura, los diseñadores web tienen una variedad de lenguajes, posibilidades y
caminos que elegir como por ejemplo Javascript, PHP, XML, CSS y ASP y Flash, que por su código cerrado es cada
vez menos común.
HTML 5 es la quinta revisión del lenguaje HTML y es la que se utiliza actualmente, HTML 5 presenta solución a
muchos problemas y errores de síntaxis que se presentaban en HTML 4 y XHTML 1.1, que fueron sus lenguajes
predecesores, HTML 5 intenta definir una estandarización entre la síntaxis de HTML y XHTML.
HTML 5 además añade nuevas características en su síntaxis, por ejemplo, la integración de gráficas SVG y las
nuevas etiquetas video , audio y canvas esto hace más sencilla la integración de contenido multimedia sin nigún
tipo de plugins. Entre otras nuevas etiquetas introducidas para mejorar la semántica del documento
están: header , article , section , etc. Debido a estas grandes mejoras se hacen menos necesarios plugins
adicionales como Flash y Java. Día a día HTML mejora y avanza en muchas direcciones.
El diseño web en la actualidad ofrece a los diseñadores un mundo de posibilidades; contenidos interactivos, redes
sociales, diseño responsive... Elementos que forman una parte fundamental en las páginas web de hoy en día.
Actualmente ya conocemos la versión HTML5, con la que se utilizan nuevos lenguajes como Javascript, PHP, XML o ASP.
Hay varias tendencias en el mundo del diseño web que merece la pena tener en cuenta. Por un lado, el estilo
minimalista. Ya no se lleva eso de recargar las páginas con miles de elementos; se apuesta cada vez más por los sitios
limpios, con un estilo minimalista, en los que los usuarios se encuentren a gusto. Y, por otro lado, la introducción de
elementos multimedia como infografías y videos en vez de bloques de texto; de esta manera, los usuarios pueden tomar
la información que están buscando en cuestión de segundos y de una manera sencilla.

 Diseño Web Móvil

En los últimos años, el creciente aumento tanto en el consumo, como en la producción de teléfonos y
dispositivos móviles, hasta el punto que hay ya casi dos celulares por ser humano en el mundo, esto ha hecho
crecer de manera casi logaritmica el uso de internet móvil, debido a esto el mercado ha reaccionado hasta hacer
casi indispensable que los sitios web estén optimizados para mostrarse en móviles, dejando atrás los plugins que
no se ven en este tipo de dispositivos.

En la actualidad cualquier persona puede tener un portal en Internet, el diseño web integra diariamente todas
las aplicaciones y elementos multimedia de última generación. Hoy en día la mayoría de los portales web pueden
verse desde cualquier dispositivo que se conecte a Internet, acercando mucho más a los usuarios, lo que les
permite estar conectados casi todo el tiempo.

El diseño web para dispositivos móviles hace que todo sea más conveniente, responde a las dos claves para una
mejor experiencia web, usabilidad y accesibilidad. A medida que avanza la tendencia de los smartphones, los
sitios web para móviles permiten que el contenido cargue más rápido. Los desarrolladores proporcionan
aplicaciones y juegos para dispositivos como Iphone, Android o Blackberry.
Con estas nuevas tendencias, también llega la del diseño web adaptable a diferentes tamaños de pantallas, la
navegación se hace más fácil y lás gráficas y textos se ajustan a la pantalla del dispositivo en el que cargue la
página, incluso, hasta en las últimas versiones del OS android, algunas formas de flash se pueden visualizar.

No hay dos páginas iguales, debido a que con las grandes posibilidades tecnológicas que tenemos hoy en día, lo
diseñadores web podemos experimentar ahora con videos, gráficos, imágenes, infografías, animaciones y juegos.
Además el diseño web se vuelve integrativo junto con sus disciplinas asociadas como el posicionamiento seo o
search engine optimization, la estrategia digital junto con el marketing online y la optimización y marketing en
social media se hacen vitales para poder ser más competitivos y efectivos a la hora de alcanzar clientes
potenciales y alcanzar buenas posiciones en los motores de búsqueda y las redes sociales más visitadas.

La experiencia web llega hoy en día a ser divertida e interactiva. El diseño de páginas web ya no es un mero
instrumento de comunicación. Internet es ahora un escenario para el entretenimiento con capacidades
ilimitadas. Y para los diseñadores de páginas web, Internet es un patio de juegos en continua expansión.

 (1989) El inicio. La época oscura del diseño web

Todo comienza en la década de los 90, conocida como la época oscura para el diseño web. En sus inicios, el diseño web
se basaba en pantallas negras con píxeles monocromáticos que le daban el toque de color. En pocas palabras, no existía
el diseño web, ya que el texto dominaba la pantalla.

Hacia 1991 se publicó la primera página web “World Wide Web”, de la mano de Tim Berners-Lee, un físico inglés
considerado uno de los grandes creadores de la web. Este sitio web tenía como único objetivo informar qué era la World
Wide Web (o red informática global). Hoy, más de 27 años después, podemos garantizar que sus usos sin duda se han
multiplicado, y que la evolución del diseño web está más activa que nunca.

 Diseño con tablas. A partir de 1995

 La invención de los navegadores que permitían mostrar imágenes representa el primer paso en la evolución del diseño
web en sí mismo. Las tablas llegaron para otorgarle orden al contenido, siendo la forma que permitía mezclar diseños
estáticos y fluidos, a través de tablas dentro de tablas. De alguna forma las tablas fueron el punto de partida de lo que
hoy es el diseño responsivo. Durante un buen tiempo el método de tablas fué el más utilizado para diseñar páginas web.
Y de alguna forma esto produjo una separación entre el diseño y el desarrollo. Mientras los diseñadores creaban los
diseños, los desarrolladores buscaban la forma de que funcione, administrando la información en diferentes elementos.

 JavaScript. 1995

JavaScript llegó para resolver varias de las limitaciones del HTML. Y fué con su aparición que el diseño web ganó
dinamismo. Sin embargo, una de las cuestiones más comentadas como punto en contra es que hace más lenta la carga
de la página. Si bien en la actualidad muchos evitan JavaScript para resolver cuestiones que pueden realizarse
utilizando CSS, aún se mantiene fuerte tanto en front-end como en back-end. Siendo el front-end lo relacionado a
aquello que se ve en un sitio web. Mientras que el back-end garantiza que los datos correctos se envíen al navegador y
crean la funcionalidad del sistema.

 La era de Flash, y la libertad del diseño. 1996

Llegó Flash e impresionó con la posibilidad de efectos visuales, quebrando las barreras que existían en el diseño web del
momento. Era el sueño cumplido a través de una sola herramienta. Con un archivo que se envía al navegador para ser
mostrado. Esta época marcó un hito, pero con el tiempo quedó a la vista que los efectos e interacciones no eran abiertos
para las búsquedas que indexan HTML, además de consumir poder de procesamiento. Ésto hizo que con el tiempo
pierda fuerza.

 El auge del CSS. 1998

Cascading Style Sheets – Hojas de Estilo en Cascada

Este lenguaje se hizo popular con una propuesta que separa el contenido de la forma de presentación. Es decir, que en
HTML de trabaja el contenido, mientras que en CSS se define el formato y la apariencia. El CSS paso por un proceso de
evolución que demoró varios años hasta lograr sus mejores resultados. Al comienzo la visualización variaba
dependiendo el navegador, lo que dificultaba la actividad del desarrollador.
  La web 2.0. 2003

Comienza la era de la información basada en los usuarios, y la web 2.0 se hace popular junto con las redes sociales y
blogs. Con interfaces visualmente más agradables y con alta usabilidad, entramos en una fase más evolucionada del
diseño web, en el que se comenzó a pensar tanto en los usuarios como en los buscadores. El foco en la experiencia de
navegación mediante el uso del diseño web.

 Diseño de grilla y framework. 2007

La llegada del diseño para móviles. El diseño web se vio en la necesidad de evolucionar con la llegada de los
smartphones. A partir de este momento era necesario generar versiones del sitio basadas en el tamaño de la pantalla. Y
ésto era posible a través del uso de grillas y framework. Fue un reto muy importante. La primer mejora fue con la idea
de columnas, hasta que se definió el sistema de rejilla con una división en 12 columnas como sistema que se utiliza hasta
la actualidad.

 Diseño responsivo. 2010

Desde del año 2010 en adelante, llegando hacia el año 2012 aparece el último gran cambio en el diseño web. El diseño
responsivo o adaptable llegó para resolver el conflicto de tamaño de las diferentes pantallas de los dispositivos
inteligentes. Con un mismo contenido (un sólo sitio web), pero con diferentes diseños según el tamaño del dispositivo,
se encontró una forma de presentar de manera más amigable la información al usuario. De esta manera es posible
utilizar imágenes que ocupan el ancho completo de pantalla, y se abre el camino hacia el diseño web minimalista con
apariencia más sencilla y limpia. Es decir, que el contenido vuelve a ganar protagonismo. Con estos cambios se ha
privilegiado un diseño más plano, regresando a las raíces que colocan al contenido en primer lugar, dejando atrás los
efectos de sombra y regresando a la fotografía, tipografía y los detalles de líneas. La simplicidad de la mano de la
practicidad. De alguna forma parecería que de manera más evolucionada el ciclo vuelve a sus comienzos. Pero como
todo proceso, sigue en constante cambio y posiblemente en un futuro no lejano la concepción del diseño web nos
continúa sorprendiendo con cambios e innovaciones. Incluso se estima que los cambios y la propia evolución de los
dispositivos continuarán influyendo en el mundo del diseño, ya que dependemos de éstos como medio para exponer los
sitios. Y si los dispositivos cambian, el diseño web deberán acompañarlos.
  Mobile First

Es común confundir Mobile first con el diseño responsivo. Aunque tienen el objetivo de mejorar la experiencia de
navegación en los dispositivos móviles, no significan lo mismo. De hecho su estructura y forma de creación es bien
diferente. Cuando hablamos de Mobile First nos referimos a que la creación del sitio web se piensa y realiza primero
para dispositivos mobile, y después se adapta para desktop.

 Actualidad

Con la evolución del diseño web, hoy en día no es necesario ser un experto para crear una página. En la actualidad están
en alta los creadores de sitios como herramientas prácticas para construir sitios web desde plantillas y con la posibilidad
de agregar componentes para personalizar el sitio web. WordPress, en 2018 también lanzó el nuevo editor Gutenberg,
compuesto de bloques, haciendo mucho más fácil el proceso de diseño y creación de sitios web. También el diseño 3D y
el dominio de los gráficos vectoriales en un nivel más avanzado ha tomado bastante fuerza.

Fuentes de consulta
https://www.dweb3d.com/blog/historia-del-diseno-web/
http://www.lighthousemarketing.es/blog/diseno-web/origen-y-evolucion-del-diseno-web
https://www.hostgator.mx/blog/evolucion-del-diseno-web/
https://doriagm.com/la-historia-del-diseno-web/