1.

Estructurar una pgina web

Una vez que se ha planificado y estructurado una pgina web, es necesario renovarla,
corregir errores y mantener el sitio actualizado.

Hay dos razones fundamentales para actualizar con frecuencia la web:

Ayuda a fidelizar las visitas.

Ayuda a mantener el posicionamiento en buscadores.

Planteamiento de objetivos para la pgina web.

Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel
para plantearnos el proyecto y qu queremos conseguir al realizar la web. La
planificacin de la pgina web debe incluir:

Breve descripcin de los contenidos de la pgina, su ttulo principal, etc.

Finalidad que se persigue al hacerla (informar, hacer negocio, entretener, etc.).
Anlisis de pginas parecidas, y ver que puede ofrecer la pgina web que no
tengan estas pginas para atraer al pblico objetivo, etc.
Hardware, software, documentacin que necesito para realizarla y de que
disponemos realmente.
Describir cul es el pblico objetivo, nivel informtico, idiomas, intereses, etc.
para adaptar la pgina a sus caractersticas fsicas.
Donde se va a visualizar la web; navegadores ms utilizados, plugins, elementos
especficos.

Estructurar el contenido de la pgina

Es conveniente dibujar un organigrama con todas las partes del sitio web, distribuyendo
el texto, los grficos, los vnculos a otros documentos y otros objetos multimedia que se
consideren pertinentes, mediante el cual ir creando la estructura de la pgina de la
pgina web. Antes de empezar a desarrollar la pgina web en el ordenador, deben estar
muy claros cules sern sus contenidos, su estructura, el nombre de la pgina, etc.

Hay varias maneras de estructura el contenido de una pgina web:

En rbol: esta estructura est compuesta por una pgina principal que enlaza
con otras pginas, las cuales, a su vez, enlazan con otras pginas de nivel inferior.
De esta manera se agrupan las pginas web en niveles, de tal modo que para
llegar del primero al ltimo se debe pasar por todos los intermedios. Esta

MARKETING DIGITAL 1

estructura es poco navegable si tenemos una web con muchas pginas, porque
para ver las pginas de otra rama tenemos que retroceder hasta la pgina
principal, haciendo la navegacin muy pesada.

Lineal o en lista: A partir dela pgina inicial, se suceden el resto de las pginas
como si de un libro se tratase. Para llegar a la ltima pgina hay que recorrer
todas las anteriores. Es una estructura muy adecuada para la presentacin de
manuales o aplicaciones donde el usuario debe recorrer forzosamente una serie
de pginas web para conseguir su objetivo.

Mixta: esta estructura es una combinacin de las dos anteriores. Las pginas
estn jerarquizadas en niveles, los cuales a su vez estn conectados entre s en
forma de lista. Esta estructura es mucho ms navegable y prctica, puesto que
permite poder desplazarse de rama en rama sin necesidad de volver a la pgina
principal para hacerlo.

En red: Esta estructura supone que todas las pginas de la web estn conectadas
entre s, por lo que es una estructura ms compleja y menos ordenada. Su
ventaja es que desde cada pgina podemos ir a cualquier otra del sitio. No
obstante, requiere mucha planificacin para evitar ofrecer al visitante un caos
de enlaces innecesarios.

MARKETING DIGITAL 2

Una vez que ya se tenga la estructura de la pgina, se haya recopilado bastante

informacin y completado el contenido de varias secciones, se tiene suficiente material
como para saber con ms precisin lo que se quiere hacer, y por tanto es el momento
de empezar a disear grficamente cada una de las pginas de la web, indicando los
elementos interactivos y grficos que van a intervenir en cada una. Para esto, y
fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje
HTML. El HTML es un lenguaje de marcacin diseado para estructurar textos y
presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. A
la hora de empezar con el diseo, se debe tener en cuenta:

La estructura de la pgina, debe ser los ms lgica posible facilitando la navegacin a

los visitantes. Ninguna pgina puede quedar hurfana, es decir, todas las pginas deben
tener enlaces a otras pginas. Si esto ocurre, es probable que el usuario cierre la pgina
y entre en otra en la que le sea ms fcil navegar por los contenidos.

Tipos de pginas web

