Evolución del desarrollo Web
Wanser Herrera Villa Luis Aliaga Mariaca
Lizette Quispe Flores
Escuela Profesional de Ingeniería de Sistemas
lquispeflore@unsa.edu.pe
Universidad Nacional de San Agustín
Abstract - The web development speaks to us about the
programming of the background service and not of the
superficial part of a website, it offers functions and features as
well as allowing the visitors to interact in a website.
I. INTRODUCCIÓN
El desarrollo web nos habla sobre la programación del
servicio de fondo y no de la parte superficial de un sitio web,
ofrece funciones y características además de permitir a los
visitantes de interactuar en un sitio web. Hay que tener en cuenta
que el desarrollo web y el diseño web son actividades distintas.
Como casi todo lo relacionado con la tecnología, el mundo del
desarrollo web ha evolucionado en los últimos años a un ritmo
vertiginoso. A día de hoy, existen numerosas tecnologías y
lenguajes que hace sólo unos años ni siquiera podíamos
imaginar.
Las tendencias en desarrollo web y el uso de lenguajes de
programación se presentan altamente cambiantes y la
comparación con cómo se abordaban los proyectos hace sólo
unos años resulta especialmente significativa a la hora de
afrontar los cambios y las nuevas formas de trabajar.
II. EVOLUCION
Todo empieza con el británico Tim Berners-Lee, considerado el
padre de lo que hoy conocemos como la Web. Gracias a él y a
su grupo, que crearon entre otras cosas el HTML o lenguaje de
etiquetas de hipertexto. Además del protocolo de comunicación
HTTP y el sistema de localización de objetos URL para
completar el sistema. Como resultado fue la creación de la
primera página web en el 1991 como se puede apreciar en la
figura 1.
Pero esta primera web, como sus inmediatamente sucesoras,
contenía solo texto, sin imágenes, obviamente sin reparar en el
diseño web. Fue ya en 1993, con la aparición de Mosaic, el
navegador web gráfico que más se popularizó. Es entonces
cuando se puede hablar del primer diseño web de una página.
José Cano Vilcapaza
Escuela Profesional de Ingeniería de Sistemas
eherrerav@unsa.edu.pe laliagam@unsa.edu.pe
Universidad Nacional de San Agustín
Esta página web consiguió recibir en menos de un año 2
millones de visitantes. Cargaba imágenes y texto en el
navegador, pero claro, a una velocidad reducida y con una
calidad gráfica acorde con la época.
En cuanto al desarrollo web, aquellos servidores web arcaicos
han mejorado considerablemente, igual que los lenguajes de
programación. En cuanto a protocolos y estándares, se han
mantenido la línea de los originarios.
El lenguaje HTML Ha evolucionado poco a poco y se han ido
desarrollando sucesivas versiones a la versión inicial del
lenguaje se añadieron nuevas características como las imágenes
las tablas o los marcos que permitían dividir las paginas web en
varias partes , las paginas web fueron evolucionando y cada vez
contenían más imágenes , los diseñadores gráficos se
incorporaron al desarrollo de las paginas web y se desarrollo un
nueva disciplina el diseño web además los navegadores web
cada vez serán mas potentes y las conexiones a internet mas
rápidas así que las paginas web cada vez mostraban más
información si se toma un web concreta por ejemplo la web de
alicante una universidad de España se puede observar como ha
sido su evolución desde la primera versión del año 1996 hasta
el 2010 figura 5.
Durante los primeros cinco años la web solo servía para leer para
consumir contenidos no existía mucha interacción con las
páginas web sin embargo cuando se añadieron los formularios
la web comenzó a cambiar , los formularios permitían un mayor
grado de interacción entre el usuario y las páginas web además
el lenguaje HTML incorpora la posibilidad de añadir nuevos
tipos de contenidos a las páginas web como audio , video o
animaciones y los navegadores web se volvieron más rápidos y
más potentes todo ello ayudo a que las páginas web se
transformaran en aplicaciones web que permiten realizar a
través de una página web las mismas tareas que
tradicionalmente se realizaban mediante un software instalado
en un ordenador a partir de un CD-ROM hoy en día a través de
una página web podemos enviar correos electrónicos ,podemos
editar fotografías , podemos ver videos e incluso editar videos
todo ello a través de una página web , una de las ventajas de las
aplicaciones web es que las aplicaciones web no necesitan
actualizarse por parte del usuario final , las aplicaciones web son
complejas de desarrollar ya que hace falta poseer conocimientos
de programación y de manejo de base de datos , últimamente ha
aparecido un concepto de mercado de aplicaciones web un
repositorio donde se pueden publicar aplicaciones web para que
sean usadas por otras personas uno de los mercados más
populares son google Chrome web store
III. DESARROLLO WEB
El desarrollo web se refiere a la programación necesaria para
construir una aplicación o sitio web se suele dividir en dos
partes:
- Parte cliente.
- Parte servidor.
Que pueden estar conectadas, que funcionan de forma
independiente y emplean tecnologías distintas aunque muchas
veces también interactúan por lo que también se habla de
programación, para el desarrollo de la parte cliente los
conocimientos que se necesitan tener por un lado HTML y CSS
para la creación de las páginas web, y por otro lado JavaScript
y el DOM para la programación de la parte cliente el desarrollo
de la parte servidor se refiere a la programación necesaria para
construir el “back end” de un sitio web , el back end es la parte
del sitio web que no ven los visitantes de un sitio web pero que
es necesario para poder presentar la información correcta en el
formato correcto a los visitantes. En el desarrollo de la parte
servidor se emplean lenguajes de script como PHP, ASP,
ASP.NET, JSP, Perl y Coldfusion para acceder a una base de
datos y recuperar la información necesaria para visualizar una
página web. Por lo tanto el desarrollo web también cubre el
diseño y desarrollo de las bases de datos y como una aplicación
web está al alcance de cualquiera, también es necesario tener en
cuenta la correcta seguridad del producto final, la persona que
realiza el desarrollo web se le suele llamar el “desarrollador”.
En la figura 3 resume las principales tecnologías que se han
empleado y se emplean en la actualidad en el desarrollo web en
esta figura se tiene las tecnologías del lado del cliente donde se
destacan HTML, CSS y JavaScript.
Por otro lado en la figura 4 tenemos las tecnologías del lado del
servidor entre las que destacan CGI,PHP,JSP, podemos ver que
todas estas tecnologías surgieron a mediados de los años
noventa y su uso continua hasta la actualidad.
IV. DESARROLLO WEB Y EL DISEÑO EN LA
ACTUALIDAD
En la actualidad crear un desarrollo web ha dejado de ser un
escaparate estático de una empresa para convertirse en una
presentación dinámica e interactiva con funcionalidades
cercanas a las de un programa de escritorio. En una aplicación
web se puede desde llevar un control de clientes a la facturación
de una empresa o manejar fotografías, permitiendo acceder a
ella desde cualquier tipo de dispositivo que tenga conexión a
Internet, como portátiles, tablets o smartphones, todo ello sin
necesidad de instalar ningún tipo de programa, simplemente
accediendo desde el navegador web.
El desarrollo web y el diseño no ha bajado su intensidad al
contrario se ha incrementado [1].
V. DESARROLLO WEB Y EL USO DE LENGUAJES
DE PROGRAMACION
Las tendencias en desarrollo web y el uso de lenguajes de
programación se presentan altamente cambiantes ahora la
experiencia de usuario es muy diferente, la web no es
simplemente texto con enlaces, sino que se usan interfaces
avanzadas de todo tipo, para distintos medios, con servicios
distribuidos [2]. La sociedad demanda inmediatez y la expresión
en tiempo real cobra más fuerza, lo que exige el uso de
aplicaciones que nos ahorren tiempo y faciliten la vida. El modo
de trabajo DevOps (desarrollo y operaciones) y las
metodologías ágiles de desarrollo han conformado unos nuevos
procedimientos a la hora de poner en marcha cualquier
proyecto. Además, ahora las empresas se esfuerzan por
construir sistemas ligeros, con un desarrollo más rápido, a
menor coste y, por tanto, menor riesgo el desarrollo web debe
dar respuesta a esta nueva situación. A. Cloud Computing:
El nuevo modelo de desarrollo es la computación en la Nube,
que proporciona capacidades de procesamiento y
almacenamiento prácticamente infinitas, a lo que se unen
multitud de herramientas que facilitan y aceleran el desarrollo y
la puesta en producción.
Aquí es donde las funcionalidades “as a Service” han ganado
terreno al permitir la autogestión de los recursos y su fácil
integración en el negocio. Exactamente de igual modo que CMS
como WordPress se han popularizado enormemente en los
proyectos tecnológicos vinculados a la gestión de contenidos,
más allá de su nacimiento inicial como solución para la creación
de blogs.
B. Dispositivos:
Los desarrolladores han adoptado en masa tecnologías para que
se muestren sus proyectos en los diferentes modelos y formatos
que inundan el mercado. Por ejemplo, hoy el diseño responsive
o diseño adaptable no es sólo un requerimiento. Es hablar de la
web de hoy: todos hemos comprendido que debemos diseñar
con un ojo puesto en los teléfonos móviles y otro en las grandes
pantallas de ordenadores o, incluso, la televisión.
VI. ETAPAS DEL DESARROLLO WEB
A. Diseñar:
La creación de un sitio web o aplicación web comenzara
primeramente definiendo su objetivo, el público al cual será
dirigido su estructura y el tipo de contenido expondrá, se debe
tener en cuenta que información es más importante eligiendo sus
gráficos que acompañen el diseño estructural y será necesario
seleccionar las tecnologías para lograr los resultados esperados.
B. Implementar:
En este paso se materializa el diseño en un sitio o app web en
cual funcionara realmente quitando o agregando ítems para
asegurar una mejor interfaz la cual sea fácil de manejar luego
de que se resuelven los detalles se procede a probar el
programa en varios sistemas operativos ya sean navegadores
e incluso dispositivos electrónicos para comprobar su
rendimiento y ver que que problemas puede presentar y poder
prevenirlos.
C. Mantener:
Cuando el sitio o la app web ya se está utilizando por el público
dirigido se debe actualizar el contenido regularmente así como
atender a las posibles fallas que puedan suceder y
solucionarlas este es un proceso que solo termina cuando el
producto se quita del mercado ya que hoy en día la tecnología
avanza continuamente y es posible que deje de ser compatible
con distintos sistemas o navegadores, en esta etapa se modera
la participación de los usuarios además de controlar el tráfico
o las descargas con programas específicos.
VII. WEB EN TIEMPO REAL Y WEB SOCIAL
La web social, creada dentro de la web 2.0, comprende una serie
de prácticas que permite a los usuarios interactuar entre ellos en
tiempo real, ya que está orientada especialmente a estos. En la
web 2.0 el usuario es considerado como el elemento principal,
puesto que es quien decide si el recurso tiene valor, cómo
utilizarlo o hacerlo público. La web social y en tiempo real se
determinó 5 tendencias:
 Web Semántica: la web semántica es una extención de
