CURSO DE INTRODUCCIÓN AL DESARROLLO WEB: HTML Y CSS (1/2) - GOOGLE

MÓDULO 1

PRESENTACIÓN

 Las PÁGINAS WEB son documentos que hacen uso del hipertexto y la hipermedia.
 Algo esencial de las páginas web son los enlaces o hipervínculos.
 Un enlace se define mediante una URL.
 Las dos tecnologías que se emplean para crear las páginas web son: el lenguaje de marcado o etiquetado (HTML)
y el lenguaje de hojas de estilo (CSS).
 LA WEB es un sistema a través del cual se gestiona información que será compartida por Internet.
 Es necesario tener una conexión a Internet en el ordenador o dispositivo móvil para poder consultar cualquier
cosa en dicha web a través de un navegador como por ejemplo Chrome, Mozilla, Safari, etc.
 Todos los navegadores emplean el sistema de Localizador Uniforme de Recursos o URL, que es la dirección
concreta que define a cada uno de los recursos que se encuentran en la red. Es decir, es un identificador propio
para cada página, documento, archivo, entre otros, que se encuentre en la web.
 La web o World Wide Web es un sistema que funciona a través de Internet por el cual se pueden transmitir
diversos tipos de datos a través del Protocolo de Transferencia de Hipertextos o HTTP, que son los enlaces de las
páginas web.

INTERNET Y WEB

 Es conveniente entender LAS DIFERENCIAS ENTRE UN WEBSITE Y UNA PÁGINA WEB: el primero es una
localización en la World Wide Web que contiene documentos (páginas web) organizados jerárquicamente. Cada
documento (página web) contiene texto y o gráficos que aparecen como información digital en la pantalla de un
dispositivo.
 INTERNET es un sistema descentralizado de redes de comunicación interconectadas.
 Tanto TCP como IP son los protocolos (idioma o lenguaje) que utilizan los equipos para comunicarse entre sí.
 Internet es una red de carreteras por la que circulan los datos que se transmiten utilizando un determinado
protocolo y que la web es una forma de transmisión de datos (utiliza el protocolo HTTP).
 Otras formas de transmisión de datos son:
o FTP se utiliza para la transferencia de ficheros
o SMTP y POP para correos electrónicos
o TELNET para la conexión con otros dispositivos.
HISTORIA DE INTERNET

 El programa ARPANet fue la semilla para la creación de Internet. Fue la primera red que permitió compartir
conocimientos entre la comunidad científica. La primera comunicación a través de ARPAnet fue en 1969.
 Leonard Kleinrock logró la comunicación basada en la conmutación de paquetes
 Vint Cerf y Robert Kahn desarrollaron el protocolo TCP.

HISTORIA DE LA WEB

 Tim Berners-Lee es considerado el padre de la web porque desarrolló las tres tecnologías fundamentales de la
web:
o HTML: Hypertext Markup Language, el lenguaje de marcado o etiquetado que se emplea para crear,
para escribir los documentos o páginas web.
o URL: Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o
direccionamiento de los documentos web.
o HTTP, Hypertext Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el
servidor web y que se emplea para transmitir los documentos web por Internet.

 Noviembre de 1990, se suele fijar como el nacimiento de la web. Tim Berners-Lee publicó su primer sitio web y
realizó la primera conexión desde un navegador, mientras trabajaba en el CERN, el Laboratorio Europeo de
Investigación en Física de Partículas.

 El objetivo que se buscaba era que los miles de científicos que trabajaban en el CERN, pudieran compartir toda
la información que generaban.

 Internet y la web son dos cosas distintas.

o Internet es la conexión de múltiples redes de ordenadores.
o Sobre esas redes de ordenadores se ejecutan múltiples servicios, como el correo electrónico, la
transmisión de ficheros o el chat. La web es un servicio más, el más popular.

 Antecedentes de la Web
o Vannevar Bush. Ingeniero e inventor durante la Segunda Guerra Mundial fue administrador del proyecto
Manhattan, que desarrolló las dos primeras bombas nucleares. En julio de 1945, publicó un artículo
sobre un dispositivo fotoeléctrico y mecánico, llamado Memex, capaz de crear y seguir enlaces entre
distintos documentos almacenados en microfichas. En definitiva, un sistema muy parecido a lo que hoy
conocemos como hipertexto.
o Ted Nelson acuñó los términos Hipertexto e Hipermedia en el año 1965.
  Tim Berners-Lee utilizó una estación de trabajo next cube, que empleaba el sistema operativo next step, que