Segn la forma en la que se muestran al usuario podemos distinguir dos tipos: estticas
y dinmicas.

Pginas estticas: se trata de pginas con contenidos fijos establecidos por el

diseador y se compone de varios ficheros que no tienen cambios frecuentes.
Los contenidos pueden incluir elementos animados como gifs, banners, vdeos y
otros componentes multimedia.
Las pginas web estticas son principalmente informativas y enfocadas a mostrar
informacin permanente, en ellas el usuario obtiene informacin sin poder
interactuar con la pgina web visitada.
Estas pginas son una opcin para aquellos sitios web que ofrecen una descripcin
general de sus actividades: como quienes somos, donde estamos, que servicios o
productos ofrecemos, etc.; y son las ms adecuadas para las empresas y particulares
que solo desean informar acera de sus productos o servicios.

Pginas dinmicas: una pgina web dinmica es aquella que reacciona segn las
acciones del usuario, no es un simple archivo html sino que es interactiva.
La informacin en estas pginas se almacena en base de datos desde donde se
recupera la informacin necesaria segn las peticiones del usuario.
Esto proporciona un abanico muy amplio en cuanto a posibilidades de diseo, el
usuario puede interactuar con el contenido y se pueden modificar sin necesidad de
acceder directamente al servidos, a travs de un gestor de contenido.

MARKETING DIGITAL 3

Segn la tecnologa utilizada para su construccin, podemos distinguir:

Pginas en html, como hemos mencionado anteriormente son estticas y muy

simples, sirven para ofrecer informacin de forma muy sencilla.
Pginas en Flash, pueden llegar a ser muy vistosa ya que cuentan con animaciones
y sonidos. Aunque por el contrario son muy pesadas y su carga suele ser lenta.
Tambin cuentan con el inconveniente de que su contenido no puede ser ledo por
las araas de los buscadores, por lo que, por norma general, no se posicionan bien.
Pginas en PHP, Ruby, ASP, ., son pginas dinmicas que organizan la informacin
a travs de bases de datos y son las ms utilizadas hoy en da.

Segn su funcionalidad y el contenido que ofrecen:

Pginas transaccionales o de comercio electrnico.

Pginas de marca.
Pginas de servicios profesionales.
Pginas de contenido.
Portales web.
Foros y comunidades.

Lenguajes de programacin

Cuando se crean las pginas dinmicas se utilizan lenguajes de programacin, que

aportan mucha interaccin con el usuario y tambin una gran capacidad de proceso para
generar contenido. Los lenguajes mas utilizados son:

Desde el lado del servidor:

PHP (Hipertext Preprocesor) Lenguaje que perite el uso de bases de datos para
almacenar los contenidos.
ASP (Active Server Pages) Desarrollado por Microsoft para crear pginas web,
que permite el acceso a bases de datos.
JSP (Java Server Pages). Desarrollado por Sun Microsystem para crear pginas
web dinmicas y aplicaciones para cualquier dispositivo.

Desde el lado del cliente:

HTML indica al navegador donde colocar cada texto, cada imagen o cada vdeo
y la forma que tendrn estos al ser colocados en la pgina.
Javascript, es utilizado para crear pequeos programas encargados de realizar
acciones dentro del mbito de una pgina web.
Java Applets, se trata de pequeos programas hechos en Java que se transfieren
con las pginas web y que el navegador ejecuta en el espacio de la pgina.

MARKETING DIGITAL 4

Flash. Es un programa para crear efectos especiales en pginas web.

CSS (Cascading Style Sheets, en espaol Hojas de estilo en cascada). Permite
incluir imgenes, tipos de letras, fondos, colores, incluso podemos definir
nuestros propios estilos en un archivo externo a nuestras pginas; as, si en algn
momento queremos cambiar alguno de ellos, automticamente se nos
actualizarn todas las pginas vinculadas de nuestro sitio.

2. Lenguaje HTML.
HTML siglas en ingls de HypertText Markup Language (lenguaje de marcas de
hipertexto), hace referencia al lenguaje de marcado para la elaboracin de pginas web.