la world wide web que permite a usuarios compartir
contenidos más allá de las aplicaciones web. Esta
propone superar las limitaciones de la web actual
mediante la introducción de descripciones explicitas
del significado, la estructura interna y global de los
contenidos disponibles en la red.
 Mundos Virtuales: Son comunidades virtuales que,
pueden o no, estar inspirados en la realidad, en estos
mundos los usuarios pueden interactuar a través de
objetos o bienes visuales. Ejemplo de aplicaciones
destacadas son: Google Earth y Second life.
 Economía de la Atención: La economía de la atención
es un enfoque de la gestión de la información ue trata
la atención humana como un bien escaso. Esta la
vemos aplicada en las sugerencias de las paginas
comerciales de hoy en día, las cuales utilizan nuestros
historial y analizan nuestras preferencias para brindar
sugerencias que sean de nuestro interés.
 Computación en la Nube: también conocida como
servicios en la nube, es un paradigma qie ofrece
servicio de computación a través de una red, la que
usualmente es la internet.
 Personalización: la personalización web de sitios es
cada vez una practica más extendida, y se podría decir
que es crucial para el éxito de esta.
VIII. HABILIDADES DEL DESARROLLO WEB
El desarrollador web debe tener excelentes habilidades de
programación y utilizar una gran gama de herramientas de la
programación y será capaz de ofrecer soluciones para dar al
sitio web las funciones requeridas.
A. Diseño de bases de datos y SQL:
Se debe saber diseñar una base de datos ya que es algo
fundamental ya que muchos problemas se pueden resolver
teniendo una base de datos que este bien diseñada o con una
consulta correcta con SQL.
B. Localizar y arreglar errores:
El saber localizar errores es una habilidad que se va
consiguiendo con la experiencia y es fundamental ya que
muchas ves en el desarrollo del trabajo se procederán a buscar
errores y arreglarlos.
C. Buscar soluciones y documentación en la red
Es importante hacer una buena labor de investigación y
saber buscar bien la información que se necesite. D. Divide
y vencerás:
Es la habilidad de diseccionar un problema en pequeñas partes
e ir haciéndolas poco a poco así poder facilitar el desarrollo
como si fuera una escalera en la cual se tiene que subir poco a
poco en la cual se procederá a hacer parte por parte .
E. Trabajo en equipo
Hay que saber leer y entender el código de otras personas por
que cuando se está trabajando en el proyecto participaran
varias personas y es importante comprender y saber cómo
contribuir al código de los demás ya sea modificar algo que
otra persona hizo.
F. Autodidacta:5
Se debe mejorar la capacidad autodidacta y ser capaz de
aprender por uno mismo.
G. Aprende continuamente:
El mundo de la informática está en constante cambio y
evolucionando es por eso que se debe formar uno
continuamente y estar actualizado.
IX. HERRAMIENTAS DE DESARROLLO WEB
Existen muchas herramientas como ASP, JavaScript, XML y
SQL. Estas son sólo algunas de las herramientas más conocidas
como se puede apreciar en la figura 2. A. Herramientas de
superposición :
La mayoría de los diseñadores y desarrolladores están
familiarizados con HTML y CSS.
Diseño Web, Desarrollo Web y WordPress.
WordPress es un ejemplo interesante de la diferencia entre el
diseño y desarrollo. El diseño de páginas web de un sitio de
WordPress está determinado por la selección de un tema. El
tema incluye el uso de colores, columnas, fuentes, de
navegación y títulos. Después de seleccionar un tema, puede
agregar funcionalidad a su sitio web mediante el uso de widgets
y la selección de plug-ins.
X. GESTION DE CONTENIDOS WEB
A. Extensiones de Firefox útiles para el desarrollo web:
1. Wappalyzer : Identifica con qué tecnologías
están hechos los sitios web que visito.
2. Firebug : Utiliza las propias herramientas para
desarrolladores integradas en Firefox y en algunas ocasiones de
Chromium o Chrome.
3. HTML Validator: Permite ver si hay errores
en el código HTML de una página, incluso en local.
4. Headings map: Es donde se ve la estructura de
títulos de una página rápidamente.
5. Nimbus Screenshot: Captura una página
entera o solo una región, quizá lo que le falta es poder añadir
notas rápidamente como Nimbus.
6. Web Developer. Muy útil para
comprobaciones de accesibilidad, entre otras.
XI. APLICACIONES PARA EL
DESARROLLO WEB
Para ello tenemos editores de código, editores de imagen y
creadores de logotipos.
A. Editores de código:
1. Amy Editor: Podemos destacar que
podemos abrir varios archivos mediante pestañas,
resaltado del código para diferentes idiomas y la
posibilidad de administrar diferentes proyectos a
la vez.
2. Bespin : Es una aplicación creada
principalmente por los desarrolladores de Mozilla
Labs, básicamente lo que nos permitirá es editar
códigos embed.Entre ellos la edición del nuevo
código HTML5.
3. Kodingen: Es un pequeño pack en la
nube, donde incluye todo lo necesario para
programar en internet, es decir, un excelente editor
de imágenes, un editor de código y varias
herramientas más.
4. EditArea: Es otra herramienta para
editar código web que incluye las funciones
básicas de resalto de sintaxis, búsquedas y
remplazar el código, además de un soporte
multilenguaje y varias características más.
5. Practicode: Es un editor multi-
código, es decir que podremos editar desde código
HTML, hasta CSS pasando por Javascript,
XHTML y Visual Basic Script. Todo ello con una
interfaz gráfica excelente.
6. Clean CSS :Es una simple
herramienta que nos permitirá limpiar con
totalidad nuestro código CSS obteniendo como
resultado un código más legible y más limpio.
7. Real Time jQuery Editor: Es una de
las herramientas que nos permite editar y codificar
el código JQuery de forma instantánea, es decir,
en tiempo real. Con una gran interfaz y
funcionalidades, se convierte sin duda en la
herramienta ideal para los desarrolladores de
JQuerry.
B. Editores de imagen
1. Photoshop: Es una herramienta que
nos permitirá editar nuestras imágenes en la web,
donde puede acceder a su cuenta con una dirección
web personalizada, compartir los trabajos, tener
un espacio de 2GB de almacenamiento gratuito (o
pagar varias cuotas para incrementar este espacio).
2. Picnik: Es un editor muy eficaz, que
además de las características básicas incorpora
avanzadas, filtros, efectos y un sinfín más de
herramientas muy sofisticadas.
3. Pixlr.com: Es un excelente editor,
muy potente, ya que incluye todas las funciones
necesarias siendo muy fácil de utilizar y
familiarizarse con los menús y herramientas que
lo componen.
4. OnlineImageEditor: Es un sencillo
editor de imágenes dedicado especialmente para
aquellas personas que no tienen conocimientos
avanzados sobre la edición de imágenes o la
utilización de herramientas profesionales, con un
diseño simple y efectivo podrás modificar tus
imágenes rápidamente añadiendo efectos, letras,
formas.
5. Sumopaint : Es una aplicación que
nos ofrece un entorno muy agradable para realizar
toda clase de efectos, filtros y ajustes en nuestras
fotos.
6. Pixer.us: Es otra excelente
herramienta de edición de imágenes en línea
gratuita, que incluye todas las funciones básicas,
efectos, combinaciones de colores.
C. Creadores de logotipos
 1. Flashbannernow: Que diseña banner