ofrecia excelentes características que facilitaban mucho la programación. (La compañía Next fue fundada por
Steve Jobs después de que le echaran de su compañía, Apple, en 1985)

 En diciembre de 1991, Tim Berners-Lee presentó en la Hypertext Conference, la World Wide Web. A partir de
ese momento la World Wide Web comenzó a ser conocida fuera del CERN.

 El 30 de abril de 1993, el CERN puso en el dominio público el software cliente y servidor de la web con lo que
garantizaba la gratuidad de la web y que nadie se apoderarse de la idea.

 Robert Cailliau trabajó codo con codo con Tim Berners-Lee en el desarrollo e implantación de la web en el CERN.
Reconoce que, hace 20 años, cuando nació, nadie podía predecir en lo que se iba a convertir la web.

 El 25 de mayo de 1994 se celebró la primera conferencia sobre la World Wide Web en Ginebra, organizada por
el CERN.

 En octubre de 1994, Tim Berners-Lee abandona el CERN y funda en el MIT el World Wide Web Consortium, el
W3C, el organismo internacional que vela por el correcto desarrollo de la web. Se encarga de estandarizar
tecnologías esenciales, como el lenguaje de marcado, el lenguaje de presentación CSS o el interfaz de
programación DOM.

HISTORIA DE LOS NAVEGADORES WEB

 Tim Berners-Lee, el padre de la web, tuvo que desarrollar el primer navegador web para poder probar y
demostrar su idea. Era navegador y editor a la vez. No era necesario escribir código, todo se podía hacer a través
del interfaz gráfico.

 El 30 de abril de 1993, el CERN puso en el dominio público el software cliente y servidor de la web. Numerosas
personas y organizaciones por todo el mundo usaron el código del CERN para desarrollar sus propios
navegadores y servidores web. Una organización que hizo eso fue el National Center for Supercomputer
Applications, en la Universidad de Illinois, en Urbana-Champaign. En este centro de supercomputación
desarrollaron el navegador Mosaic. Su desarrollo comenzó a finales de 1992. Fue el primer navegador
multiplataforma: estaba disponible para los sistemas operativos Unix, Windows y Macintosh, contribuyendo
enormemente al desarrollo de la web. Durante los años 1994-1995 el 95% de los servidores web de todo el
mundo utilizaba este software.
 En el año 1993, Marc Andreessen y Eric Bina, creadores del navegador Mosaic, abandonan NCSA y se marchan a
California con su código fuente. Allí, conocen a James Clark, fundador de la empresa Silicon Graphics, y juntos
crean una nueva compañía: Netscape. En el año 1994, lanzaron la versión 1.0 de su navegador Netscape
Navigator. Anunciaba que su navegador era la mejor opción, con una conexión propietaria navegador servidor,
con su propio protocolo que permitía desarrollar aplicaciones maravillosas. El propósito de Netscape era
desarrollar una solución completa propietaria para dominar la web y, por un poco de tiempo, casi lo
consiguieron, ya que llegaron a tener casi un 80% del mercado de los navegadores web. Brendan Eich, de
Netscape, fue quien inventó el lenguaje JavaScript, que hoy en día todavía utilizamos.

 El gigante del software, Microsoft, se dio cuenta de que un nuevo enemigo había aparecido. Gracias a la web el
sistema operativo estaba perdiendo importancia. Así que, en el verano de 1995, Microsoft sacó al mercado su
navegador Internet Explorer 1.0, con Microsoft Plus para Windows 95.

 Como NCSA era y sigue siendo una entidad pública, no podía comercializar su navegador, así que una compañía
llamada Spyglass licenció el código de Mosaic de NCSA para su distribución y comercialización. Microsoft licenció
a Spyglass el código de Mosaic, así que la primera versión de Internet Explorer era un Mosaic transformado.
Internet Explorer 1.0 y las subsiguientes versiones, hasta las 6, contenían código del navegador Mosaic.

 Microsoft licenció el código de Mosaic de Spyglass inicialmente por 2 millones de dólares, sin embargo, Spyglass