Est constituido por una serie de etiquetas o tags que permiten definir la estructura de
la pgina y su contenido, ya sea texto o imgenes. Se puede escribir en cualquier editor
bsico, como bloc de notas de Windows o Kate de Linux, y el archivo generado, debe
guardarse con la extensin .html.

La presentacin de la pgina depende del navegador o browser utilizado que es el que

interpreta los tags; por eso el mismo documento ofrece un resultado diferente en la
pantalla segn se visualice con un navegador u otro, ya que HTML, se limita a describir
la estructura y el contenido del documento, y no el formato de la pgina y su apariencia.

Para incorporar un elemento externo, este no se inserta en la pgina, sino que se aade
una referencia a su ubicacin mediante texto y el navegador une los elementos para
visualizar la pgina.

Evolucin de HTML

HTML 2.0: en 1995 se publica el estndar HTML 2.0. A pesar de su nombre, es el

primer estndar oficial de HTML, es decir, el HTML 1.0 no existi como estndar.

HTML 3.2: La versin 3.2 se public en 1997 y es la primera recomendacin de HTML
publicada por el W3C (World Wide Web Consortium). Esta revisin incorpor los
ltimos avances de las pginas web desarrolladas hasta 1996, como applets de Java
y texto que fluye alrededor de las pginas.

HTML 4.01: se public en diciembre de 1999. Desde esta publicacin, el W3C se
centr en el desarrollo del estndar XHTML.

Desde la publicacin del HTML 4.01, la actividad de estandarizacin de HTML se
detuvo y el W3C se dentro en el desarrollo del estndar XHTML. Por este motivo, en
el ao 2004, las empresas Apple, Mozilla y Operan mostraron su preocupacin por

MARKETING DIGITAL 5

la falta de inters del W3C en HTML y decidieron organizarse en una nueva

asociacin llamada WHATWG (Web Hypertext Application Technology Working
Group).
La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo
primer borrador oficial se public el 22 de enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicacin de los borradores de
HTML 5.0, en marzo de 2007 el W3C decidi retomar la actividad estandarizadora
de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la
estandarizacin del XHTML, una versin avanzada de HTML y basada en XML. La
primera versin de XHTML se denomina XHTML1.,0 y es una adaptacin de HTML
4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y caractersticas,
pero aade algunas restricciones y elementos propios del XML. La versin XHTML
1.1. ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
Tambin ha sido publicado el borrador de XHTML 2.0, que supondr un cambio muy
importante respecto a las anteriores versiones de XHTML.

Crear una pgina web

Los documentos HTML deben seguir una estructura en cascada compuesta por
etiquetas. Cada etiqueta est delimitada por los signos < > y puede escribirse en
maysculas o en minsculas, el signo que cierra la etiqueta se indica con la barra /.

Adems de las etiquetas, tendremos los atributos, que son propiedades que permiten
personalizar las etiquetas HTML.

A continuacin, no centramos en algunas etiquetas:

<HTML>, </HTML>. Indica que el documento es una pgina web escrita en HTML. Se
puede utilizar el atributo lang = es para indicar el idioma de la pgina.

MARKETING DIGITAL 6

<HEAD>, </HEAD>. Cabecera o encabezado de la pgina. Incluye las definiciones

generales que afectarn a todo el documento.
<TITLE>, </TITLE>, Ttulo. Especifica el ttulo de la pgina que van a mostrar los
navegadores, los marcadores en favoritos y los buscadores.
<BODY>, </BODY>, cuerpo. Comprende el contenido de la pgina.

Para texto y formatear:

<p>, </p>: etiqueta utilizada para contener un prrafo de texto.

<strong>, </strong>: el texto comprendido entre estas dos etiquetas aparecer en
maysculas.
Tambin se puede utilizar <b>, </b>, y el texto comprendido entre estas dos
etiquetas aparecer en negrita.
<u>, </u>: el texto que est en el interior aparece subrayado.
<em>, </em>: el texto contenido entre ambas etiquetas se mostrat en cursiva,
tambin se puede utilizar <i>, </i>.

El siguiente tag es uno de los ms importantes, ya que permite enlazar unas pginas con
otras:

<a href=direccin web></a>. El atributo ms importante de la etiqueta <a> en href,

