sitios WEB, p\u00e1gina WEB, cambios, programaci\u00f3n, HTML, CSS, dise\u00f1o, estructura, PHP, navegadores,
\nAJAX.<\/p>\n
Abstract<\/span><\/strong><\/p>\n The purpose of this article is to describe how the WEBSITES are going to change from design and structure into the time, in order to identify what is going to better, emphasis in the moments in time when they high a high change of design or architecture and what they produce after that.<\/p>\n The questions that need and answer are \u00bfwhat changes from design and architecture had the WEBSITES until this time? & \u00bfhow that changes are helping in the development of the sites? Keywords<\/span><\/strong><\/p>\n WEB site, WEB page, changes, programming, HTML, CSS, design, structure, PHP, browsers, AJAX.<\/p>\n PDF<\/a><\/p>\n <\/p>\n Introducci\u00f3n<\/span><\/strong><\/p>\n Desde la primera p\u00e1gina desarrollada en 1991(La primera p\u00e1gina WEB, s.f.) hecha de simple texto e hipertexto (texto enlazado a otros sitios),\u00a0<\/span>1<\/sup><\/a><\/span> hasta las actuales p\u00e1ginas WEB que contienen informaci\u00f3n de toda \u00edndole y conectan con millones de otros sitios alrededor del mundo, han variado en beneficio de los usuarios, tanto en lenguaje y dise\u00f1o, como en su aspecto. En la actualidad este medio es una herramienta b\u00e1sica en la vida cotidiana y su uso puede ser recreativo, de aprendizaje, comercial, de trabajo, entre otras posibilidades.<\/p>\n Este art\u00edculo tiene como finalidad describir los cambios de la estructura y el dise\u00f1o de los sitios WEB en el transcurso del tiempo e identificar lo que ha mejorado, as\u00ed como lo obsoleto. Para apoyar el objetivo de este trabajo, se proponen tres ejes de desarrollo:<\/p>\n \u2022 Cambios estructurales que los sitios WEB han sufrido con el tiempo. Se busca responder a las siguientes preguntas \u00bfqu\u00e9 cambios estructurales han tenido los sitios WEB, hasta la \u00e9poca actual?,\u00bfQu\u00e9 cambios de dise\u00f1o han tenido los sitios WEB hasta la \u00e9poca actual? Y \u00bfC\u00f3mo esto ha contribuido a su desarrollo? En las conclusiones se dar\u00e1 respuesta<\/p>\n El dise\u00f1o de p\u00e1ginas WEB<\/span>2<\/sup><\/a><\/span> es un campo laboral que implica una gran gama de actividades como: planificaci\u00f3n, concepci\u00f3n, modelado, dise\u00f1o, codificaci\u00f3n de p\u00e1ginas y portales; as\u00ed como la programaci\u00f3n y la organizaci\u00f3n de esas p\u00e1ginas, que componen en su conjunto un sitio. El inicio de la p\u00e1gina WEB comenz\u00f3 hace m\u00e1s de 20 a\u00f1os, pero ha tenido un desarrollo exponencial y veloz. Hoy en d\u00eda se ha convertido en parte esencial en la vida de las personas en el mundo, ya que: ni\u00f1os en edad escolar, estudiantes de nivel superior, hombres de negocios, aficionados, amas de casa, usan Internet todos los d\u00edas.<\/p>\n A prop\u00f3sito de Internet, no tiene una historia muy larga, \u00e9sta comienza a finales de 1960. Mucho se ha dicho que su uso fue estrictamente con fines militares en Estados Unidos; m\u00e1s tarde en 1969, algunas universidades comenzaron a usarlo. En esa \u00e9poca Internet fue una herramienta necesaria para el intercambio de datos entre ordenadores, con la ayuda de protocolos de control de transmisi\u00f3n (TCP\/IP). En ese mismo a\u00f1o, el lenguaje especial de la red apareci\u00f3 como ARPANET y GML (General Markup Language).<\/p>\n Cabe se\u00f1alar que la comunicaci\u00f3n a trav\u00e9s de las computadoras no era pr\u00e1ctica, pero en el a\u00f1o 1972, Ray Tomlinson cre\u00f3 el famoso \u201ccorreo electr\u00f3nico\u201d o e-mail, que le dio todo un giro al uso de Internet y para 1980 fue el punto de inflexi\u00f3n, por la falta de estandarizaci\u00f3n entre el e-mail y la red. Si bien el comit\u00e9 de la American National Standards Institute anunci\u00f3 el est\u00e1ndar GML (SGML), no se logr\u00f3 el cometido. Fue hasta que el cient\u00edfico de la Organizaci\u00f3n Europea de Investigaci\u00f3n Nuclear, Tim Berners-Lee desarroll\u00f3 el HyperText Markup Language (HTML), lo cual permiti\u00f3 dar el primer paso hacia una aut\u00e9ntica estandarizaci\u00f3n, ya que hoy en d\u00eda no hay sitio o p\u00e1gina que pueda existir sin \u00e9l.<\/p>\n Tim Berners-Lee fue el primero en propiciar la comunicaci\u00f3n por Internet con el hipertexto y tambi\u00e9n fue responsable de la primera p\u00e1gina WEB, la cual fue puesta en l\u00ednea en agosto de 1991. (Tim Berners-Lee, 1) En ese momento s\u00f3lo hab\u00eda un servidor WEB ubicado en el CERN (Organizaci\u00f3n Europea de Investigaci\u00f3n Nuclear), a finales de 1992. M\u00e1s de 50 servidores WEB ya operaban en el mundo, principalmente en las universidades y centros de investigaci\u00f3n, como en la Universidad de California de Los \u00c1ngeles y el Instituto de Investigaciones de Stanford; despu\u00e9s se a\u00f1adieron a ellas la Universidad de Utah y la de California. A pesar de esto el dise\u00f1o Web result\u00f3 limitado y sin posibilidades de variaci\u00f3n. A medida que avanzaba la WEB, HTML se hizo m\u00e1s complejo y flexible, lo que permiti\u00f3 a los usuarios a\u00f1adir im\u00e1genes y tablas al dise\u00f1o de las p\u00e1ginas.<\/p>\n Con la invenci\u00f3n de las Hojas de Estilo en Cascada (CSS), se dio estilos a cada sitio WEB con mejores y m\u00e1s f\u00e1ciles herramientas que llevaron al Internet al boom. En 1993, el primer navegador de Internet llamado Mosaic, lanzado por el Centro Nacional para Aplicaciones de Supercomputaci\u00f3n NCSA, abri\u00f3 la WEB al p\u00fablico en general y permiti\u00f3 a los internautas consultar de una manera gr\u00e1fica. (Tim Berners-Lee, 25) Lo cual implic\u00f3 que los usuarios accedieran a informaci\u00f3n en palabras y gr\u00e1ficos dentro de un acuerdo de distribuci\u00f3n limitada, porque estaba restringida la cantidad de informaci\u00f3n en el dise\u00f1o de contenidos de las p\u00e1ginas WEB.<\/p>\n En 1994 fue creado el W3C, con el fin de establecer normas y la direcci\u00f3n del futuro desarrollo de HTML, para proporcionar contenido din\u00e1mico a trav\u00e9s de Internet. (Tim Berners-Lee, 58) Poco despu\u00e9s, en 1995, Microsoft lanz\u00f3 Windows 95, que cont\u00f3 con una interfaz de usuario completamente nueva y un navegador en la plataforma Windows: Microsoft Internet Explorer, que se volvi\u00f3 muy popular en todo el mundo. (La evoluci\u00f3n de la web 1) Unos meses m\u00e1s tarde AltaVista, el primer programa multiling\u00fce de motor de b\u00fasqueda y Amazon.com, una de las primeras empresas de Internet, permitieron que las transacciones electr\u00f3nicas existieran y la World Wide WEB creci\u00f3 r\u00e1pidamente. (Nerds 2.0.1: A Brief History of the Internet, 4) Alrededor de 1996 qued\u00f3 claro para la mayor\u00eda de las compa\u00f1\u00edas que, la presencia p\u00fablica en la WEB no era una opci\u00f3n m\u00e1s; aunque en su inicio la gente vio principalmente las posibilidades de libre publicaci\u00f3n e instant\u00e1nea informaci\u00f3n mundial.<\/p>\n Fue de ese modo que la familiaridad con la doble v\u00eda de comunicaci\u00f3n sobre la WEB<\/span>3<\/sup><\/a><\/span>, condujo al comercio directo basado en ella -comercio electr\u00f3nico- y al surgimiento de grupos instant\u00e1neos de comunicaci\u00f3n mundial. Es por eso que surgieron m\u00e1s empresas Punto-como (peque\u00f1as empresas que comenzaron a vender por Internet), las cuales mostraban sus productos dentro del hipertexto de las p\u00e1ginas WEB.<\/p>\n Bajos \u00edndices de inter\u00e9s entre 1998 y 1999 facilitaron un incremento de compa\u00f1\u00edas startup<\/span>4<\/sup><\/a><\/span> ; muchos de estos nuevos empresarios tuvieron planes aterrizados y habilidades administrativas, pero otros carec\u00edan de lo anterior, si bien fueron capaces de vender sus ideas a inversores por la novedad del concepto de empresa Punto-com.<\/span>5<\/sup><\/a><\/span><\/p>\n En 2001, un evento llamado la \u201cburbuja puntocom\u201d estall\u00f3 y muchos Punto-com y startups quedaron fuera del negocio; porque al desaparecer su capital dejaron de ser rentables. Actualmente se conoce como el evento de desplome a nivel mundial del comercio electr\u00f3nico; ejemplos de empresas de este tipo fueron: Altavista.com, E*trade, Priceline.com, entre muchas otras. Aunque sobrevivieron y prosperaron en el temprano siglo XXI, algunas como Yahoo.com, Ebay.com y Amazon.com. Otras compa\u00f1\u00edas se transformaron en sitios minoristas en l\u00ednea, florecieron y despu\u00e9s se volvieron altamente rentables como Google.com y Youtube.com.<\/p>\n Tambi\u00e9n en la era que inici\u00f3 a mediados del a\u00f1o 2000, vio nacer los sitios WEB de redes sociales como MySpace y Facebook; impopulares al principio, pero r\u00e1pidamente fueron aceptadas y de ese modo se convirtieron en una parte importante de la cultura contempor\u00e1nea.<\/p>\n Al iniciar el 2002, nuevas ideas para compartir e intercambiar contenido en la red, como los blogs y RSS\u00a0<\/span>6<\/sup><\/a><\/span> (Really Simple Syndication), ganaron aceptaci\u00f3n en la WEB. Este nuevo modelo para el intercambio de informaci\u00f3n, primeramente, caracterizado por el DIY (do it yourself o hazlo t\u00fa mismo) y por la posibilidad de ser editados sitios WEB por el usuario, impuls\u00f3 que se acu\u00f1ara el t\u00e9rmino WEB 2.0.<\/p>\n El auge de la WEB 2.0, vio nacer muchas nuevas compa\u00f1\u00edas startup orientadas a servicios, pero ahora alojados en una nueva y m\u00e1s organizada WEB. Algunos cre\u00edan que esto ser\u00eda seguido por una completa realizaci\u00f3n de la WEB Sem\u00e1ntica. Tim Berners-Lee originalmente expres\u00f3 su visi\u00f3n de la WEB Sem\u00e1ntica como:<\/p>\n Predeciblemente, como la World Wide WEB (WWW) se volvi\u00f3 f\u00e1cil de consultar, alcanz\u00f3 un alto grado de usabilidad y se deshizo de su esot\u00e9rica reputaci\u00f3n. Gan\u00f3 en sentido de organizaci\u00f3n y simplicidad, lo que abri\u00f3 las puertas y marc\u00f3 el comienzo de un r\u00e1pido periodo de popularidad. Nuevos sitios como Wikipedia y sus proyectos hermanos Wikcionario, Wikilibros, Wikiversidad, Wikiquote, Wikinoticias, Wikisource, Wikiespecies y Wikiviajes, resultaron ser revolucionarios al permitir el concepto de contenido editado por el usuario.<\/p>\n En 2005, tres antiguos empleados de PayPal formaron un sitio WEB basado en subir y compartir videos, al que nombraron YouTube. Un a\u00f1o despu\u00e9s, result\u00f3 ser el sitio WEB m\u00e1s r\u00e1pidamente popularizado de la historia e incluso, inici\u00f3 el nuevo concepto de contenido subido por el usuario en importantes eventos, como los debates presidenciales transmitidos por CNN.<\/p>\n La popularidad de YouTube, Facebook, Myspace, combinada con la incrementada disponibilidad y asequibilidad de la alta velocidad de conexi\u00f3n, hizo a los contenidos de video mucho m\u00e1s comunes en diferentes tipos de sitios WEB. Incluso todav\u00eda, muchos sitios de alojamiento y creaci\u00f3n de contenidos de video, proveen facilidades para que sus videos sean insertados en terceros sitios sin pago o permiso. Esta combinaci\u00f3n de mayor contenido creado o editado por el usuario y las facilidades para compartirlo, como en los widgets RSS y la inserci\u00f3n de videos, han llevado a que muchos sitios utilicen estos recursos en su dise\u00f1o, bajo est\u00e1ndares de la WEB 2.0.<\/p>\n Cabe decir que la WEB 2.0 se caracteriza principalmente por la participaci\u00f3n del usuario, lo cual lo hace activo y no solo un espectador de los contenidos de la WEB (llamado usuario pasivo). \u2022 El auge de los blogs. Adicionalmente a las aplicaciones, por la forma en que se manejan en la WEB 2.0 el usuario ya no depende del software -instalado en su computadora- que ocupa regularmente o a la informaci\u00f3n con la que trabaja de manera habitual. En vez de eso, aprovecha el almacenamiento en la nube<\/span>8<\/sup><\/a><\/span> para acceder a los datos y aplicaciones personales, a trav\u00e9s de sitios que lo identifican de forma \u00fanica por medio de un usuario y una contrase\u00f1a.<\/p>\n Con esta caracter\u00edstica y mediante el uso de herramientas WEB 2.0, el usuario no depende de un \u00fanico equipo de c\u00f3mputo, ni de una ubicaci\u00f3n geogr\u00e1fica, porque ahora puede tener acceso a toda su informaci\u00f3n, desde cualquier equipo y en cualquier parte del mundo donde se tenga conexi\u00f3n a Internet.<\/p>\n Las herramientas 2.0 (colaborativas y sociales), suponen un avance tecnol\u00f3gico importante ya que pueden:<\/p>\n \u2022 Crear entornos l\u00fadicos multimedia y reproducirlos en grupos En s\u00edntesis, la WEB 2.0 es el desarrollo gradual de la WEB, donde los usuarios dejan de ser pasivos para convertirse en activos, porque participan y contribuyen en el contenido de la red. Adem\u00e1s de ser capaces de crear, dar soporte y formar parte de una sociedad, as\u00ed como de comunidades. Lo cual implica que, a nivel local como global, se informan, se comunican y generan conocimiento, y contenido.<\/p>\n Al inicio del a\u00f1o 2015, se comenz\u00f3 a escuchar de una nueva WEB, la WEB 3.0; expresi\u00f3n utilizada para describir el proceso del uso y la interacci\u00f3n de las personas en Internet, a trav\u00e9s de diferentes maneras, entre las que se incluyen la transfovrmaci\u00f3n de la red en una base de datos (movimiento social cuyo objetivo es el crear contenidos accesibles por m\u00faltiples aplicaciones non-browser o sin navegador); el empuje de las tecnolog\u00edas de inteligencia artificial; la WEB sem\u00e1ntica; la WEB Geoespacial o la WEB 3D. Tambi\u00e9n la expresi\u00f3n WEB 3.0 es utilizada por los mercados, para promocionar las mejoras respecto a la WEB 2.0 y es el avance del momento. Ejemplo de lo anterior es el fen\u00f3meno POKEMON GO, que se ha vuelto muy popular en el 2016 el cual utiliza las tecnolog\u00edas de Geo Posicionamiento, Realidad aumentada y Efectos 3d.<\/p>\n Finalmente, a partir de establecer el avance que ha tenido la Internet mediante las p\u00e1ginas WEB en su historia, a continuaci\u00f3n, se presenta una l\u00ednea del tiempo que se puede consultar en la siguiente liga: 2. Cambios de la arquitectura Web desde sus\u00a0inicios hasta el 2016<\/span><\/strong><\/p>\n Para presentar este tema es necesario dividir el apartado en cuatro fases o generaciones, con base en los cambios a nivel de arquitectura WEB. Es decir, evidenciar c\u00f3mo fue intercambiando el c\u00f3digo, qu\u00e9 se fue agregando y qu\u00e9 se perdi\u00f3 con el paso del tiempo. Tambi\u00e9n se hace referencia a las etiquetas que se usan en el c\u00f3digo HTML y c\u00f3mo se emplearon.\u00a0 \u00a0\u00a0Para presentar este tema es necesario dividir el apartado en cuatro fases o generaciones, con base en los cambios a nivel de arquitectura WEB. Es decir, evidenciar c\u00f3mo fue intercambiando el c\u00f3digo, qu\u00e9 se fue agregando y qu\u00e9 se perdi\u00f3 con el paso del tiempo. Tambi\u00e9n se hace referencia a las etiquetas que se usan en el c\u00f3digo HTML y c\u00f3mo se emplearon.<\/p>\n Primera generaci\u00f3n\u00a0<\/span><\/p>\n La primera arquitectura de una p\u00e1gina se realiz\u00f3 en 1993, la p\u00e1gina WEB invitaba a entrar a la WWW y se pod\u00eda abrir con el explorador WEB Mosaic, el cual en menos de un a\u00f1o hab\u00eda recibido 2 millones de visitantes. Esta p\u00e1gina era un simple HTML que iniciaba con la etiqueta HEAD, donde se colocan datos como: el t\u00edtulo, con la etiqueta <title>; sus metadatos con la etiqueta <meta>; despu\u00e9s se pasa al BODY, donde se encuentran las etiquetas <p> para p\u00e1rrafo; <a> para definir el destino u origen de un enlace; y la etiqueta <img> para las im\u00e1genes.<\/p>\n En esa \u00e9poca el navegador WEB era capaz de mostrar tanto im\u00e1genes como escritos, aunque con una alta limitaci\u00f3n a la hora de diagramar la informaci\u00f3n de la p\u00e1gina WEB. La arquitectura de estas p\u00e1ginas era lineal y estaba orientado para cient\u00edficos, que compart\u00edan su informaci\u00f3n alrededor del mundo, como se muestra en la figura A 1.<\/p>\n Las principales caracter\u00edsticas de esta primera generaci\u00f3n de dise\u00f1o WEB fueron las velocidades de transmisi\u00f3n de datos, ya que era conexi\u00f3n v\u00eda MODEM (conexi\u00f3n v\u00eda tel\u00e9fono), lo cual limitaba el peso de las p\u00e1ginas WEB a 54 Kbps (kilobyte por segundo). Respecto a la arquitectura, su estructuraci\u00f3n era bastante desordenada con im\u00e1genes dispuestas horizontalmente y con l\u00edneas de texto separadoras.<\/p>\n Debido a este caos en el dise\u00f1o y la arquitectura WEB, un a\u00f1o m\u00e1s tarde se estableci\u00f3, como se dijo antes, un consorcio para establecer normas y pautas para el futuro desarrollo de la WEB, se trata de la W3C. De ese modo se desarrollaron unos est\u00e1ndares para el lenguaje HTML, con el fin de alcanzar unificaci\u00f3n en el dise\u00f1o y la arquitectura WEB. Lo cual trajo consigo la aparici\u00f3n de navegadores como Netscape e Internet Explorer, con el constante desarrollo de nuevas funcionalidades y progresos en el medio.<\/p>\n Segunda generaci\u00f3n<\/span><\/p>\n La arquitectura WEB en esta etapa estuvo basada en los conceptos de la primera generaci\u00f3n, pero tambi\u00e9n inici\u00f3 el uso de \u00edconos en lugar de algunas palabras. Tambi\u00e9n el HTML present\u00f3 peque\u00f1os cambios, as\u00ed inici\u00f3 el dise\u00f1o con etiquetas como el <Background>, para poseer im\u00e1genes de fondo; tambi\u00e9n aparecen los CSS (Cascading Style Sheets u Hojas de Estilo en Cascada); el uso de banners en lugar de cabeceras; la estructuraci\u00f3n de texto de forma jer\u00e1rquica mediante men\u00fas con las etiquetas de <li> listados; propiedades del c\u00f3digo HTML Standard; de ese modo comenz\u00f3 la generaci\u00f3n de las buenas pr\u00e1cticas en la arquitectura WEB.<\/p>\n Por otro lado, la aparici\u00f3n de nuevos elementos gr\u00e1ficos en la arquitectura gener\u00f3 un deseo en los dise\u00f1adores por a\u00f1adirlos en sus p\u00e1ginas WEB, pero sin control. Lo que provoc\u00f3 una saturaci\u00f3n en los sitios, porque no se ten\u00eda en cuenta la accesibilidad, ni la usabilidad. Si bien hab\u00eda dise\u00f1adores que utilizaban estos elementos de forma adecuada y generaban dise\u00f1os creativos con base en el uso correcto tanto de etiquetas, como del resto del c\u00f3digo HTML.<\/p>\n Tambi\u00e9n se generalizo usar tablas en la organizaci\u00f3n de los contenidos, para la organizaci\u00f3n de elementos similar a libros y revistas. Al mismo tiempo surgieron los monitores y tarjetas gr\u00e1ficas con mayores resoluciones y definici\u00f3n de color, lo cual gener\u00f3 la consecuente mejora en la calidad del dise\u00f1o WEB. Pero ahora surgi\u00f3 un problema relacionado con la adaptaci\u00f3n de est\u00e1ndares de los dos principales navegadores: Internet Explorer y Netscape Navigator. Abajo en la figura A 2 se ejemplifica un dise\u00f1o menos est\u00e1tico, donde las divisiones o columnas son notorias, la arquitectura conserva el men\u00fa vertical, pero ahora con \u00edconos grandes a lado de su lista de men\u00fa.\u00a0 Cabe agregar que fue en esta generaci\u00f3n donde se comienza a introducir lenguajes de programaci\u00f3n Php, Ajax, ASP, entre otros y que se consolidaron en la tercera generaci\u00f3n.<\/p>\n Fig. A 2. Ejemplo Pagina Web Segunda Generaci\u00f3n<\/p><\/div>\n Tercera Generaci\u00f3n<\/span><\/p>\n En esta fase, la arquitectura WEB sigui\u00f3 con muchas restricciones en el uso del lenguaje para los dos navegadores WEB antes se\u00f1alados, por eso, el dise\u00f1o WEB se orient\u00f3 a los dise\u00f1adores que muestran inter\u00e9s por lo din\u00e1mico al aparecer el plugin de Macromedia Flash, el cual revolucion\u00f3 el dise\u00f1o de sitios. Por consecuencia, esta fue una era donde se perfilaron las p\u00e1ginas WEB seg\u00fan el objetivo de las mismas: vender productos o servicios, fomentar comunidades, ofrecer informaci\u00f3n, dar noticias, entre otros usos. De ese modo, la especializaci\u00f3n del dise\u00f1o de sitios WEB se propuso ayudar al usuario a encontrar la informaci\u00f3n, de ese modo surgi\u00f3 la navegabilidad estructurada e intuitiva.<\/p>\n Muchas de las p\u00e1ginas WEB que surgieron en esta generaci\u00f3n fueron de publicidad y venta, de productos y servicios, por lo que fue la arquitectura m\u00e1s utilizada. De ese modo, cuando se dan cambios de estructura, se agregan en las etiquetas de <HEAD> m\u00e1s datos y pueden introducirse varios CSS al estilo de los sitios; aparecieron tambi\u00e9n las etiquetas para la creaci\u00f3n de formularios y los lenguajes de programaci\u00f3n como PHP<\/span>9<\/sup><\/a><\/span> y Ajax<\/span>10<\/sup><\/a><\/span>, entre muchos m\u00e1s. Cabe decir de programaci\u00f3n de uso general de c\u00f3digo del lado del servidor originalmente dise\u00f1ado para el desarrollo WEB de contenido din\u00e1mico que estos lenguajes se produjeron en la anterior generaci\u00f3n, pero ahora se utilizaron de mejor manera para orientar las p\u00e1ginas de Internet, adem\u00e1s de hacerlas m\u00e1s seguras y din\u00e1micas (ver figura A 3).<\/p>\n Fig. A 3.-Pagina Web tercera generacion<\/p><\/div>\n En la figura A3, lo m\u00e1s relevante es el dise\u00f1o y la arquitectura, en la cual las divisiones dejan de ser notorias gracias a los CSS. Tambi\u00e9n se introducen videos con la etiqueta <EMBED>; los men\u00fas dejan de ser verticales y se a\u00f1aden en orden horizontal, y con un dise\u00f1o acorde al sitio gracias a las etiquetas de flotaci\u00f3n<FLOAT>; a\u00fan se siguen usando las etiquetas divisorias <DIV>, pero con los estilos de CSS ya no son notorias; adem\u00e1s se agregan botones de Medios Sociales tales como Facebook y Twitter, entre otras ligas.<\/p>\n Cuarta Generaci\u00f3n<\/span><\/p>\n En la cuarta generaci\u00f3n el dise\u00f1o WEB ya est\u00e1 enfocado totalmente a la multimedia y es as\u00ed que se integran en las p\u00e1ginas WEB los elementos multimedia de \u00faltima generaci\u00f3n. Con usuarios de todos los tipos, muchos tienen una p\u00e1gina WEB y la variedad en su dise\u00f1o es enorme, debido a todas las posibilidades que ofrecen las \u00faltimas tecnolog\u00edas para los programadores. A esto se puede a\u00f1adir el que las \u00faltimas versiones de los navegadores soportan muchas m\u00e1s prestaciones y elementos en las p\u00e1ginas WEB.\u00a0\u00a0\u00a0En esta \u00faltima generaci\u00f3n florecen las etiquetas de <embed> para la incrustaci\u00f3n de videos de terceros; se crean p\u00e1ginas din\u00e1micas que se manejan con bases de datos; elementos como mapas y ubicaciones geo posici\u00f3nales. Tambi\u00e9n en ese momento nace el HTML5 y hace obsoleto al plugin de Adobe \u201cFlash\u201d, gracias a su dinamismo y su excelente compatibilidad con los navegadores. Por consecuencia, la arquitectura Web da un cambio dr\u00e1stico en la creaci\u00f3n de los sitios y surge un nuevo est\u00e1ndar de la estructura en HTML5, como se aprecia en la figura A 4.<\/p>\n Fig. A4. Nuevo esquema de configuraci\u00f3n de HTML 5<\/p><\/div>\n Hay que destacar que se suprimen las etiquetas <Div> utilizadas en las antiguas versiones del HTML y se dejan solo las secciones que se quieren representar, lo cual facilit\u00f3 la arquitectura gracias al est\u00e1ndar de c\u00f3mo se debe hacer y qu\u00e9 tiene que contener desde un principio una p\u00e1gina.\u00a0En s\u00edntesis, los cambios importantes que se produjeron en esta generaci\u00f3n permitieron mayor accesibilidad y mayor calidad en el uso de p\u00e1ginas WEB, como se muestra en la siguiente l\u00ednea de tiempo que se muestra en la siguiente liga:<\/p>\n Arquitectura Web hasta el 2016<\/p><\/div>\n 3.\u00a0 Cambios en el dise\u00f1o WEB desde sus inicios hasta el 2016<\/span><\/strong>\u00a0<\/span><\/p>\n En este tema se vuelve a usar el esquema de generaciones, ya que suceden al mismo tiempo que los cambios en la arquite ctura WEB, pero aqu\u00ed se enfoca m\u00e1s en el aspecto gr\u00e1fico y de dise\u00f1o, por lo que se enumeran los cambios que se dieron, pero ahora en tres generaciones.\u00a0En este tema se vuelve a usar el esquema de generaciones, ya que suceden al mismo tiempo que los cambios en la arquite ctura WEB, pero aqu\u00ed se enfoca m\u00e1s en el aspecto gr\u00e1fico y de dise\u00f1o, por lo que se enumeran los cambios que se dieron, pero ahora en tres generaciones.<\/p>\n \u00a0Primera Generaci\u00f3n o Generaci\u00f3n de Contenido Est\u00e1tico\u00a0<\/span><\/strong><\/p>\n Fig. A 5\u00a0 http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html\u00a0<\/span><\/p>\n Esta generaci\u00f3n corresponde con la WEB que va desde la primera p\u00e1gina propuesta por Tim Berners-Lee, hasta la aparici\u00f3n de la segunda generaci\u00f3n a mediados de los a\u00f1os 90. Como se muestra en la Fig. A.5, esta generaci\u00f3n se caracteriz\u00f3 porque las p\u00e1ginas WEB eran completamente est\u00e1ticas. Es decir, el contenido presentado no permite al usuario realizar ning\u00fan tipo de interacci\u00f3n con las mismas, salvo la manipulaci\u00f3n propia del manejo del hipertexto y los hiperenlaces. Se saltaba de una p\u00e1gina Web a otra, con pocas o nulas im\u00e1genes en \u00e9l. Adem\u00e1s, hay que destacar que en ese momento se usaban los modems y por eso el ancho de banda era insignificante, con lo cual se infiere que, lo primordial eran los datos y no las im\u00e1genes. Por consecuencia, el uso de monitores era mon\u00f3cromo, lo cual hac\u00eda innecesario el uso de muchas im\u00e1genes.<\/p>\n Segunda Generaci\u00f3n o Generaci\u00f3n de Contenido Din\u00e1mico<\/span><\/strong><\/p>\n Fig. A 6\u00a0 Generacion de\u00a0 contenido Dinamico.<\/span><\/p>\n Esta generaci\u00f3n corresponde a la WEB en la que aparecen las primeras t\u00e9cnicas para permitir la inclusi\u00f3n de contenido din\u00e1mico, as\u00ed como lo demuestra la figura A 6, dedicada al sitio de Yahoo! en 1999. Se puede decir que es la Web que hoy por hoy est\u00e1 m\u00e1s extendida y es la que se utiliza m\u00e1s com\u00fanmente. Tercera Generaci\u00f3n o Generaci\u00f3n de Contenido Colaborativo<\/span><\/strong><\/p>\n Fig. A7 Tercera Generacion del Dise\u00f1o Web <\/span><\/p>\n Esta tercera generaci\u00f3n se ha impuesto poco a poco y requiri\u00f3 del uso de las capacidades adquiridas en la generaci\u00f3n anterior, con el fin de permitir que la experiencia del usuario con la WEB mejorara. Como se muestra en la figura A 7, donde el dise\u00f1o es simple y de f\u00e1cil acceso, bajo la premisa de esta generaci\u00f3n que supere la interacci\u00f3n entre aplicaci\u00f3n-usuario-aplicaci\u00f3n. Porque ahora son el mecanismo para producir la interacci\u00f3n entre usuario-usuario, con el fin de generar un entorno de contenido colaborativo, en donde el usuario se considera un participante m\u00e1s en la creaci\u00f3n del contenido que aparece en la WEB. Cabe agregar que ideas como los Wikis, los Blogs, etc., han cambiado la forma en la que el usuario interact\u00faa con la WEB, haciendo de \u00e9sta un lugar mucho m\u00e1s rico e interesante para trabajar. Dise\u00f1o Web hasta el 2016<\/p><\/div>\n Conclusiones<\/span><\/strong><\/p>\n Como se propuso al inicio del art\u00edculo, se revisaron los cambios tanto de estructura como de dise\u00f1o WEB, en el transcurso del tiempo con el fin de mostrar los avances que ha tenido y c\u00f3mo desde la primera generaci\u00f3n se ha desarrollado. Se pudo evidenciar que el dise\u00f1o WEB se ha hecho m\u00e1s amigable para el usuario y ha mejorado la calidad y las t\u00e9cnicas de dise\u00f1o, as\u00ed como la arquitectura WEB.<\/p>\n La primera pregunta que responder buscaba los cambios estructurales que han tenido los sitios WEB hasta la \u00e9poca actual; la cual fue resuelta en el segundo tema, donde se dividi\u00f3 en cuatro generaciones para explicar los cambios sufridos y se describieron las caracter\u00edsticas que fueron a\u00f1adi\u00e9ndose en cada etapa y que van respondiendo a los cambios dados por el tiempo.<\/p>\n En relaci\u00f3n con la segunda pregunta que obligo a indagar sobre los cambios de dise\u00f1o que tuvieron los sitios WEB, se opt\u00f3 por seguir el mismo esquema de la pregunta anterior y se dividi\u00f3 en tres generaciones. Con eso se identific\u00f3 que las variaciones fueron tanto de dise\u00f1o como de arquitectura WEB. Adem\u00e1s, se pudo identificar que las tres generaciones de dise\u00f1o contrastan con las cuatro generaciones estructurales, debido a las limitantes que hab\u00eda para el dise\u00f1o y porque duraron m\u00e1s tiempo que las de arquitectura WEB. Para su mejor comprensi\u00f3n, se agregaron l\u00edneas de tiempo para contrastar la duraci\u00f3n de cada generaci\u00f3n y con esto resolver las interrogantes del art\u00edculo.<\/p>\n Con base en lo anterior, se evidencio que el dise\u00f1o y la arquitectura WEB son temas que van ligados en su desarrollo. Y cabe aclarar que la primera y segunda generaci\u00f3n de la arquitectura WEB corresponden a la primera generaci\u00f3n del dise\u00f1o WEB; la tercera generaci\u00f3n de arquitectura WEB corresponde a la segunda del dise\u00f1o WEB y la cuarta generaci\u00f3n de arquitectura WEB corresponde a la tercera de dise\u00f1o WEB. Lo cual permite se\u00f1alar que se est\u00e1 en la cuarta generaci\u00f3n de arquitectura WEB y en la tercera de dise\u00f1o WEB. Como queda representado en este esquema<\/p>\n Por \u00faltimo, hay que decir que en la actualidad esto ya empieza a cambiar nuevamente hacia una nueva generaci\u00f3n, tanto de dise\u00f1o y arquitectura WEB como la nueva WEB 3.0 y la pr\u00f3xima WEB 4.0. Si bien no se sabe que quede relegado al pasado, tal como sucedi\u00f3 con Flash cuando llego HTML5. Por lo que estos temas quedan abiertos a posibles modificaciones y a la formulaci\u00f3n de nuevas preguntas como \u00bfcu\u00e1ndo llegar\u00e1 una nueva generaci\u00f3n? o \u00bfc\u00f3mo llegar\u00e1n los nuevos cambios? Lo cual implica otros estudios.<\/p>\n Fuentes de consulta<\/span><\/strong><\/p>\n 3WC,Welcome to info.cern.ch.Web. < http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html> Fuentes de consulta 3WC,Welcome to info.cern.ch.Web. < http:\/\/info.cern.ch\/hypertext\/WWW\/TheProject.html><\/em><\/p>\n Berners-Lee, Tim.\u201d How It all Started\u201d. Web. < https:\/\/www.w3.org\/2004\/Talks\/w3c10-HowItAllStarted\/>\u00a0<\/em><\/p>\n Berners-Lee Tim, Tejiendo la Red, Siglo XXI,2000,<\/em> Impreso<\/p>\n W3C Tenth Anniversary: Timeline. Web.\u00a0 < https:\/\/www.w3.org\/2005\/01\/timelines\/description > <\/em><\/p>\n Discovery Channel,La Internet, seis d\u00e9cadas,Web,Video <http:\/\/educacion-con-tic.blogspot.mx\/2012\/05\/la-internetseisdecadas.html ><\/em><\/p>\n La evoluci\u00f3n de la Web: Infograf\u00eda con informaci\u00f3n sobre la evoluci\u00f3n de la Web, sus tecnolog\u00edas y los navegadores. <http:\/\/generacionesdelaweb2.blogspot.mx\/><\/em><\/p>\n PBS,Nerds 2.0.1: A Brief History of the Internet,Web,Video <https:\/\/archive.org\/details\/Nerds_2.0.1__A_Brief_History_of_the_Internet_-_Pa rt1 > <https:\/\/archive.org\/details\/Nerds_2.0.1__A_Brief_History_of_the_Internet_-_Part2 >\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" El objetivo de este art\u00edculo es describir c\u00f3mo ha cambiado la estructura y el dise\u00f1o de los sitios WEB a trav\u00e9s del tiempo, con el fin de identificar lo que ha mejorado y lo que ha quedado obsoleto. Se hace hincapi\u00e9 en los momentos donde hubo cambios de dise\u00f1o o de estructura, que modificaron a… Leer m\u00e1s »<\/a><\/p>\n","protected":false},"author":84,"featured_media":2184,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[430,422,425,426,427,424,429,421,428,423,420],"coauthors":[419],"class_list":["post-2049","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-comunicacion-digital","tag-ajax","tag-cambios","tag-css","tag-diseno","tag-estructura","tag-html","tag-navegadores","tag-pagina-web","tag-php","tag-programacion","tag-sitios-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/comments?post=2049"}],"version-history":[{"count":10,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2049\/revisions"}],"predecessor-version":[{"id":3434,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/posts\/2049\/revisions\/3434"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/media\/2184"}],"wp:attachment":[{"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/media?parent=2049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/categories?post=2049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/tags?post=2049"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-json\/wp\/v2\/coauthors?post=2049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nTo reach an answer we need to make a revision of the initial structures & know the reasons from the changes that they had in the WEBSITES.<\/p>\n
\n\u2022 Cambios a nivel de su dise\u00f1o.
\n\u2022 Herramientas reemplazadas para un mejor desempe\u00f1o<\/p>\n\n
\nEsto queda reflejado en aspectos como:<\/p>\n
\n\u2022 El auge de las redes sociales.
\n\u2022 La Web creada por los usuarios, usando plataformas de autoedici\u00f3n.
\n\u2022 El contenido agregado por los usuarios como valor clave de la WEB.
\n\u2022 El etiquetado colectivo.
\n\u2022 La importancia del long tail<\/span>7<\/sup><\/a><\/span>.
\n\u2022 La beta perpetua: la WEB 2.0 se inventa permanentemente.
\n\u2022 Aplicaciones WEB din\u00e1micas.
\n\u2022 La WWW como plataforma.<\/p>\n
\n\u2022 Crear sistemas de puntuaci\u00f3n de actividades y logros de objetivos.
\n\u2022 Crear un sistema de competencia que estimule la adquisici\u00f3n de conocimientos.
\n\u2022 Crear sistemas colaborativos para alcanzar logros comunes que a su vez sean puntuados.
\n\u2022 Crear sistemas de refuerzo positivos entre los componentes del grupo cuando uno de ellos alcanza un logro.<\/p>\n
\nGrandes cambios en la WEB hasta 2016\u00a0\u00a0Para demostrar de una manera clara el c\u00f3mo ha ido cambiando a lo largo del tiempo las p\u00e1ginas WEB debemos primero introducirnos a la\u00a0 forma en que eran realizadas las primeras p\u00e1ginas WEB tanto en su arquitectura como en su dise\u00f1o.<\/p>\n![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/primera-pagina-web-1.png\")
<\/a>Fig. A 1. Proyecto Primera Pagina Web<\/span><\/p>\n![\"\u00a0Fig.](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/\u00f1\u00f1.jpg\")
<\/a>![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/lk-1.jpg\")
<\/a>![\"Fig.](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/Captura-de-pantalla-2017-10-14-22.31.20-e1509144684251.png\")
<\/a>![\"Arquitectura](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/Captura-de-pantalla-2017-10-27-17.53.00-1024x693.png\")
![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/primera-pagina-web-2.png\")
<\/a>\n![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/r.jpg\")
<\/a>\n
\nEsta generaci\u00f3n se caracteriza porque las p\u00e1ginas WEB son generadas por alguna de las tecnolog\u00edas como CGIs, ASP, ASP.NET, JSP o PHP, que permiten la interacci\u00f3n con el usuario en un nivel en donde \u00e9ste. Lo cual implica que se pueden hacer preguntas y el sistema presenta las respuestas en funci\u00f3n de los criterios introducidos en formularios.
\nLas p\u00e1ginas en esta generaci\u00f3n presentan \u00edconos GIF e im\u00e1genes por todos lados, lo que ocasion\u00f3 (como se menciona arriba en el apartado de arquitectura WEB), que se hiciera uso indebido y que los sitios WEB pesaran cantidades absurdas y que fueran dif\u00edcil de descargar, para su presentaci\u00f3n en las computadoras de los usuarios.<\/p>\n![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/2u77lth.png\")
<\/a>\n
\nEn relaci\u00f3n con lo anterior, se muestra una l\u00ednea del tiempo para identificarlos cambios que se generaron gradualmente, en el dise\u00f1o de las p\u00e1ginas WEB en cada una de sus etapas en la siguiente liga:<\/p>\n![\"Dise\u00f1o](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/Captura-de-pantalla-2017-10-27-17.56.23-1024x694.png\")
![\"\"](\"https:\/\/entretejidos.iconos.edu.mx\/thesite\/wp-content\/uploads\/2017\/10\/8-2.png\")
<\/a>\n