vió que aquí había mucho negocio, presentó una demanda contra Microsoft y después de una pequeña pelea en
los tribunales, llegaron a un acuerdo y Microsoft pagó 8 millones de dólares a Spyglass para firmar la paz.

 La aparición del navegador Internet Explorer supuso la primera guerra de los navegadores entre Microsoft y
Netscape. Esta guerra duró menos de cinco años y acabó con Internet Explorer como vencedor indiscutible.

 En el año 1998, Netscape liberó el código fuente de su navegador. Este movimiento fue el nacimiento de la
fundación Mozilla.

 En marzo de 1999, América Online compró Netscape por la escandalosa cifra de 10 mil millones de dólares.

 Nacimiento de Mozilla Firefox en el año 2004.

 En Estados Unidos, Microsoft ha tenido que soportar un largo proceso judicial de varios años, por sus prácticas
monopolísticas. En el año 2010, la Unión Europea obligó a Microsoft a que ofreciese al usuario en su sistema
operativo Windows, la posibilidad de seleccionar fácilmente la instalación de diferentes navegadores.

 Aparición de google Chrome en el año 2008.

  Lección: Un diamante es para siempre pero, un navegador web no, así que nunca hagas una página web
pensando en un navegador concreto.

MÓDULO 2

EVOLUCIÓN DE LA WEB: DE LA PÁGINA WEB A LA APLICACIÓN WEB

 Cuando Tim Berners-Lee publicó la primera página web a finales de 1990 en el CERN, las páginas web sólo tenían
texto.

 La web no tiene el mismo diseño y los mismo elementos que cuando se creó, sino que ha ido mejorando y
evolucionando en los últimos años. Al principio las páginas web solamente tenían texto pero con los años se
comenzaron a integrar imágenes, tablas y marcos, los cuales permitían dividir las páginas web en varias partes y
las hacían más atractivas. Pero el elemento que supuso un cambio importante en las páginas web fueron los
formularios, ya que permitían al usuario introducir información que se enviaba de vuelta al servidor web.

 Los diseñadores gráficos se incorporaron al desarrollo de las páginas web y se desarrolló una nueva disciplina: el
diseño web.

 Además, los navegadores web, cada vez eran más potentes y las conexiones Internet más rápidas, así que, las
páginas web cada vez mostraban más información.

 Durante los primeros cinco años la web sólo 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 incorporó la posibilidad de añadir nuevos tipos de contenidos a las páginas web como
audio, vídeo o animaciones y, los navegadores web se volvieron más rápidos y más potentes. Todo ello ayudó a
que las páginas web se transformarán en aplicaciones web, en inglés, Web Apps.

 Las Web Apps permiten realizar a través de una página web las mismas tareas que tradicionalmente se
realizaban mediante un software instalado en un ordenador partir de un CD-ROM.

 Ventajas de las aplicaciones web:

o No necesitan actualizarse por parte del usuario final. Cada vez que un usuario visita una aplicación web
está haciendo uso de la última versión disponible.
o Independencia de dispositivo: permite que las aplicaciones web puedan ser usadas desde cualquier
dispositivo que disponga de un navegador web, como un ordenador, una tableta o un teléfono móvil.
 Esto se logra con la adaptación de las aplicaciones web al dispositivo en el que se está ejecutando en
cada momento.
o Ubicuidad. A las aplicaciones web se puede acceder y trabajar con la misma información desde cualquier
sitio, por ejemplo, desde el ordenador del trabajo, desde el ordenador de casa o desde el teléfono
móvil.

 Desventaja: Las aplicaciones web son complejas de desarrollar ya que hace falta poseer conocimientos de
programación y de manejo de base de datos.

 Mercado de aplicaciones web: un repositorio en el que se pueden publicar aplicaciones web, para que sean
usadas por otras personas. Dos de los mercados más populares son el Google Chrome Web Store y el Firefox
Marketplace.

EL HIPERTEXTO Y LA HIPERMEDIA

 Referencias del concepto de hipertexto