que se utiliza para indica la URL a la que apunta el enlace. Cuando el usuario pincha
sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href.

Otro atributo bsico dela etiqueta <a> es name, que permite definir enlaces dentro de
una misma pgina web. Si una pgina es muy larga, puede ser til mostrar enlaces de
tipo saltar hasta segunda seccin, volver al principio de la pgina de la pgina, etc.

Editores web

Un editor web es una aplicacin que permite crear, editar y guardar una pgina web.
Hay tres categoras:

Editores de texto: permiten editar el cdigo fuente, un ejemplo es el bloc de

notas de Windows, guardar el archivo con la extensin .html y abrirlo con un
navegador.

Editores de HTML: funcionan igual que un editor de texto, pero tienen opciones
ms avanzadas, como, por ejemplo, abrir y editar varios ficheros a la vez,
colorear los cdigos de las pginas para facilitar su compresin, soportar otros
lenguajes de programacin con los que se puede trabajar en el desarrollo de
pginas web, etc. El archivo se puede enlazar con la direccin de una pgina web
por medio del botn de enlace (normalmente tiene forma de cadena).

MARKETING DIGITAL 7

Editores WYSIWYG: permite editar el cdigo fuente y a la vez cmo la pgina

quedara en un navegador. Adems, estos editores tienen opciones para realizar
tareas adicionales, como tablas o elementos animados. Igual que con los
editores HTML, se puede enlazar una pgina web por medio del botn enlace.

Entre los programas ms utilizados encontramos:

Notepad++ es un editor de texto potente y repleto de opciones. A medio camino entre

un bloc de notas mejorado y un entorno de desarrollo ligero, es la mejor eleccin a la
hora de editar texto en Windows.

3. Eleccin de un servidor para alojar pginas.

Hasta ahora hemos abierto las pginas creadas con el navegador desde el explorador de
archivos. Pero nuestros clientes no estarn delante de nuestro ordenador, que adems
apagaremos cuando terminemos la jornada.

Un servidor es un ordenador conectado las 24 horas, que posee un disco duro con una
gran capacidad y una velocidad alta para Internet. Cuando un usuario visita una web lo
que hace es acceder a estos ordenadores, exactamente al que alberga la web.

Cuando un servidor ofrece un espacio para una pgina web deja ese espacio en un disco
curo para que se coloquen los archivos en su web. Para subir esos archivos se suele usar
un programa FTP.

MARKETING DIGITAL 8

Tenemos que distinguir entre servidor http y servidor. El servidor http es el software
que atiende las conexiones desde los navegadores de los clientes, y el servidor es el
ordenador donde se ejecuta el servidor HTTP.

Caractersticas de los servidores.

Las caractersticas son:

Alojamiento web (hosting): es el espacio que cede un servidor a los usuarios para
poder alojar informacin, imgenes, vdeo o cualquier contenido accesible va web.

Publicidad: los servidores gratuitos incluyen publicidad en la web generada,
entorpeciendo la navegacin. Si el servidor es de pago no incluye publicidad.

Direccin (URL): Localizador uniforme de recursos (Uniform Resource Locator). Es
una secuencia de caracteres que responden a un formato estndar y que permite la
clasificacin de recursos subidos a Internet para su descarga y utilizacin.

Tasa de transferencia mensual: la web ocupa lo que ocupan los archivos que lo
forman ms imgenes, msica, archivos que bajen los visitantes, etc.

Cuando un usuario de la web visita la pgina, el servidor donde est alojada descarga
todos los kilobytes de los archivos que est visitando.

Los servidores gratuitos ofrecen una tasa de transferencia de alrededor de 1 Gb, y

los de pago mucho ms.

Lenguajes: Los lenguajes del lado servidor son aquellos lenguajes reconocidos,
ejecutados e interpretados por el propio servidor y que se envan al cliente en un
formato comprensible para l. Las pginas que se ejecutan en el servidor pueden
realizar accesos a bases de datos, conexiones en red y otras tareas para crear la
pgina final que ver el cliente. Muy utilizados para el desarrollo de pginas
dinmicas son ASP y PHP.

