Introducción al Desarrollo 
 
 
Web: HTML y CSS 
Parte I   
Desarrollo web 

 
Hola,  soy  Sergio  Luján  Mora,  profesor  de  informática  de  la  Universidad  de  Alicante,  y  en  este 
vídeo te voy a explicar qué es el desarrollo web. 
 
Antes  de  empezar,  me  gustaría  recordarte  algunos  de  los  sitios  web  en  los  que  puedes 
encontrar  más  información  sobre  mí  y  sobre  mi  trabajo,  y  dos  formas  de  contactar conmigo, a 
través  de  mi  correo  electrónico  sergio.lujan@ua.es  y  a  través  de  mi  cuenta  en  Twitter 
@sergiolujanmora. 
 
En  primer  lugar,  cuando  se  habla  de  desarrollo  web,  mucha  gente  lo  confunde  o  lo mezcla con 
el  diseño  web.  Que  quede  claro  desde  un  principio  que  son  actividades  distintas,  que  en  un 
proyecto  web  deberían  ser  realizadas  por  personas  diferentes,  pero  es  muy  normal  que  en 
proyectos  web  pequeños  realizados  por  una  o  dos  personas,  el  diseño  y  el  desarrollo  web 
pueden ser realizados por la misma persona. 
 
Este  vídeo  pertenece  al  curso  “Introducción  al  desarrollo  web”.  Por  tanto,  el  contenido  de  este 
vídeo se puede entender también como una explicación del contenido de todo este curso. 
 
Vamos a ver las diferencias que existen entre el diseño y el desarrollo web. 
 
El  diseño  web  se  refiere  al  diseño  visual  de  un  sitio  web  o  de  una  página  web y con frecuencia 
implica  el  diseño  de  los  elementos  gráficos  de  la  página.  En  el  diseño  se  tienen  en  cuenta 
elementos gráficos como la tipografía, los colores, los tamaños y las proporciones. 
 
El  diseño  se  suele  realizar  con  una  herramienta  gráfica  como  Adobe  Photoshop  o  GIMP,  y 
proporciona  el  marco  para  la  presentación  y  el  comportamiento  de  la  página.  El  producto  final 
del diseño web no suele contener código. 
 
El  diseño  de  la  página  (puede  ser  una simple imagen en formato PNG, por ejemplo) es utilizado 
por  el  mismo  diseñador  o  por  otra  persona  como  base  para  el  código  de  la  página  web.  El 
diseño  de  la  página  se  divide  (se  trocea)  en partes que se pueden representar mediante código 
(HTML + CSS), o se convierten en elementos puramente gráficos. 
 
La persona que realiza el diseño de un sitio web, se le suele llamar “el diseñador”. 
 
El  desarrollo  web  se  refiere  a  la  programación  necesaria  para  construir  una  aplicación  o  sitio 
web.  Se  suele  dividir  en  dos  partes  que  pueden  estar  conectadas,  la  parte  cliente  y  la  parte 
servidor  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  de  la  parte 
cliente-servidor. 
 
Para  el  desarrollo  de  la  parte  cliente,  los  conocimientos  que se necesitan tener son 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  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”. 
 
El  siguiente  gráfico  extraído  de  la  Wikipedia  resume  las  principales  tecnologías  que  se  han 
empleado y se emplean en la actualidad en el desarrollo web. 
 
Por  un  lado,  tenemos  las  tecnologías  del  lado  del  cliente,  entre  las  que  destacan  HTML,  CSS  y 
JavaScript. 
 
Por  otro  lado,  tenemos  las  tecnologías  del  lado  del  servidor,  entre  las  que  destacan  CGI,  PHP, 
ASP  y  JSP.  Podemos  ver  que  todas  estas  tecnologías  surgieron  a  mediados  de  los  años 
noventa y su uso continúa hasta la actualidad. 
 
Para  comprender  un  poco  más  las  diferencias  que  existen  entre  un  diseñador  web  y  un 
desarrollador web, vamos a ver la siguiente infografía. 
 
Esta  infografía  es  una  simplificación  y  en  algunos  aspectos  puede  llegar  a  ser  cómica,  pero 
algunos datos que contiene sí que son interesantes. 
 
La  parte  que  se  refiere  a  la  forma  de  vestir  y  de  comportarse  es  un  poco  simplista  y no aporta 
nada interesante. 
 