o Paul Otlet. A principios del siglo XX imaginó Mundaneum, un archivo centralizado en el que se recogiese
todo el conocimiento de la humanidad, con un sistema se basaba en el empleo de fichas. En estas fichas
existían enlaces que permitían conectar las fichas entre sí. Ofrecía un servicio de búsqueda que admitía
solicitudes de búsqueda por correo postal.
o Vannevar Bush. Creador de un dispositivo fotoeléctrico y mecánico llamado Memex, capaz de crear y
seguir enlaces entre distintos documentos almacenados en microfichas.

 Ted Nelson acuñó los términos hipertexto e hipermedia.

 Hipertexto: Conjunto estructurado de textos, gráficos, etc., unidos entre sí por enlaces y conexiones lógicas.

 El hipertexto permite saltar de un punto a otro, en un mismo texto, o a otro texto a través de referencias.
Ciertos términos están relacionados y el texto se puede leer siguiendo diferentes caminos.

 Multimedia: Que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la
transmisión de una información. Un sistema multimedia proporciona una gran riqueza y una mayor flexibilidad a
la hora de comunicar la información.
  Hipermedia es un término que nace de la unión del hipertexto más la multimedia. Es un conjunto estructurado
de diversos medios como textos, gráficos, imágenes y sonidos unidos entre sí por enlaces y conexiones lógicas
para la transmisión de una información.

 Si la multimedia proporciona una gran riqueza a la información, el hipertexto aporta una estructura que permite
que la información pueda presentarse y explorarse siguiendo distintas secuencias de acuerdo a las necesidades y
preferencias del usuario.

 Existen muchos sistemas que se basan en el hipertexto y la hipermedia pero, la web es el sistema más conocido
y por eso la web se ha convertido en sinónimo de hipertexto e hipermedia.

 Tim Berners-Lee tomó la idea del hipertexto y lo conectó a las ideas de TCP y DNS y creó la Web.

LAS URLs

 Fue creado por Tim Berners-Lee.

 Significa Uniform Resource Locator, localizador de recursos uniforme. Es el sistema de localización o

direccionamiento de los documentos web.

 Formato básico de una URL: esquema://máquina/directorio/archivo

 El esquema suele representar el protocolo, es decir, el mecanismo o método que se emplea para recuperar un
recurso a través de una red de ordenadores. A veces, en vez de esquema se emplea el término servicio. Los
esquemas más conocidos son http, https, ftp, mailto y file.

 Las URLs son un elemento básico de la web ya que son las que definen los hiperenlaces o hipervínculos y
permiten definir el hipertexto que permite relacionar información de diversas fuentes por medio de enlaces.

 Hay que ser muy cuidadosos a la hora de definir una URL. Un sitio web no es algo estático, un sitio web
evoluciona con el tiempo, se modifican las páginas se eliminan las páginas y se añaden páginas nuevas. Cuando
se asigna una URL a una página web, esa debe ser válida durante toda la existencia de esa página web, no se
debe de modificar por los posibles cambios que afecten a otras páginas del sitio web. Si una URL deja de ser
válida, los visitantes de un sitio web se pueden encontrar con la desagradable sorpresa de “página no
encontrada”, el famoso error 404.
  A veces una puede ser muy larga y complicada, por lo que puede ser difícil de memorizar, de copiar o de
comunicar. Para solucionar este problema se emplean los acortadores de URLs, un mecanismo que permite
convertir una URL larga en una corta. Los acortadores más populares en la actualidad son el de Google, el de
Bitly y el Owly.

 Desde 1994 en los estándares de Internet el concepto de URL ha sido incorporado dentro del más general de
URI, Uniform Resource Identifier, en español identificador uniforme de recurso.

 Una URL amigable es una URL más fácil de comprender, tanto para los mecanismos de búsqueda, como para
quien accede el sitio web. Para que una URL se considere amigable, debemos entender de lo que esta página se
trata sólo con verla. Ejemplo: www.rdstation.com/es/sobre-nosotros

LOS NOMBRES DE DOMINIO

 El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en
Internet.

 Hasta hace unos años en los nombres de dominio sólo se podían usar los caracteres ASCII. La tabla ASCII