Panel de control (cpanel): es un software que provee una interfaz grfica para la
administracin de los servicios del servidor, permitiendo realizar tareas como
administrar archivos, cuentas FTP, correos electrnicos y bases de datos.

MARKETING DIGITAL 9

Tipos de alojamiento web.

La diferencia entre los distintos tipos de alojamientos la encontramos en:

La posibilidad de disfrutar de una mquina, real o virtual, capaz de soportar la

instalacin de un servidor web o cualquier otro (servidor FTP, servidor SMTP, etc.) y
esa mquina es administrada directamente o por la empresa de alojamiento.

No disponer de una mquina, sino ser uno ms (host virtual) en un servidor http
gestionado por la empresa de alojamiento web. En este caso el servicio puede ser
gratuito, a cambio de incrustar publicidad.

A continuacin, mostramos los principales tipos de alojamientos web y sus ventajas y

desventajas:

Hosting gratuito:
Los proveedores de alojamiento gratuito normalmente requieren poner sus propios
anuncios en el sitio alojado de forma gratuita y tienen lmites muy grandes de espacio y
trfico.

Ventajas:

Interesante para realizar pruebas y aprender, adems permite mantener un entorno

real a coste cero-.

Desventajas:

Capacidad de proceso muy pequea, memoria baja y limitaciones de los recursos de

espacio en disco o de la transferencia mensual.

Hosting compartido:
Cuando un mismo servidor aloja a cientos de sitios web de diferentes clientes. Este
alojamiento web tambin tiene algunas restricciones con respecto a qu puede hacer,
aunque estas son menos importantes que en el gratuito.

Ventajas:

Se adapta muy bien a las necesidades de uso personal, profesional y del pequeo
negocio. Opcin muy econmica.

MARKETING DIGITAL 10

Desventajas:

Proveedores que apuran el nmero de clientes y recursos que acaban con servidores
infradimensionados, con problemas de lentitud y paradas de servicio.

Hosting VPS (Virtual Private Server):

Consiste en poner a disposicin del cliente un servidor exclusivo, pero no de mquina
fsica sino de mquina virtual, con diferentes niveles de recursos (potencia de
procesador, memoria, etc.), para que el cliente puede el que mejor se ajuste a sus
necesidades.

Ventajas:

Posibilidad de adaptarse a la demanda; si se necesita ampliar los recursos, el proveedor

puede aumentarlos inmediatamente. AL no ser compartido, el servidor no se ve
afectado por picos de actividad de otros clientes.

Desventajas:

Mayor complejidad tcnica en la administracin del servidor solo al alcance de personas

con buenos conocimientos tcnicos. Aumento de precio.

Hosting especializado/ gestionado:

Ofrecen un soporte integral que no se limita a los servidores, sino que incluye el soporte
tcnico para garantizar el correcto funcionamiento de estas aplicaciones.

Ventajas:

Mejor funcionamiento de la aplicacin web (velocidad, estabilidad, seguridad, )

Desventajas:

Aumento de precio.

MARKETING DIGITAL 11

Cloud hosting:
Usa tecnologas propias de la nube repartiendo el servicio prestado entre varias
mquinas fsicas. Es tpica la tarifacin por consumo.

Ventajas:

Seguridad y gran flexibilidad para crecer fcilmente.

Desventajas:

Precio ms elevado que las opciones de hosting compartido.

Servidor dedicado:
Mquina fsica en las instalaciones del proveedor.

4. Publicacin de pginas va FTP.

Qu significa publicar?

Publicar un sitio web consiste en situar las pginas en un servidor de internet, de modo
que cualquier usuario que lo desee puede acceder a visualizarlas.

Para poder publicar en Internet hay que disponer de permiso en un servidor; es decir,
se necesita tener un nombre de usuario y una contrasea. La mayora de los
proveedores de internet ofrecen a sus clientes, un servidor para que coloquen sus
pginas personales. Algunos servidores, orientados a empresas y profesionales, cobran
una cuota por permitir la publicacin de pginas web, mientras que otros permiten
alojar pginas de forma gratuita, a cualquier usuario que se registre, con el
inconveniente de la insercin de publicidad en las pginas.

Cmo alojar las pginas va FTP

El modo ms frecuente de situar las pginas en un servidor consiste en transferirlas va