Sin  embargo,  en  la  segunda  parte  podemos  encontrar  datos  que  provienen  de  la  Oficina  de 
Estadísticas de Empleo de los Estados Unidos. 
 
Por  un  lado,  destaca  el  hecho  de  que  hay  más  puestos  de  trabajo  de desarrollador web que de 
diseñador  web.  Esto  concuerda  con  el  sentido  común,  ya  que  en un proyecto normal la fase de 
desarrollo  requiere  un  mayor  esfuerzo  que la fase de diseño, por lo que es necesaria una mayor 
mano de obra. 
 
Por  otro  lado,  destacan  los salarios que recibe cada uno, ya que el salario del desarrollador web 
casi dobla al del diseñador web. 
 
En la siguiente infografía se vuelven a comparar el diseñador y el desarrollador web. 
 
En  esta  infografía  vuelve  a  aparecer  la  comparación  del  número  de  puestos  de  trabajo  y  del 
salario medio. 
 
Pero  también  se  comparan  las  aptitudes  principales  de  uno  y  otro:  un  diseñador  web  necesita 
intuición,  creatividad  e  imaginación,  mientras  que  un  desarrollador  web  necesita  lógica, 
pensamiento lineal y técnica. 
 
También  es  interesante  el  apartado  en  el  que  se  hace  referencia  a  los  estudios  requeridos:  un 
diseñador  web  necesita  una  titulación  en  diseño  gráfico,  bellas  artes  o  producción multimedia, 
mientras que un desarrollador web necesita experiencia en programación. 
 
Para  finalizar,  una  infografía  en  la  que  se  resume  el  esfuerzo  y  el  tiempo  necesario  para  el 
desarrollo de un sitio web normal. 
 
La  infografía  está  disponible  en  castellano  y  divide  el  desarrollo  de  un  sitio  web  en  las 
siguientes fases: contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento. 
 
Además, se muestra la interacción del equipo de desarrollo con el cliente. 
 
En  general  estoy  de  acuerdo  con  este  gráfico  y  creo  que  puede  ayudar  a  la  gente  que  no  sabe 
qué  es  el  desarrollo  web  a  entender  todo lo que comprende. Sin embargo, hay un elemento con 
el  que  no  estoy  de  acuerdo:  para  un  sitio  web  tipo  “escaparate”  o  de  “promoción”  sí  que  es 
normal  que  la  fase  de  diseño  requiera  la  mayor parte del esfuerzo de creación del sitio web, sin 
embargo,  en  la  creación  de  sitios  web  que  realmente  son  aplicaciones  web,  la  fase  de 
desarrollo es la que se lleva la mayor parte del esfuerzo, y con mucha diferencia. 
 
Por  tanto,  este  gráfico  es  muy  interesante  en  cuanto  a  las  fases  en  las  que  se  puede 
descomponer  la  creación  de  un  sitio  web  y  en  cuanto  a los hitos que se deben de cumplir, pero 
el tiempo y el esfuerzo representados no son muy significativos desde mi punto de vista. 
 
Para  finalizar,  te  dejo  una  pregunta.  Todas  las  fases  aquí  plasmadas son necesarias, y si no se 
realiza  una  de  ellas,  el  proyecto  de  creación  de  un  sitio  web  fallará.  Pero  si  hiciéramos  un 
ejercicio  de  abstracción  y  permitiéramos  que  una  o  varias  fases  no  se realizasen, ¿qué fase no 
se podría eliminar de este diagrama? Es decir, ¿qué fase es esencial? 
 
Para  terminar  con  este  vídeo,  me  gustaría  que  vieses  este  vídeo  de  Steve  Ballmer,  director 
ejecutivo  de  Microsoft,  y  su  continuación,  que  comprenderás  correctamente  si  antes  has  visto 
el primer vídeo. ¿Cómo se te ha quedado el cuerpo después de ver estos vídeos? 
 
Muchas gracias por tu atención. 
 
AVISO IMPORTANTE 
Este  documento,  su  texto  y  gráficos  e  imágenes,  puede  ser  utilizado  bajo  una  licencia  Creative  Commons  de  tipo 
Atribución,  No-Comercial.  En  caso  de  utilizarse  este  material  o  de  la  creación  de  un  derivado,  la  atribución  se  debe 
respetar  citando  la  fuente  como  “Actívate,  Google  España”  y  expresamente, si es posible, mediante un enlace activo 
​ ttp://google.es/activate​. 
a​ h