contiene las letras del alfabeto inglés pero no contiene otras letras como las vocales acentuadas o la ñ, lo cual
plantea un problema para el español. Sin embargo, gracias a la introducción del nombre de dominio
internacionalizado, ya es posible utilizar nombres de dominio con caracteres en otros idiomas.

 Aunque se puede identificar un ordenador por su nombre de dominio, en realidad internamente, en Internet se
identifican los ordenadores por medio de la dirección IP. Por eso en una URL también se puede escribir una
dirección IP, en vez del nombre de dominio.

 Un nombre de dominio puede ser el nombre de una empresa o el nombre de una institución o el nombre de una
organización o también el nombre de una persona o cualquier cosa que uno quiera.

 Los nombres de dominio se organizan en diferentes niveles.

o Los dominios de primer nivel se organizan en genéricos y territoriales.

 Los genéricos son dominios de propósito general y eran inicialmente los que acababan
en .com, .edu, .gov, .mil, .net y .org, pero posteriormente se han añadido otros como .biz, .mobi
y .xxx. El registro de nombres de dominio bajo .com .org y .net, no está sometido a ningún tipo
de comprobación previa se asignan siguiendo el principio de primero en llegar, primero servido.
  Los territoriales son los que identifican el país como .es para España, .ec para Ecuador, .fr para
Francia o .de para Alemania. El registro de nombres de dominio territoriales está sometido a las
normas de cada país.

o Los dominios de nivel 2 son los que normalmente registramos al solicitar un dominio, como, por
ejemplo, sergiolujanmora.es.
o En algunos países existe un tercer nivel de organización, por ejemplo, en España existen los dominios
controlados: .com.es, .nom.es, .org.es, .gob.es y .edu.es, que permiten que existan dominios como
datos.gob. o mecd.gob.es.

 example.com, example.net y example.org son dominios de Internet de segundo nivel reservados (en la RFC
2606, sección 3) para ser utilizados en ejemplos y documentación. Esta reserva hace que no se puedan registrar.

 En la actualidad, los primeros nombres de dominio se han quedado pequeños. A mediados de 2012, ICANN
(Internet Corporation For Assigned Names and Numbers), el organismo que regula los nombres de dominio,
publicó una lista con los 1.930 nuevos nombres de dominio de primer nivel que habían sido solicitados durante
el proceso que había iniciado unos años antes. Estos nombres de dominio no existen todavía, se están
introduciendo poco a poco y algunos han sido rechazados. Algunos de los nuevos nombres de dominio se
refieren a profesiones, así como a empresas y marcas, dominios geográficos (ciudades o pueblos) y otros son
genéricos, palabras de uso cotidiano (.food, .music) que podrían atraer los intereses personales o profesionales.
Existen nombres de punto en una multitud de idiomas o caracteres.

LAS DIRECCIONES IP Y EL SISTEMA DE NOMBRES DE DOMINIO

 El nombre de dominio puede identificar a toda una red o a un ordenador o dispositivo de red en particular.

 Los nombres de dominio se tienen que transformar en direcciones IP.

 Una dirección IP identifica un ordenador o cualquier otro dispositivo de red, como un router o un switch, en
Internet. Cualquier dispositivo que se conecta a Internet ya sea un ordenador una tableta o un teléfono móvil
tiene asignada una dirección IP.

 En la actualidad existen dos sistemas de direccionamiento, dos conjuntos de direcciones IP: IP versión 4 e IP
versión 6.

 Las direcciones IP versión 4, se expresan por un número binario de 32 bits. Ejemplo: 192.0.2.146
  Las direcciones IP versión 6 se expresan por un número binario de 128 bits. Ejemplo:
2001:db8:3333:4444:CCCC:DDDD:EEEE:FFFF

 IP versión 6 tiene que sustituir a IP versión 4 pero, por diversas razones, su implantación está siendo muy lenta.

 Los nombres de dominio se transforman en direcciones IP mediante un sistema llamado DNS, Domain Name
System o sistema de nombres de dominio, en español. Es una base de datos distribuida entre diferentes
ordenadores, los servidores de DNS, que se comunican entre sí. Cada servidor DNS posee una tabla con la
correspondencia entre los nombres de dominio y las direcciones IP y cuando un servidor no dispone de una
correspondencia concreta, sabe a qué servidor le tiene que preguntar para obtener la respuesta.

 El uso de DNS ofrece numerosas ventajas:

o Por un lado, los nombres de dominio son más fáciles de recordar.
o Por otro lado, el nombre de dominio es más fiable. La dirección IP puede cambiar con el tiempo por
diversas razones, sin que tenga que cambiar el nombre de dominio.

CREACIÓN DE UNA PÁGINA WEB CON BLOGGER

ESTRUCTURA DE UN BLOG

 Blogger es un sistema de gestión de contenidos cuyo propósito principal es la creación de blogs, sitios web en los
que se publican artículos también llamados entradas o anotaciones, ordenados de forma cronológica,
apareciendo primero el más reciente.

 Estructura básica de la parte pública

o Los blogs se almacenan o están disponibles a través de una dirección del tipo blogspot.com.
o Tiene un título, tiene una pequeña descripción y luego se compone de entradas.
o Cada entrada está anotada con la fecha de publicación puede aparecer la hora, puede aparecer el autor,
pueden aparecer unas etiquetas y puede tener comentarios.
o En la página principal se muestra un número limitado de entradas, no se puede mostrar todos los
artículos o entradas que contiene el blog, por tanto, normalmente encontramos un enlace para navegar
a las entradas antiguas.
o Sin embargo, hay otras formas de navegar por el contenido de un sitio web. La más típica es navegar a
través del archivo que permite un acceso directo a una entrada que se publicó un día concreto.
 o Otra forma de localizar una entrada en un blog es a través de las etiquetas. Las etiquetas se las inventa