FTP (protocolo de transferencia de ficheros), para lo cual es necesario utilizar un
programa apropiado (cliente FTP) disponibles para el sistema operativo Windows
(FileZilla, CuteFTP, WS_FTP LE ).

MARKETING DIGITAL 12

Una vez iniciado en cliente FTP, hay que conectar con el servidor mediante el botn de
conexin; en ese proceso, se tendr que indicar la direccin URL del mismo, el nombre
de usuario y la contrasea.

Una vez realizada la conexin, el cliente FTP mostrar en un panel la estructura de

carpetas y archivos del ordenador local (sitio local), y, en la otra, la estructura del sitio
remoto situado en el servidor web.

Para transferir archivos o carpetas al sitio remoto, bastar con seleccionarlos de panel
correspondiente al sitio local (izquierdo habitualmente) y hacer clic sobre el botn de
subida. Para descargar los archivos del servidor remoto hay que seleccionar los archivos
del panel de la derecha y hacer clic sobre el botn de bajada.

Una vez alojados los archivos en el servidor, hay que desconectar mediante el botn de
desconexin.

Filezilla

Como hemos dicho anteriormente, para subir la pgina al servidor necesitas un cliente
FTP.

Filezilla es una aplicacin gratuita para la transferencia de archivos por FTP y es tanto un
programa cliente de FTP, con el que se podr conectar con otros servidores para
descargar o subir ficheros, como un servidor de FTP, para que otras personas puedan
conectarse a nuestro PC y descargar y subir archivos a nuestra mquina.

El programa de FTP nos sirve para subir archivos a nuestra pgina. Hay infinidad de
programas para MAC, GNU/Linux y Windows. El funcionamiento es bastante similar para
todos. A continuacin, describimos como funciona:

1. Descrgate un programa cliente de FTP, en este caso Filezilla.

2. Instlalo en tu PC como cualquier otra aplicacin.
3. Una vez instalado, abre la aplicacin a la izquierda tendrs los ficheros de tu
ordenador y a la derecha una parte igual que corresponde con los archivos de tu
alojamiento.
4. Usa los datos de acceso de tu hosting para conectarte y arrastra los ficheros de tu
web desde tu ordenador hasta el alojamiento web.

En la pantalla de Filezilla se rellenan los datos de servidor, nombre de usuario y

contrasea. Ahora se accede al sitio FTP, como se hara para acceder a cualquier otra
carpeta del disco duro o en red, se pueden abrir archivos o copiar y pegar archivos de
otros lugares.

MARKETING DIGITAL 13

La pantalla de Filezilla nos muestra:

1. Barra de herramientas: des de la que se realizan las operaciones ms habituales.

2. Barra de conexiones rpidas: permite introducir los parmetros de conexiones
bsicos.
3. Panel de registro de mensajes: aparecen todos los mensajes y comandos
intercambiados con el servidor FTP.
4. Explorador local de archivos: permite visualizar el rbol de directorios del
sistema local donde est el cliente FTP.
5. Explorador remoto de archivos: permite visualizar el rbol de directorios del
sistema remoto donde se conecta el cliente FTP.
6. Panel de cola de transferencia: ofrece en tiempo real el estado de cada
transferencia activa o en cola.

MARKETING DIGITAL 14

Bibliografa:
Comercio electrnico. Autor: Santiago Iruretagoyena. Editorial: Mc Graw Hill.
Marketing digital. Autor: Agustn Crespo. Editorial: Marcombo.
Marketing digital y comercio electrnico. Autor: Inma Rodrguez-Ardura. Editorial: Pirmide.
http://www.lawebera.es/de0/organizar-pagina-web.php
http://okhosting.com/blog/tipos-de-paginas-web/
https://es.wikipedia.org/wiki/HTML#Historia_del_est.C3.A1ndar
https://informaticamasternc.files.wordpress.com/2012/02/cc3b3mo-alojar-las-
pc3a1ginas-vc3ada-ftp.pdf
https://www.hostinet.com/formacion/acceso-ftp/como-subir-mi-pagina-web-por-ftp/
https://notepad-plus.softonic.com/
http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html#5

MARKETING DIGITAL 15