flash para tu sitio web o blog sin ninguna
dificultad en su utilización.
2. 123 Banner: Es una sencilla
herramienta que nos permitirá crear logotipos
fácilmente eligiendo una template.
3. Kizoa: Es otra herramienta que nos
proporciona todas las herramientas básicas para
crear los logotipos, pero aparte de ellas incorpora
otras más avanzadas que nos permitirá
personalizar al máximo nuestra creación.
4. 123Slideshow es una alternativa al
anterior servicio comentado (123Banner), con
unas prestaciones bastante interesantes,
funcionales y sobre todo potentes. Podremos crear
con facilidad, logotipos o presentaciones en flash,
con transacciones, efectos, etc.
5. Online Logo Maker: Es una sencilla
herramienta con la que podrás crear banners
profesionales para tu sitio web o blog. Lo mejor
del servicio es que no requiere ningún tipo de
registro para ser utilizado.
6. Web 2.0 Logo Generator: Es un
servicio diseñado por simwebsol y que
básicamente nos permite crear logotipos
dospuntoceristas con tan solo escribir el texto y
elegir varias de las opciones que nos proponen
para mejorar la calidad final y el aspecto antes de
descargárnoslo a nuestro ordenador.
7. thefreelogomakers.com: Es un
servicio web que nos permitirá crear logotipos
rápidamente con su interfaz moderna e intuitiva.
Incluye las herramientas más básicas para la
creación de los mismos.
8. Mybannermaker: Es un servicio web
muy potente que nos permitirá, con la ayuda de
tutoriales paso a paso, crear nuestro logotipo para
añadirlo en nuestro sitio web o blog con tan sólo
unos clics.
XII. CONCLUSIONES
- El desarrollador web debe tener excelentes habilidades
de programación y utilizar una gran gama de
herramientas de la programación.
- El diseño de las páginas web deben ser atractivas y
fáciles de usar.
- El diseño como el desarrollo web son esenciales para
producir un sitio efectivo, deben estar integrados para
así ofrecer la mejor creación de páginas en
circulación.
- En la actualidad el desarrollo y creación de sitios web
se impone en el mundo como herramienta tecnológica
para unir las regiones, crear negocios, soportar
empresas, mostrarse en el mercado e infinidad de
aplicaciones de acuerdo a las perspectivas de las
personas y sus alcances, encontrando en la internet
fuente vital de generación de empleos, negocios
eficaces e inteligentes y gran ayuda en la consecución
de objetivos y planteamientos, pero las etapas del
desarrollo de
los sitios web actuales y sus lenguajes de
programación son bien complejos por su código
extenso y variado. Por lo tanto se
requiere conocer herramientas
que proporciona la
actualidad para desarrollar dinámicamente las
páginas web.. Concretamente el desarrollo web
es algo muy fundamental para la mejor relación
de servidor y cliente para ello se debe reconocer
que existen diferentes tipos de aplicaciones a la
vez que ayudaran a que este servicio será más
adaptable y llamativo
REFERENCIAS
[1] Hunhed, J. (2017).El blog de Hunteet.recuperado
de https://hunteet.com/blog/diseno-y-desarrollo-web-
evolucion-internet/. José María Baquero
[2] Baquero.J.M (2018). Developersti.Recuperado
de: https://www.developersti.es/reportajes-
developer/evolucion-desarrollo-web/. [3] Kernighan, B.
W., & Ritchie, D. M. (1991). El lenguaje de
programación C. Pearson Educación. [4] Rodríguez,
N. H., Bonillo, M. L., & Ramírez, E. L. S. (2002).
Introducción a la programación. Universidad de
Cádiz, Servicio de Publicaciones.
[5] https://elandroidelibre.elespanol.com/2014/03/las-
mejores-aplicaciones-y-herramientas-para-desarrollo-web-
con-android.html
[6] S. Sanchez, «WEB SOCIAL,» 2009. [En línea]. Available:
http://glossarium.bitrum.unileon.es/Home/web-social.
[Último acceso: 10 octubre 2018].
[7] P. Castell, «La Web Semantica,» Escuela politecnica
superior - Universidad autonoma de Madrid.
[8] «Semantic Web,» 07 noviembre 2012. [En línea].
Available: http://semanticweb.org/wiki/Main_Page.html.
[Último acceso: 10 octubre 2018].
ANEXOS

Figura 3. Principales tecnologías client side

Figura 1. Primera página web en el 1991

Figura 4.Principales tecnologías server side

Figura 2.Tipos de lenguaje

Figura 5.Evolución de la página web