el propietario del blog. Él establece todas las etiquetas que quiere emplear en sus entradas, y a cada
entrada le puede asignar una o varias etiquetas o ninguna.
o También podemos navegar a través de las entradas de un blog mediante algunos paneles concretos en
los que el propietario el autor del blog destaca algunas entradas ("entradas destacadas", "entradas
populares").
o Otra opción que se ofrece en muchos blogs, que es directamente buscar e introducir uno o varios
términos y buscar las entradas que posean esos términos.

 Todo blog dispone de una parte privada, una parte de administración a la que solamente puede acceder el
propietario o autor del blog. Se accede a través de la dirección www.blogger.com.

CONFIGURACIÓN BÁSICA DE UN BLOG

 Para acceder a Blogger, necesitas una cuenta de Google.

 No se puede cambiar la parte final del nombre de dominio que siempre será bloggest.com, esta acompañará al
título de nuestro blog.

 El diseño del blog puede modificarse tantas veces como consideres.

 La opción de configuración más importante es la configuración de la zona horaria.

 En el espacio para móvil o email se muestran las opciones de publicar, mediante envío de mensaje a un número
determinado, la publicación de una entrada en el blog o mediante una cuenta de correo electrónico. También
desde ahí es posible recibir, si se indica, una cuenta de correo en la que recibir notificaciones que informan de
comentarios en las entradas.

 Blogger nos permite realizar entradas y publicarlas cuando se considere oportuno. Hay que tener parametrizada
correctamente la opción de configuración de franja horaria en la que nos encontremos.

 Cada entrada generada dispone de su propia URL que puede ser personalizable.

 Se pueden insertar imágenes y vídeos que ya existen en diferentes plataformas como YouTube.

 También se pueden añadir enlaces de URL a los textos.

 También se puede añadir gadgets o complementos, lo que ayudará a los usuarios a navegar por tu entrada a
través de etiquetas, aumentando así las funciones de un blog.
MÓDULO 3

CÓMO SE ESCRIBE UNA PÁGINA WEB

 A la hora de crear una página web es necesario tener en cuenta la creación del HIPERTEXTO, ya que es la
característica principal que define a la web.

 Las páginas web tienen su propio VOCABULARIO, que define las etiquetas que se deben emplear y la
GRAMÁTICA, que son las reglas que establecen cómo se deben emplear dichas etiquetas para escribir un
documento.

DIFERENCIA ENTRE DISEÑO Y DESARROLLO WEB

 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.

 DISEÑO WEB
o Se refiere al diseño visual del sitio o página web y con frecuencia implica el diseño de los elementos
gráficos de la página (la tipografía, los colores, los tamaños y las proporciones)
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.
o El producto final del diseño web no suele contener código.
o El diseño de la página puede ser una simple imagen en formato png, por ejemplo, y 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, CSS o se convierten en
elementos puramente gráficos.
o La persona que realiza el diseño de un sitio web se le suele llamar el diseñador.
o Un diseñador web necesita intuición, creatividad e imaginación.
 o Un diseñador gráfico o diseñador web necesita una titulación en diseño gráfico, bellas artes o
producción multimedia.

 DESARROLLO WEB
o Se refiere a la programación necesaria para construir una aplicación o sitio web.
o Se suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor.
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.
o 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.
o El desarrollo de la parte servidor se refiere a la programación necesaria para construir el back-end de un
sitio. 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.
o Como una aplicación web está al alcance de cualquiera, también es necesario tener en cuenta la
correcta seguridad del producto final.
o La persona que realiza el desarrollo web se le suele llamar el desarrollador.
o Un desarrollador web necesita lógica, pensamiento lineal y técnica.
o Un desarrollador web necesita experiencia en programación.

 Fases del desarrollo de un sitio web: contacto inicial, planificación, contenido, diseño, desarrollo y lanzamiento.

 Para un sitio web tipo escaparate o de promoción 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.

PROTOTIPADO DE UNA APLICACIÓN WEB

 Dentro de las fases del desarrollo de un sitio web, el prototipado se hace en el momento de la planificación.
 Antes de iniciarlo, primero deben definirse los objetivos del sitio, las necesidades de los usuarios, los requisitos
del proyecto y la arquitectura de información de la aplicación web.

 Es importante hacerlo antes de realizar el diseño gráfico de la aplicación web o de comenzar su implementación.

 En el prototipado se distingue entre planos y maquetas.

o Los planos o blueprints, diagramas de contenido o flujo o mapa web sirven para mostrar la estructura
de la aplicación y su flujo de navegación.
o Las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la
estructura, organización e interacción a nivel de página.
 Estas se dividen entre prototipos de baja fidelidad, que son estáticos y prototipos de alta
fidelidad, que son dinámicos. Un prototipo funcional de alta fidelidad es una maqueta dinámica
o HTML que simula o tiene implementadas partes del sistema final a desarrollar.

 En los prototipos nunca se trabaja el diseño, de ahí que se utilice una gama de grises.
HISTORIA DE HTML

 El lenguaje HTML, al igual que los lenguajes o idiomas que hablan las personas, evoluciona con el tiempo.

 Tim Berners-Lee desarrolló la primera versión del lenguaje HTML, a partir de SGML (Standard Generalized
Markup Language), un estándar ISO del año 1986, que se emplea para la organización y etiquetado de textos.
SGML es equivalente al actual XML.

 El uso de una pareja de etiquetas para marcar partes del texto está tomado directamente de SGML, al igual que
ciertas etiquetas como p, los encabezados h1, h2 etcétera, o las etiquetas de lista como ol, ul y li. Sin embargo,
lo que SGML no incluía y sí que es una invención propia de Tim Berners-Lee, es la etiqueta a con el enlace href
para los enlaces o hipervínculos.

HTML: CONCEPTOS BÁSICOS

 El lenguaje HTML se emplea únicamente para definir la estructura y el contenido o información de una página
web. La presentación visual no se define con HTML.

 El lenguaje está formado por etiquetas que se escriben encerradas por los corchetes angulares menor que < y

mayor que >.

 El elemento es el componente básico de una página web. Una página web está compuesta por un conjunto de
elementos escritos en un orden concreto.
 Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros, pero respetando algunas
reglas.

 En cualquier momento puedes ver el código de una página web cualquiera con la opción “ver código fuente”
que puedes encontrar en la mayoría de los navegadores a través del menú contextual.

 El código HTML se corresponde con lo que luego se ve en la página web.

 Las etiquetas no se visualizan en la página web, no aparecen escritas, sino que realizan una función o definen el
comportamiento de un elemento en la página.
ETIQUETAS ESENCIALES

 Para escribir el código HTML podemos usar el bloc de notas.

 Es muy importante recordar cerrar las etiquetas.

 La sección <body>, a diferencia de la <head>, sí que va a mostrar todo lo que se escriba en la página web.

 El código se puede escribir seguido o espaciado. Esto no implicará ningún cambio en la programación.

 Lo importante es crear los elementos siguiendo el orden de los componentes correcto y teniendo en cuenta sus
características específicas.
NOTEPAD++

 Notepad++ se puede descargar en el sistema operativo. Es un editor web con licencia GLP que permite, una vez
descargado, editar cualquier fichero pulsando el botón derecho con la opción edit with Notepad++. La opción
Control+ permite desplegar una lista para autocompletar las etiquetas. Seleccionando las etiquetas empareja la
etiqueta de apertura con la de cierre, además, permite cerrar páginas para trabajar únicamente con la que se
necesiten. Por último y muy importante, permite modificar los saltos de línea y cambiar el formato a UNIX y
Macintosh.

REGLAS BÁSICAS QUE SE DEBEN APLICAR EN LA CREACIÓN DE UNA PÁGINA WEB

o Etiquetas siempre cerradas.

o Documentos bien formados: El que se abre último debe cerrarse primero.

o Etiquetas en minúsculas.
o Valores de los atributos siempre entre comillas.
o Para los nombres de los ficheros de las páginas web es recomendable usar las letras del alfabeto inglés,
números, el guion y el guion bajo.
o La extensión de las páginas web es .htm o .html.
LISTAS

 Para crear listas no ordenadas

 Para crear listas ordenadas

A esto se añade <li> para indicar los ítems de la lista.

 Atributo reversed
 Listas de descripción
  Listas anidadas
o Una lista dentro de otra
o La lista que está dentro de otra se llama sublista.

ENLACES

 En las páginas web se pueden crear dos tipos de enlaces.

  La etiqueta que se utiliza para definir un hiperenlace es <a> y </a>.

 Todo aquello que aparezca en el código entre la etiqueta de inicio y la etiqueta de cierre aparecerá en la página
web como un enlace: será el objeto sensible que al ser pulsado, producirá el salto al destino del enlace.
Normalmente, suele utilizarse texto o imágenes como contenido de un enlace.

 En una página web se pueden definir varios enlaces a un mismo destino, pero no se pueden crear varios
destinos con el mismo nombre, el nombre debe ser único.

 El nombre del destino en el enlace va precedido del símbolo #, mientras que en el destino no se pone.

 Tres consejos que debes de tener en cuenta a la hora de crear un enlace.

o Primero, lleva mucho cuidado con los nombres de los ficheros, con las mayúsculas y minúsculas. Yo te
aconsejo que lo escribas todo en minúsculas.
o Segundo, lleva también mucho cuidado con los caracteres extraños, utiliza solo las letras del alfabeto
inglés, los números y algún carácter más como el guión o el guión bajo y nada de espacios en blanco en
el nombre de los ficheros o en el nombre de los directorios.
o Tercero, lleva mucho cuidado con las rutas que escribas en los enlaces, que no sean rutas físicas a
documentos que se encuentran en tu ordenador, ya que, al publicar tus páginas en un servidor web, los
enlaces no funcionarán.

HTML: PROBLEMAS CON LOS EDITORES

 Existen editores de texto gratuitos y de pago.

 Hay editores de texto que sirven para Windows, otros para Linux y otros para Macintosh.
 No te acostumbres a un único editor.
 El editor es una herramienta, no es lo más importante.
 Si tú no sabes el editor no hace milagros. Tú eres la clave de que una página web sea buena o mala, no el
editor.
HTML: TRES ERRORES TÍPICOS

 Saltos de línea
o Se indican con las etiquetas <br> o <br />
o Se debe usar únicamente para insertar saltos de línea que son realmente parte del contenido, como en
un poema o en una dirección.
 Espacios en blanco
o Los espacios en blanco no son significativos: 1, 2 ó 10 espacios en blanco, al final se visualizan de la
misma forma, lo importante es que al menos haya un espacio en blanco para separar.
o Existe una forma especial de representar un espacio en blanco que es una referencia de carácter
(&nbsp;). Pero no se debe emplear para introducir espacios en blanco simplemente, por una cuestión
de presentación visual. Eso es una cuestión de presentación, no de contenido y por tanto se debe
emplear CSS.
 Referencias de caracteres (caracteres especiales).