b DESARROLLO WEB PARA COMERCIO ELECTRONICO - F181401AA - Ac:020 Gr:001 C9099020001

 Arquetipo: Provee a Maven de plantillas para la generación de

proyectos. Un arquetipo conforma un patrón o modelo sobre el que podremos
crear cosas del mismo tipo. Los arquetipos ayudan a crear plantillas de
proyectos para los usuarios, que a su vez podrán generar versiones
parametrizadas de esas plantillas según sus necesidades.

 Base de datos: Una base de datos o banco de datos (abreviada como

BD o b. d.) es un conjunto de datos de un mismo contexto y que se almacenan
de forma sistemática para su uso posterior.

 Clase: En el contexto de la programación orientada a objetos, una clase

es una estructura que se usa como un modelo (o plantilla) para crear objetos (o
instancias) de ese tipo. El modelo describe un conjunto de estados y
comportamientos que comparten todos los objetos de la misma clase.

 Código: En el ámbito de la informática, el código fuente es el texto

desarrollado en un lenguaje de programación concreto y que para ser ejecutado
en un ordenador debe ser compilado o interpretado.

 Cuantificable: El proceso de convertir un objeto en un conjunto de

valores discretos, medibles, como puede ser un número entero.
En función del campo de estudio este término puede tomar diferentes
definiciones.

 FTE: Full Time Equivalent. La proporción del número total de horas

pagadas durante un período (tiempo parcial, tiempo completo, contratado) por
el número de horas de trabajo en ese período de lunes a viernes. Las unidades
del ratio son unidades FTE o empleados equivalentes que trabajan a tiempo
completo. En otras palabras, un FTE es equivalente a un empleado que trabaja
a tiempo completo.
Por ejemplo: tiene tres empleados y trabajan 50 horas, 40 horas y 10 horas por
semana, respectivamente. Lo que equivale a 100 horas. Suponiendo que un
empleado a tiempo completo trabaje 40 horas por semana, su cálculo
equivalente a tiempo completo es de 100 horas divididas por 40 horas, o 2,5
FTE.

 Herramientas CASE (Computer Aided Software Engineering): Son

aplicaciones informáticas que tiene como objetivo aumentar la productividad en
el Desarrollo de software reduciendo su coste en tiempo y de dinero. Las
herramientas CASE prestan su ayuda en todos los aspectos del ciclo de vida de
desarrollo del software. Son de gran utilidad en tareas como el diseño de
proyectos, cálculo de costes, implementación automática de parte del código a
partir del diseño, compilación automática, documentación, detección de errores,
etc.

 Ingeniería de software: Aplicación de un enfoque sistemático,

disciplinado y cuantificable al desarrollo, operación y mantenimiento de
software, así como también el estudio de estos enfoques. Es decir, la aplicación
de procesos de ingeniería al software.
Es la aplicación de la ingeniería al software, porque integra matemáticas,
ciencias de la computación y prácticas que originalmente se utilizaban en
ingeniería.

 Middleware: Es una capa de lógica de intercambio de información entre

aplicaciones. Consiste en un programa que da soporte a aplicaciones en cuanto
a la comunicación con otras aplicaciones, sistemas operativos, redes, o
dispositivos. De esta forma se simplifica el trabajo de los desarrolladores de
sistemas distribuidos a la hora de trabajar con conexiones y de sincronizar
datos.

 Metodología: Conjunto de procedimientos racionales que se utilizan

para alcanzar una serie de objetivos definidos en una investigación científica,
una exposición doctrinal o tareas que requieran habilidades, conocimientos o
cuidados específicos.
La metodología también se puede definir como el estudio o elección de un
método pertinente para un determinado objetivo.

 Metodologías ágiles: Permiten adaptar la forma de trabajo a las

condiciones del proyecto, obteniendo flexibilidad e inmediatez en la respuesta,
adaptando el proyecto y su desarrollo a las circunstancias específicas del
entorno.
Las empresas que apuestan por esta metodología gestionan sus proyectos de
forma eficaz, reduciendo los costes e incrementando su productividad.

 Objeto: En el contexto de la programación orientada a objetos (POO,

OOP en inglés), un objeto se define como la unidad que realiza las tareas de un
programa en tiempo de ejecución.
También a un nivel más básico se define como la instancia de una clase.

 Programación: Es el proceso de diseñar, codificar, depurar y mantener

el código fuente de programas computacionales. El código fuente es escrito en
un lenguaje de programación.

 Pruebas de software: Verificación del comportamiento de un programa

en un conjunto finito de casos de prueba. Estos casos de prueba son
debidamente seleccionados de entre (por lo general) infinitas ejecuciones de
dominio. Esta verificación se lleva a cabo comparando el resultado obtenido con
el comportamiento esperado.
También se pueden definir como una serie de actividades que se realizan con el
propósito de encontrar los posibles fallos de implementación, calidad o
usabilidad de un programa u ordenador, probando el comportamiento del
sistema.

 Rentable: Capacidad que tiene algo para generar suficiente utilidad o

beneficio.

 ROI: Return on Investment, Retorno de la Inversión. Es un ratio que nos

da la rentabilidad de las acciones o proyectos. El ROI nos indica de una manera
sencilla y directa que valor económico hemos obtenido como resultado de
invertir un presupuesto concreto en la realización de unas acciones concretas.
ROI = (Beneficio – Inversión) / Inversión
El resultado final se expresa habitualmente en porcentaje.

 Sistema: Un sistema (del latín systēma, proveniente del griego

σύστημα) es un objeto compuesto cuyos componentes se relacionan con al
menos algún otro componente. Puede ser material o conceptual.

 Software: Conjunto de programas, instrucciones y reglas informáticas

para ejecutar ciertas tareas en un ordenador.

 Scriptlet: En el ámbito de JSP (Java Server Pages), es un trozo de

código escrito en java que se embebe en el interior del código HTML de la
página JSP. El scriptlet sería todo lo que se encuentre entre las etiquetas <%
%>.

 STUB: En el ámbito de la programación distribuida, es un código que

durante una llamada RPC (Remote Procedure Call) se encarga de la conversión
de los parámetros pasados entre el cliente y el servidor.

 UML (Unified Modeling Language): Es un lenguaje gráfico para

visualizar, especificar y documentar cada una de las partes que comprende el
desarrollo de software. UML proporciona una forma de modelar elementos
conceptuales como los procesos de negocio y funciones de sistema, además de
cosas concretas como escribir clases en un lenguaje determinado, esquemas de
base de datos y componentes de software reusables.

 Tecnología: Es el conjunto de conocimientos técnicos, ordenados

científicamente, que permiten diseñar y crear bienes y servicios que facilitan la
adaptación al medio ambiente y satisfacer tanto las necesidades esenciales
como los deseos de las personas.
MARKETING WEB:
- VENTA ESTRATÉGICA
- VISIBILIDAD EN BUSCADORES
- PRESENTACIÓN DE LA INFORMACIÓN
- BENEFICIOS Y COSTES
- ENTORNO DE NEGOCIO
- AUDIENCIA

El marketing se define como un proceso social y de gestión a través del cual

los distintos grupos e individuos obtienen lo que necesitan y desean creando,
ofreciendo e intercambiando productos con valor para otros (Philip Kotler,
1995).

Debemos tener en cuenta que actualmente, debido en gran parte a las

nuevas tecnologías, ese intercambio que se produce en marketing, sobre todo
de información, se produce de forma digital. No es necesario para intercambiar
información y/o conocimiento que empresa y/o consumidor se encuentren en
un mismo espacio físico.

El marketing se puede considerar como una disciplina científica por las tres
siguientes razones:

1. Tiene un objeto de estudio propio: Intercambio.

2. Dispone de un cuerpo de conocimientos amplio y asentado.

3. Dispone de unos métodos de investigación objetivos y sistemáticos.

Como disciplina científica se caracteriza por dos aspectos:

En primer lugar, porque es una disciplina científica relativamente joven.

Las actividades de marketing han existido siempre, pero el marketing como
una disciplina que se estudia surge a partir del siglo XX. A partir de este siglo,
lo que ha caracterizado a esta disciplina es que ha ido evolucionando
continuamente, es decir, ha tenido un incremento constante y han surgido
también intentos de delimitar el alcance del marketing (situaciones a las que se
puede aplicar, etc.). Al principio se delimitó a transacciones económicas
(empresa-consumidor) y con el tiempo se fue ampliando a cualquier
organización.

En segundo lugar, el marketing es una disciplina o ciencia multidisciplinar, lo

que significa que el marketing a lo largo de esa evolución citada ha ido
recopilando aportaciones de otras disciplinas con el objetivo de obtener una
explicación global, es decir, de establecer una teoría general. El marketing ha
usado tomadas o “prestadas” teoremas y explicaciones de otras ciencias como
la psicología, la sociología, la antropología, la economía (comportamiento
racional), etc.

El marketing, hoy en día, es muy importante tanto para la economía en

general como para las empresas u organizaciones. Esto se debe a los cambios
que se han producido en el entorno de las organizaciones y que se van a
resumir, fundamentalmente, en los dos siguientes cambios:

1. Globalización de los mercados: las empresas tienen que hacer

actualmente importantes esfuerzos en internacionalizarse.
 2. Fragmentación de los mercados: los mercados, los consumidores son
cada vez más diversos. Cada vez es más difícil satisfacer a todos los clientes
por igual, ya que se ha pasado de un consumo masivo a un consumo
fragmentado. Por este motivo, hay que segmentar los mercados. Actualmente,
se ha llegado a lo que se denomina marketing personalizado.

Estos dos cambios han derivado en un incremento bastante considerable de

la competencia en todos los ámbitos. Este incremento de la competencia es lo
que justifica la existencia del marketing. Los clientes son a nivel mundial
más exigentes y hay que darles más, con lo que la empresa debe estar en
consonancia con el mercado (orientación hacia el mercado), siendo los clientes
lo más importante en las organizaciones, es decir, es su mejor activo. Una
empresa puede tener problemas pero si éste no está en los clientes entonces la
empresa va a tener una ventaja muy importante.

A principios de los años 60 prevalecía la cantidad (tener) sobre la calidad,

pero actualmente esto ha cambiado y el consumidor es cada vez más exigente
y experto, y pide una mayor calidad de los productos.

Marketing web

El marketing web o marketing digital hace referencia a la adaptación de

las características del marketing al mundo digital utilizando todas las
herramientas que nos brinda la Web 2.0.

Implica la utilización efectiva de la tecnología en todas sus formas, es decir,

no sólo nos tenemos que centrar en Internet, el marketing digital o electrónico
va mucho más allá. Ejemplos de otras tecnologías a usar en este tipo de
marketing son el bluetooth, un anuncio de un banco que visualizamos en su
cajero automático, etc.

Su objetivo principal es el apoyo a la gestión del negocio y a las necesidades

del marketing en particular.

Las características de este nuevo concepto de marketing son:

1. Marketing personalizado: podemos realizar acciones de marketing

personalizadas ya que podemos llevar a cabo diferentes segmentaciones. En un
espacio digital cada usuario vive una experiencia única y personalizada debido a
la comunicación que podemos establecer con cada uno de ellos.

2. Marketing interactivo: una de las principales características de las

nuevas tecnologías es su interactividad. Internet permite que estemos al tanto
de lo que hacen los distintos usuarios, al igual que nos permite que estemos en
contacto permanente con nuestros clientes.

3. Marketing emocional: debido a la personalización de la que hablábamos

anteriormente, cada uno de los usuarios va a tener sus propias vivencias,
sentimientos, etc. haciéndole vivir una experiencia única y propia para él.

4. Marketing masivo: se llega a muchísimos más usuarios a un menor

coste. Ello se puede conseguir con campañas de Google Adwords, gestionando
bien el SEO, patrocinando enlaces a tu propia web, vía Redes Sociales,
marketing viral, etc.

5. Feedback: debido a las diferentes herramientas de la web 2.0 (blogs,

redes sociales, etc.) permite obtener las opiniones, comentarios, gustos y
preferencias de los usuarios en un menor tiempo y a un menor coste.

Las tecnologías de la información y la comunicación (TIC’s), desempeñan el

papel principal en el desarrollo de las nuevas formas de comercialización de
productos y servicios, ya que a través de ellas, como veíamos anteriormente,
se pueden desarrollar acciones de comunicación entre empresas y
consumidores.

Actualmente, existe un nuevo canal para la venta y la comercialización

basado en las nuevas tecnologías de la información y la comunicación que
engloba dos características fundamentales:

1. Ausencia de un establecimiento o espacio físico.

2. Contacto entre empresa y consumidor de forma online/a distancia.

Con los cambios acometidos en este último tiempo, podemos decir que el
marketing se ha tenido que actualizar e indagar un poco más, para tratar el
marketing de forma online: marketing digital o marketing electrónico.

Según se define en libros sobre marketing digital, se trata de un sistema

interactivo dentro del conjunto de acciones de Marketing de la empresa, que
utiliza los sistemas de comunicación telemáticos para conseguir el objetivo
principal que marca cualquier actividad del marketing: conseguir una respuesta
mensurable ante un producto y una transacción comercial.

Aún no existe una definición específica reconocida ya que se trata de una

nueva modalidad comercial reciente y que está en continuo avance y cambio,
refiriéndome con ello a actualizaciones y nuevas maneras de dar a conocer tu
producto a tu segmento de consumidores.

Podemos concluir por tanto, que Internet se ha convertido en un medio que

se utiliza en marketing digital en todo el proceso de comercialización incluso a
veces en el proceso de producción, ya que a través de Internet podemos dar a
conocer nuestros productos y/o servicios, se realiza el intercambio y la
transacción correspondiente, se utilizar para dar el servicio correspondiente
relativo a la postventa, etc.

En marketing es un medio muy importante, ya que se trata de un recurso

tanto para la obtención de información en investigación comercial, como un
instrumento de marketing que permite a la empresa conseguir los objetivos de
la organización.

Para realizar una buena estrategia de marketing digital, la empresa debe

conocer muy bien el comportamiento de los usuarios ya que será su gran
ventaja competitiva y la estrategia de marketing digital se adecuará muchísimo
mejor conociendo dicha información. Algunas de las actuaciones que llevan a
cabo los consumidores o usuarios de forma online son:
 Desde el punto de vista de la empresa, la presencia en Internet supone la
gran ventaja de que si el producto no ha tenido demasiada aceptación, la
empresa tiene la posibilidad de crear un nuevo producto gracias a la
información de la que dispone, de manera inmediata y con la información
actualizada en lo referente a gustos y preferencias del consumidor.

Por otro lado, desde el punto de vista del consumidor, Internet permite en
todo momento que éste tenga un papel activo y permite que los productos y
servicios que adquiere sean totalmente personalizados.

Las ventajas que reúne este medio, Internet, para los consumidores son
varias, entre ellas podemos encontrar:

 Información adecuada a los gustos y preferencias del usuario.

 Mayor cantidad de información. El usuario puede en todo momento

comparar diferentes productos y servicios, en cuánto a precio, funcionalidad,
características, etc.

 Puede evaluar varios productos y servicios a la vez.

 Tiene acceso a una oferta mucho más amplia de la que se puede

encontrar en las tiendas físicas, en Internet no existen barreras geográficas,
idiomáticas, etc.

Como futuros expertos en marketing debemos tener en cuenta que Internet

ha cambiado y seguirá cambiando las relaciones comerciales, ya que nos
permite dirigirnos de manera personalizada a grandes mercados aprovechando
el contacto directo e interactivo con los distintos consumidores, y aprovechando
las grandes ventajas que brinda como herramienta para crear y mantener
relaciones con los clientes.

Venta estratégica del marketing online

Las empresas se encuentran con un nuevo escenario y formas de trabajar

debido a las nuevas tecnologías de la información y la comunicación. Deben
abordar todas las cuestiones, circunstancias y escenarios que se pueden
encontrar en este nuevo mercado para competir con todas las armas y ventajas
competitivas puestas a su alcance. Debe contemplar las distintas acciones de
marketing que puede llevar a cabo y que van en consonancia con su público
objetivo.

La gran ventaja de usar Internet para acciones de marketing concretas radica

en que se puede impactar sobre un público tan determinado, concreto y
segmentado como quiera la empresa. Es decir, las empresas tienen a su
disposición multitud de herramientas que pueden usar para llegar a un target
muy concreto y conseguir que cada uno de los impactos realizados sean cada
vez más efectivos.

Por ello, es muy fácil personalizar nuestros mensajes, nuestros productos, y

llegar al público que realmente queremos.
 Debemos tener en cuenta a la hora de realizar cualquier tipo de estrategia o
acción online, las 4 F’s del marketing en Internet (según Paul Fleming) además
de las 4P’s del marketing mix (producto, precio, distribución y comunicación).

Las 4F’s del marketing online según este autor son:

1.- Flujo

2.- Funcionalidad

3.- Feedback

4.- Fidelización

La primera ‘F’, flujo, haría referencia al estado mental que tiene un usuario
determinado en Internet al sumergirse en un determinado site que le ofrece
una experiencia personalizada llena de interactividad, elementos multimedia y
un determinado valor.

La Funcionalidad, significa que si un usuario determinado ya ha entrado en el

estado de flujo, tiene mayor probabilidad de ser captado, pero para que se
produzca dicha captación y persita a lo largo del tiempo tenemos que dotar a
nuestro site de funcionalidad, es decir, nuestra web debe se atractiva,
fácilmente navegable, útil para el usuario, y que no tarde demasiado tiempo en
cargarse.

Una vez que la relación ha comenzado, porque tanto flujo como funcionalidad
existen, debemos seguir ‘conversando’ con el usuario y sacar partido a la
información que nos da el mismo. Vía Internet podemos preguntar al usuario
sus gustos y preferencias, qué mejoraría, datos sociodemográficos, es decir,
toda aquella información que nos ayude a conocer mejor al tipo de usuario que
visita nuestra web y establecer una relación y una actividad basada en sus
necesidades para personalizar nuestras acciones, ofertas o promociones por
ejemplo, en cada contacto que tengamos con él.

A través de Internet, podemos conocer las opiniones de nuestros usuarios

mediante las redes sociales, blogs, etc., y podemos crear comunidades de
usuarios que aporten contenidos de forma que se establezca un feedback
personalizado con los distintos usuarios, llegando a conocerlos y ofrecerles lo
que ellos demandan, llegando a fidelizarlos.

Estrategias del marketing web

Teniendo en cuenta los factores anteriormente descritos podemos establecer

diferentes tipos de marketing en Internet que veremos a continuación:

1.- Marketing one to one

2.- Marketing de permiso

3.- Marketing de atracción

4.- Marketing de retención

 5.- Marketing de recomendación

Marketing one to one

Teniendo en cuenta que una de las principales ventajas que nos aporta
Internet es su interactividad y que esto aporta a la empresa un gran
conocimiento sobre su usuario tipo, tiene la oportunidad de ofrecer a los
consumidores los productos y servicios adaptados a las necesidades de los
mismos. Es decir, este modelo 1 to 1, permite realizar un tipo de marketing
personalizado para cada uno de nuestros clientes.

Este modelo fue desarrollado por Martha Rogers y Don Peppers y

desarrollaron cuatros pasos con los que podemos llegar a tener una estrategia
individualizada o personalizada. En primer lugar, debemos crear una base de
datos con los clientes potenciales, es decir, identificar a nuestro público
objetivo.

Debemos recoger información directamente de cuestionarios que rellenan los

distintos usuarios, aunque también podemos considerar las nuevas plataformas
desarrolladas ‘marketing one to one’, en las que se obtiene información, se
realizan labores de seguimiento y se personaliza la oferta de productos y
servicios. Esas labores de seguimiento consisten principalmente en observar
detenidamente la navegación del usuario (páginas que visita, recorrido
realizado, tiempo que permanece en cada una de las páginas, etc). Esto nos
permite realizar segmentación en nuestro mercado e identificar diferentes
grupos o perfiles a los que podemos ofrecer nuestros productos y/o servicios.

Con toda esta información se van configurando diferentes perfiles de usuarios

que tendremos en cuenta a la hora de realizar y llevar a cabo las distintas
acciones de marketing planificadas, como hemos comentado anteriormente.
Estas acciones serán mucho más eficaces ya que el usuario recibirá información
totalmente personaliza y relevante para él y sobre todo les ofreceremos los
productos y servicios que ellos esperan obtener. Con ello, conseguiremos en un
primer momento interactuar con ellos, conociendo con mayor detalle a nuestro
target y pudiendo realizar una personalización totalmente óptima.

Este tipo de marketing implica un cambio en la filosofía de la empresa, en

la forma de actuar, ya que debe dejar de estar orientado al producto y
centrarse en el cliente plenamente. No sólo debe apoyar a la estrategia de
marketing interna, sino que se convierte en el pilar principal de la estrategia de
marketing digital de la misma.

Esta estrategia básicamente persigue la lealtad por parte del cliente por lo

que en todo momento debe saber que utilizamos plataformas para analizarle y
adaptarnos a sus necesidades.

Este tipo de marketing es muy apropiado para la situación del mercado actual,
debido a la gran competencia que existe y a las pocas limitaciones que hay
para comercializar cualquier tipo de producto o servicio.

Marketing de permiso
 El Permission Marketing fue desarrollado por Seth Godin (ex vicepresidente
de marketing de Yahoo!) y, básicamente consiste en el deber de solicitar
permiso antes de enviar cualquier tipo de publicidad o comunicación a los
consumidores. 

Trata de mantener una relación con el cliente y que a la vez obtengamos de

él un nivel de permiso que de lugar a un feedback provechoso por ambas
partes, por ello, gira en torno a la filosofía del CRM (Customer Relationship
Management).

No debemos olvidar que los distintos usuarios buscan fórmulas de

autodefensa ante el envío indiscriminado de e-mail que lanzan las diferentes
empresas día tras día. Es por ello, que se ha buscado la fórmula para el
Marketing Directo online: buscar permiso por parte del consumidor para
mandar publicidad o cualquier otro tipo de comunicación a su correo
electrónico.

Se trata de un paso casi definitivo a la segmentación perfecta ya que a través

del marketing de permiso podemos realizar todo tipo de segmentaciones con la
posibilidad de evaluar sus resultados e impacto casi de forma inmediata.

En palabras de Enrique Dans y utilizando un ejemplo del propio Godin,

pensemos en como funciona el marketing tradicional: una empresa interrumpe
algo que estamos haciendo (disfrutar de una película, navegar en una página
web) para entregarnos un mensaje que nosotros no hemos pedido sobre un
producto o servicio que puede que necesitemos, o puede que no. El paralelismo
sería como si yo quiero buscar pareja, y para ello me pongo un traje elegante,
me voy a un lugar donde pueda haber bastantes “victimas”, y me dedico a ir de
la primera a la última interrumpiendo su conversación para preguntarles si
tienen plan para esta noche. 

¿Qué hago si mi plan sale mal, es decir, si se me acaba el ‘lugar’ y sigo sin
plan? Simplemente, despido al sastre que me hizo el traje. Esto es lo que hacen
muchas empresas: pagan a una agencia para que les diseñe una forma de
interrumpir a todo el mundo con un mensaje y, si no funciona, cambian de
agencia. La contrapartida en versión permission sería buscar un grupo de
“víctimas” con unas características especiales (temas en común, etc.) y
acercarse a la primera de ellas con un conocimiento claro de quien es y de la
“propuesta de valor” que mis encantos le ofrecen, e intentar ir avanzando en el
permiso que tengo para hablar con ella, cenar con ella, etc.

Tomando como referencia el ejempLo de Dans, como consecuencia del spam

(primer caso en que se despide al sastre), se da el siguiente caso, naciendo el
concepto de Marketing de Permiso.

Se trata de realizar comunicaciones directas por parte de la empresa a

aquellos usuarios que le permiten enviar sus comunicaciones y por ende, están
interesados en las mismas.

Las empresas suelen utilizar los datos de aquellos usuarios que en algún
momento han solicitado información o se han interesado por algún producto o
servicio en concreto para mandarles publicidad, contenido, etc. que realmente
le interese y que encaje con un perfil determinado.
 Marketing de atracción

Este tipo de marketing consiste en generar tráfico hacia nuestra web,

principalmente en generar visitas. Para ello, en primer lugar debemos aparecer
en los diferentes buscadores existentes y debemos tener en cuenta que cuanto
más presencia tengamos en diferentes sites y lugares mayores posibilidades
tendremos de que el usuario acabe visitando nuestra web, o la sección que más
nos interese.

No debemos olvidar tampoco que debemos realizar el mayor número posible

de acciones de marketing intentando en todo momento que sean lo más
efectivas posible, que consigamos el objetivo definido en un primer momento.

Este tráfico tiene como objetivo en todo momento dar a conocer nuestro
producto o servicio a nuestros clientes potenciales, es decir, no se centra
directamente en la venta del producto si no que informa al usuario en todo
momento de las características, beneficios y ventajas que obtiene al decantarse
por su producto. Se encuentra muy en consonancia con el marketing relacional
ya que persigue crear una relación con el cliente potencial, con la diferencia de
que el marketing relacional aparte de perseguir establecer una relación con el
cliente potencial pretende que sea duradera en el tiempo, para que se produzca
la fidelización del mismo.

No debemos olvidar, como hablábamos en un primer momento que existe

sobresaturación publicitaria y por tanto, lo que pretende este tipo de estrategia
de marketing es formar un mensaje pero que no esté cargado de distintas
ofertas y promociones, sino establecer un mensaje con contenido de calidad e
informando en todo momento al consumidor para que pueda tomar la decisión
más acertada a su decisión.

Por tanto, establecer dicha relación con el consumidor y, por tanto, la

confianza en la misma (ofreciendo contenidos de calidad para el mismo) son
dos factores fundamentales en este tipo de estrategia.

Si los usuarios sienten que se les está ayudando a tomar la decisión en vez
de incitando directamente a la compra del producto, depositarán una mayor
confianza en la empresa, que finalmente radicará en la realización de la compra
del producto por parte del consumidor e incluso en la recomendación del mismo
por diferentes vías tanto a familiares, amigos, seguidores o incluso a dar su
opinión por las diferentes redes, foros, blogs o comunidades de usuarios online.

Marketing de retención

En este caso, a parte de generar tráfico se persigue que el usuario

permanezca todo el tiempo posible en ella. ¿Cómo conseguimos dicho
cometido? Para ello debemos tener en cuenta, una serie de elementos como:

 Contenido de la web.

 Dinamicidad de la misma.

 Actualización frecuente de la web.

 Adaptar la página a las nuevas exigencias o funcionalidades de nuestros
usuarios.

 Fácil navegación y tiempo de carga mínimo (debemos tener en cuenta

que si nuestra web tarda mucho tiempo en cargarse e incluso la navegación no
es nada fácil para el usuario, éste abandonará la sesión muy rápidamente, no
dará lugar a que se cargue nuestro site).

 Personalización de nuestras ofertas y promociones a los usuarios de

nuestra web.

Que el usuario permanezca más tiempo en nuestra web se traduce en lo

siguiente:

 Conocerá a fondo nuestra web.

 Tendrá acceso a una mayor cantidad de información.

 El pasar más tiempo en la web, permite que el usuario se familiarice con

ella, lo que se traducirá en la fidelización del cliente.

Marketing de recomendación

Una vez fidelizado el cliente, debemos conseguir que el mismo actúe como
prescriptor de nuestros productos y servicios apoyándose sobre todo en el
marketing viral, definido como aquellas formas de generación de red por parte
de nuestros clientes.

Debemos tener en cuenta que el marketing viral es una de las modalidades

más importantes dentro del marketing online que se puede realizar mediante
dos formas:

1.- Las recomendaciones se pueden generar de forma espontánea por parte

de los distintos usuarios.

2.- Dichas recomendaciones se pueden generar como resultado de programas

de incentivación, es decir, recompensando al usuario por recomendar a terceros
nuestro producto y/o servicio.

3.- Se puede llevar a cabo mediante una estrategia combinada

(recomendación directa e incentivada).

Con el marketing de recomendación se consigue generar bastante tráfico a

nuestra web y sobre todo, se trata de tráfico de calidad, ya que entran aquellos
usuarios convencidos por un prescriptor previamente, lo que aumenta las
probabilidades que el usuario esté altamente interesado en nuestro producto y
realice la compra del mismo.

Conclusión
 La estrategia de marketing online pasa a ser el núcleo de la planificación
estratégica de la empresa, ya que se debe realizar una estrategia en la que se
identifiquen los objetivos generales de la empresa. Básicamente estos objetivos
son:

 En primer lugar, que te conozcan los distintos usuarios de Internet (en

concreto tu público objetivo).

 Generar tráfico hacia nuestro sitio web.

 Una vez que hemos generado visitas hacia nuestra página, lo que nos
interesa es que una vez que están dentro de nuestra web, se realice la compra
de productos y servicios.

 Una vez que se produzca la compra, como empresa nos interesa que ese
consumidor vuelva a comprar (fidelización de clientes).

 Crear imagen de marca.

 Una vez que fidelizamos a nuestros clientes, obtendremos posiblemente

nuevos clientes potenciales debido a la recomendación de nuestros clientes.

En nuestro Plan Estratégico de Marketing, debemos tener muy claros los

objetivos a conseguir y acciones a realizar, así como las herramientas que
utilizaremos para lograrlos y llevarlos a cabo. En nuestro Plan de Marketing
incluiremos nuestro segmento de mercado al que van dirigidos nuestros
esfuerzos publicitarios y todas nuestras acciones de marketing, nuestra
investigación comercial al respecto de nuestro público objetivo, analizaremos
nuestra competencia (sector, mercado, acciones de marketing de la
competencia, etc.).

Debemos tener muy claro que en nuestro Plan Estratégico de

Marketing debe aparecer la siguiente información:

 Objetivos generales bien definidos.

 Acciones y estrategias de marketing a realizar, así como los objetivos

que se pretenden alcanzar con ellas.

 Estrategias en el Marketing Mix de la empresa, es decir, estrategias en

cuánto a producto, política de precios, comunicación y distribución del mismo.

 Estrategias de captación y fidelización de clientes.

 Presupuesto total.

 Herramientas de control del mismo.

Aunque tengamos listo el Plan Estratégico de Marketing tenemos que

tener una serie de cuestiones que pueden actuar como limitaciones a la hora de
desarrollar nuestro plan y que enumeraremos a continuación:
 En primer lugar, el marketing digital requiere que el usuario tenga las
tecnologías adecuadas disponibles.

 Lentitud y poca paciencia por parte del usuario para descargar

elementos multimedia, que en la mayoría de las ocasiones no estará dispuesto
a realizar, y no podremos comunicar el mensaje en cuestión por esa vía.

 Desconfianza por parte del usuario. Se encuentra en un espacio virtual

en el que no existe la figura del vendedor como tal, no puede mirar con
detenimiento el producto que pretende adquirir porque no está físicamente
disponible, y en el proceso de compra se dan factores en los que el usuario
puede sentirse inseguro e incluso incómodo al tener que facilitar datos
personales (datos tarjeta de crédito). Ello puede implicar que el usuario
abandone el proceso de compra en cuestión.

 En marketing digital, se depende excesivamente del transporte, lo que

puede ocasionar pérdidas en el control del proceso de distribución del producto
hacia el consumidor final y por ende, variación en los costes al alza.

 En lo referente a la distribución, hay que tener en cuenta una de las

principales limitaciones al respecto, ya que el usuario debe encontrarse en su
domicilio en el momento en que se vaya a realizar la entrega del producto.

Aunque conlleve una serie de limitaciones, debemos tener presente que

nuestra estrategia en Internet, supone una mayor capacidad de desarrollo de
distintas estrategias de comunicación hacia el usuario. A través de estas
estrategias, podemos tener una comunicación bidireccional con los distintos
usuarios, sabiendo en todo momento la respuesta del usuario hacia nuestras
comunicaciones pudiendo ofrecerle aquellos productos y servicios que mejor se
adapten a sus necesidades.

Saber a quién está dirigida la web es uno de los puntos más importantes a la
hora de comenzar a diseñarla y planificarla. No es lo mismo una web que tenga
que atraer a adolescentes que a gente de la tercera edad, igual que no será
igual una web española que una japonesa.

Recursos web como Google Analytics sirven para medir datos sobre los

usuarios de una web, de manera que se puedan saber datos sobre sus gustos y
preferencias. Con los datos de esta página se puede saber, por ejemplo, de qué
manera entra un usuario en nuestro sitio, de manera que podamos llevar a
cabo acciones para mejorar este tipo de entradas.

Detalles técnicos importantes como el tipo de navegador que usan los

visitantes o su resolución de pantalla, pueden influir en el diseño final de
la web. Lo ideal es siempre mantenerse dentro de la media tecnológica para no
excluir a los usuarios con peores sistemas.

La complejidad final del sitio también está íntimamente relacionada con el

tipo de usuario final. Siguiendo el ejemplo que hemos usado más arriba, un
adolescente estará predispuesto a navegar por una página altamente
tecnológica, con vídeos, sonidos, animaciones y contenidos multimedia de
última generación. Alguien de la tercera edad, por otro lado, estará mucho más
dispuesto a navegar por una página estructurada y clara, con una tipografía
legible y una organización tradicional, de manera que nunca se pierda antes de
encontrar lo que busca.

Esta razón es también práctica, ya que alguien joven puede llegar a tener la
última versión de su navegador, con un equipo más moderno y potente, lo
suficiente como para soportar todo el contenido que queremos mostrarle. Por el
contrario, alguien mayor puede tener un equipo más antiguo, con un navegador
no actualizado, y una página excesivamente innovadora podría no mostrársele
como nosotros queremos.

Identificar los objetivos del sitio web

El objetivo de una web, independientemente del contenido que tenga, es

dejar al usuario satisfecho. Con tanta oferta, tenemos que conseguir que
nuestro sitio cumpla los requisitos que cada usuario impone, tenemos que
colocarnos en su lugar y evaluar nuestro sitio con el mayor sentido crítico.

Como ya se ha dicho, analizar el sistema que sigue la competencia es uno de

los mejores métodos, pero no para copiarlo sin más. ¿Qué es lo que hace
efectivas las otras páginas? ¿Qué es lo que más valoran los usuarios? ¿Qué
motivación tienen para volver a visitar dicha página? La respuesta a estas
preguntas nos indicará qué camino debemos seguir.

Debemos analizar el estado de nuestro sitio web o una página determinada

del site. Para ello debemos utilizar diferentes métricas como por ejemplo el
número de visitas de un sitio web o el número de páginas vistas en el site.

Observando y analizando las diferentes métricas, podemos ver la evolución

de un determinado sitio web y realizar comparativas para ver la evolución del
número de visitas a lo largo de un determinado período de tiempo.

Para realizar dichas comparaciones y poder evaluar los datos de forma

correcta, debemos conocer ciertos conceptos básicos.

En primer lugar, debemos tener muy claro la diferencia entre sitio web y

página web.
 Sitio web hace referencia a todo aquello que contiene un dominio. Dentro de
un sitio web hay varias páginas web (página de inicio o home, página de
contacto, página de un producto o servicio determinado, etc.). Cada una de las
páginas web que conforman un sitio web, tiene una dirección o url diferente.

Podemos encontrarnos en muchas ocasiones sinónimos de sitio web o de

página web. Por ejemplo, sitio web podemos encontrarlo en la mayoría de las
ocasiones en inglés como site o website y página web como page o web
page.

En segundo lugar, tenemos que tener en cuenta qué son las cookies. En
cualquier sitio web, utilizamos las cookies para calcular el número de visitas, los
visitantes únicos y para registrar otros datos.

Una cookie se trata de un fichero de texto que un determinado sitio web

crea en el ordenador del usuario para almacenar datos que le sean de utilidad.
Por ejemplo, cuando en un determinado sitio web nos indican que podemos
recordar nuestro usuario y contraseña y aceptamos, se guarda un fichero de
texto en nuestro ordenador que almacena nuestra dirección y contraseña de
correo para que cuando volvamos a acceder recupere dicha información de la
cookie.

Las cookies caducan, es decir, el fichero de datos al pasar un determinado

período de tiempo, si no se modifica se borra automáticamente.

En algunas métricas se tiene en cuenta esta cuestión e incluso debemos tener

en cuenta que el usuario puede borrar e incluso no aceptar nuestras cookies.

Para ver un listado de cookies, en el navegador de Google Chrome, se

puede acceder a este listado en la siguiente dirección: chrome:
//settings/cookies.
 Debemos tener en cuenta a la hora de analizar nuestras métricas, que tener
muchas visitas no es sinónimo de éxito, es decir, puede que tengamos un
número elevado de visitas hacia nuestro sitio web pero que el negocio no sea
rentable, es decir, nadie termina comprando en la web.

Es importante que tengamos claro la diferencia entre visitas, visitantes

únicos y que sepamos distinguir la rentabilidad o no de las visitas hacia
nuestro sitio web.

Por ejemplo, nuestro sitio web lo vamos a comparar con una tienda física.
Podemos tener 8 visitas al día de 3 visitantes únicos. ¿Qué quiere decir eso? 3
personas han visitado nuestra tienda 8 veces. La persona 1 ha entrado dos
veces al día en nuestra tienda, la persona 2 ha entrado cuatro veces y la
persona 3 ha entrado también dos veces en nuestra tienda en el mismo día.
Pero, ¿esas visitas han sido rentables? En nuestra tienda puede entrar un
número considerable de visitas pero que nadie que nos visite acabe comprando
en nuestra tienda. Si ocurre esto, nuestra tienda no es rentable.

Tenemos que tener en cuenta que tener un número considerable de visitas en

nuestra web es positivo pero puede que nuestra web no esté siendo rentable
porque no se produzca ninguna compra durante esas visitas.

1. Métricas

Debemos tener muy en cuenta los conceptos descritos anteriormente: sitio

web, página web, cookies, visitas, visitantes únicos y si la rentabilidad de
nuestra web es positiva o negativa, pero pasaremos a analizar en profundidad
las principales métricas que debemos tener en cuenta para analizar nuestro
sitio web en profundidad.

2. Visitas

Esta métrica se define como el número de veces que los distintos usuarios
han estado en un determinado sitio web en un período de tiempo determinado.
La variable visitas junto a la variable visitantes, forman la base del cálculo de
cualquier otra métrica web. Por eso, debemos tener en cuenta que cada
herramienta cuenta estas dos variables de forma distinta, por lo que hay que
tener muy claro la forma que tiene la herramienta de calcular ambas variables.

En esta métrica, visitas, debemos tener en cuenta varios aspectos:

1. El término visitas, se refiere a cualquier usuario que llega a nuestra web,

pasa un tiempo navegando por ella y se va. Técnicamente sería una sesión, por
lo que sesión hace referencia a visita, todas las sesiones que realiza un
determinado usuario durante un período de tiempo en concreto haría referencia
a las visitas totales que el usuario realiza en nuestra web.

2. Si un usuario accede a nuestro sitio web y permanece inactivo durante 30

minutos o más, y después de ese tiempo comienza a navegar de nuevo por
nuestro sitio web, se considerará como otra visita más.

3. Cuando un usuario abandona nuestro sitio web y vuelve a él en menos de

30 minutos, se considera la misma visita, no se contabilizará una nueva.
 4. Por tanto, teniendo en cuenta los dos puntos anteriores, dos y tres, si un
usuario deja el navegador abierto con nuestro sitio web y se marcha, después
de 30 minutos de inactividad la sesión se dará por terminada.

5. Cuando un usuario entra a nuestro sitio web, se contabiliza una visita,

pero dentro de esta visita el mismo usuario puede consultar todas las páginas
del sitio web que desee (página de un determinado producto o incluso varias
páginas de producto, página de contacto, página de aviso legal, etc.) y se
contabilizará como la misma visita.

6. Podemos saber el número de visitas para una página en concreto, es

decir, de todas las páginas que visita un usuario y que se contabilizan como
una visita para el sitio web, podemos desglosar y controlar aquellas páginas y
por tanto visitas, de cada una de las páginas que conforman el sitio web. De
este modo, podremos comprobar qué productos de nuestra web son más
visitados, y por ende, más rentables.

7. Los 30 minutos de los que hablábamos anteriormente, corresponden al

tiempo de vida de la cookie de la sesión de Google Analytics. Dicha cookie sirve
para contabilizar las visitas. Es por ello que debemos tener en cuenta que la
métrica visitas se trata de una aproximación, ya que se basa en la cookie
descrita anteriormente y la genera el servidor para poder identificarlas, por lo
que no siempre una persona será un visitante único. Hay que tener en cuenta
las siguientes circunstancias:

a) Cuando un usuario accede al mismo sitio web desde dos navegadores

diferentes, la persona estará considerada como dos visitantes únicos
distintos.

b) Cuando un usuario no acepta o borra las cookies en su navegador entre

visitas, no podrá ser identificado como el mismo visitante único en las próximas
visitas al sitio web.

8. Hay dos tipos de visitas, nuevas y de retorno. Las visitas de retorno

pertenecen a aquellos usuarios que han realizado más de una visita a la web
durante el período de tiempo que se esté analizando.

9. El registro de las visitas en cualquier tipo de herramienta estadística se

realiza de la siguiente forma:

a) Cuando un usuario visita la primera página del sitio web, la herramienta

comienza una sesión para el navegador que esté utilizando, comenzando la
sesión (visita) para ese usuario.

b) Si el usuario continúa viendo páginas del sitio web, estas nuevas

solicitudes se adjudican a la sesión que se ha abierto.

1. Visitantes

A este tipo de métrica nos podemos referir con distintos términos:

visitantes únicos, visitantes únicos absolutos o visitantes exclusivos, aunque
también podemos encontrar esta variable en diferentes herramientas como
visitantes únicos diarios, visitantes únicos semanales, mensuales, etc.
 En cualquier caso, independientemente de la denominación que le demos,
esta métrica hace referencia al número de usuarios distintos que han
accedido a un determinado sitio web en un periodo de tiempo determinado.
Este número de usuarios es aproximado, y es así por diversos motivos:

1. Cuando dos personas distintas consultan un sitio web en concreto desde el

mismo dispositivo, y no se cierra la sesión de la primera persona, al ser
consultado nuestro sitio web por la segunda persona se contabiliza como un
único visitante único, cuando en realidad nuestro site ha sido visitado por
dos visitantes únicos.

2. Cuando una persona accede a nuestro sitio web desde dos lugares
diferentes, por ejemplo, desde el pc de casa y desde el pc del trabajo, se nos
contabilizan dos visitantes únicos y realmente se trata de la misma persona.

Por eso, es muy importante que tengamos en cuenta como se contabiliza

realmente esta variable.

En primer lugar, Analytics incrusta una cookie con un único identificador por

navegador. Tenemos acceso a los accesos por tipo de navegador. Esta cookie
caduca a los dos años desde su creación o última actualización.

Si la cookie es borrada, cuando ese mismo usuario acceda a nuestro sitio

web, Google Analytics asignará un nuevo identificador (una nueva cookie) al
navegador que será distinto al anterior.

Marketing Web
 Teniendo en cuenta esta premisa, por eso si una persona se conecta desde el
trabajo y desde su casa aunque utilice el mismo navegador se contabilizarán
dos visitantes únicos, ya que el navegador en cada pc tendrá un identificador
diferente.

Igualmente, si una persona accede desde dos navegadores distintos desde el

mismo dispositivo, se contabilizarán dos visitantes únicos, ya que cada
navegador tendrá su identificador único (cookie determinada).

Por otro lado, si el navegador se usa con distintas cuentas de usuario, cada
una tendrá asignado su propio identificador único.

Se trata de un número aproximado porque Analytics contabiliza cada

navegador como un visitante, ya que para eso lo identifica con un identificar
único. Pero hemos visto anteriormente las distintas casuísticas que se pueden
dar al respecto.

Por tanto, debemos tener en cuenta que si un mismo usuario accede desde
dos navegadores distintos a nuestro sitio web, cada uno de ellos tendrá un
identificador único que Google Analytics contabilizará como dos visitantes
únicos en lugar de uno sólo.

Otras aclaraciones al respecto para tenerlas en cuenta serían las siguientes:

 Los visitantes únicos diarios se cuentan cada día, por lo que su

análisis y control carece de utilidad para periodos superiores a un día.

 Los visitantes únicos semanales se cuentan cada semana. Igualmente

su análisis no es útil si el período de tiempo considerado es superior a una
semana.

 Cuando analizamos los visitantes únicos mensuales no tiene sentido

que usemos las dos variables anteriores.

 Debemos calcular el número de visitantes únicos a través de

los visitantes únicos absolutos ya que se eliminan todos los usuarios
repetidos durante el periodo analizado.

 Veamos visualmente estos conceptos a través de un ejemplo de Avinash

Kaushik:
1. Páginas

Tenemos que diferenciar entre páginas de entrada y de salida.

 Las páginas de entrada son aquellas a través de las cuales los distintos

usuarios acceden a nuestra web.

 Por el contrario, las páginas de salida son aquellas desde las que se

abandona la web.

A continuación, veremos en detalle las métricas para ambos tipos de páginas.

Páginas de entrada

Para este tipo de páginas debemos analizar las siguientes métricas:

1. Visitas totales. Podemos ordenar las diferentes páginas en función del

tráfico que reciben, identificando aquellas que reciben un mayor volumen de
visitas.

2. Número de entradas.

3. % de visitantes que entran por una determinada página sobre el total de

visitantes del sitio web en cuestión.

4. Número de páginas vistas por visita.

5. Número de páginas vistas por visitante.

 6. Tiempo medio de duración de la visita.

En este sentido, las variables cuatro, cinco y seis, si nos aportan datos

positivos, podemos afirmar que el contenido de nuestro sitio web es interesante
para los distintos usuarios, y por tanto, les gusta navegar por nuestra web.

7. Tasa de rebote. En este sentido, sabemos si lo que le mostramos al

usuario le interesa o, por el contrario, le mostramos algo que no quiere ver o
que simplemente no le interesa para nada.

8. Hay que tener en cuenta aparte de la tasa de rebote la tasa de conversión

ya que podemos encontrar páginas que tienen una tasa de rebote y de
conversión elevada que sean rentables al generar ingresos elevados.

Además de analizar las diferentes métricas tenemos que analizar los

diferentes tipos de usuarios para medir la rentabilidad de una determinada
página de entrada. Según Gemma Muñoz los usuarios son:

1. Aquellos que ven la página y se van. En este caso no sirve de nada

emplear estrategias para atraer usuarios a nuestra web si luego nos le interesa
nuestro contenido y se van. Analizaríamos la tasa de rebote.

2. Aquellos usuarios que ven la página y siguen navegando por la web. En

este caso debemos tener en cuenta si el tráfico interesado es de calidad o no,
por lo que debemos controlar el número de páginas vistas por visita y visitante
y la duración media de la visita tanto en la página de entrada en concreto como
en nuestro sitio web de forma global.

3. Aquellos usuarios que ven nuestra página, siguen navegando por

nuestro sitio web y llegan a convertir. Si los usuarios que acceden a nuestra
web se comportan de esta forma, debemos analizar tanto la tasa de rebote
como la tasa de conversión de las páginas de entrada ya que se pueden dar
distintas circunstancias:

A: Tasa de conversión muy alta y tasa de rebote muy alta. En esta situación, habría
que optimizar ambas tasas de forma urgente.

B: Tasa de conversión muy baja y tasa de rebote muy baja. En este caso habrá
algún tipo de problema en el proceso de conversión, por lo que hay que investigar
en profundidad qué pasa y solucionarlo de inmediato.

C: Tasa de conversión muy baja (casi cero) y tasa de rebote muy alta. En este caso
las páginas se tendrían que eliminar.

Además de medir la rentabilidad de estas páginas con distintas métricas y

el comportamiento de los distintos usuarios que acceden a nuestra web,
podemos realizar los siguientes análisis:

1. Segmentando por el origen del tráfico y estableciendo en estos

resultados las métricas anteriores podemos medir la rentabilidad de nuestras
páginas de entrada.
 2. Analizando las palabras clave. Fijándonos en el número de visitas
podemos establecer la importancia de cada una de ellas en función de la
cantidad de tráfico que atraen.

Por otro lado, comparando la tasa de rebote de cada palabra clave con la tasa
de rebote de nuestro sitio web podemos identificar las páginas de entrada que
no son interesantes para los usuarios y que se deben optimizar.

Páginas de salida

En aquellas páginas por las que el usuario abandona nuestro sitio web es

interesante medir:

 El número de salidas que se efectúan por una página en concreto.

 El número de veces que se ha visto cada página de salida en un período

determinado.

 Número de visitantes de cada una de las páginas.

 Tasa de salida, que se refiere al porcentaje de veces en las que una

página en concreto ha sido la última en visualizarse antes de abandonar
nuestro sitio web. Si esta tasa es alta, no significa expresamente problemas y
deber de optimización de dichas páginas, sino que dependerá en gran medida
de la página de la que se trate.

En este último caso, como la tasa de salida alta será un dato positivo o
negativo en función de la página de salida que estemos analizando, debemos
considerar:

1. Home.

En este caso, lo más normal es que la tasa de salida sea alta por lo que
deberemos analizar la tasa de rebote:

Si ésta es baja y se combina con una tasa de salida alta, significa que los
usuarios navegan desde la home a las páginas interiores y después abandonan
nuestro sitio web por la home.

Si la tasa de rebote es alta al igual que la tasa de salida, puede haber

problemas en la home, por lo que habría que optimizarla.

2. Páginas en las que se puede realizar una compra

La última página de un proceso de compra (conocida como Gracias por su

compra) suele tener un número elevado de salidas, pero si este volumen lo
tiene una página intermedia deberemos tener en cuenta que existe algún tipo
de problema en el proceso de compra.

Dependiendo de los resultados de las métricas analizadas, deberemos

analizar e identificar las causas de los problemas encontrados y optimizar
dichas páginas mediante:
 1. La disminución de la tasa de rebote de las páginas de entrada.

2. La disminución de la tasas de salida de las diferentes páginas internas.

3. La disminución de la duración media de permanencia en cada una de las

páginas que conforman el proceso de compra online.

4. El aumento de la duración media de permanencia en las distintas páginas

de contenido.

Páginas vistas y Páginas vistas únicas

Las páginas vistas hacen referencia al número de veces que se ha visto una

página en concreto. Cada vez que se muestra una página en el navegador del
usuario se contabiliza como una página vista, incluso si se repite el acceso a
esa misma página. Por tanto, lo que nos indica es el número de páginas
mostradas en los navegadores.

Cuando un usuario en su navegación visualiza cuatro veces la home antes de

abandonar dicha sesión, el número de páginas vistas de la home sería de
cuatro.

En Google Analytics se incluye la métrica páginas vistas únicas que se refiere

al número de visitas en las que se ha visualizado una página determinada. En
este caso, no se tienen en cuenta las repeticiones, aunque se acceda a una
misma página en varias ocasiones se contabiliza ésta una vez. Si en la próxima
visita se accede a esta misma página, se contabilizará como una segunda
página vista.

En el caso anterior el número de páginas vistas únicas sería de uno.

Para que queden claros ambos conceptos veamos el siguiente ejemplo:

Un único visitante realiza una visita a la web y pasa tres veces por la página
principal. En este caso se contabilizarían 3 páginas vistas y 1 página vista
única.

El mismo visitante único, visita de nuevo la web viendo la página principal 4

veces, por lo que el número de páginas vistas sería de 7 y las páginas vistas
únicas serían 2.

Esta métrica se calcula como el número de páginas vistas entre el número de

visitas, por lo que el resultado muestra la media de páginas visualizadas por
visita al sitio web.

Por ejemplo, tres páginas por visita significa que cada una de las visitas
consulta una media de tres páginas.

1. Promedio de tiempo en una página web

Se trata de una métrica esencial. Esta métrica nos permite conocer la

media de tiempo que pasan los usuarios en nuestra web, es decir, mide el
tiempo que un usuario está en una página determinada.
 Por ejemplo, si vemos que en la página de un producto de nuestra web los
usuarios pasan una media de tres segundos en la misma, podemos afirmar que
el contenido no le interesa nada al usuario y por tanto, no leen nada acerca del
producto.

De todas formas, este dato es aproximado porque se calcula de la siguiente

forma:

Cuando accedemos a una página determinada se registra la fecha y la hora.

Esta variable por tanto se calcula mediante la diferencia ente la hora y fecha
en la que se accedió a la página y la hora y fecha en la que se accedió a la
siguiente página registrada de nuestro sitio web.

Pero, ¿qué ocurre si el usuario sólo visita una de las páginas de nuestro sitio
web?; y ¿cómo calcula el promedio de tiempo en la última página visitada? En
estos casos, no se puede calcular el promedio de tiempo en una página web.

Esto mismo sucede cuando un usuario visita una página y se produce un

período de inactividad de 30 minutos y continúa navegando. En este caso la
herramienta considera dos visitas o sesiones diferentes con una duración nula o
de cero segundos/minutos para la primera de las páginas.

Debemos tener en cuenta qué ocurre cuando un usuario abre un enlace de

una página en otra pestaña del navegador:

1. A veces, las herramientas utilizadas crean dos sesiones o visitas diferentes

y calculan el tiempo para cada una de las mismas con los criterios habituales.

2. Otra manera de analizar dicha información consiste en normalizar la

navegación para facilitar el cálculo de dicha variable. En este caso, se
calcularía el tiempo por página y se sumarían todas las duraciones.

El tiempo medio en una página web se puede analizar de varias formas y

sobre todo dependiendo del tipo de página web que tengamos:

1. Página web de contenidos

Si es un sitio web de contenido podemos saber si los usuarios están leyendo

dicho contenido si el la duración es alta, o si es baja, no les interesará en
absoluto dicho contenido.

2. Página de comercio electrónico

Debemos tener en cuenta que en las páginas que conforman el proceso de

compra, cuanto más tiempo necesiten los distintos usuarios, menores
conversiones obtendremos, por lo que las ventas serán más bajas.

De todas formas, una duración baja tampoco sería bueno para la obtención
de conversiones, ya que no interesarían nuestros productos a los usuarios.

3. Páginas de formularios
 En aquellas páginas en las que los distintos usuarios tienen que rellenar
formularios, bien para suscribirse, obtener información de algún tipo de servicio
o producto, etc. mucho tiempo puede significar que el formulario es largo y
complicado y poco tiempo puede significar que los usuarios no lo rellenan o
que lo abandonan sin llegar a terminarlo.

1. Promedio de tiempo en un sitio web

En este caso, esta variable indica el tiempo medio que pasan los usuarios en
un sitio web.

Cuanto mayor sea la duración media de la visita, mayor capacidad de

retención tiene nuestro sitio web.

Es muy importante, que tengamos claro como Google Analytics calcula tanto
la métrica del punto anterior como la de este punto.

Página Web

Promedio de tiempo en una página web

En este caso se trata del tiempo medio que pasan los usuarios en una
determinada página del site, sumando los diferentes tiempos en la página y
dividido por el número de veces que se ha visto la página.

Debemos tener en cuenta que no se incluyen las visitas cuya duración es

nula.

Promedio de tiempo en un sitio web

 En este caso sí que se tienen en cuenta todas aquellas visitas en los que el
tiempo de duración de las mismas es igual a cero y se calcula dividiendo el
tiempo total de todas las visitas entre el número de visitas totales.

1. sa de rebote

Esta métrica hace referencia al porcentaje de visitas a un determinado sitio

web que lo abandonan rápidamente y sin hacer ningún clic.

En Google Analytics se considera abandono si un usuario accede de forma

directa o desde un enlace externo a una determinada página de nuestro sitio
web y tras verla cierra el navegador o la abandona en un par de minutos a lo
sumo, sin visitar más páginas de nuestro site.

Si una página tiene un porcentaje de rebote del 70%, significa que de cada
100 usuarios que llegan a la página, 30 se quedan en la web. En este caso, los
usuarios que visitan esa página no tienen mucho interés por lo que les
muestra. Lo normal es que la tasa de rebote tenga valores cercanos al 30%. Si
nuestra tasa de rebote supera el 40% debemos comenzar a preocuparnos y si
son superiores al 50% debemos llevar a cabo acciones inmediatas para
solventar el problema.

Esta métrica se trata de una de las más útiles, ya que se puede utilizar en
multitud de casos:

Home

Si nuestra tasa de rebote en la home es alta debemos tener en cuenta una

serie de circunstancias que pueden identificarse como las principales causas:

1. La home no comunica a nuestros usuarios el objetivo principal del sitio

web. Por tanto, los mismos no proceden a visitar el resto de páginas del site.

2. El tráfico no es de calidad, si no está posicionada en los distintos

buscadores por las palabras clave adecuadas.

3. El tiempo de carga es elevado o no se ve correctamente en los diferentes

navegadores.

1. Páginas vistas y Páginas vistas únicas

A aquellas páginas que tienen una cifra elevada en ambas métricas, hay que
tenerle controlado aún más la tasa de rebote, ya que si éste fuera alto, su
optimización llevará asociado la reducción del porcentaje de rebote del sitio
web de forma globalizada. También nos ayuda a controlar e identificar las
páginas que no interesan a los usuarios y que no ayudan a mantener a los
usuarios por nuestra web.
 2. Referrers

En este caso, no debemos perder de vista todas aquellas páginas por las que
nos llega tráfico a la web. Si el porcentaje de rebote es alto, este tráfico no es
de calidad.

3. Palabras clave

Debemos analizar tanto la tasa de rebote de las palabras clave posicionadas

tanto de forma orgánica como de pago en los distintos buscadores. En este
caso identificaremos las palabras clave que no son adecuadas para nuestro sitio
web o si éstas redireccionan a páginas que no están optimizadas.

Debemos tener en cuenta que en el caso de que nuestro sitio web se trate de
un blog, debemos analizar la tasa de rebote con cautela, ya que en este
caso en particular, los usuarios leen un determinado post y abandonan el blog.
Todo dependerá del tipo de blog que estemos analizando. Por ejemplo, si se
tratase de un blog profesional éste perseguirá que sus lectores se pongan en
contacto con él a través de un formulario y para ello deberán que hacer al
menos un clic al respecto. En este caso, la visita no se contabiliza para la tasa
de rebote. También puede ocurrir que los usuarios que terminen de leer un
determinado post se interesen por otros contenidos del blog y realicen clics al
respecto, en cuyo caso tampoco se contabilizaría como rebote.

En el caso de los blogs, para analizar si el tráfico es de calidad, podemos

basarnos en la métrica promedio de tiempo en una determinada página,
post en este caso, ya que si es algo significará que el contenido es de interés
para los distintos usuarios. También podemos calcular la tasa de rebote en
función de la duración de la visita.

1. Tasa de salida

Esta métrica la podemos definir de dos formas diferentes. Por un lado, como
el número de usuarios que abandonan el sitio web desde una página
determinada de nuestro site y por otro como el porcentaje de visitas que
abandonan un sitio web desde una página en concreto. Esta página
corresponde a la última página que ha visto el usuario antes de abandonar el
sitio y que se denomina página de salida.

En este sentido, debemos tener en cuenta que cualquier usuario va a

abandonar nuestro sitio web y siempre habrá una última página, una página de
salida, por lo que debemos analizar esta métrica en relación con otras para que
nos proporcione información realmente útil. Para ello, es importante que
diferenciemos entre tasa de salida y tasa de rebote, e incluso conocer
aquellos casos en los que no hay que fijarse en la tasa de salida.

Es por ello que debemos diferenciar las salidas normales de las

problemáticas, es decir, aquellos casos en los que debemos y no debemos
analizar la tasa de salida y tener en cuenta la tasa de rebote. Es muy
importante que tengamos en cuenta la diferenciación entre ambos conceptos, la
tasa de salida nos muestra el porcentaje de usuarios que abandonan nuestro
sitio web por una página en concreto, independientemente de la página por la
haya entrado a nuestro sitio web e independientemente del número de páginas
que haya visitado. En cambio, la tasa de rebote nos muestra el porcentaje de
usuarios que abandonan nuestro sitio web por una página en concreto, pero en
este caso, dicha página es la única que han visitado los usuarios de nuestro
site.

Es importante que tengamos en cuenta que si tenemos una tasa elevada de

salida y nuestro sitio web es una tienda online, no tenemos porqué
considerarla una página problemática, ya que es muy probable que los usuarios
hayan realizo el pedido correspondiente y que sea la última página visitada, por
tanto, la página por la que abandonan nuestro site.

Pero sí que debemos analizar (considerar problemáticas) aquellas tasas de

salida de aquellas páginas que forman parte intermedia de algunos procesos,
como por ejemplo, aquellas páginas que forman parte del proceso de compra, a
excepción de la página de finalización de la misma.

Pero debemos tener en cuenta algunos matices como si al principio del proceso
se pide al usuario datos de acceso o registro, por lo que la mayoría de ellos
crearán su usuario y contraseña. Es importante que lo tengamos en cuenta
ya que cuando un usuario se registra, normalmente le llega un enlace al correo
para confirmar su dirección de e-mail por el que se abre una nueva ventana y
se abandona la sesión anterior, por lo que se abandonaría la página anterior del
proceso y el usuario seguiría con la compra. Hay que mirar con cautela esa tasa
de salida.

Otro de los matices a tener en cuenta, es que muchos de los usuarios

comienzan el proceso de compra sin intención de finalizarlo, bien para ver cómo
funciona, para ver qué datos piden y volver más tarde a realizarlo, bien para
curiosear, etc.

Por ello, es muy importante que tengamos en cuenta cuando debemos

fijarnos en la tasa de salida y cuando no. Debemos por lo menos, tener en
cuenta este par de premisas:

1: En las páginas que exista una llamada a la acción para que el usuario siga
navegando por nuestro site, deben tener un tasa de salida baja.

2: Aquellas páginas que constituyan la finalización de cualquier proceso o la

consecución de algún objetivo en concreto, pueden tener una tasa de salida
alta sin que ello suponga en principio un problema.

1. Tasa de conversión

Esta métrica muestra el porcentaje de objetivos que hemos conseguido en

relación al número de visitas. Una conversión se trata de una visita que cumple
el objetivo marcado. Por ello, se trata de una de las métricas web claves a
tener en cuenta.

En Google Analytics, la tasa de conversión se calcula de la siguiente forma: el

número de visitas en las que se ha cumplido el objetivo (una o varias veces)
dividido entre el número de visitas totales.
 Un objetivo se puede entender como el número de pedidos que se realizan en
una tienda online, los formularios recibidos solicitando información sobre cierto
producto, curso, etc. el número total de suscripciones a una newsletter, el
registro en un determinado sitio web, una reserva, etc.

En este sentido, si por ejemplo, nuestra web es una tienda online, y tenemos
una tasa de conversión del 3%, significa que se producen 3 ventas por cada
100 visitas.

Entorno de negocio.

Cuando cualquier tecnología se extiende (ya sea por e-mail, mensajes de

texto o redes sociales) se necesita algún tiempo para que se establezca cuáles
son las mejores prácticas o estrategias. Y mientras que muchas empresas
siguen buscando las maneras de sacarle el máximo rendimiento a las redes
sociales más importantes, algunas técnicas han dado sus frutos y ayudan a tu
empresa a aumentar su alcance en lo que denomina “Social Media”.

La clave para tener éxito en marketing dentro de las redes sociales se centra
en los fundamentos que ya hacen que el negocio sea grande, y que permiten a
los clientes correr la voz sobre los productos o servicios excepcionales.

Aquí está un plan de 5 pasos que puede ligarse con la experiencia de los
clientes y así tener un mayor respaldo, el cual permitirá atraer más clientes al
negocio.

1. Comenzar con un servicio excepcional

Debes brindar experiencias memorables a los clientes, la importancia de

este primer paso no puede ser subestimado. Se ha de tener en cuenta por qué
se decidió abrir las puertas del negocio y concentrarse en esa idea cada vez que
se venda o se preste un servicio a los clientes, esa es una de las principales
diferencias entre la competencia y la propia empresa.

2. Atraer a los clientes con contenido interesante

Un gran servicio es el primer paso de una base de fans apasionados en

nuestras redes sociales, pero el siguiente paso consiste en extender la
experiencia fuera de las cuatro paredes. El e-mail marketing ayuda a llegar a
los clientes apasionados cuando no están en la tienda para compartir noticias,
consejos y otras informaciones a través de comunicaciones periódicas.

Los beneficios del e-mail marketing van más allá de simplemente mantener
informados a los clientes. El hecho de pedir una dirección de correo electrónico
fortalece el vínculo entre la empresa y los clientes, porque están confiando con
un pedazo de su información personal.

Sin embargo, el que un cliente haya dado su correo puede parecer un

pequeño detalle, pero no lo es, ya que está brindando la confianza para
interactuar en un nivel más profundo con el negocio
 Además, los boletines de correo electrónico son fácilmente (y a menudo)
pueden ser transmitidos y compartidos con los amigos, por lo que este es el
primer paso hacia un aprovechamiento de los contactos de los clientes.

3. Ayudar a los clientes apasionados a correr la voz

Reenviar un boletín por correo electrónico sigue siendo una gran manera

para que los clientes puedan correr la voz sobre la empresa, no obstante, las
redes sociales más importantes pueden proporcionarte una gran cantidad de
formas diferentes de lograrlo.

Por ejemplo, un archivo en línea con el contenido del boletín del correo
electrónico, puede ser enviado como enlace a varios sitios de redes sociales en
torno a la Web.

4. Convertir clientes ocasionales en clientes apasionados

El intercambio de información con los amigos es la naturaleza misma del

social media marketing, así que usar este canal para dedicar a los clientes más
apasionados permitirá rápidamente aumentar la conciencia en tu negocio entre
los contactos. Esta es la razón que provee contenidos a los clientes más
apasionados es tan importante.

Si les das información de que hablar, ellos con gusto lo compartirán con sus
amigos. Algunos ejemplos de artículos que el negocio puede publicar
incluyen:

 Detalles sobre los nuevos productos o modificaciones en las ofertas

existentes.

 Ofertas, descuentos y cupones.

 Noticias de los próximos eventos.

 Ofertas, premios y concursos.

De hecho, los clientes tienen más probabilidades de conectarse a través de

los medios de comunicación social que son el e-mail marketing. Los
suscriptores de correo electrónico están más comprometidos, ya que
interactúan a través de su bandeja de entrada, lo que significa que va a
recibir una alerta cuando el mensaje llega, mientras que los contactos de las
redes sociales se distraen más fácilmente.

Las redes sociales son muy populares ahora, pero hay que recordar que los
usuarios tienden a ser más como conocidos ocasionales en comparación a los
clientes apasionados que el e-mail marketing ofrece.

5. Mantener el “círculo virtuoso” en marcha

Si el objetivo final es convertir a tantas personas en clientes apasionados

como sea posible, pero sobretodo ofrecer una experiencia de calidad a los
clientes. Utilizar el Social Media para atraer a nuevos clientes sorprendiéndolos
con un excelente servicio –el cual hace diferente a la competencia- y no olvidar
enfocar los esfuerzos a que se suscriban al boletín de correo electrónico
mientras están allí. Cuando lo hagan, ellos se encargarán de difundirlo con sus
amigos y así sucesivamente.

Esto crea un círculo virtuoso que continuará construyendo y generando

seguidores para el negocio con cada nuevo boletín y gran experiencia del
cliente que la empresa produce.

La actividad publicitaria y por tanto el marketing, se realiza bajo el amparo

de dos derechos fundamentales recogidos en la Constitución:

Art. 20. Derecho a la libertad de expresión.

Art. 38. Libertad de empresa.

ARTÍCULO 20 DE LA CONSTITUCIÓN: DERECHO A LA LIBERTAD DE

EXPRESIÓN.

Este artículo recoge cuatro derechos fundamentales diferentes:

El derecho que el Tribunal Constitucional denomina “Derecho de opinión”.

Se reconoce y protege el derecho a expresar y difundir libremente los
pensamientos, ideas y opiniones mediante la palabra, el escrito o cualquier otro
medio de reproducción. Es el derecho a expresar juicios de valor personales, y
por ello no podemos decir que sean verdad o mentira, pues se consideran
meramente opiniones. Además del límite general establecido en el punto 4 del
artículo 20, el Tribunal Constitucional dice que la Constitución no ampara el
derecho al insulto, entendiendo que existe insulto cuando la opinión incluye
expresiones vejatorias innecesarias para la emisión del mensaje, o cuando se
aprecia el ánimo o la intención de injuriar o vejar en su emisor.
 En el artículo 20, se reconoce y protege también el derecho a la producción
y creación literaria, artística, científica y técnica. Este derecho está protegido a
través de la ley de propiedad intelectual, del 12 de Abril de 1996. También en
la ley de protección jurídica del diseño industrial de 7 de Julio de 2003 (aunque
no de forma directa), se protege el diseño de las cosas.

Vertientes de la propiedad intelectual:

Propiedad moral (Derecho moral). Es un derecho de carácter personal e

inembargable. Lo tiene el autor para siempre, no caduca.

Derechos de explotación: sí pueden cederse por cualquier medio admitido en

derecho. Por ejemplo, en las editoriales se ceden los derechos de explotación.
Las cláusulas del intercambio son las que establezca el contrato y se mantiene
este contrato vigente, en caso de ser vitalicio, hasta la muerte del autor. En
este momento, el heredero de la obra puede decidir romper el contrato o seguir
con él.

Los derechos de propiedad intelectual duran toda la vida del autor más 60
años después de su muerte. Pasado este plazo, las obras pasan a ser dominio
público, por lo que pueden ser utilizadas, adaptadas, etc. sin necesidad de
solicitar autorización a quien tenga los derechos de explotación. Los derechos
sobre la propiedad intelectual son gestionados por las sociedades de autores (la
más conocida es la SGAE).

El artículo 20.1 apartado c) hace referencia a la libertad de cátedra.

En artículo 20.1 apartado d) se reconoce y protege el derecho a comunicar

o recibir libremente información veraz por cualquier medio de difusión. Es decir,
el derecho de información pero en su doble vertiente, por un lado (1) una
vertiente activa, que es el derecho a comunicar y una segunda (2) denominada
vertiente pasiva, como es el derecho a recibir información por cualquier medio
de difusión. Para que la información que se emite tenga protección
constitucional debe ser información verdadera. No todo el mensaje tiene que
ajustarse a la verdad. El mensaje es veraz cuando considerado en su conjunto
su contenido es veraz. La actividad publicitaria que difunde mensajes queda
cubierta con la unión de las letras o los derechos contenidos en los párrafos a)
y d). Hacer publicidad supone para el anunciante comunicar mensajes,
transmitir información a los destinatarios sobre los productos o servicios que
oferta y, como ha reconocido el Tribunal Europeo de Estrasburgo de 1985 y
1994, la información publicitaria obedece a un específico derecho de
información de los consumidores.

En artículo 20.2 de la CE se establece la garantía de la libertad de

expresión al establecer que el ejercicio de los derechos contenidos en el artículo
20 no puede restringirse mediante ningún tipo de censura previa.

El TC define la censura previa como cualquier medida limitativa de la

elaboración o difusión de una obra del espíritu, especialmente al hacerla
depender del previo examen oficial de su contenido. Solo es posible el
secuestro de publicaciones, grabaciones y otros medios de información
mediante resolución judicial. En ningún momento, se puede imponer la
censura. La censura no debe confundirse en ningún caso con el establecimiento
de condiciones subjetivas para el ejercicio del derecho de la información.
Condiciones subjetivas encaminadas a proteger a las personas o a su
patrimonio. Ejemplo: restricciones de emitir determinados contenidos a
determinadas horas en la televisión.

En el artículo 20.4 se establecen algunos límites a la libertad de expresión.

Dice que las libertades establecidas en el artículo 20 tienen su límite en el
respeto de los derechos reconocidos en la CE, en los preceptos de las leyes que
los desarrollan y especialmente en el derecho al honor, a la intimidad, a la
propia imagen y a la protección de la juventud y la infancia. La CE no admite en
ningún punto el insulto.

El artículo 20.4 también se nombra en la LGP cuando considera ilícita la

publicidad contraria a preceptos constitucionales. Relacionamos el artículo 20.4
de la CE con el apartado a) del artículo 3 de la LGP.

El artículo 18 de la CE también se relaciona porque en este artículo es

donde se garantiza el derecho al honor, a la intimidad personal y familiar y a la
propia infancia.

El derecho reconocido en el artículo 18 de la CE se ha desarrollado a través

de la ley orgánica de 5 de mayo de 1982, que se denomina: “Ley sobre
protección civil del honor, la intimidad y la propia imagen”.

El honor, además de en la ley orgánica de 1982, también se protege en el

orden penal mediante la tipificación de los delitos de: (1) calumnias e (2)
injurias. A continuación se detallan las mismas:

Calumnia: ésta consiste en la imputación falsa a una persona de la comisión

de un hecho que la ley califique como delito, a sabiendas de que el imputado no
es quien lo cometió.

Injuria: en el artículo 208 del Código Penal (CP) se define la injuria

como la acción o expresión que lesiona la dignidad de otra persona
menoscabando su fama o atentando contra su propia estimación. Formalmente,
la injuria puede consistir: en la atribución de hechos, la expresión de palabras
soeces, en la burla injustificada en forma de juicios de valoración sobre otros,
etc. El requisito fundamental es que el hecho injurioso tiene que ser público y
conocido por terceros.

Si la calumnia o la injuria se difunden con publicidad por medio de la

imprenta, radio o similar, la pena puede ser de prisión hasta un máximo de dos
años.

El honor es un concepto difícil de establecer porque, como dice el TC, el

honor depende de las normas, valores e ideales sociales vigentes en cada
momento. Esto es, tiene una fuerte dependencia de las circunstancias concretas
en que se producen los hechos y de las ideas dominantes que la sociedad tiene
sobre la valoración de los mismos. El honor nunca es objeto de autorización, es
decir, no se le puede “ceder” a nadie.

Con relación a la intimidad, el TC dice que la intimidad constituye una forma

espiritual, íntima y reservada de cada persona o de un grupo de personas,
especialmente de una familia. El titular del derecho a la intimidad, puede abrirla
a quien desee, teniendo en cuenta que la intimidad hace referencia no solo a la
vida íntima y familiar del sujeto, sino que también se proyecta sobre sus bienes
y propiedad.

ARTÍCULO 38 DE LA CONSTITUCIÓN: LIBERTAD DE EMPRESA.

Se reconoce a los españoles el derecho a la libertad de empresa en el

mercado de una economía de mercado.

La Constitución hace que el mercado sea la piedra angular de nuestro sistema

económico y, como es un derecho fundamental, pues no puede establecer
ninguna forma de regulación autoritaria o burocrática para acceder al mercado,
pero sí se pueden establecer requisitos de carácter administrativo para ejercer
control sobre la actividad.

Todos los españoles con capacidad legal suficiente tenemos derecho a

acceder en cualquier momento al mercado, de ser en cualquier momento
empresarios.

Al estar en una economía de mercado, libre y para sustentar ese sistema, los
poderes públicos tienen la obligación de mantener un mercado competitivo y,
para ello, están obligados a regular la competencia o a establecer normas
concurrenciales (sobre competencia) que permitan es acceso de todos al
mercado y que permitan mantener la economía de mercado.

En España la competencia se regula con dos normas:

Ley de Defensa de la Competencia de 3 de julio de 2007 (LDC).

Ley de Competencia Desleal de 10 de enero de 1991.

La Ley de Defensa de la Competencia regula situaciones competenciales

que puedan darse en el mercado y que afectan directamente a los empresarios.
Indirectamente benefician a los consumidores.

En la Ley se regulan las llamadas “Conductas prohibidas” o “Prácticas

Prohibidas”. Dentro tenemos:

Conductas colusorias. Son acuerdos (pactos escritos entre empresas),

decisiones o recomendación colectiva (decisiones adoptadas por la empresa
matriz y que afectan a todas las empresas de un grupo societario o prácticas
concertadas o conscientemente paralelas, que son acuerdos no escritos entre
empresas, decisiones internas). Solo están prohibidas si producen o pueden
producir el efecto de impedir, restringir o falsear la competencia en todo o en
parte del mercado nacional. Si no falsea la competencia, no está prohibida.

Conductas abusivas o conductas de posición de dominio. En este artículo sólo

se establece que queda prohibida la explotación abusiva por una o varias
empresas de su posición de dominio en todo o en parte del marcado nacional.
Cómo se llegue a esa posición de dominio no importa nunca siempre que se
haya llegado por medios legales.
 En España igual que en la UE se admiten los monopolios privados:
empresas que son los únicos oferentes o demandantes de un producto o
servicio en todo o parte del mercado nacional. Los monopolios públicos no se
admiten en toda la UE. En España solo queda Renfe, monopolio estatal,
admitido porque se ha seguido un proceso de privatización.

Cuando alguien realiza una patente (nuevo invento) nadie puede distribuir o
comerciar la patente. Hay una ley específica que determina que nadie salvo
autorización del autor, puede hacerlo hasta pasados 20 años desde su creación
(en España). Lo que se llama el Estado de la Técnica, determina si es patente o
no un invento.

Cualquier persona puede acceder al mercado para vender un cualquier

producto o servicio a menos que esté protegido por alguna patente.

Se considera monopolio desde el momento que en una zona concreta existe

solo un oferente o demandante. No hace falta que sea en todo el mercado
(nacional).

Tanto las conductas colusorias como las abusivas pueden consistir, según

establece la Ley de Defensa de la Competencia, entre otras cosas, en la
imposición directa o indirecta de precios, en la limitación de la producción o la
distribución lo que puede suponer un perjuicio injustificado para otras empresas
o incluso para los consumidores.

La subordinación de la celebración de contratos a la aceptación de

prestaciones suplementarias que no tengan nada que ver con el contrato
principal.

Además de las conductas prohibidas, la Ley de Defensa de la Competencia

establece por un lado:

Conductas exentas:

Por ley. Se establece la posibilidad de que existan acuerdos entre empresas

sobre todo en sectores deprimidos como la pesca o el agrario.

También quedan exentas aquellas conductas que se llaman “de mínimo”,

acuerdos realizados por pequeñas empresas y que no afecta a la competencia.

Quedan exentas aquellas conductas prohibidas que supongan una mejora en

la producción, comercialización y distribución de productos. Pero siempre que
suponga un beneficio para los consumidores y usuarios.

Conductas exceptuales: conductas prohibidas que quedan exceptuadas de la

norma general por interés público debiendo ser aprobadas por la Comisión
Nacional de la Competencia (CNC).

La Ley de Defensa de la Competencia también regula las llamadas

concentraciones económicas y regula las ayudas públicas.
 Las concentraciones económicas son la unión de varias empresas mediante
fusión o por la toma de control de una empresa sobre otra. Existen dos tipos de
fusión:

Fusión directa: unión del activo, pasivo y socios de las empresas para crear
una nueva.

Fusión por absorción: una empresa absorbe a otra totalmente (activo,

pasivo y socios) pero una de ellas permanece (la que absorbe).

Para llevar a cabo en España una concentración económica es necesario

solicitar autorización a la CNC, porque hay un límite de concentración que no
se puede superar en la cuota de mercado (si se tiene poder para eliminar a la
competencia).

Las ayudas públicas. La CNC puede analizar los criterios de concesión de las
ayudas públicas otorgadas por cualquier administración pública para evitar que
se favorezca a unas empresas frente a otras.

La CNC es el máximo organismo que vela por la competencia en el mercado

español. Es un organismo administrativo por lo tanto, lo único que puede
imponer son multas cuando determina la existencia de una práctica contraria a
la competencia. Aparte de que puede establecer multas continuadas, hasta que
los efectos del acto no cesen, la empresa tiene que pagar la multa diariamente.

El proceso de compra influenciado por el contenido Web

Cuando la gente se quiere comprar algo, la primera parada del proceso de

compra suele ser casi siempre la Web. Esto ocurre en todos los sectores del
mercado. El momento de la verdad tiene que ocurrir cuando visiten su sitio
Web. ¿Conseguirá que inicien el proceso de compra, o abandonarán su sitio
Web con un clic?

Cuando los compradores llegan a su sitio Web a través de los motores de

búsqueda, un vínculo de otra página o bien al responder a una campaña de
marketing, le brindan la oportunidad de proporcionar información
personalizada justo en el momento en el que están buscando lo que usted
tiene que ofrecer. No obstante, los profesionales del marketing no se dan
cuenta del potencial que tienen los sitios Web, los cuales captan al comprador
desde el principio y mantienen su atención hasta finalizar la compra. La gente
no recurre a la Web buscando anuncios, lo que busca es contenido. Al
proporcionar a los compradores la información que necesitan, podrá iniciar una
relación duradera y rentable con ellos. A las editoriales y a los redactores les
preocupa muchísimo el número de lectores, y a usted también debería de
preocuparle este asunto.

En este tema vamos a ampliar algunas de las ideas y conceptos que ya

hemos mencionado anteriormente en otros apartados. Debe recordar que el
buen contenido Web es sobre los compradores, no sobre usted. Ahora
vamos a pasar a explicar cómo crear un sitio Web que capte la atención de los
compradores y le motive a comprar, donar, asociarse o suscribirse, lo cual, por
supuesto, es el objetivo del contenido de la Web.
 Aunque para su sitio Web sea importante el diseño y que todos los aspectos
estructurales (archivos HTML, etc.) funcionen bien, debe considerar que
también es importante tener en cuenta otros aspectos, por ejemplo cómo el
contenido motiva la acción en la Web, porque normalmente el contenido se
suele ignorar.

Con el fin de sacar el máximo partido al contenido, primero debe ayudar al

internauta a encontrar lo que necesita en su sitio Web. Cuando alguien visita
una página Web por primera vez, el sitio transmite un mensaje al
comprador: ¿Le preocupo a esta empresa? ¿Se centra en mis problemas? ¿O el
sitio Web sólo incluye información que describe lo que la empresa hace de
forma generalizada? Es imprescindible empezar por organizar la navegación
teniendo en cuenta al comprador. No se limite en reflejar en la Web la forma en
la que su empresa está organizada, es decir, por productos, geografía o
estructura de responsabilidad, porque la manera en la que su audiencia utiliza
los sitios Web rara vez coincide con las prioridades internas de su empresa.
Cuando un sitio Web está organizado en torno a las necesidades de la empresa,
los internautas se pierden y les cuestan encontrar lo que necesitan.

Debe aprender todo lo posible acerca del proceso de compra, centrarse en

asuntos relacionados con cómo la gente encuentra su sitio Web, o cuánto dura
normalmente un ciclo de compra. Tenga en cuenta lo que sucede fuera de la
línea de forma paralela con las relaciones en línea, para que ambos procesos se
complementen. Por ejemplo, si usted tiene un sitio Web de comercio electrónico
y un catálogo impreso en papel, coordine el contenido y el mensaje para que
ambos medios se complementen, por ejemplo, en el catálogo en papel incluya
direcciones URL de la guía de compra en línea, y utilice las mismas
descripciones de los productos para no confundir a los consumidores. En el
sector B2B, las ferias deben utilizarse para lanzar iniciativas por Internet, por
ejemplo, puede aprovechar para recopilar las direcciones de correo electrónico,
y después enviar material de seguimiento con vínculos concretos de páginas de
su sitio Web. Si uno entiende el proceso de compra en todos sus aspectos,
tanto en línea como fuera de línea, creará contenido en la Web capaz de
influenciar una decisión de compra.

Determinar a los compradores

La relación en línea comienza en el momento que un cliente potencial entra

en su página Web. El internauta debe verse reflejado a sí mismo, motivo por el
cual debe organizar su sitio Web con contenido destinado a cada prototipo de
comprador diferente. ¿Cómo se identifica cada uno de los clientes potenciales?
¿De qué depende, de la función de su trabajo, geografía o del sector al que
pertenecen? Es importante crear un conjunto de vínculos adecuados basados en
los distintos compradores, con objeto de que desde la página de inicio se
puedan mover con rapidez a la página específica de su interés.
 Seleccionar compradores

Por ejemplo, la Biblioteca pública de Nueva York (NYPL), una institución

con más de 50 millones de artículos en su colección, 89 sedes y 3.200
empleados, necesita un sitio Web útil para la gran variedad de visitantes. El
sitio Web de NYPL está dirigido a muchos prototipos de comprador, personas
que utilizan los servicios de la biblioteca tanto en línea como fuera de línea, y
que descargan material directamente desde su sitio Web. A continuación
mencionamos algunos de los prototipos de comprador que la NYPL tiene en
cuenta:

 Académicos de todo el mundo que necesitan acceder a la colección de

información digital de la NYPL.

 Gente que vive en el Bronx y que su lengua nativa es el español. La

biblioteca imparte cursillos los cuales se dan en español en la sucursal del
Bronx, sobre, por ejemplo, cómo utilizar el ordenador.

 Turistas que quieren visitar el edificio de la biblioteca principal de la

Quinta Avenida.

 Estudios de cine, productores de televisión y fotógrafos que utilizan la

biblioteca como escenario (Desayuno con diamantes, Los Cazafantasmas,
Spiderman, son sólo algunas de las películas que han utilizado este escenario).

 Individuos, fundaciones y empresas que aportan donaciones a la

biblioteca.
 El sitio Web de NYPL incluye contenido detallado para llegar a estos
prototipos de comprador, así como a muchos otros que no se han
mencionado. La página de inicio del sitio Web de NYPL se divide en
varias secciones, incluyendo apartados para realizar búsquedas de libros
determinados en el catálogo de la biblioteca, información sobre otras
sucursales para los que viven en la ciudad de Nueva York, un apartado
digital con información que todos los internautas pueden descargar, otro
de noticias, uno llamado “Información en vivo”, (con eventos) y otro de
apoyo a la biblioteca dirigido tanto a los miembros como a aquellos que
deseen realizar donaciones o trabajar como voluntarios. Cada una de
estas páginas contiene información adicional para facilitar la navegación
en este sitio Web de tal magnitud.
 Una de las formas en que muchas organizaciones enfocan la navegación
es vinculando páginas en función a los problemas que su producto o
servicio resuelva. Empiece por identificar la situación en la que se
encuentra cada uno de los prototipos del comprador. Si usted trabaja en
una cadena de distribución, puede incluir un menú desplegable en la
página de inicio con vínculos como “Necesito que mis productos lleguen
a los clientes más rápido”, o “Quiero exportar mis productos”. 
 Con cada uno de estos vínculos el comprador accederá a la página
correspondiente, en donde se explica cómo resolver su problema. Una
vez que el futuro cliente ha llegado a la página concreta, usted tiene la
oportunidad de comunicarle su conocimiento acerca del problema, con el
fin de expresar empatía, y que el cliente de un paso más en el ciclo de la
compra.
 Mecanismos principales de su sitio Web dirigidos a los
compradores
 Cuando construya un sitio Web que se centre en los compradores, debe
tener en cuenta los siguientes aspectos:
 Los Estilos Y Medios De Comunicación Favoritos Del Comprador
 “No se trata de elegir un medio u otro. Vale la pena que el mensaje se
exprese en distintos formatos”, nos comenta Ted Demopoulos, autor de
What No One Ever Tells You About Blogging and Podcasting (Lo que
nadie le cuenta sobre los blogs y el podcasting). “Me encanta leer, y a
menudo escucho la radio mientras conduzco, monto en bicicleta o corto
el césped. Pero no me gusta el vídeo. No es como la lectura, avanza a su
propio ritmo. No se puede ver más rápido o echar un vistazo, como hago
con el texto, el vídeo requiere atención total, no como el audio”, nos dice
Demopoulos. Por supuesto, otras personas no opinan lo mismo que Ted.
Hay personas que no les gusta leer y que les encanta ver vídeos. Todos
preferimos distintos medios y estilos de aprendizaje. Por lo tanto, su sitio
Web debe incluir distintos formatos. 
 Esto no implica que tenga que incluir todos y cada uno de los formatos,
no obstante considere aumentar el texto acompañado de fotografías, o
tal vez algún medio de audio o vídeo. “A la gente le gustan los formatos
distintos, pero además, los psicólogos han demostrado que la gente
aprende mejor a través de medios distintos”, añade Demopoulos. “Los
profesionales del marketing deben incluir mensajes en todos los
formatos posibles. Aunque el mensaje sea el mismo en todos ellos, se
adecuarán a los distintos gustos de los consumidores. Por ejemplo,
algunos se inclinarán por el e-libro, pero el mismo contenido lo puede
incluir en un Webinar”.
 Exprese una personalidad
 Es muy importante crear un sitio Web distinto, coherente y
memorable, y un componente fundamental para lograr dicho objetivo
es el tono o estilo en el que se expresa el contenido. Cuando los
internautas visitan el contenido de su sitio Web, deben hacerse una idea
clara del carácter de su empresa. ¿Se trata de una personalidad
divertida y moderna? ¿O es más bien conservadora y firme? Por
ejemplo, en la página de inicio de Google, cuando la gente realiza una
búsqueda puede hacer clic en el botón “Voy a tener suerte”, lo cual es
una forma divertida de llegar directamente a los primeros resultados.
Esa pequeña frase “Voy a tener suerte” dice mucho acerca de Google.
Y muchas otras. Por ejemplo, en la lista de idiomas compatibles con
Google, desde africaans hasta zulú, también se incluye el idioma de
Elmer Fudd, con todo escrito con el acento de este personaje. Esto es
gracioso, pero no funcionaría en una empresa conservadora, resultaría
raro y desubicado.


 Apariencia dinámica
 La página de inicio de Google funciona porque la personalidad que
expresa corresponde con la de la empresa. Independientemente de cuál
sea su personalidad, la mejor forma de conseguir coherencia es
asegurándose de que todo el material del sitio Web se ajusta a un estilo
definido desde el principio. No perder de vista la personalidad y el
carácter del sitio Web tiene sus compensaciones. A medida que los
internautas empiecen a confiar en el contenido de su sitio Web, irán
desarrollando una relación emocional y personal con su empresa. Un
sitio Web puede expresar, si es oportuno, un estilo familiar y de
confianza, como el de un amigo cuando contesta a un correo electrónico.

 Un ejemplo de un sitio Web con una personalidad inconfundible dirigida a

prototipos de comprador concretos, es el de Malware
City de BitDefender. Vitor Souza es el responsable en comunicaciones
de BitDefender, creador del software de seguridad certificado
 internacionalmente y utilizado por diez millones de personas de más de
100 países. Al ser multinacional, Souza trabaja en las oficinas de
Mountain View, en California y Bucarest en Rumanía. BitDefender es un
ejemplo particularmente útil porque su sector es muy competitivo, con lo
que es difícil hacer destacar el producto. El equipo de marketing decidió
lanzar el sitio Web de Malware City como punto de referencia en el
sector en lo que respecta la seguridad de la informática. Éste era un sitio
nuevo y no se trataba de volver a diseñar el sitio existente de la
empresa, sino de proporcionar un suplemento informal al producto
principal de BitDefender. “El sitio Web de Malware City está dirigido a
aquellos interesados en las últimas amenazas de Internet”, explica
Souza. “Tiene un blog de nuestros analistas, material educativo para los
trabajadores del sector y muchas otras herramientas interactivas”.

Souza y su equipo tienen claro que las mejores iniciativas en línea son
aquellas que proporcionan información específica destinada a un prototipo
de comprador concreto. El sitio Web de Malware City se desarrolló para atraer a
tres prototipos de comprador distintos:

1. Los medios de comunicación que cubren la seguridad en la tecnología de

la información (ya sean los medios convencionales como los medios de
Internet).
2. Usuarios de BitDefender.
3. Un grupo que Souza describe como “Frikis de la seguridad de Internet”,
el cual es el prototipo de comprador más importante de Malware City.

Malware City atrae directamente a este último prototipo de comprador con

frases como: “Nuestros ciudadanos son guerreros inteligentes que luchan
contra el malware, deseosos de compartir su conocimiento para formar un
ejército en la batalla contra las amenazas de la seguridad. ¿Se quiere alistar?
Demuestre sus habilidades y le aceptaremos en nuestra gran familia”. El diseño
es muy moderno con un aspecto urbano, algo punki, que se diferencia del
montón de sitios aburridos del sector tecnológico.

“Malware City es propiedad de BitDefender”, declara Souza. “No presumimos

de ello, pero tampoco lo ocultamos. Queremos que sea un sitio Web dedicado a
todos aquellos que están interesados en la seguridad en línea, y no sólo para
los usuarios de BitDefender. En lugar de enviar mensajes irrelevantes e
interrumpir la actividad de los demás, ofrecemos información relevante y útil a
los visitantes que estén interesados”, afirma. “No pedimos nada a cambio. 

Podemos comprobar a través de comentarios u otros mensajes de correo que

recibimos de Malware City está considerado un referente de información. Otra
prueba de ello es que cada vez se reciben más visitas, se menciona en blogs o
bien se incorpora a marcadores de página”.

Las fotos e imágenes como medio de Expresión

 El contenido no debe limitarse a las palabras, los profesionales inteligentes
saben utilizar contenido sin texto, incluyendo fotografías, audio, clips de vídeo,
dibujos animados, gráficos, etc. para informar y entretener a sus visitantes. Las
fotografías, concretamente, juegan un papel importante en muchos sitios Web.
Las fotografías son un medio de expresión muy poderoso cuando los visitantes
comprueban que las imágenes son un componente integrado del sitio Web. No
obstante, las fotografías genéricas, las típicas con modelos de varias
nacionalidades, felices y guapos, en una sala de reuniones fingiendo ser los
empleados de una empresa, pueden tener un efecto negativo. La gente se dará
cuenta enseguida de que en la fotografía no aparecen los empleados de la
empresa. Ni usted, ni sus empleados son genéricos. 

También debo puntualizar que aunque las fotografías, gráficos y otros

materiales sin texto son una gran aportación en los sitios Web, hay que tener
cuidado con las imágenes demasiado grandes y con contenido multimedia que
desvíen la atención. Los visitantes quieren acceder al contenido con rapidez, les
gustan los sitios en donde el contenido se cargué rápido, no quieren distraerse.

Incluir herramientas de contenido interactivo

Cualquier elemento que involucre al internauta con el contenido del sitio Web
supone una buena forma de comprometer al visitante, despertar su interés y
motivarle a que inicie el proceso de compra. Entre estas herramientas
interactivas podemos mencionar programas que publican de forma instantánea
el valor de las acciones en los sitios financieros, o herramientas para enviar y
congregar a activistas en los sitios Web de los partidos políticos. El contenido
interactivo involucra a los visitantes, con lo que es más probable que inicien un
proceso de venta.

Habilitar Envío De Comentarios

Otra nota distintiva de un buen sitio Web es proporcionar a los usuarios la

posibilidad de interactuar con su empresa. Es imprescindible que la información
de contacto sea fácil de encontrar. Los mecanismos para votar, entrar en foros,
acceder a opiniones y que los visitantes puedan enviar comentarios nos
permiten obtener información útil por parte de los visitantes.

Facilite un medio para que los clientes se comuniquen entre sí

Un foro o una wiki en donde los clientes puedan compartir sus experiencias y
ayudarse entre sí funciona muy bien para muchas organizaciones como forma
de demostrar a los clientes potenciales que existe una comunidad activa que
utiliza sus productos y servicios. Dicho de otro modo, un grupo de clientes que
interactúen entre sí en su sitio Web es una buena estrategia de marketing.

Cree contenido que pueda convertirse en viral

El contenido Web es el escenario perfecto para el marketing viral, cuando la

gente de forma masiva pasa la información de su sitio Web a sus amigos y
compañeros, o vincula su contenido en sus blogs, como hemos visto
anteriormente en el tema 8.
 Cuando el contenido es interesante y útil, los visitantes tienden a contárselo a
sus amigos, normalmente enviando el vínculo. Crear este fenómeno en torno a
un sitio Web no es fácil. Crear contenido con estas intenciones nunca tiene
garantías, porque estas cosas ocurren de forma espontánea. No obstante,
existen algunas medidas que uno puede implementar para fomentar este
proceso. Cuando cree el contenido del sitio Web, piense detenidamente qué
contenido cree que los usuarios pasarán a otros, y después haga que dicho
contenido sea fácil de encontrar y vincular.

Se recomienda que las direcciones URL sean permanentes para que nadie se
encuentre con vínculos inexistentes cuando visiten el sitio meses o años más
tarde. El éxito del marketing viral consiste en expresar algo interesante y
valioso, y que se pueda encontrar y compartir con facilidad.

Diríjase a un nicho específico a través de las fuentes RSS

Resulta tan fácil para los que trabajan en los medios de comunicación
obtener información a través de las fuentes RSS, que se pierde decir a ciencia
cierta que este medio es un componente muy importante en una estrategia de
marketing.

Un navegador capaz de detectar las fuentes RSS como Firefox, comprueba si

las fuentes RSS han cambiado y las muestras en una página Web en el caso de
que así sea. Que la información venga a mi es mucho más fácil que tener que ir
a buscarla. El software de agregación de noticias y fuentes RSS es fácil de
utilizar, normalmente gratuito y permite obtener información desde cualquier
otro dispositivo. Lo que más atrae de las fuentes RSS como herramienta de
gestión de la información, es que no pasan por el canal de correo electrónico.
Te permiten tener actualizados tus sitios Web favoritos, así como blogs y otros
medios de forma personalizada para acceder exactamente a lo que me interesa.

Lo sorprendente es que sólo un pequeño porcentaje de empresas

proporcionan fuentes RSS para divulgar noticias y contenido. Son menos aun
las que entienden porque las fuentes RSS son el mejor medio para dirigirse a
un nicho de mercado en concreto con necesidades específicas. Observe como
los sitios Web de noticias más importantes como la BBC, el New York Times,
Washington Post, y muchos otros, proporcionan fuentes RSS. Cualquier
contenido que pueda dividirse en apartados, como notas de prensa, entradas
de blogs, actualizaciones de producto o archivos SEC, pueden enviarse a través
de fuentes RSS.

Netflix, ofrece fuentes RSS a las que se pueden registrar los seguidores con
el fin de recibir actualizaciones de acuerdo a sus intereses. Entre las fuentes
disponibles se incluyen 100 mejores de Netflix, Notas de prensa, 25 mejores
documentales, 25 mejores comedias, 25 mejores clásicos. Dichas fuentes se
dirigen a clientes concretos que seleccionan únicamente el contenido que les
interese. Por lo tanto, si a alguien le gustan las películas alternativas, se
suscriben a la fuente RSS correspondiente, y cada vez que cambie el contenido
de este apartado en el sitio Web de Netflix, reciben una alerta a través del
lector RSS.

Lo que diferencia este medio del modelo de marketing universal, es que se

dirige a pequeñas audiencias con intereses específicos. Compare este
sistema con la forma típica en la que las empresas promocionan sus productos
en la Web.

Suele ocurrir que cuando realiza una compra, la empresa solicite su dirección
de correo electrónico para enviarle ofertas especiales. Tras obtener dos o tres
mensajes de correo electrónico, empieza a ser obvio que dichos mensajes están
dirigidos a una lista de clientes generalizada, y qué realmente, no tiene ningún
valor para usted. No es de extrañar que las listas de correo se vean reducidas
por las bajas voluntarias. Observe la diferencia con respecto a la estrategia de
Netflix al ofrecer información que ha sido seleccionada por el cliente y por tanto
es bienvenida, nada más que ver con recibir correos genéricos llenos de
publicidad dirigidos a masas.

Beneficios y costes.

Todos estos cambios realizados a nivel tecnológico, van a comportar grandes

beneficios, tanto para los usuarios como para las empresas, quienes han
encontrado grandes oportunidades en los desarrollos de las comunicaciones.
Estas tecnologías están al alcance de las grandes y pequeñas empresas, así
como también a la mano de los clientes potenciales de todo el mundo.

El comercio electrónico está en constante crecimiento, justificada esta

tendencia por la comodidad y rapidez que representa a la hora de adquirir lo
que se necesita, sin tan siquiera moverse de casa.

Según indica Ángel Arias, Alicia Durango y Marcos Socorro Navarro,

el comercio electrónico va a consistir en la compra, venta, marketing y
suministro de información complementaria para productos o servicios a través
de redes informáticas. Es un tipo de transacción comercial hecho especialmente
a través de un dispositivo electrónico (ordenador, tablets, teléfonos
inteligentes,…).
 Conviene hacer un análisis de los principales beneficios que un entorno de
comercio electrónico puede reportar a las empresas, es decir, cuáles pueden
ser los motivos para que una empresa emprenda un proyecto de comercio
electrónico.

Estas ventajas, que analizamos a continuación, se deducen directamente de

las ventajas que aporta el uso de Internet. Sin embargo, hay que destacar que
muchas veces las compañías se ven obligadas a emprender proyectos de
comercio electrónico para mantener su posicionamiento competitivo, ya que
otros agentes también se posicionan en Internet

Mayor posibilidad de competir de empresas pequeñas contra grandes

compañías.

Las grandes empresas disponen de importantes ventajas de partida por sus

mayores recursos económicos e infraestructurales para detectar clientes
potenciales y ofrecer servicio, posibilidades que se encuentran en muchos casos
fuera del alcance de empresas más pequeñas. Un ejemplo de ello puede ser
una red comercial que permita acceder directamente a los clientes locales o
campañas de marketing por medios de comunicación. Con Internet esta
distancia se aminora ya que es un medio gratuito de difusión masiva. Con él, la
creatividad de la empresa en la confección de su oferta y la manera de
transmitirla toma un peso relativo mayor, ya que el coste marginal por cliente a
través de Internet se reduce a un valor cercano al cero.

Reducción de costes operativos y mayor eficiencia.

Sobre todo en relaciones entre empresas (B2B), los costes operativos bajan

al automatizar los procesos y evitar los errores humanos en las transacciones.
De cara al consumidor, la reducción de costes se debe principalmente al menor
coste del medio, es decir, actualizar, por ejemplo, un catálogo electrónico es un
coste prácticamente despreciable comparado con la actualización de un
catálogo impreso.

Ofrecer información actualizada en todo momento a los clientes y

mejora de servicios relacionados.

Otra característica ventajosa del medio Internet, comparado con otros

medios como el papel, es su rapidez para transmitir la información al cliente, ya
que al ser un medio electrónico se dispone siempre de la última información
disponible en los sistemas. A esto se añade que el hecho de acceder a la
información de forma electrónica, permite trasladar al cliente las ventajas de
trabajar con ésta frente a otros medios, por ejemplo, la posibilidad de buscar la
información de interés de forma mucho más rápida y cómoda que en medios
impresos, o recibir la información de manera personalizada según temas de
interés.

Un ejemplo clásico lo encontramos en la librería virtual

www.amazon.com. Amazon incluye, aparte de diferentes forma de búsqueda,
valoraciones enviadas por sus clientes las cuales son un apoyo valioso a la
selección de uno o varios libros sobre una manera determinada, un valor
añadido que por si sólo ya justificaría la visita de su Web. Más tarde Amazon,
incorporó sugerencias sobre libros relacionados con el buscado. De esta manera
hacerse con la mejor bibliografía sobre una determinada temática resulta
prácticamente un juego de niños, muy fiable y rápido, por lo que cuenta con un
servicio con el que ninguna librería convencional puede competir.

Actividad las 24 horas.

Los servicios ofrecidos funcionan las 24 horas del día ampliando así las
posibilidades de negocio y mejorando el servicio al cliente.

Mayor cercanía entre proveedores y clientes.

Una vez se haya conseguido captar a los clientes a través de Internet, hay
que tener en cuenta que Internet supone un canal de comunicación directo
hacia ellos. La venta por Internet es solamente una entre muchas posibilidades
de explotar el contacto directo con el cliente. Otras posibilidades incluyen
servicios de valor añadido como notificaciones con información actualizada
sobre los productos que les interesan, promociones online, formación,
sugerencias, etc.

Ventajas en empresas Mejoras en la distribución.

La Web ofrece a ciertos tipos de proveedores (industria del libro, servicios de

información, productos digitales) la posibilidad de participar en un mercado
interactivo, en el que los costos de distribución o ventas tienden a cero.

Por poner un ejemplo, los productos digitales (software) pueden

entregarse de inmediato. También compradores y vendedores contactan entre
sí de manera directa, eliminando así restricciones que se presentan en tales
interacciones.

De alguna forma esta situación puede llegar a reducir los canales de

comercialización, permitiendo que la distribución sea eficiente al reducir
sobrecosto derivado de la uniformidad, automatización e integración a gran
escala de sus procesos de administración. De igual forma se puede disminuir el
tiempo que se tardan en realizar las transacciones comerciales, incrementando
la eficiencia de las empresas.

Actualmente, la mayoría de las empresas utiliza la Web para informar a los

clientes sobre la compañía, a parte de sus productos o servicios, tanto
mediante comunicaciones internas como con otras empresas y clientes.

Sin embargo, la naturaleza interactiva de la Web ofrece otro tipo de

beneficios conducentes a desarrollar las relaciones con los clientes. Este
potencial para la interacción facilita las relaciones de mercadeo así como el
soporte al cliente, hasta un punto que nunca hubiera sido posible con los
medios tradicionales.

Un sitio Web se encuentra disponible las 24 horas del día los 365 días del

año bajo demanda de los clientes. Las personas que realizan el mercadeo
pueden usar la Web para retener a los clientes mediante un diálogo virtual.

Esta capacidad ofrece oportunidades sin precedentes para ajustar con

precisión las comunicaciones a los clientes individuales, facilitando que éstos
soliciten tanta información como deseen. Además, esto permite que los
responsables del área de mercadeo obtengan información relevante de los
clientes con el propósito de servirles de manera eficaz en las futuras relaciones
comerciales.

Los sitios Web más sencillos involucran a los clientes mediante botones para
enviar mensajes de correo electrónico a la empresa. En otros centros más
sofisticados, los clientes rellenan formularios, con el objeto de que desarrollen
una relación continua con la compañía, cuyo fin es informar tanto sobre los
productos y servicios como obtener información sobre las necesidades que los
clientes tienen sobre los mismos. De esta manera, se obtiene publicidad,
promoción y servicio al cliente a la medida.

La Web también ofrece la oportunidad de competir sobre la base de la

especialidad, en lugar de hacerlo mediante el precio, ya que desde el punto
de vista del mercadeo, rara vez es deseable competir tan sólo en función del
precio

El mercadeo intenta satisfacer las necesidades de los clientes en base a los

beneficios que buscan, lo que quiere decir que el precio depende de la
valorización del cliente, y no de los costos; tales oportunidades surgen cuando
lo ofrecido se diferencia por elementos de mercadeo distintos al precio, lo cual
produce beneficios cargados de valor, como por ejemplo, la comodidad
producida por el reparto directo mediante la distribución electrónica de software

Beneficios operacionales.

El uso empresarial de la Web reduce errores, tiempo y sobrecostos en el

tratamiento de la información. Los proveedores disminuyen sus costos al
acceder de manera interactiva a las bases de datos de oportunidades de
ofertas, enviar éstas por el mismo medio, y por último, revisar de igual forma
las concesiones.

Además, se facilita la creación de mercados y segmentos nuevos, el

incremento en la generación de ventajas en las ventas, la mayor facilidad para
entrar en mercados nuevos, especialmente en los geográficamente remotos, y
alcanzarlos con mayor rapidez.

Todo esto se debe a la capacidad de contactar de manera sencilla y a un

costo menor a los clientes potenciales, eliminando demoras entre las diferentes
etapas de los subprocesos empresariales.

En este punto resumimos las ventajas del Comercio Electrónico en Internet:

 Abierta la empresa 24 horas los 365 días del año.

 Nuevo mercado sin límites geográficos.

 Aumento de la capacidad competitiva.

 Reducción de COSTES COMERCIALES.

 Reducción de COSTES DE SUCURSALES.

 Reducción de COSTES DE COMUNICACIONES.

 Aumenta el prestigio empresarial ante clientes y proveedores.

 Actualización inmediata de productos, servicios y tarifas de precios.

 Escaparate permanente 24 horas los 365 días del año.

 Ventajas en los consumidores

 Permite el acceso a más información.
 La naturaleza interactiva de la Web y su entorno hipertexto permiten
búsquedas profundas no lineales que son iniciadas y controladas por los
clientes, por lo tanto las actividades de compra mediante la Web están
 más impulsadas por los clientes que aquellas proporcionadas por los
medios tradicionales.
 Facilita la investigación y comparación de mercados.
 La capacidad de la Web para acumular, analizar y controlar grandes
cantidades de datos especializados permite la compra por comparación y
acelera el proceso de encontrar los artículos.
 Abarata los costos y precios.
 Conforme aumenta la capacidad de los proveedores para competir en un
mercado electrónico abierto se produce una baja en los costos y precios,
de hecho tal incremento en la competencia mejora la calidad y variedad
de los productos y servicios.

El comercio electrónico y sus inconvenientes

 A estas alturas es imposible pensar que el desarrollo del comercio

electrónico es una moda pasajera, por tanto la empresa debe preocuparse de
estar presente en esta moderna modalidad de negocio, sin pensar en los
resultados a corto plazo.

 Aumento de competidores

 La información, productos, tarifas, etc. son también vistos por los

competidores.

 Los compradores todavía no tienen hábitos desarrollados en este nuevo

canal.

 En determinadas zonas geográficas no hay suficientes usuarios

conectados a Internet.

 Problemas de seguridad.

 Desconfianza en la aportación de datos personales y financieros.

 Soluciones técnicas no adecuadas; mal diseño de la página Web,

catálogo electrónico, carrito, tarifas y datos no actualizados, transporte....

 Perderse en la Red.

Hay que ser optimista, ante este emergente e imparable medio de

compra/venta. A pesar de los inconvenientes todos superables, las cifras de
negocio actualmente crecen geográficamente, al igual que los nuevos
internautas.

Está igualmente emergiendo un nuevo perfil de consumidor más casero,

sedentario y progresivamente más virtual. Es decir, utiliza cada vez más el
ordenador para todo.

La Web: Diseño efectivo, desarrollo y uso.

DISEÑO WEB:
- WEB: DISEÑO EFECTIVO, DESARROLLO Y USO
- ORGANIZACIÓN DEL CONTENIDO: CMS
- ESTRUCTURA
- PRESENTACIONES MULTIMEDIA
- OBJETIVOS MEDIBLES
- ROLES. WORKFLOWS
- LA WEB CORPORATIVA
- ESTÁNDARES
- USABILIDAD Y TEST DE USABILIDAD

La Web: Diseño efectivo, desarrollo y uso.

En la actualidad, el principal administrador de información que existe es

Internet. Casi para cualquier trabajo es imprescindible tener un buen dominio
de este medio, ya que en él podemos encontrar toda la información que
podamos llegar a necesitar, otorgándonos los medios para avanzar en cualquier
plano. La explosión de sitios web ha generado una guerra de atención, con
miles de sitios de temática similar que pugnan por captar el mayor número de
lectores potenciales. El diseño se encarga de ordenar la información de una web
y de presentarla de forma atractiva, de manera que se pueda acceder a ella con
facilidad y gusto.

Cuando nos referimos a diseñar una página web, estamos teniendo en cuenta
todos los pasos necesarios para su creación: desde los primeros esbozos de
contenido, al diseño visual y funcional y finalmente su subida a la web.

En el diseño web  se deben tener en cuenta cuestiones de diseño tradicional,

como hemos estado viendo hasta ahora. No obstante, también hay que añadirle
cuestiones inherentes al medio, como la navegabilidad, usabilidad,
interactividad… Tenemos que mantener un buen equilibrio entre todas sus
partes, de manera que sea un canal de comunicación eficiente.

Las primeras páginas que se publicaron en la web se componían

exclusivamente de texto, siendo el traspaso de información el principal motivo
por el que se instauró la red. La implantación de estándares, los nuevos códigos
para la creación de páginas, la creciente permeabilidad de los navegadores y,
sobre todo, los avances tecnológicos, han permitido la creación de piezas
creativas e interactivas, impensables no hace muchos años. El crecimiento de
sitios web también ha sido exponencial, desde su implantación a principios de
los noventa. Como dato representativo de este crecimiento, hemos pasado de
unos 18.000 sitios web en el año 1995, a los más de 200 millones que nos
podemos encontrar en la actualidad.

Un diseñador web debe ser consciente en todo momento de esta cantidad de

competencia, e intentar crear una pieza atractiva y comunicadora, que sea
definitoria de la empresa o particular anunciantes, y que su usabilidad esté por
encima de todo.

Organización del contenido: CMS.

Un CMS o Sistema de Gestión de Contenidos es un software informático

que permite crear una estructura de soporte para la creación y administración
de contenidos, principalmente en páginas web, por parte de los usuarios.
Consiste en una interfaz que controla una o varias bases de datos que alojan
el contenido del sitio y en las cuales podemos realizar modificaciones. El
sistema permite manejar de manera independiente el contenido y el diseño.

Así, es posible controlar y gestionar el contenido y darle un diseño en

cualquier momento distinto sin necesidad de dar formato al contenido de
nuevo, además de permitir la fácil y controlada publicación en el sitio a varios
editores.

Estructura de un CMS

Un CMS está compuesto por diferentes funciones las cuales pueden ser
separas en las siguientes categorías

 Font-end. Es el sitio web al que tienen acceso los usuarios ya sean

usuarios registrados o visitantes.

 Back-end. Es la parte que se encarga de administrar, mantener y

configurar el sitio web, tiene una URL distinta a este.

 Configuración.Esta parte es la que contiene la configuración del sitio,

en esta parte se incluyen los motores de búsqueda, darse de alta como usuario
o el título de la página.

 Derechos de acceso. En los CMS hay una serie de usuarios que son los
que se encargan de administrar y desarrollar el sitio web, dentro de ser un
usuario o no, hay una serie de “rangos” dentro de los usuarios registrados los
cuales dan acceso a diferentes contenidos.

 Contenido. Es el contenido que se muestra al usuario, pueden ser

imágenes, vídeos, textos, música, archivos...
 Plantillas. Son css que establecen los colores, fuente de letra, tamaño,
imágenes de fondo, la distribución de los elementos por la página. Es decir,
establecen la apariencia del sitio.

 Extensiones. Son los complementos que se añaden al sistema para

ampliar sus funciones y cubrir las necesidades que aparezcan como podría ser
un gestor de correo.

A continuación, analizaremos las ventajas y los inconvenientes de utilizar

Sistemas de Gestión de Contenido.

Las ventajas que ofrece el uso de los CMS son:

 Detrás de cada CMS, hay una comunidad de desarrolladores y usuarios

por lo que podemos resolver cualquier tipo de problema que nos surja de
manera mucho más rápida y efectiva.

 Al utilizarlo, el coste de desarrollo será menor y requerirá menor tiempo

y trabajo.

 Al tener nosotros control sobre nuestra página web, resulta mucho más
sencillo, cómodo y rápido realizar actualizaciones y modificaciones de nuestro
contenido.

 Los CMS suelen estar optimizados, estructurándose en módulos y

extensiones lo que nos ayuda a tener una mejora del SEO.

 Periódicamente, se van realizando actualizaciones en las que se irán

creando nuevas funcionalidades que harán más atractiva nuestra página.

En cuanto a los inconvenientes que presenta el uso de los CMS, encontramos:

 Al usar CMS, tenemos que tener mucho cuidado ya que son más
propensos a sufrir ataques y afectar a la seguridad de nuestra web.

 Como los CMS tienen una estructura propia, tendremos una menor
flexibilidad y tendremos que regirnos a la estructura establecida.

 El código fuente que se genera con los CMS es un código más pesado
que estará menos optimizado que uno desarrollado a medida.

Entre las plataformas más comunes de CMS y que vamos a destacar en los
apartados siguientes, se encuentran:

 WordPress.

 Drupal.

 Joomla!
 A. WordPress

Se trata de un sistema de gestión de contenidos o CMS (Content

Management System), dirigido a la creación de cualquier tipo de sitio, aunque
en los últimos tiempos ha alcanzado gran relevancia utilizando los blogs.

WordPress es una avanzada plataforma semántica de publicación personal

orientada a la estética, los estándares web y la usabilidad. WordPress es libre y
gratuito.

WordPress

WordPress es un sitio ideal para un sitio web que se actualice

periódicamente, puesto que si se escribe contenido con cierta frecuencia,
cuando alguien accede al sitio web, puede encontrar todos esos contenidos
ordenados cronológicamente. Sistema ideal también para los principiantes y
para quienes no tienen demasiados conocimientos técnicos.

Como causantes del crecimiento de WordPress se pueden destacar la licencia,

facilidad de uso y sus características como el gestor de contenidos. Además de
esto, otro punto a considerar es la gran comunidad de desarrolladores y
diseñadores, encargados de programarlo en su núcleo o creando complementos
(plugins) y plantillas (temas) para la comunidad.

Algunas de las cosas que se pueden crear con WordPress son las siguientes:

 Blog.

 Web corporativa.

 Tienda online.

 Foro de soporte.

 Web de gestión de reservas.

 Directorio de empresas.

 Canal de vídeos.

 Etcétera.

B. Drupal

Es un marco de gestión de contenidos (CMS) libre, con licencia GNU/GPL,

modular multipropósito y muy configurable, el cual permite publicar artículos,
imágenes, archivos y otras cosas u otros archivos y servicios añadidos como
foros, encuestas, votaciones, blogs y administración de usuarios y permisos. Se
utiliza para crear sitios web dinámicos y con gran variedad de funcionalidades.
Está escrito en PHP.

Cuenta con una amplia y activa comunidad de usuarios y desarrolladores que

colaboran en conjunto para su mejora y ampliación. Esta ampliación se
posibilita porque se trata de un sistema modular con una arquitectura muy
consistente, que permite que los módulos creados por cualquier desarrollador
puedan interactuar con el núcleo del sistema y con los módulos creados por
otros miembros de la comunidad.

Drupal

Con este gestor de contenidos se posibilita implementar una gran variedad de

sitios web, como son:

 Blog personal o profesional.

 Portal corporativo.

 Tienda virtual.

 Red social o comunidad virtual.

 Etcétera.

Está dirigido especialmente a las personas que quieran iniciarse en la

creación de portales web, tengan o no formación técnica. Resulta de gran
utilidad también para empresas o profesionales que desean crear su portal web
profesional o personal sin dependencias externas.

C. Joomla!

Se trata de un sistema de gestión de contenidos premiado (CMS) que va a

permitir construir sitios web dinámicos e interactivos, así como aplicaciones en
línea de gran alcance. Con esta plataforma se van a poder crear, modificar o
eliminar contenido de un sitio web, de manera sencilla, gracias al panel de
administración.

Un sistema de gestión de contenidos es un software que realiza un

seguimiento de cada pieza de contenido en un sitio web, al igual que su
biblioteca pública local mantiene un registro de los libros y los almacena. El
contenido puede ser texto simple, fotos, música, vídeos, documentos,… Una
ventaja importante de crear un CMS es que prácticamente no requiere habilidad
técnica o conocimiento de manejar. Desde la CMS se administra todo el
contenido.
 Joomla!

Joomla es un software caracterizado por presentar código abierto,

programado o desarrollado en PHP, liberado bajo licencia. Tiene gran facilidad
de uso y extensibilidad, por lo que es un software muy popular en todo el
mundo.

Algunas de las herramientas que se pueden crear con Joomla!, y debido a las
tendencias actuales, en las que existe una gran apuesta por e-commerce en la
empresa, están:

 Generación de código HTML bien formado.

 Gestión de blogs.

 Vistas de impresión de artículos.

 Flash con noticias.

 Foros.

 Polls (encuestas).

 Calendarios.

 Búsquedas integrada al sitio y soporte multi-idioma.

Estructura.

La estructura del Sitio web

La estructura del sitio web resulta muy importante, puesto que si la

estructura es adecuada, va a permitir al lector visualizar todos los contenidos
de una manera fácil y clara, mientras que un conjunto de páginas web que
tenga una mala estructura puede producir en el usuario sensación de pérdida,
situación en la que normalmente no encontrará lo que está buscando y como
resultado, abandonará la página.

Es imprescindible planificar la estructura antes de empezar a crear las

páginas web que componen el sitio web en cuestión. Para ello se puede realizar
un esquema de forma sencilla, a no ser que se vayan a crear multitud de
páginas web, por lo que se necesitará un esquema un tanto más elaborado. De
una u otra forma, habrá de ser lo más claro posible.

Es evidente que la estructura del sitio web va a depender fundamentalmente

del contenido del mismo. Si se pretende realizar una página con una
estructura formada por capítulos, la estructura seleccionada deberá ser lineal y
jerárquica. Sin embargo, si se expone un tutorial o un tour, sería más
apropiado presentar una estructura de tipo lineal.

La estructura en la que se organiza un sitio web depende fundamentalmente

de su tipo y alcance.

Estructura del sitio web

Ocultar descripción alternativa
Representación de la estructura del sitio web. Empieza en la página de inicio y se divide en
páginas secundarias.

Si se trata de un sitio web pequeño, se recomienda mantener la estructura

de directorios simple. Si se trata de un sitio web con tres páginas, por ejemplo,
habrá una estructura compuesta de un directorio principal o raíz que contiene
un sub-directorio, en el que se encontrarán todos los documentos.

Cuando se tiene la estructura del directorio, se comienza a crear los

documentos. Es importante conocer cómo llegar a un recurso particular en la
estructura para incluir una imagen en un documento o establecer un vínculo.
Para construir un vínculo se pueden usar URLs completas o URLs relativas.

Comentado todo lo anterior, diferenciaremos entre dos tipos de estructura

a la hora de estructurar una página web:

 Física: consiste en la planificación del desarrollo de los ficheros de un

sitio web.

 Lógica: consiste en la representación formal de un sitio web.

 Estructura física

En la estructura física garantizaremos la forma de almacenar los elementos

de un sitio web, teniendo presente los directorios y los archivos.

Cuando el número de archivos es bastante alto, resulta útil ubicarlos en

carpetas para facilitar su localización y su edición. Existen múltiples métodos
para organizar los directorios. De forma general se propone un modelo basado
en la organización por tipo de archivo.

Las páginas HTML se guardarán en el directorio principal mientras que los

elementos o archivos se situarán en subdirectorios.

Las principales carpetas que utiliza son:

 audios: archivos de audio mp3.

 css: hojas de estilo css.

 descargas: archivos zip, exe, etc que se ofrecen para descarga.

 images: imágenes jpg, gif o png.

 pdf: documentos pdf.

 scripts: archivos js con código javascript reutilizable.

 swfs: archivos con animaciones flash (*.swf).

 vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

Los nombres de los directorios y de los archivos tienes que llevar la intención
de evitar errores, respetando una serie de normas a la hora de la asignación del
nombre:

 El nombre debe estar formado por caracteres alfanuméricos: a-z y 0-9.

 No debe contener caracteres no alfanuméricos.

 No debe superar los 20 caracteres.

 Utilizar siempre letras minúsculas

 Reservar el nombre index.html para página que deseamos se muestre

por defecto.

Estructura lógica

La estructura lógica viene definida por la experiencia de navegación del

usuario, existen distintos tipos de estructuras lógicas:

En red

Esta estructura comienza a partir de la página principal pudiendo navegar a

otra u otras páginas sin ningún orden. No es aconsejable este tipo cuando el
número de páginas es elevado ya que desorienta al usuario al no saber dónde
está.

Lineal

Este tipo de estructura es bastante similar a la página de un libro. Desde una

página concreta se accede a la página siguiente o anterior. Si queremos que el
usuario siga un itinerario fijo y guiado esta estructura será bastante útil.

Jerárquica o de árbol

Este tipo de estructura se basa en que existe una página principal desde la
que se accede a un conjunto de página, a través de un menú de navegación.
Básicamente se basa en una estructura en forma de árbol. Es la más común
pero no se aconseja utilizar más de cuatro niveles para evitar que el usuario se
desoriente durante la navegación.
 Lineal con jerarquía o mixta

Es una estructura hibrida que trata de aprovechar tanto la estructura lineal

como la jerárquica. Las páginas se organizan de forma jerárquica pero también
es posible navegar de forma líneas por las páginas de un mismo nivel.

Algunas de las estructuras mas populares

Existe tal variedad de sitios web que sería imposible hacer una categorización
que las incluyese a todas. Lo máximo que se puede hacer es centrarse en
aspectos específicos de estos sitios:

Páginas personales

La principal función de las páginas personales es la de dar a conocer a la

persona que las lleva. La calidad o cantidad del contenido, la complejidad, el
alcance… son factores que no van influenciados por el tipo de página. Existen
páginas personales mucho más complejas que algunas páginas de empresa o
comerciales, aunque en un principio tengan menos volumen de contenidos.

La funcionalidad de las páginas personales suele estar definida por el

usuario, ya sea para dar a conocer su entorno personal, para relatar sus
experiencia, para dar a conocer su trabajo o incluso para ofertarlo. El
contenido, eso sí, siempre hace referencia al dueño de la página.

La estructura de estas páginas suele estar dividida en una página principal

donde se muestra la información que mas le interesa al usuario, dándose a
conocer publicando datos como el curriculum o una presentación formal,
acompañando a esta página principal se encuentran otra serie de paginas para
mostrar trabajos que haya realizado o recomendaciones.

Redes sociales

Las redes sociales son un fenómeno en auge en los últimos tiempos. El

objetivo principal de una red social es la de mantener un contacto entre
personas, de manera que se crean conexiones entre personas por amistad,
gustos, preferencia o por azar. Mediante una red social, uno puede realizar
publicaciones propias,  que serán compartidas por un grupo selecto de
personas, reducido o no.

Si observamos la estructura de las redes sociales (Facebook , Instagram,

Twitter...) nos daremos cuenta de que siempre es igual: Una página donde
poder ver las publicaciones de el resto de usuarios que seguimos, un perfil
personal donde ver nuestros datos, publicaciones, amigos... y un buscador para
agregar gente nueva o ver publicaciones que sigan los criterios de búsqueda
que hayamos establecido.

Páginas informativas
 Las páginas informativas ocupan un número bastante grande del total de
sitios web de la red. De hecho, la gran mayoría de usuarios de Internet visita la
red para acceder de un modo u otro a información. En este caso los
contenidos son siempre informativos y, en algunos casos, educativos.
Páginas populares como la Wikipedia se nutren de la información suministrada
por los usuarios para componer un gran listado de conocimientos globales al
alcance de todos. Existen también páginas que ofrecen muchos contenidos
informativos previo pago.

La estructura de las páginas informativas es la mas simple. Está compuesta

de una página principal donde se reúne toda la información siguiendo unos
indices señalados en la parte superior y en algunas ocasiones se ayudan o
complementan de links, que a su vez conectan con otras páginas informativas
con la misma estructura.

Páginas de empresa

Las páginas de empresa también son páginas informativas, pero centran

toda su atención única y exclusivamente en todos los apartados posibles de la
empresa añadiendo a si nuevas pestañas a su estructura para indicar a que se
dedican, su ubicación, el personal, la forma de contacto y posibles ofertas de
trabajo. A excepción de enlaces ocasionales a sitios asociados, todo el sistema
de este tipo de páginas estará diseñado para que el usuario se
sienta tentado a navegar por todo el sitio.

El objetivo de estas páginas es el de que la empresa resulte atractiva y se

capten así clientes potenciales.

Páginas comerciales

Cualquier tipo de página cuyo fin sea puramente lucrativo es una página

comercial. Este tipo de páginas están orientados a ofrecer unos servicios o
productos y los medios para adquirirlos.

La estructura de este tipo de páginas suele ser similar a la de los folletos,

aunque con características específicas del medio, por supuesto. Páginas de
compra y venta como Amazon, o de subastas virtuales como eBay, gestionan
un gran número de transacciones diarias, con métodos de pago virtuales como
PayPal para darle confianza al usuario.
Presentaciones multimedia.

El programa Adobe Flash tiene la opción de publicar aquello que hemos

creado de manera que funcione como una página web. Lo que se crea entonces
es un documento HTML, en el que se enmarca todo el archivo Flash creado (un
archivo .swf, .flv…), de manera que el navegador pase a reproducir ese
contenido directamente.

Flash es un programa orientado principalmente a la animación. La gran

ventaja que tiene es que sus contenidos pueden ser interactivos, aprovechando
la interacción del usuario para reproducir un contenido u otro. Si creamos un
sitio entero en Flash, estaremos creando una película interactiva que puede
reaccionar con el ratón, animarse, cambiar, adaptarse y una serie de opciones
de estilo muy vistosas que son complicadas de conseguir con HTML.

Por supuesto, crear una página en Flash tiene sus ventajas y sus
desventajas, ya que si no existiesen estas últimas todas las páginas actuales
estarían hechas con ese programa. Las principales ventajas de un sitio Flash
son:

1. Compatibilidad

Aunque podría parecer que Flash es demasiado potente para algunos

equipos, es altamente compatible con la mayoría, respaldado por el 95% de los
navegadores web y reproducible en cualquier sistema operativo.

2. Animaciones

Se pueden crear animaciones con facilidad y con una alta calidad visual,
extensibles a toda la página.

3. Vídeo

El vídeo se puede reproducir bien dentro de Flash ya que no requiere de otro

plugin que dependa del sistema operativo, lo gestiona él mismo.
 4. Juegos

La interactividad de Flash permite crear juegos que se pueden incrustar

dentro de nuestra web.

5. Imágenes vectoriales

Flash es capaz de gestionar imágenes vectoriales, obteniendo una calidad de

bordes mayor que las imágenes de mapas de bits gestionadas por HTML.

6. Fuentes especiales

Flash utiliza una técnica de reemplazo de imágenes que permite usar fuentes
especiales no aceptadas en los estándares HTML.

1. Peso

Una página en Flash tiene que cargarse por completo antes de empezar a
reproducirse. En conexiones lentas y animaciones mal optimizadas, esto puede
traducirse en varios minutos de espera.

2. Accesibilidad y usabilidad

Para algunas personas, una web con un alto contenido en imágenes y

animaciones puede no ser fácil de navegar. El hecho de tener que esperar a
que se carguen determinados contenidos también influye, agravado sobre todo
por la rápida velocidad de una navegación media. Por otro lado, una página
web en flash no demasiado optimizada puede llegar a perder las funciones del
botón Atrás de los navegadores (todo es un mismo vídeo, y con Atrás lo
rebobinamos al completo), dificultando la navegación aún más.

3. Posicionamiento

Los motores de búsqueda funcionan buscando en el contenido de una web,

de manera que si se trata de un contenido escrito (código), puede tener
muchos puntos de referencia para mostrar nuestra página en el resultado de
una búsqueda. Una página flash carece de ese tipo de contenidos y, aunque se
puede configurar para que dé resultados en las búsquedas, los motores de
búsqueda tradicionales prefieren las páginas con HTML.

4. Plugin

Para visualizar Flash de forma correcta se necesita un plugin específico de

Flash. La mayoría de usuarios dispone de este plugin, pero obliga a otros a
descargárselo. Sus actualizaciones y reformas también obligan a posteriores
descargas, lo cual puede ser contradictorio para el funcionamiento de nuestra
página.

En general, el uso o no de Flash depende completamente de las

características de la web. Una web sobre nuevas tecnologías dirigida a un
público joven podrá beneficiarse de altos contenidos en flash y de una
interactividad muy alta. Para páginas que pretendan llegar al mayor número de
usuarios posible, es mejor usar flash en sitios puntuales, de manera que el
contenido principal de la página siempre se muestra de forma correcta.

El uso de flash para el diseño web está tremendamente extendido pero, al

igual que cualquier recurso, es mucho más efectivo cuando se utiliza para
remarcar ciertos contenidos, sin abusar de él.

Objetivos medibles.

Medir y analizar son los pilares clave en el entorno online. Ésta es una de

las principales ventajas que nos ofrece este medio. Internet nos ofrece una
cantidad enorme de datos (big data) que si sabemos analizar de forma
inteligente lograremos optimizar todas nuestras estrategias digitales. Los datos
son meros datos que no nos sirven de nada sino hay detrás una persona
encargada de interpretar toda esa información y, en base a ese análisis, tomar
decisiones estratégicas que mejoren la situación de la empresa.

 Por ello, es importante  a la hora de realizar analítica web, detectar cuáles

son las métricas o kPI´s claves que debemos monitorizar y medir para
detectar si nuestra estrategia está funcionando o si debemos optimizarla, en
caso de que los resultados no estén siendo los esperados. Por ello, para
determinar cuáles son las métricas a tener en cuenta en nuestro proceso de
analítica debemos de partir de unos objetivos claros. En función de esos
objetivos, realizaremos diferentes análisis utilizando herramientas que nos
permitan su realización y, tras el análisis, tomaremos decisiones.

Uno de los objetivos de nuestro éxito en Internet es estar bien posicionados.

Gracias al SEO lograremos mejorar nuestro posicionamiento en buscadores y
aumentar nuestra visibilidad ante los usuarios que se encuentren buscando
productos o servicios relacionados con los que ofrece nuestra empresa. Que
nuestro posicionamiento SEO sea óptimo depende, en gran medida, de la
analítica web.

Lanzarnos a realizar acciones en el entorno online, sin ningún tipo de

estrategia, y si analizar si estamos logrando nuestros objetivos o no es un gran
error. Es fundamental medir todas aquellas acciones que realizamos o de lo
contrario podríamos estar perdiendo oportunidades de oro.

Por ejemplo, imagina una empresa que invierte grandes cantidades de dinero
en campañas de Google Adwords pero, tras analizar las visitas entrantes  a su
web, descubre que el 80% del tráfico proviene de redes sociales. ¿No sería más
inteligente adaptar la estrategia e invertir en aquellos canales que le son más
eficaces? Lo lógico sería derivar parte de la inversión en Adwords en campañas
en redes sociales, y así optimizar y mejorar sus resultados.

Por ello, la analítica web es fundamental para las empresas que deseen tener
éxito en Internet. Gracias a todos los datos que proporciona esta disciplina, las
empresa lograrán conocer mejor el comportamiento de sus usuarios y entender
sus necesidades. Y esto, ¿en qué se traduce? Básicamente en el planteamiento
de estrategias más eficientes y en una mejora del ROI (Retorno de la
Inversión).
 Algunas de las acciones que podremos llevar a cabo gracias a la analítica web
son:

 Identificar a nuestro público objetivo.

 Detectar patrones de comportamiento y ofrecer a cada uno de nuestros

usuarios lo que necesitan.

 Optimizar nuestras estrategias de marketing.

 Optimizar nuestro sitio web y orientarlo a aumentar el número de

conversiones.

 Optimar aspectos de nuestra web ofrecer una mejor experiencia de

usuario.

 Detectar qué canales son más rentables para nosotros en relación a su

eficacia.

Google Analytics

Existen muchas preguntas sobre el comportamiento de los usuarios en un

sitio web a las que los responsables del marketing debemos dar respuesta:

 ¿Cómo llegan los usuarios a nuestro sitio web?

 ¿A través de qué dispositivo acceden a la web?

 ¿Cuántos usuarios hay conectados en este momento?

 Etc.

Son muchas preguntas a la que la analítica web puede dar respuesta y, en

concreto, Google Analytics.

Google Analytics

Google Analytics es el servicio gratuito de analítica web que nos ofrece

Google, a través del cual, podemos obtener un gran número de estadísticas y
descargar informes personalizados para analizar la información y ayudarnos en
la toma de decisiones. Estos datos serán importantes, no solo para las acciones
de marketing, sino también para el SEO. Google Analytics es la herramienta de
analítica más popular en la red, y es utilizada por millones de sitios en todo el
mundo con el objetivo de optimizar sus sitios web y lograr sus objetivos.
 La plataforma surgió en 2006 y, desde entonces, ha evolucionado en los
análisis que ofrece y en las métricas que podemos analizar. Pero no hay que
obsesionarse con la cantidad de métricas que tenemos disponibles, sino que la
importancia radicará en la interpretación de esos datos por parte del analista.
La analítica no será más que meros datos sino se da una correcta interpretación
con el objetivo de tomar decisiones inteligentes.

¿Cómo hace Google Analytics para recopilar todos esos datos? Para

obtener toda la información que nos presenta, Google Analytics combina las
cookies, navegadores y código JavaScript en cada una de las páginas de
nuestro sitio web. Al registrarnos en Google Analytics nos generará un código
que deberemos insertar en la cabecera del código fuente de nuestra web.
Cuando nuestra página web ha sido creada a través de un CMS, como
Wordpress, bastará con insertar el código de Analytics en la primera página y
automática se repetirá el proceso en el resto de páginas.

Cuando comienzan a entrar usuarios en nuestro sitio web y sus páginas

contienen el código de Google Analytics, éste hará seguimiento y generará una
cookie que registrará el comportamiento del usuario en la web hasta que
termina su visita. Todos estos datos se van cargando en el servidor de Google
y, posteriormente, se generarán en el panel de Google Analytics, inclusive en
tiempo real.

¿Cuáles son las principales ventajas que nos ofrece Google Analytics?

Velocidad de carga: El código de Google Analytics que instalamos en

nuestro sitio web es ligero, por lo que se carga de forma asincrónica, y no
afecta al tiempo de carga de nuestro sitio. Esto favorece que no se perjudique a
la experiencia de usuario.

Gran número de informes personalizables: Google Analytics nos ofrece

una gran variedad de informes, algunos predeterminados y otro personalizables
para analizar aquello que nos interesa y podemos. Existe la posibilidad además
de recibir dichos email cada cierto tiempo.

Nos permite evaluar campañas realizadas en redes sociales: Google

Analytics nos permite, entre otras cosas, analizar el tráfico procedente de redes
sociales. Esta información, puede ser muy valiosa ya que os ayuda a entender
qué canales sociales pueden resultar más rentables a la hora de realizar
acciones de marketing en ellos.
 Trabajo en equipo: Google Analytics ofrece la posibilidad de poder acceder
a los datos y gestionar su contenido a diferentes usuarios dentro de la misma
cuenta. Esto es genial cuando trabajamos en equipo. Además, existen
diferentes permisos como editar, colaborar y leer y analizar.

Google Analytics es compatible con servicios de terceros: Existen

muchas aplicaciones para complementar la información que nos ofrece. Estas
aplicaciones podemos encontrarlas en su App Gallery.

¿Qué es Google Analytics?

Google Analytics es una herramienta que nos permite conocer cómo los

usuarios encuentran nuestro sitio web, cómo navegan y de qué manera
podemos mejorar su experiencia en la web. Además, nos da la posibilidad
de mejorar el rendimiento de nuestra inversión, aumentar el número de las
conversiones que se producen y llegar a obtener más ingresos.

Esta herramienta nos permite utilizar más de 80 informes diferentes, los

cuales nos servirán para conocer de primera mano todo lo necesario para
realizar un análisis contundente y exhaustivo de nuestro portal web, con el fin
de optimizarlo lo máximo posible de cara a que nuestros visitantes tengan una
buena experiencia en él, y terminen, en términos generales, siendo fieles al
mismo. 

Abriendo una cuenta en Google Analytics, podemos realizar el seguimiento de

los usuarios en nuestro sitio web, así como del rendimiento de las campañas de
marketing (tanto de las campañas de AdWords, como de las campañas por
correo electrónico o de cualquier otro programa publicitario).

En base a la información adquirida, podremos conocer qué palabras clave

funcionan de forma eficiente, qué texto es el más eficaz y el momento o punto
exacto en el que abandonan los usuarios nuestro sitio web.

A pesar de que no es un programa de pago en su mayoría, los servicios que

Google Analytics pone a nuestra disposición son muy completos, ya que ofrece
un paquete de análisis web íntegro y potente.

Aquellos anunciantes que tengan cuenta en AdWords pueden obtener dichas

ventajas desde esta, puesto que Google Analytics está completamente
integrado en dicho programa. Todos los informes generados así como los
ajustes estarán disponibles en la pestaña Google Analytics.

Para empezar a usar este programa nos dirigiremos a la página cuya

dirección se proporciona a continuación:
página: www.google.com/analytics/es-ES .

También podemos pinchar en la pestaña de nuestra cuenta de AdWords

referida a Google Analytics. A continuación, nos encontraremos en un sencillo
proceso de registro en el cuál deberemos añadir un fragmento de código. Una
vez realizado dicho registro, Google Analytics empezará a recopilar información
inmediatamente.

¿Cómo funciona?
 Para compilar la información acerca de los individuos que visitan nuestra
web, Analytics utiliza tanto cookies de origen como los códigos de JavaScript.
De esta forma hace posible el seguimiento de los datos de nuestra campaña
publicitaria. Esta herramienta realiza un seguimiento anónimo de la
campaña con el objetivo de conocer cómo los usuarios de nuestra web
interactúan en la misma.

A través de este seguimiento, podremos conocer de dónde proceden los

usuarios, qué acciones concretas han realizado y si el objetivo de la conversión
se ha realizado con éxito.

Por otro lado, también es capaz de realizar el seguimiento de los datos de

comercio electrónico (e-commerce) y además los combina con información
sobre la campaña realizada y las conversiones, con el fin de conseguir una
información más detallada sobre el rendimiento de dichas campañas.

Cabe destacar que Analytics no influirá en el rendimiento ni apariencia

de nuestro sitio web, como tampoco albergará archivos adicionales en ella ni
activará archivos GIF.

Los informes aportados por Analytics se caracterizan por ser muy completos,
exhaustivos, visuales y de fácil comprensión. Con la información aportada,
podremos dirigir el tráfico deseado a nuestro sitio web convirtiéndolo así en un
sitio mucho más eficaz.

Conceptos básicos de Google Analytics.

Vamos a definir algunos conceptos básicos para poder entender

correctamente la utilización de esta herramienta.

1. Cuenta o Account: conocida también con el nombre de “unidad de

negocio”. Es importante que no confundamos este término con el de Usuario,
ya que dentro de una única cuenta puede haber varios usuarios que la
administren, los cuales además pueden contar con distintos permisos para
realizar cambios o ver información en la misma. Además, una cuenta no tiene
por qué ser exclusiva para un sitio web, es decir, se pueden administrar varios
sitios web distintos desde una misma cuenta.
2.  Propiedad: no es más que la plataforma sobre la que se van a realizar
las pertinentes mediciones, es decir, se trata del sitio web que vamos a medir.
Por lo tanto, una única cuenta, tal y como hemos dicho anteriormente, puede
tener varias propiedades para medir. 
3. Vista: se trata de un grupo de informes en el cual aparece el
seguimiento completo de una única propiedad, aunque también podremos
hacer que correspondan a una parte de esa propiedad.
4. Usuarios: son las personas que a través de su login y password
obtienen permisos concretos. Los permisos son asignados a diferentes niveles
ya sea a nivel de cuenta, de propiedad o de vista. Además, dichos permisos son
conformados en torno a distintos campos, como por ejemplo permisos de
gestión de usuarios, permisos de edición, permisos de colaboración o permisos
de lectura/análisis.
5. 5. Dimensión: es un concepto que describe a una entidad y que además
se puede medir, por ejemplo, el peso de una persona.
6. 6. Valor: es la cuantificación numérica de una dimensión, por ejemplo,
72kg.
7. 7. Métrica: es una operación con los valores de una dimensión que nos
interesa conocer. Por ejemplo, el peso medio de un grupo de personas.
8. Funciones de Google Analytics
9. Google Analytics no se encarga únicamente de medir datos sobre ventas
o conversiones, sino que además a través de dicha herramienta,
podremos obtener información que nos permite saber cómo nuestros
visitantes utilizan nuestra web, cómo llegan a ella y qué podemos hacer
para que sigan visitándola. Las herramientas que podremos utilizar
con Google Analytics son:
10.- Herramientas de análisis: Google Analytics está basado en una
herramienta que elabora extensos informes y a la vez accesibles y de
fácil comprensión. Su fin es poder decidir qué datos necesitamos
observar para personalizar así los informes y que le resulte más sencilla
su interpretación.
11.- Analítica de contenido: se trata de una serie de informes que nos
aportan información sobre qué partes concretas de nuestro sitio web
están consiguiendo mayor y mejor rendimiento. Además aporta datos
sobre qué páginas resultan más populares con el fin de conocer mejor lo
que buscan nuestros usuarios y ofrecerles así una mejor experiencia en
nuestra web, blog, o cualquiera que sea nuestro sitio web.
12.- Analítica de redes sociales: en este caso se nos ofrece una medición
de los distintos programas publicitarios llevados a cabo en redes
sociales. A través de esta plataforma seremos capaces de poder analizar
cuidadosamente la interacción de los usuarios que visitan la web con las
funciones de compartir, y la forma en la cual se implican con el
contenido de dichas plataformas sociales.
13.- Analítica de móviles: podremos conocer de forma medianamente
sencilla el impacto de nuestra marca o nuestro sitio web en los
dispositivos móviles. Si además tuviésemos una aplicación para
dispositivos Smartphone, se nos ofrecerá un “kit” de desarrollo de
software tanto para iOS como para Android, con el objetivo de
aportarnos la información pertinente para poder realizar una evaluación
de cómo los usuarios utilizan nuestra aplicación.
14.- Analítica de conversiones: Las conversiones se utilizarán para ver a
cuántos clientes atraemos, qué cantidad vendemos y el nivel de
implicación que dichos usuarios tienen con dicha web.
15.- Analítica de publicidad: A través de esta herramienta podremos
aprovechar de forma eficiente la publicidad que estemos realizando,
gracias a toda la información que recibimos sobre el rendimiento de los
anuncios en las redes sociales, en smartphones, redes de búsqueda e
incluso plataformas display. Además podemos relacionar las campañas
de marketing con nuestra actividad en el sitio web, con el fin de obtener
así una visión más completa y a su vez poder mejorar el rendimiento de
dicha publicidad.
16.Creación de una cuenta Google Analytics.
 17.Para registrarnos en Google Analytics, debemos visitar la
dirección: www.google.com/analytics. En ella, podremos crear una
cuenta de forma fácil y gratuita. En caso de disponer de una cuenta de
Google, tan solo debemos entrar con nuestro perfil en Google Analytics. 
18.Las cuentas de Google no solo nos aportan las distintas ventajas de
tener un acceso único a las distintas aplicaciones de Google, sino que
además se nos garantiza la máxima seguridad sobre nuestra cuenta lo
cual resulta realmente interesante ya que nuestra cuenta contendrá
información relevante sobre nuestro sitio web.
19.En el caso de ser anunciantes de AdWords, podremos registrarnos o
acceder en Google Analytics desde la cuenta ya existente de AdWords.
La herramienta de Google Analytics ha sido integrada en AdWords, por lo
que podremos acceder a través de la nueva pestaña Google Analytics en
AdWords. Para acceder a dicho servicio, debemos hacer clic en ella y
seguir con las instrucciones indicadas. Este servicio nos permitirá
supervisar todos los datos relativos a la campaña de AdWords y al
retorno de nuestra inversión.

Roles. Workflows (Flujos de trabajo) .

Podríamos dar una definición técnica de lo que es Workflow:

«Una aplicación de Workflow automatiza la secuencia de acciones,

actividades o tareas utilizadas para la ejecución del proceso, incluyendo el
seguimiento del estado de cada una de sus etapas y la aportación de las
herramientas necesarias para gestionarlo».

La verdad es que, como casi todas las definiciones técnicas, necesita leerse
una par de veces para entender cuál es su verdadero significado. Piense, no
obstante, en lo siguiente: imagínese que le piden realizar una web para
gestionar los documentos internos de una empresa. Sin duda alguna usted ya
se ha hecho una idea del ciclo de vida que puede tener su web.

El primer paso será la realización del mismo por parte de su autor,

posteriormente este documento debería de pasar un examen ortográfico con el
fin de validar que está correctamente escrito y devolvérselo al creador en el
caso de que se encuentren faltas de ortografía en el mismo. Una vez que ha
pasado por la primera revisión, el documento debería someterse a otra revisión
que probara que está de acuerdo a la guía de estilo de la empresa. Cuando
usted describe el flujo del proceso anterior realmente está describiendo
un Workflow.

Actualmente existen muchos más ejemplos de procesos que se pueden

modelar como un Workflow, realmente cualquier proceso podríamos modelarlo
como un Workflow, piense en una web para la gestión de relaciones con los
clientes o los sistemas de planificación de recursos empresariales, dónde los
pasos que se dan cuando un cliente se introduce dentro de un sistema pueden
ser complejos.
 La idea de Workflow no es un concepto innovador en el mundo del desarrollo,
actualmente muchas aplicaciones empresariales incorporan algún mecanismo,
mejor o peor, para realizar y modelar flujos de trabajo en sus webs, de hecho
en algunos productos de Microsoft ya se disponía de motores de Workflows
como por ejemplo en BizTalk Server o Microsoft CRM 3.0.

A continuación, se muestra un esbozo de un workflow para el proceso

anterior.

Workflow del proceso

Ocultar descripción alternativa
Una imagen de un workflow para crear un documento sin faltas ortográficas o de estilo

Con la llegada de Microsoft Windows Workflow Foundation se establece por

parte de Microsoft un denominador común a la hora de hablar de Workflows ya
que a partir de este momento todas las aplicaciones del gigante del software
que necesiten incorporar Workflows se basarán en esta tecnología, como
ejemplo tenemos la siguiente generación de BizTalk, CRM o Speech Server por
citar algunos ejemplos.

Gestión de workflows

Los documentos creados se depositan en una base de datos central donde

también se guardan el resto de datos de la web, cómo son los datos relativos a
los documentos (versiones hechas, autor, fecha de publicación y caducidad,
etc.), datos y preferencias de los usuarios, la estructura de la web, etc.
 La estructura de la web se puede configurar con una herramienta que,
habitualmente, presenta una visión jerárquica del sitio y permite
modificaciones. Mediante esta estructura se puede asignar un grupo a cada
área, con responsables, editores, autores y usuarios con diferentes permisos.
Eso es imprescindible para facilitar el ciclo de trabajo (workflow) con un circuito
de edición que va desde el autor hasta el responsable final de la publicación.

La Web corporativa.

Una página web corporativa es el sitio web que representa a una empresa

o una entidad, esta publica la información de la empresa como por ejemplo a
que se dedican, donde está ubicada, el personal… y también se encarga de la
administración.

Es importante que una web corporativa sea un lugar agradable y que de

una buena imagen de nuestros productos y servicios. Debemos tener en cuenta
que a través de esta web estamos presentándonos a un público que tiene
acceso 24 horas a nuestra información.

Elementos de un web corporativa

En el año 2019 se establecen una serie de elementos que son esenciales en

la composición de una web corporativa

 Diseño responsive
Esto quiere decir que la página se adapta al tamaño de las pantallas
móviles, tablet y monitores.

 Una página de inicio

Una página que de la bienvenida al usuario y le haga saber donde se
encuentra.

 Página se servicios
Donde se explica al cliente los servicios o productos que se ofrecen.

 Página ¿Quiénes somos?

Se exponen trabajos y la experiencia del equipo de trabajo.

 Página de contacto
En esta página tendremos nuestra dirección, teléfonos, email, redes
sociales...

 Blog
Podemos publicar cambios, responder preguntas de los clientes ...

 Seguimiento de conversiones
Es una de las partes mas importantes de nuestra web corporativa, en
esta parte lo que hacemos es un estudio del público que es un cliente
potencial.
 Alta velocidad de carga
Para que la velocidad de carga sea optima tiene que ser menor de 2
segundos.

 Navegación clara
Es importante que nuestra web tenga un panel de navegación que
permita al usuario ubicarse y navegar entre las pestañas de nuestra
web.

 Chat de atención al cliente

un chat que sustituya la opción de enviar un correo o una llamada en
caso de duda.

 Formulario de Contacto
Es muy recomendable que los datos a rellenar para contactar sean
pocos: Correo, nombre y mensaje.

 Teléfono clicable
Un icono de teléfono que nos de el teléfono de contacto

 Botones sociales para compartir

Es muy importante comunicar nuestra web con las redes sociales para
hacer nuestra web mas viral.

Fases de creación de la web corporativa

Primera fase

Se realiza un análisis estratégico. Se analiza la empresa, el mercado, los

productos, la situación actual, los medios especializados y la blogosfera. El
objetivo es averiguar si resulta conveniente o no lanzar una web corporativa y
qué oportunidades se abren en ese terreno.

Si se identifica una oportunidad de obtener beneficios comunicativos con la

web, pasamos a la segunda fase. Si no, el proceso termina aquí con un informe
de las oportunidades o amenazas detectadas para la comunicación online de la
empresa (y por supuesto, no se factura más que la parte correspondiente).

Segunda fase

Identificación del equipo web. La situación ideal es que se identifiquen

varias personas dentro de la organización con potencial para participar como
autores de la web.

Aunque no es el planteamiento inicial, dependiendo del valor estratégico de

la web corporativa, puede que en esta fase se sugiera asignar/contratar a
una persona para dedicación exclusiva a la comunicación online.

Tercera fase

Formación del equipo web. Los trabajadores seleccionados recibirán una

formación específica sobre comunicación en webs: leyes escritas y no escritas,
redacción de webs, herramientas de la web, estrategias de comunicación
online, etc.

En este punto también se consensuarán y establecerán las responsabilidades:

frecuencia de publicación, temática de los artículos y línea editorial.

Cuarta fase

Diseño y puesta en marcha de la web. Utilizaremos herramientas de software

libre estándar (WordPress) y un diseño funcional que se adapte a la imagen
corporativa de la empresa.

Diseño y puesta en marcha de la web. Utilizaremos herramientas de software

libre estándar (WordPress) y un diseño funcional que se adapte a la imagen
corporativa de la empresa.

Última fase

Fase de promoción y seguimiento inicial. Las webs recién nacidas, al igual

que los seres humanos, necesitan cierto seguimiento. Su recién formado equipo
web necesitará cierta tutorización en los primeros meses y una persona al otro
lado de la línea que pueda resolver sus dudas.

Además se realizará una fase de mantenimiento de la web con el fin de estar

actualizando los contenidos y añadir posibles mejoras a la web a medidas que
van apareciendo nuevas necesidades por parte del usuario que visita la web.

Estándares.

Los estándares web son aquellas técnicas que describen los aspectos de la
www (red web mundial). El objetivo es crear una web que sea más cómoda
para todos, con sitios accesibles a más personas y que sea funcional desde
cualquier dispositivo con acceso a internet.

Los beneficios de usar los estándares son conseguir sitios webs con mayor
consistencia visual, una de las grandes mejoras que se han hecho ha sido
gracias al uso de XHTML y CSS, de esta forma podemos realizar rápidamente
un sitio web y conseguir efectos que antes requerían el uso de otros lenguajes
como JavaScript, de esta forma podemos deducir que una de esos beneficios es
que los contenidos al usar menos ancho de banda se muestren más rápidos al
usuario.

Unos de los principales estándares y más de moda actualmente son

los certificados SSL y el estándar HTTPS, estos certificados se caracterizan
por permitir la identificación dentro de la Red o Internet, de forma segura y
fiable, a determinados servidores web los cuales tienen la necesidad de realizar
conexiones seguras a través del protocolo ssl (Secure Socket Layer). Estos son
fácilmente reconocibles debido a que utilizan direcciones del tipo https://, no
como las habituales que pertenecen a http://.

Los certificados SSL proporcionan una seguridad al visitante de una página

web para que no tenga que preocuparse por correr algún tipo de riesgo. Este
sistema es basado en el continuo procesamiento de la información de forma
que nadie ni nada pueda acceder a ella antes de llegar a su destino.

Pero si hablamos de estándares no podemos acabar sin hablar de W3C

W3C es una comunidad internacional donde trabajan organizaciones

Miembro, personal a tiempo completo y el público de forma conjunta para
desarrollar los estándares web. Este consorcio está dirigido por el director
ejecutivo Jeffrey Jaffe

W3C tiene su propia web que podemos visitar para ver sus últimas noticias,
normalmente suelen publicar unas 2 noticias por año. También dentro de su
página web podemos encontrar estándares de diseño y aplicaciones, web
semántica, web de los dispositivos o incluso estándares para navegadores y
herramientas.

Usabilidad.

Concepto de usabilidad

Una gran frase de Steve Krug que define la usabilidad Web es:

“No me hagas Pensar”

La usabilidad, en un amplio sentido de la palabra, está referida a la facilidad y

manejabilidad con las que los seres humanos pueden interactuar con cualquier
objeto u herramienta. En este caso, está referida a sitios web, para que se
haga un diseño y una programación de sitios Web que haga los sitios web
intuitivos y fáciles de usar por el usuario.

Esta es una definición para usabilidad pero existen multitud de ellas, la

Organización Internacional para la Estandarización (ISO) ofrece una definición
general de usabilidad: "grado de eficacia, eficiencia y satisfacción con la
que usuarios específicos pueden lograr objetivos específicos, en un contexto de
uso específico."

La arquitectura de la información (AI) es una filosofía por medio de la

cual es estudiado cómo se organiza la información de tal forma que los usuarios
pueden localizarla y trabajar con ella. La organización se basa en estructurar,
clasificar y rotular la información de la Web.

¿Qué es la analítica Web?

 La analítica Web básicamente consiste en analizar, como su propio nombre
indica, los datos más relevantes de los visitantes de un sitio web para poder
obtener conclusiones que mejoren el uso del sitio. Antes todo se hacía a través
de los datos que se almacenaban en los logs de los servidores, pero
actualmente eso no es suficiente para poder obtener toda la información que se
requiere, así que se suele añadir al final de las páginas un poco de código
JavaScript para recoger los datos que más nos interesen y poder procesarlos
posteriormente. La principal ventaja de esto es que podemos
extraer información precisa, que nos ayude a medir y entender cómo se
mueven los usuarios por nuestro sitio, también podremos clasificar o segmentar
el tipo de usuarios que acceden a nuestro sitio web, pudiendo dirigirnos con
más precisión a cada uno de ellos.

Las herramientas profesionales más populares para llevar a cabo la tarea

de la analítica web son:

 Google Analytics

 Omniture SiteCatalyst

 XiTi

¿Qué mide la analítica Web?

La analítica web puede abarcar un gran número de variables y datos que

pueden ser tenidos en cuenta y que sean personalizables para cada sitio web,
porque no a todos los sitios web les interesa conocer los mismos datos sobre
los visitantes o usuarios del sitio. Sin embargo, hay una serie de medidas que
son utilizadas de forma general por cualquier herramienta de analítica, como
por ejemplo:

 Número de páginas vistas.

 Número de usuarios que han accedido.

 Número de visitas que ha tenido una página.

 Tiempo de navegación de los usuarios.

Otros datos que suelen usarse en la analítica Web son:

 Datos de clicks: mediante su análisis se puede construir un mapa de

calor sobre una página, pudiendo observar a simple vista los elementos que
han tenido más clicks y averiguar las rutas que han seguido los usuarios.

 Euros: podremos conocer el importe de los clics en anuncios o la

muestra de banners. En un sitio de comercio electrónico conoceríamos el valor
de las ventas.

 Orígenes del tráfico: para poder saber desde qué sitios Web vienen
nuestros visitantes o qué términos clave han utilizado en los buscadores para
llegar hasta él.
 Páginas de entrada: puede que nos interese conocer desde qué página
o sección, en el caso de que haya varias, de nuestro sitio acceden los usuarios.

 Páginas de salida: de la misma manera, pero para conocer desde qué

página o sección abandonan nuestro sitio.

 Abandono de formularios: se podrá analizar de esta manera cuantas

veces un formulario que se empieza a rellenar es abandonado, además de los
campos que quedaron rellenos o los que quedaron en blanco.

 Eventos del sitio Web: un variado número de eventos y acciones que

también podrían analizarse, como por ejemplo, el número de usuarios que
realizan búsquedas en nuestro sitio, o que se dan de alta en un servicio para
recibir noticias o avisos, etc.

Analítica Web y Usabilidad

Existen muchas técnicas y procedimientos que nos permiten aprovechar los

datos recolectados por una herramienta de analítica Web a fin de mejorar la
usabilidad de un sitio Web. Nos centraremos en los siguientes puntos:

 ClickMap

 A/B Testing

 Análisis de formularios

 Rutas de navegación

ClickMap

Con ClickMap o “mapa de clicks” podremos ver dónde hacen clic los

usuarios, así a simple vista podemos ver cómo se mueven los usuarios por
nuestro sitio, es decir, en que partes hacen clic cuando se encuentra en una
pantalla concreta. De esta manera podremos analizar esta información y
utilizarla para poder mejorar nuestro sitio:

 Mejorando la visibilidad y el posicionamiento de los enlaces y botones

que necesitemos

 Evitando que haya elementos dentro de la página que confundan al

usuario, como aquellas posibles zonas en los que se registren muchos clicks sin
ser elementos "clicables".

 Mejorando la visibilidad de los elementos de la página que sean más

"rentables".
 A/B Testing
 Se trata de una herramienta útil cuando se duda entre varios posibles
diseños alternativos para una página web. En este caso, si pusiésemos
 varias versiones en el servidor, podríamos utilizar una aplicación para
analizar las versiones (como Omniture SiteCatalyst o Google Optimizer)
y poder comparar así los resultados para las dos versiones.
 Análisis de formularios
 Mediante el análisis de formularios, como se comentaba anteriormente,
podremos medir, por ejemplo, el número de veces que se abandona un
formulario, en qué campo se abandona, etc. Esto nos dará información
sobre si el formulario era demasiado extenso, si los datos eran de
carácter demasiado personal, etc.
 Rutas de navegación
 Los informes sobre las rutas de navegación que han seguido los usuarios
(informes que nos proporcionan herramientas como Omniture
SiteCatalyst o Visual Sciences), son los elementos más potentes de las
que disponemos para poder llevar a cabo la analítica web. Haciendo uso
de ellos podremos conocer las páginas por las que navegan los usuarios
y el orden en el que lo hacen, desde cuántos sitios se accede a una
página determinada, qué rutas son las más populares o más seguidas,
en un proceso de registro de usuario o de rellenar un formulario cuántos
usuarios abandonan y hacia dónde se dirigen cuando abandonan, etc.
Con toda esta información precisa y detallada habrá que tomar
decisiones en busca de mejorar la usabilidad del sitio web.
 Nuestro fin es conseguir que un sitio Web sea usable, no nos sirve ser
poco constante y la improvisación, debemos de trazar unas estrategias y
unos procesos muy marcados para poder conseguir nuestro objetivo.
 Estas técnicas ya han sido probadas y sería inútil y poco productivo no
aprovecharlas.


 En este curso vamos a seguir una metodología o técnica que se centra
claramente en el usuario ya que es hacia quien dirigimos la Web.
Vamos a seguir todo el proceso de desarrollo de una Web usable con
unos objetivos marcados.
 Como marca la usabilidad debemos de tener en cuenta desde el principio
a los usuarios y para ello debemos de plantearnos ciertas preguntas
como por ejemplo: quienes son, que van a necesitar, experiencia…etc.
Creación de un modelo de usuario.

El Diseño Centrado en el Usuario es el que está definido por la

información aportada por las personas que van a hacer uso del producto.

Es una nueva manera de enfocar todo el diseño al usuario, combinar el

diseño con el placer de uso, y la necesidad se convierte en la respuesta para
ofrecer nuevas técnicas y métodos de trabajo.

Henry Dreyfuss, autor del libro Designing for people (1955) popularizó la

concepción del diseño como proceso a partir de sus diseños de teléfonos de la
serie 500 para Bell Telephones. Considerado pionero del diseño centrado en el
usuario, estudió cómo se realizaban los teléfonos, cómo se percibían y eran
usados por las personas. Sus conclusiones fueron aplicadas a un diseño nuevo.

Test de usabilidad.

Existes 5 factores que adaptadas a una página Web son los cimientos de la

usabilidad en sitios Web:
 Rápido: las páginas que vayan a servir no deben tardar más de 4 segundos
en cargar siempre que nuestro visitante tenga una conexión adecuada. Si las
páginas tardan más de lo normal en cargar el usuario deberá esperar
demasiado y por lo tanto podemos perder al visitante.

Simple: debemos mantener unos elementos comunes en todas las páginas

para que la Web se pueda navegar de forma constante y el usuario no se pierda
en ningún momento. La animaciones pueden ser atractivas pero continuas
distraen y cansan al usuario.

Legible: La página Web debe tener contenido escrito y no exclusivamente

animaciones, debemos evitar Flash. De esta forma los motores de búsqueda
podrán leer y categorizar nuestra Web para poder posicionarla correctamente.

Accesible: Para todos los navegadores: Los sitios Web deben mostrarse

correctamente en la mayoría de los navegadores actuales.

Actualización: Para que una Web nunca quede anticuada y pierda

credibilidad debe de actualizarse.

Feed RSS.

Cuando hablamos del feed RSS lo primero que tenemos que decir es que se
trata de un archivo que generan algunos sitios webs que contienen la versión
específica de la información que se publica en esa web, cada uno de los
elementos que contienen información dentro de este archivo recibe el nombre
de “ítem”.

Cada uno de estos ítems tiene un título, resumen y un enlace a la página web
de donde procede o que contiene la totalidad del texto, además, puede
contener más información como la fecha o el nombre del autor

Lector de Feeds

Cada uno de los feeds que mencionamos anteriormente tiene su propia

dirección como si se tratase de una página HTML, pero con la diferencia de que
no se pueden visualizar de forma directa con el navegador, por lo que tenemos
que usar el lector de feeds.
 Podríamos decir que los lectores de feeds funcionan de una forma similar a
los programas de correo electrónico, diferenciándose de estos en que en lugar
de estar consultando la bandeja de entrada para ver los mensajes de forma
periódica los lectores de feeds lo hacen de forma periódica para obtener la
última versión del archivo RSS

Uso del RSS

Podemos pensar que los RSS solo sirven para distribuir la información.
Dependiendo de los datos que contenga nuestro RSS o del lector que usemos
tendrá distintos usos.

Uno de los métodos más comunes en cuanto al uso de RSS es el acceso a

noticias y artículos de una amplia variedad de sitios desde un mismo lugar. Más
tarde la popularización de los blogs dio lugar a que se hicieran más virales.

Esto genero usos de los RSS que hasta hace algunos años no existían como
por ejemplo los sitios de venta online que nos indican cuando están disponibles
nuevos artículos o cuando los ya existentes cambian de precio, otro uso estaría
en los foros avisándonos de las nuevas respuestas, como último ejemplo está el
uso de las redes sociales que los utilizan para la redifusión y notificación de
cambios como el estado del Facebook.

Ventajas

Tres de las ventajas más destacables de usar un lector de feeds para acceder
a los contenidos son:

 Ahorro de tiempo. Esto se debe a que podemos visualizar el contenido

publicado de esas fuentes desde otro lugar.

 Selección de nuestros propios contenidos. No importa la relevancia

de la página web por lo tanto no estaremos viendo siempre los contenidos que
google "nos incita a ver” poniendolos como primeros resultados de búsqueda.

 Visualización de los contenidos de forma uniforme. Aunque en

algunos casos pueda ser una desventaja ya que no podremos ver el diseño
personalizado de algunos sitios 

Los RSS en las redes sociales

Debemos saber que muchos de los servicios que empezaron ofreciéndonos

RSS de cara a los usuarios son hoy en día son redes sociales.

Twitter

Twitter cuenta con una herramienta que genera un feed de cualquier cuenta
que sea pública además de poder publicar feeds de los hashtags. Esta
herramienta es: Http://www.rssitfor.me/
 Facebook

El gran gigante de las redes sociales nos ofrece también un RSS, en concreto
genera el archivo a partir de nuestras publicaciones dentro de la sección de
publicaciones, en la parte superior. También tiene un feed en cada página para
subscribirnos: http://www.facebook.com/feeds/page.php?
format=atom10&id=LA-ID

Tiempos de carga y respuesta.

Le tiempo de cargan como su propio nombre indican es el tiempo que tarda

en cargar la páginas desde que se accede a ella hasta que esta muestra su
contenido. El tiempo de carga de las páginas web es cada vez más un elemento
de mayor importancia en el diseño de una página web, tanto para los motores
de búsqueda de google a los que acudimos para encontrar la información como
para los usuarios que acceden.

El termino WPO, optimización del rendimiento de la web es un terminó que se

volvió aún más popular desde que Google le diese importancia a la velocidad de
carga de la web llegando así a la conclusión de que La calidad de la web se
equipara al tiempo de respuesta.

Importancia de un buen tiempo de carga

Una de las mayores importancias del tiempo de carga de las páginas web es
que google anuncio en el año 2010 que era uno de los 200 factores de
rankeamiento, es decir posicionamiento entre otras páginas web, esto hará que
nuestra página salga antes que otras cuando se busque contenido que se
encuentre en ambas

A continuación se muestran una serie de datos de interés referentes a la

velocidad de carga:

 Cada segundo de carga superior a la media genera un 11% de caída en las

visualizaciones y un 16% en la insatisfacción de los clientes

 Según una investigación realizada por Kissmetrics el 40% de los

visitantes de las páginas web las abandonaban a los 3 segundos y un 7% más
por cada segundo

 Un 88% de los usuarios que no ingresaron en un sitio web por culpa de

la velocidad de carga son menos propensos a comprar en ese sitio y 1/3
comparte su mala experiencia

 El 85% de los usuarios que usan dispositivos móviles esperan que las
paginas carguen a la misma velocidad que el escritorio.

Google PageSpeed
 Para medir la velocidad de nuestra página existen muchas herramientas
gratuitas que nos hacen un análisis tanto para dispositivos móviles (si existe la
versión de la página) como para ordenadores.

Google PageSpeed es una familia de herramientas de Google Inc, se creó

como una herramienta de ayuda para optimizar el rendimiento del sitio web. La
herramienta apareció en el año 2010. La herramienta está compuesta de cuatro
componentes principales dentro de la familia PageSpeed: PageSpeed Module,
PageSpeed Insights, PageSpeed Service y PageSpeed Chrome DevTools. Todos
los componentes tienen en común que están diseñados para identificar fallas en
el cumplimiento de un sitio web.

Como usar Google PageSpeed

A continuación mostraremos como utilizar la herramienta de Google para

medir la velocidad de cualquier sitio web.

Lo primero que tendremos que hacer es ingresar en la página de la

aplicación: https://developers.google.com/speed/pagespeed/insights/

Una vez dentro de nuestra aplicación web, tendremos que copiar la URL de la
página web del que queremos analizar el tiempo de carga y darle a analizar.
Este proceso tardará unos segundos.

Analisis de PageSpeed

Una vez hayamos terminado el análisis nos saldrá la siguiente página, en

nuestro caso hemos medido la velocidad de la página de euroinnova, es por ello
que la url que hemos introducido es de la de euroinnova.edu
 Lo primero que veremos será si el análisis se ha realizado en el ordenador o
móvil, esto lo podremos ver sobre la esquina superior izquierda

Lo segundo será una nota sobre 100, realmente sacar una puntuación en el
rango de 90-100 es muy difícil ya que paginas como el ideal o elmundo no
llegan a una puntuación de más de 50.

Debajo de la puntuación podremos ver los datos de experimentos, los datos

que ha medido la aplicación para calcular nuestra nota, estos son:

• La nota del primer renderizado con contenido

• Primer renderizado significativo

• índice de velocidad 

• Primer tiempo inactivo de la CPU 

• Tiempo hasta que está activa 

• FID potencial máxima

Más abajo tenemos un apartado llamado Oportunidades, en este sitio

podemos ver las optimizaciones que google nos aconseja para reducir el tiempo
de carga de nuestra página, en nuestro ejemplo nos penaliza por la gran
cantidad de imágenes que se usan como portada para cada uno de los
módulos.

Beneficios del desarrollo de un buen sitio web.

Suponemos que esta es la mayor pregunta: ¿Y que gano con todo esto?
Seguramente en alguna ocasión habremos escuchado el dicho de que todo
esfuerzo tiene una recompensa, pues ciertamente esto no podría ser más
cierto.

Como vimos anteriormente trabajar e invertir tiempo en nuestro sitio web

genera grandes ventajas, la primera y la más obvia es la de ganar más
visitantes, igual que cuando nosotros como usuarios encontramos una página
que nos ofrece un servicio y nos gusta la recomendamos a el resto de usuarios
produciendo así el denominado efecto boca a boca, esto puede llegar a pasar
con nuestro sitio web, en resumen, se viralice nuestra página web haciendo que
tengamos que invertir menos dinero en publicidad.

Otro beneficio de que nuestro sitio web este bien desarrollado podría ser el
posicionamiento, por lo general cuando un usuario hace un búsqueda solo
comprueba los 3 primeros links, empezando obviamente por el primero. Por
esta razón es importante hacer un buen desarrollo de, por ejemplo, los tiempos
de respuesta y carga.

También estaremos beneficiando a la empresa, ya que al ver una página web

bien hecha seguramente transmitamos una confianza al usuario para que
compre, o contrate nuestros servicios, de otra forma el usuario está viendo
parte de nuestro trabajo por lo que nos servirá para destacar nuestra
experiencia como empresa.

La fábula de los tres cerditos

Para terminar, ayudarnos de la famosa fábula de los tres cerditos, con su

versión animada de Walt Disney para comparar nuestra web con las 3 casas,
como podemos ver las dos primeras casas (sitios web) que se han construido
rápido y mal luego no aguantan los soplidos del lobo, en cambio un sitio web en
el que hemos invertido recursos y tiempo (la casita de cemento) sí que
aguantara. Ahora cambiemos ese soplido del lobo por el tiempo, los sitios web
que se han creado con lenguajes de programación más antiguos tienen un ciclo
de vida de un máximo de 3 años, en algunos casos mucho menos, si
comparamos los sitios web de grandes empresas veremos que estás no han
tenido que modificarse en cuanto a estructura o código, un ejemplo seria la
página de Amazon, a continuación se presentan dos imágenes comparativas
entre la página en 2010 y la página en 2019
 Podemos apreciar que a pesar de haber pasado casi 10 años, lo que en el
mundo de los sitios webs es muchísimo tiempo, los contenidos son los mismos
y la empresa ha tenido un gran éxito, esto se debe a que hicieron un buen
desarrollo del sitio web.
WWW: PROTOCOLOS Y LENGUAJES 
Mapa Conceptual
WWW: PROTOCOLOS Y LENGUAJES:
- WORLD WIDE WEB
- CONCEPTOS BÁSICOS
- URL
- CLIENTE-SERVIDOR
- PROTOCOLOS HTTP Y HTTPS
- LENGUAJES MARKUP
- CGI. APPLET
- COOKIES
- CONFIGURACIÓN DE LOS PRINCIPALES NAVEGADORES
- SISTEMAS OPERATIVOS MÓVILES
-CONFIGURACIONES
- SERVICIOS WEB
- CONEXIONES SEGURAS
- VERIFICACIÓN DE LOS ESTÁNDARES DE UNA WEB

World Wide Web.

El origen de este lenguaje se remonta a 1980, cuando Tim Beners-Lee,

trabajador de (CERN), propuso un sistema de “hipertexto” para compartir
documentos.

Este sistema ya había sido desarrollado antes, y daba la posibilidad de que

los usuarios accedieran a la información relacionada con los documentos
electrónicos que estaban visualizando. Tras desarrollar su sistema, Tim Beners
y el ingeniero Robert Cailliay presentaron la propuesta a la llamada World
Wide Web (W3).

En 1991 se presentó el documento oficial bajo el nombre de “HTML

Tags”, se hicieron varios intentos para conseguir que HTML fuera un estándar,
en 1993 se presentó ante la IETF ( Internet Engineering Task Force), el
lenguaje HTML reformado con algunas etiquetas nuevas para imágenes, tablas
y formularios.

Pero no se llegaría a considerar como un estándar hasta 1995, cuando IETF

publico el 22 de septiembre el primer estándar HTML, al que se le llamo
HTML 2.0. A partir de 1996 el organismo W3C se hizo cargo de este estándar y
en 1997 salió una nueva versión llamada HTML 3.2 que incorporaba applets de
java y texto que fluía alrededor de las imágenes.

El 24 de diciembre de 1999 se denominó una nueva versión que fue llamada

HTML 4.01, esta no incluía ninguna novedad significativa

Características

Tim Berners-Lee enfocaba que la web era un sistema que presentaba las
siguientes características:

 Hipermedial: se puede manejar información de cualquier parte del

mundo y navegar a través de ella.
 Distribuido: se trata de un sistema compuesto por miles de servidores
localizados en cientos de ciudades del mundo interconectados entre sí.

 Heterogéneo: La web mantiene una estructura Cliente-Servidor, esta

arquitectura la profundizaremos más adelante, de forma que los servidores o
proveedores de información atienden las peticiones de los clientes o los
navegadores que son manejados por el usuario final. Este software cliente tiene
la peculiaridad de adaptarse con otros protocolos o servicios, por lo que es
necesario solo un programa para utilizar la red.

 Colaborativo: cualquier persona de cualquier parte del mundo puede

agregar información a la web para luego poder ser consultada por el resto de
los usuarios.

Conceptos básicos.

W3C detuvo la estandarización de HTML para centrarse en un nuevo

estándar llamado XHTML. Por ese motivo, Apple, Mozilla y Opera crearon una
nueva asociación WHATWG (Web Hypertext Application Technology Working
Group) que se centra en el desarrollo del futuro estándar HTML5.0 cuyo
borrador se presentó en 2008. W3C decidió retomar la actividad de
estandarización de HTML y de forma paralela continuar con el nuevo proyecto
de XHTML.

La primera versión se publicó en 2000, XHTML 1.0, que es una adaptación de

HTML 4.01 a XML. Se han publicado dos borradores nuevos, la última, XHTML
2.0 que dicen que supondrá un cambio muy importante respecto a las
anteriores versiones.

Se pueden consultar las especificaciones de los estándares HTML 4.01 y

HTML 1.0 en las siguientes páginas Web:

 http://www.w3.org/TR/html401/

 http://www.w3.org/TR/xhtml1/
 Enlaces
 Los enlaces se utilizan para enlazar varios recursos. Aunque también se
pueden enlazar imágenes, documentos y archivos. El enlace comienza en
un recurso y apunta a otro recurso, a cada uno de los extremos se les
llama “anclas”.
 URL es el acrónimo de Uniform Resource Locator, hace referencia al
identificador único de cada recurso disponible en Internet. Las URL son
esenciales para crear los enlaces, pero también se utilizan en otros
elementos HTML como imágenes y formularios.
 El URL es la cadena de caracteres con la cual se asigna una dirección
única y distinta a cada uno de los recursos de información que existen en
Internet. Existe una URL único para cada web y cada una de sus
páginas, de cada uno de los documentos de la WWW,
 Por ejemplo: http://es.Wikipedia.org/ es un URL
 Algunos ejemplos de tipos de URL son:
 

Las partes que componen una URL pueden ser hasta cinco, pero
normalmente solo se utilizan las dos o tres primeras:

 Protocolo (http://): será el mecanismo que debe utilizar el navegador

para acceder a ese recurso.

 Servidor (www.google.com): el nombre del servidor al que se quiere

acceder.

 Ruta (/partes/parte1.html): camino que se sigue para acceder al

recurso.

 Consulta ( ?page=5): información adicional necesaria para localizar el

recurso. Comienza siempre por “?” y contiene palabras separadas por = o por
&.

 Sección (#42): permite que el navegador se posicione en una sección

de la página Web.

Tendremos que tener especial cuidado si nuestra ruta tiene caracteres

especiales ya que como dijimos en el apartado anterior deberán ser codificados
para no tener problemas.

La arquitectura cliente/servidor se compone de dos actores principales:

 Cliente: se tratará de un programa ejecutable el cual participará

activamente en el establecimiento de las conexiones. Su función será enviar
una petición al servidor y este esperará una respuesta. Tendrá un tiempo finito
una que vez que son servidas sus solicitudes, termina su trabajo.

 Servidor: se trata de un programa que aceptará la petición desde la

red, realiza el servicio y devuelve el resultado al cliente. Se puede ejecutar en
cualquier sistema donde exista TCP/IP(explicado más adelante) y junto con
otros programas de aplicación. El servidor comenzará su ejecución antes de
comenzar la interacción con el cliente.

Las características que presenta esta arquitectura son las siguientes:

 Esta arquitectura se trata de una combinación de un cliente que trata de

comunicarse con un usuario, y un servidor que interactúa con los recursos
compartidos. El proceso cliente proporciona la interfaz entre el usuario y el
resto del sistema. El proceso del servidor se comporta como un software que
controla los recursos compartidos tales como bases de datos entre otros.

 El cliente y el servidor van a tener distintos requerimientos en cuanto a

sus recursos como la memoria, la velocidad o la capacidad del disco.

 Existe una relación de muchos a uno, estableciendo que un servidor

puede dar servicio a muchos clientes, regulando el acceso a recursos
compartidos.

 La relación que mantienen clientes y servidores es la del intercambio de

mensajes entre ambos. Siendo el mensaje el medio para petición y envío de
solicitudes de servicio.

 La escalabilidad tanto horizontal como vertical es aplicable a cualquier

arquitectura Cliente/Servidor. Teniendo que la escalabilidad
horizontal permite la opción de agregar más estaciones de trabajo sin afectar
el rendimiento y la escalabilidad vertical permite mejorar las características
del servidor o agregar múltiples servidores.

Esta arquitectura presenta una serie de ventajas y desventajas, a

continuación presentaremos las ventajas que muestra:

 Permite la posibilidad de utilizar máquinas más baratas que las

requeridas por una solución centralizada, basada en sistemas grandes. Además
que permite incorporación de hardware y software de varios fabricantes,
reduciendo así sus costos y así favoreciendo la flexibilidad de implantación.

 Facilita la integración entre distintos sistemas y comparte información de

forma sencilla.

 Es más rápido el mantenimiento y el desarrollo de sus aplicaciones, ya

que permite el uso de herramientas existentes y externas.

Pero también presenta una serie de desventajas:

 Su mantenimiento es más complejo ya que implica interacción con
distintas zonas del hardware y software.

 Cuenta con escasas herramientas para la administración.

 El desempeño es otro aspecto a tener en cuenta, problemas de esta

índole pueden presentarse por congestión de la red, difícil tráfico de datos, etc.

Protocolos HTTP y HTTPS. HTTP y MIME

PROTOCOLO HTTP

El Protocolo de transferencia de hipertexto (en inglés: Hypertext Transfer

Protocol o HTTP) es el protocolo que nos permite realizar las transferencias de
información en la Web mediante comunicación. El protocolo sigue la sintaxis de
petición-respuesta donde intervienen el cliente y el servidor.

Ejemplo de una transacción:

1. Abrimos una conexión por el puerto 80 con el protocolo TCP. El puerto

80 es el predefinido para HTTP.
2. Enviamos un mensaje del siguiente estilo:

Ejemplo de mensaje que se envía al servidor para la comunicación del protocolo HTTP

La respuesta que llega al cliente del servidor está construida por encabezados
seguidos del recurso solicitado:
 Ejemplo del mensaje de respuesta del servidor en una comunicación del protocolo HTTP

MÉTODOS DE PETICIÓN HTTP

HTTP define un conjunto de métodos de petición para indicar la acción que

se desea realizar para un recurso determinado.

 GET: El método GET solicita una representación de un recurso

específico. Las peticiones que usan el método GET sólo deben recuperar datos.

 HEAD: El método HEAD pide una respuesta idéntica a la de una

petición GET, pero sin el cuerpo de la respuesta.

 POST: El método POST se utiliza para enviar una entidad a un recurso

en específico, causando a menudo un cambio en el estado o efectos
secundarios en el servidor.

 PUT: El modo PUT reemplaza todas las representaciones actuales del

recurso de destino con la carga útil de la petición.

 DELETE: El método DELETE borra un recurso específico.

 CONNECT: El método CONNECT establece un túnel hacia el servidor

identificado por el recurso.

 OPTIONS: El método OPTIONS es utilizado para describir las opciones

de comunicación para el recurso de destino.

 TRACE: El método TRACE realiza una prueba de bucle de retorno de

mensaje a lo largo de la ruta al recurso de destino.
 PATCH: El método PATCH es utilizado para aplicar modificaciones
parciales a un recurso.
1. CÓDIGOS DE RESPUESTA
 Códigos con formato 1xx: Respuestas informativas. Informan al cliente
de algunas acciones que se van a realizar.

 Códigos con formato 2xx: Respuestas correctas. Indican que la petición

del cliente se ha recibido, procesado y respondido correctamente.

 Códigos con formato 3xx: Indican al cliente que debe realizar alguna

acción adicional para completar la petición.

 Códigos con formato 4xx: Indican que se ha producido un error, donde

el responsable es el cliente.

 Códigos con formato 5xx: Indican que se ha producido un error, donde

el responsable es el servidor.

2. CÓDIGOS DE RESPUESTA 1XX

 100 (Continue), el cliente puede seguir realizando su petición.

 101 (Switching Protocols), el servidor acepta la petición de cambio de

protocolo enviada por el cliente.

 102 (Processing (WebDAV)), el servidor está procesando la petición del

navegador pero todavía no ha terminado (esto evita que el navegador piense
que la petición se ha perdido cuando no recibe ninguna respuesta).

 103 (Checkpoint), se reanuda la petición POST o PUT que fue

interrumpida previamente.

CÓDIGOS DE RESPUESTA 2XX

 200 (Ok), la petición del cliente ha sido finalizada con éxito.

 201 (Created), la petición del cliente ha finalizado con éxito y por ello,

se ha creado un recurso nuevo.

 202 (Accepted), se está procesando la petición del cliente que se ha

aceptado, por lo que todavía no hay una respuesta.

 203 (Non-Authoriative Information), la petición ha finalizado con éxito

pero el contenido de dicha petición se ha obtenido de un servidor distinto al que
se le ha enviado la petición.

 204 (No Content), la petición ha finalizado con éxito pero no tiene

ningún contenido la respuesta.

 205 (Reset Content), la petición ha finalizado, pero su respuesta no

tiene contenidos y además, indica al cliente que recargue la vista a su estado
original.
 206 (Partial Content), la respuesta de esta petición sólo tiene parte de
los contenidos, tal y como lo solicitó el propio cliente (se utiliza por ejemplo
cuando se descarga un archivo muy grande en varias partes para acelerar la
descarga).

 207 (Multi-Status (WebDAV)), la respuesta consiste en un archivo XML

que contiene en su interior varias respuestas diferentes (el número depende de
las peticiones realizadas previamente por el cliente).

 208 (Already Reported (WebDAV)), el listado de elementos DAV ya se

notificó previamente, por lo que no se van a volver a listar.

CÓDIGOS DE RESPUESTA 3XX

 300 (Multiple Choices), existe más de una variante para el recurso

solicitado por el cliente (por ejemplo, si la petición se corresponde con más de
un archivo).

 301 (Moved Permanently), el recurso solicitado por el cliente se

encuentra en otro lugar y este cambio es permanente. El cliente es redirigido
automáticamente a la nueva localización de ese recurso (este código es muy
importante para tareas relacionadas con el SEO de los sitios web).

 302 (Moved Temporarily), el recurso solicitado por el cliente se

encuentra en otro lugar, aunque sólo por tiempo limitado. El cliente es
redirigido automáticamente a la nueva localización de ese recurso.

 303 (See Other), el recurso solicitado por el cliente se encuentra en otro

lugar. El servidor no redirige automáticamente al cliente, pero le indica la nueva
URI en la que se puede obtener el recurso.

 304 (Not Modified), cuando el cliente pregunta si un recurso ha

cambiado desde la última vez que se solicitó, el servidor responde con este
código cuando el recurso no ha cambiado.

 305 (Use Proxy), el recurso solicitado por el cliente debe obtenerse a

través del proxy cuya dirección se indica en la cabecera Location de esta misma
respuesta.

 306 (Switch Proxy), este código se utilizaba en las versiones antiguas de

HTTP pero ya no se usa (aunque está reservado para usos futuros).

 307 (Temporary Redirect), el recurso solicitado por el cliente se puede

obtener en otro lugar, pero sólo para esta petición. Las próximas peticiones
pueden seguir utilizando la localización original del recurso.
 308 (Permanent Redirect), el recurso solicitado por el cliente se
encuentra en otro lugar y este cambio es permanente. A diferencia del código
301, no se permite cambiar el método HTTP para la nueva petición (así por
ejemplo, si envías un formulario a un recurso que ha cambiado de lugar, todo
seguirá funcionando bien).

CÓDIGOS DE RESPUESTA 4XX

 400 (Bad Request), el servidor no es capaz de entender la petición del

cliente porque su sintaxis no es correcta.

 401 (Unauthorized), el recurso solicitado por el cliente requiere de

autenticación. La respuesta incluye una cabecera de tipo WWW-
Authenticate para que el cliente pueda iniciar el proceso de autenticación.

 402 (Payment Required), este código está reservado para usos futuros.

 403 (Forbidden), la petición del cliente es correcta, pero el servidor no

puede responder con el recurso solicitado porque se ha denegado el acceso.

 404 (Not Found), el servidor no puede encontrar el recurso solicitado

por el cliente y no es posible determinar si esta ausencia es temporal o
permanente.

 405 (Method Not Allowed), el cliente ha utilizado un método

(GET, POST, etc.) no permitido por el servidor para obtener ese recurso.

 406 (Not Acceptable), el recurso solicitado tiene un formato que en

teoría no es aceptable por el cliente, según los valores que ha indicado en la
cabecera Accept de la petición.

 407 (Proxy Authentication Required), es muy similar al código 401, pero

en este caso, el cliente debe autenticarse primero con un proxy.

 408 (Request Timeout), el cliente ha tardado demasiado tiempo en

realizar su petición y el servidor ya no espera esa petición. No obstante, el
cliente puede realizar nuevas peticiones cuando quiera.

 409 (Conflict), la petición del cliente no se ha podido completar porque

se ha producido un conflicto con el recurso solicitado. El caso más habitual es el
de las peticiones de tipo PUT que intentan modificar un recurso que a su vez ya
ha sido modificado por otro lado.

 410 (Gone), no es posible encontrar el recurso solicitado por el cliente y

esta ausencia se considera permanente. Si existe alguna posibilidad de que el
recurso vuelva a estar disponible, se debe utilizar el código 404.
 411 (Length Required), el servidor rechaza la petición del cliente porque
no incluye la cabecera Content-Length adecuada.

 412 (Precondition Failed), el servidor no es capaz de cumplir con

algunas de las condiciones impuestas por el cliente en su petición.

 413 (Request Entity Too Large), la petición del cliente es demasiado

grande y por ese motivo el servidor no la procesa.

 414 (Request-URI Too Long), la URI de la petición del cliente es

demasiado grande y por ese motivo el servidor no la procesa (esta condición se
produce en muy raras ocasiones y casi siempre porque el cliente envía
como GET una petición que debería ser POST).

 415 (Unsupported Media Type), la petición del cliente tiene un formato

que no entiende el servidor y por eso no se procesa.

 416 (Requested Range Not Satisfiable), el cliente ha solicitado una

porción inexistente de un recurso. Este error se produce cuando el cliente
descarga por partes un archivo muy grande y calcula mal el tamaño de algún
trozo.

 417 (Expectation Failed), la petición del cliente no se procesa porque el

servidor no es capaz de cumplir con los requerimientos de la
cabecera Expect  de la petición.

 422 (Unprocessable Entity (WebDAV)), la petición del cliente tiene el

formato correcto, pero sus contenidos tienen algún error semántico que impide
al servidor responder.

 423 (Locked (WebDAV)), el recurso solicitado por el cliente no se puede

entregar porque está bloqueado.

 424 (Failed Dependency (WebDAV)), la petición del cliente ha fallado

debido al error de alguna petición anterior (por ejemplo, una petición con el
método PROPPATCH).

 426 (Upgrade Required), el cliente debe cambiar a un protocolo

diferente para realizar las peticiones (por ejemplo TLS/1.0).

 428 (Precondition Required), el servidor requiere que la petición del

cliente sea condicional (este tipo de peticiones evitan los problemas producidos
al modificar con PUT un recurso que ha sido modificado por otra parte).

 429 (Too Many Requests), el cliente ha realizado demasiadas peticiones

en un determinado período de tiempo (se utiliza sobre todo para forzar los
límites de consumo de recursos de las APIs).
 431 (Request Header Fileds Too Large), el servidor no puede procesar la
petición porque una de las cabeceras de la petición es demasiado grande. Este
error también se produce cuando la suma del tamaño de todas las peticiones es
demasiado grande.

 500 (Internal Server Error)

la solicitud del cliente no se ha podido completar porque se ha producido un

error inesperado en el servidor.

 501 (Not Implemented)

el servidor no soporta alguna funcionalidad necesaria para responder a la

solicitud del cliente (como, por ejemplo, el método utilizado para la petición).

 502 (Bad Gateway)

el servidor está actuando de proxy o gateway y ha recibido una respuesta

inválida del otro servidor, por lo que no puede responder adecuadamente a la
petición del cliente.

 503 (Service Unavailable)

el servidor no puede responder a la petición del cliente porque está

congestionado o está realizando tareas de mantenimiento.

 504 (Gateway Timeout)

el servidor está actuando de proxy o gateway y no ha recibido a tiempo una
respuesta del otro servidor, por lo que no puede responder adecuadamente a la
petición del cliente.

 505 (HTTP Version Not Supported)

el servidor no soporta o no quiere soportar la versión del protocolo HTTP

utilizada en la petición del cliente.

 506 (Variant Also Negotiates)

el servidor ha detectado una referencia circular al procesar la parte de la

negociación del contenido de la petición.

 507 (Insufficient Storage (WebDAV))

el servidor no puede crear o modificar el recurso solicitado porque no hay
suficiente espacio de almacenamiento libre.

 508 (Loop Detected (WebDAV))

la petición no se puede procesar porque el servidor ha encontrado un bucle

infinito al intentar procesarla.

 510 (Not Extended)

la petición del cliente debe añadir más extensiones para que el servidor pueda
procesarla.

 511 (Network Authentication Required)

el cliente debe autenticarse para poder realizar peticiones (se utiliza, por
ejemplo, con los portales cautivos que te obligan a autenticarte antes de
empezar a navegar).

HTTPS

Sus siglas vienen de Hypertext Transfer Protocol Secure o lo que es lo mismo

Protocolo de Transferencia de Hipertexto Seguro, la difernecia frente a HTTP es
que HTTPS tranmite los datos de forma cifrada. Además este trabaja bajo el
puerto 443.
 http vs https

MIME

Se trata de una forma estandarizada de indicar la naturaleza y formato de un

documento. Muchos navegadores utilizan este tipo para determinar como
procesará un documento, por lo que es importante que los servidores se
encuentren bien configurados para adjuntar este tipo al encabezado.

Su estructura general es tipo/subtipo donde tipo representa la categoria y

puede ser de tipo discreto o multiparte y subtipo es específico para cada
tipo.

Lenguajes markup.

A la hora de hablar de un lenguaje de marcado nos referirmos a aquel

lenguaje encargado de dar la forma de codificar un documento o una web. Es
decir, se trata de una forma de definir la estrucutra del texto o su presentación
a través de etiquetas o marcas.

Podemos encontrar entre los más conocidos:

 HTML
 XML

 LATEX

 JSON

 HTML (HyperText Markup Language o, en español, lenguaje de

marcas de hipertexto), es un lenguaje marcado para la elaboración de
páginas web. Se trata del elemento de construcción más básico de una
página web, utilizado para crear y representar visualmente dicha página.
Determina el contenido de la página, aunque no su funcionalidad. Este
lenguaje le añade “marcado” a un texto estándar.
 Hipertexto se refiere a enlaces que conectan una página con otra. HTML
soporta imágenes y otro tipo de elementos multimedia. Gracias a este
lenguaje, se pueden realizar sitios web estáticos y dinámicos, ya que es
el lenguaje que describe la estructura y el contenido semántico de un
documento web.
 HTML5 es la quinta versión del lenguaje de marcado para la elaboración
de páginas web. Esta versión está todavía en desarrollo, aunque algunas
empresas ya lo están usando para crear sus páginas Web.
 HTML5 incluye una serie de elementos y atributos nuevos que muestran
el uso convencional de los sitios web modernos. Algunos elementos
tienen las mismas características técnicamente hablando que las
etiquetas

Elementos estructurales de HTML5

Nos adentraremos en el mundo del lenguaje HTML y de cómo podemos

utilizar sus posibilidades para la creación de páginas web.

A continuación, un breve resumen de lo que veremos a lo largo de la

formación:

Te damos la bienvenida a este curso en HTML 5 Y CSS 3. A lo largo de esta

formación obtendremos los conocimientos sobre las ventajas comparativas que
aportan los estándares HTML5 y CSS3 para la simplificación de la construcción de
páginas web.

Trabajaremos con esquemas y formularios de html5, dibujaremos con el elemento

canvas y una introducción a CSS3.

Estudiaremos los fundamentos de programación, una introducción a javascript y la

manipulación del DOM.

Comencemos conociendo los elementos estructurales de HTML5.

Herramientas necesarias
 Antes de empezar a explicar cualquier definición, vamos a empezar por un
tema básico y esencial. ¿Qué necesitamos para desarrollar nuestra Web?

Para el desarrollo Web, es imprescindible tener un editor de textos sin

formato y además tener diferentes navegadores para poder ver cómo queda
nuestra Web en cada uno de ellos.

Para poder crear o modificar un documento HTML, necesitamos un editor

de texto sin formato. Si nuestro sistema operativo es Windows, podemos usar
el Bloc de notas, Wordpad, EmEditor, UltraEdit, Notepad++, etc. Si estamos en
sistemas tipo Linux podemos usar Gedit, Kedit, Kate o incluso Vi.

Editores de Texto

Con bloc de notas podemos también editar CSS, pero tenemos el defecto de

que con este, no vamos a poder identificar los elementos y nos será difícil
poder cambiar código si no podemos identificar cual se desea cambiar.

Bloc de notas

Como vemos no es muy sencillo identificar las etiquetas, este documento no

contiene mucho contenido, por lo tanto no cuesta tanto identificar cada cosa,
pero cuando tenemos mucho contenido nos costara mucho entender el código.
Con WORDPAD tenemos el mismo problema. Por eso usamos programas como
por ejemplo notepad++, NetBeans.
 Herramientas Necesarias

NetBeans es un programa que ayuda mucho a la hora de tener todos los

documentos estructurados y ayuda a encontrar documentos fácilmente, además
es un programa totalmente gratuito. Aquí dejamos el ejemplo de cómo se vería
el mismo documento con este programa.

Programa NetBeans

Estos son ejemplos de algunos programas que se pueden usar, hay, más
programas aunque algunos no son gratuitos, nosotros usaremos el
programa Notepad++.
 Herramientas Necesarias

Aquí están algunas URL de donde nos podemos descargar algunos de estos
programas para la edición de código HTML. (Los dos últimos no son gratuitos)

 http://notepad-plus-plus.org/

 http://netbeans.org/downloads/index.html

 http://www.ultraedit.com/downloads/ultraedit_download.html

 http://www.emeditor.com/download-trial.htm

 http://www.adobe.com/es/downloads/

Instalación de Notepad++

Notepad++ es un programa totalmente gratuito y nos que ayuda mediante

colores a identificar las etiquetas, podemos descargárnoslo de la página oficial
http://notepad-plus-plus.org/, pinchamos en download y nos descargamos la
versión que ponga Installer, se nos abrirá una ventana como la siguiente:

Ventana descarga fichero

 A continuación le damos a guardar archivo, nos pedirá la ruta donde
deseamos guardar este fichero. Cuando este descargado nos aparecerá en
descargas un archivo con un icono de un camaleón. Ejecutamos el programa.

Ventana progreso descarga

Ahora nos aparecerá una ventana, en Windows, donde nos mostrará una
advertencia diciéndonos que parece un programa sospechoso ya que no se
comprobó el fabricante, pinchamos sobre ejecutar.

Ventana advertencia de seguridad

Nos pedirá a continuación que seleccionemos el lenguaje que queramos que

tenga nuestro programa. Y nos aparecerá un mensaje de Bienvenida al
programa.

Ventana selección idioma

 Ventana inicio instalación

Aceptamos el acuerdo de licencia y en la siguiente ventana nos pedirá donde

deseamos guardar el programa, nosotros elegiremos la ruta “C:\Archivos de
programa\Notepad++”.

Ventana acuerdo de licencia

Ventana selección ruta instalación

Ahora nos dará la opción de elegir que componentes deseamos instalar con

el Notepad++, y en la próxima ventana, nos dará varias opciones, nosotros
solo vamos a elegir que nos ponga un icono de este programa en el escritorio,
para encontrarlo fácilmente. Cuando ya la pestaña, hacemos clic con el ratón
sobre instalar, entonces aparecerá una barrita que se irá rellenando mientras
se instala el programa y por ultimo al terminar de instalar nos aparecerá una
ventana donde nos avisa que ya se ha instalado y que si queremos ejecutar
Notepad++.

Ventana instalación personalizada

Ventana opciones instalación

 Barra progreso de instalación

Ventana final de instalación

Lo diremos bastantes veces a lo largo del tema, es imprescindible que

tengamos distintos navegadores instalados, vamos a necesitar ver nuestra
Web en cada uno de ellos, ya que cada uno interpreta el código de diferente
manera.

Por defecto si tenemos Windows tendremos instalado el navegador Internet

Explorer, este navegador a veces no muestra las cosas como queremos, ya
que está bastante anticuado a la hora de interpretar código.

Firefox

Lo primero que vamos a hacer es abrir Internet Explorer y buscar en Google

por ejemplo el navegador Firefox.

Firefox

Una vez hecho esto, abrimos la página principal de Firefox, como vemos
nos aparece un cuadro verde que poner descarga gratuita hacemos clic sobre
el.
 Herramientas Necesarias

A continuación nos aparecerá una página donde nos avisará que en pocos
segundos se nos abrirá una ventana donde se nos pondrá a descargar el
navegador, si no es así tendremos que hacer clic sobre “haz clic aquí”.

Herramientas Necesarias

Una vez se nos abra el la descarga de Firefox, le daremos a ejecutar,

primero se nos pondrá a descargar el programa y posteriormente nos aparecerá
la siguiente ventana. Haremos clic para empezar la instalación del programa.
 Ventana de ejecución

Cuando empiece a instalarse nos aparecerá una ventana dándonos la

bienvenida a la instalación del Firefox.

Ventana de instalación

El siguiente paso de la instalación es como queremos que se instale si la

instalación estándar o la personalizada. Nosotros elegiremos la opción
estándar.
 Ventana de instalación

Ahora nos pedirá en que directorio o ubicación queremos que se instale el

programa. Una vez elegido pulsamos instalar. Por defecto se nos instalará en:

“C:\Archivos de programa \Mozilla Firefox”

 Ventana de instalación

Cuando le hayamos dado empezará a instalarse y cuando termine nos

aparecerá la siguiente ventana. Y se nos ejecutará Firefox.

Ventana de instalación

Mocilla Firefox

Google Chrome

A continuación vamos a instalar Google Chrome, hacemos el mismo

procedimiento que antes, buscamos en Google, “Google Chrome”.
 Google Chrome

Pinchamos en la página para descargar Google, nos aparecerá la siguiente

página, haremos clic sobre Descarga Google Chrome.

Google Chrome

Una vez hecho esto nos aparecerá una ventana donde nos pondrá
las políticas de privacidad, simplemente con pinchar en “Aceptar e Instalar”
se nos abrirá una ventana donde tendremos que indicar dónde vamos a
guardar el ejecutable para la instalación.
 Instalar Google Chrome

Una vez que descargado haremos doble clic sobre el, nos aparecerá la
siguiente ventana donde tendremos que pulsar ejecutar.

Ventana de ejecución

Una vez pulsado empezará la instalación de nuestro Google. Una vez que
termine se nos abrirá la ventana del navegador de Google.
 Ventana de instalación

Google Chrome

Safari

Haremos el mismo proceso que las veces anteriores, ahora toca instalar
Safari, como hicimos antes lo primero es buscar la página oficial de este.

Buscar Safari

Ahora hacemos clic sobre la página en la parte descargas, nos aparecer algo
parecido a esto, el siguiente paso es hacer clic sobre el cuadro azul que
pone descargar ahora.
 Descargar Safari

Se nos abrirá una ventana donde será posible guardar el archivo de

instalación, lo guardaremos y una vez descargado lo ejecutaremos.

Ventana de ejecución

A continuación empieza nuestra instalación de Safari, al principio nos viene el

típico mensaje de bienvenida a la instalación del programa donde viene un
pequeño resumen de lo que puede hacer con él.
 Ventana de instalación

El siguiente paso es aceptar la licencia del programa.

Licencia del programa

 En el siguiente paso nos pedirá si queremos crear un acceso directo en el
escritorio, hacer que Safari sea el navegador por defecto para todos los
usuarios e instalar la herramienta Bonjour para Windows.

Opciones de instalación

Ahora nos pide el directorio donde queremos que se instale el programa, por

defecto se encontrará en “C:\Archivos de progrma\Safari\”.
 Destino de la instalación

Una vez especificado esto empezará a instalar el navegador, cuando termine

de instalar nos mostrar un mensaje de enhorabuena por la instalación.

Instalador de Safari
 Mensaje de Enhorabuena

Este será el aspecto de nuestro navegador Safari, como vemos es sencillo y

bastante parecido a los demás navegadores.

Aspecto de Safari
 Opera

En último lugar vamos a instalar el último de nuestros navegadores, Opera,

para ello haremos lo mismo, buscaremos opera en Google y pulsaremos en la
página para descargarlo.

Descargar Opera

Se nos abrirá la siguiente página en donde podremos instalar el navegador

opera para PCS y también el navegador opera para teléfonos móviles.

Opera

Nosotros claro está vamos a elegir el navegador para ordenadores, al hacer

clic nos preguntará donde deseamos guardar el archivo de instalación y una vez
descargado nos aparecerá la ventana de ejecutar el programa.
 Ventana de ejecución

Una vez le demos a ejecutar el programa, nos aparecerá la siguiente ventana

de Opera, pulsaremos sobre Aceptar y actualizar y cuando termine la
instalación, nos abrirá el navegador directamente.

Instalador de Opera
 Navegador Opera

Una vez hecho esto ya podemos empezar a aprender HTML, ya tenemos las
herramientas necesarias para empezar a crear nuestras páginas Web.

Hay más navegadores, pero los navegadores principales son estos 5,

contando con Internet Explorer, por lo que iremos viendo las cosas sobre estos
5.

Trabajando Con Esquemas HTML5

Aunque podemos crear cualquier página Web combinando todas las etiquetas
vistas en estos temas anteriores, no es posible hacer que las páginas
muestren estructuras complejas.

La mayoría de páginas disponen de varias columnas de contenidos y otro tipo

de divisiones. Solo con HTML no podemos crear estructuras muy complejas,
para ello es necesario utilizar hojas de estilo, CSS.

Pero CSS necesita la ayuda de HTML para poder estructurar la Web, con
ayuda de zonas, cada zona compone nuestra página, podemos estructurarla
por: zona de cabecera, zona de contenidos, zona lateral de menú y pié de
página. Hay muchas maneras de hacer las diferentes divisiones.

Para poder agruparlos usaremos la etiqueta <div>, esta etiqueta viene de

la palabra “división”, pero casi todos los diseñadores usan el término “capas”
para referirse a estas divisiones.
 Muchas páginas Web usan decenas de <div>, los atributos más usados para
esta etiqueta son id (para identificarlo de forma única) y class (para aplicar a la
capa el estilo CSS).

La mayoría de las Web usan la siguiente estructura para identificar sus

divisiones:

 Contenedor (wrapper) se usa para agrupar los contenidos de la

página.

 Cabecera (header) incluye todos los elementos de la parte superior

(logotipo, imagen o banner, cuadro superior de búsqueda, etc.)

 Contenido (content) engloba el contenido principal del sitio (noticias,

artículos, productos, etc.) Esta parte varía dependiendo del tipo de Web que
sea.

 Menú (menu): agrupa todos los elementos del menú.

 Pie (footer) incluye todos los elementos de la parte inferior (aviso de

copyright, política de privacidad, términos de uso, etc.)

 Lateral (sidebar): agrupa los elementos de las columnas laterales y

secundarias de la página.
 Aquí tenemos dos ejemplos de estructuras de una página Web, por ahora
no se va a profundizar mucho en este concepto, ya se verá más a fondo cuando
lleguemos al tema de CSS.

Abrimos nuestro editor de textos, Notepad++, por defecto nos abre

directamente ya una nueva hoja para insertar código. Lo único que tendremos
que hacer es escribir nuestro código.

Una vez escrito nuestro código lo único que tendremos que hacer es irnos al
menú principal y hacer clic sobre Archivo > Guardar Como… y se nos abrirá
la siguiente ventana para que elijamos donde deseamos guardar nuestro
documento.

Guardar como

Como vemos en la imagen, nos pide el nombre y el tipo de fichero, el

nombre recomiendo que no tenga espacios ya que si después necesitamos
hacer referencia a él, no tendremos problemas y después en el tipo tendremos
que seleccionar Hyper Text Marckup Language (.html).

Hyper Text Marckup Language (.html)

Si queremos ver como se vería el contenido de nuestro fichero, solo con ir a

la ruta donde hemos guardado el archivo y hacer clic con el botón derecho
sobre el archivo, abrir con y seleccionar nuestro navegador, podremos ver
nuestro fichero.
 Abrir con - Firefox

Características Básicas

Lenguaje de etiquetas

Uno de los retos cuando se realizó este lenguaje fue como se iba a almacenar
la información. Con los primeros archivos era fácil porque solo contenían
texto sin formato, se codificaban las letras del alfabeto y se transformaban en
números. De esta forma se utilizaba una tabla de conversión.

El proceso de transformación de caracteres a secuencias se

denomina codificación de caracteres y cada tabla que se define para realizar
la transformación se conoce como página de código. Una de las codificaciones
más conocida es la codificación ASCII.

Una vez resuelto el problema de almacenamiento las preguntas eran las

siguientes ¿cómo almacenamos ahora el texto en negrita? ¿Y en color rojo? ¿Y
otro texto en azul y cursiva?

Ya no se podía aplicar la conversión que se utilizaba para texto sin formato,

ya que existen infinitas posibilidades de estilos en un texto. Una solución
era almacenar una zona reservada para donde comienza y donde termina cada
formato.

La solución que realmente se utiliza para guardar información con formato es

guardar los contenidos sobre el formato de estos. Por ejemplo:

Introducción HTML

Este proceso para indicar las partes en las que se compone el documento

se denomina marcado, cada palabra que se emplea para marcar inicio y fin se
define como etiqueta.

Estas etiquetas se abren con el carácter < nombre de la etiqueta sin

espacios en blanco y se cierra con >. Las etiquetas de apertura serían <p> y
las de cierre serian igual pero añadiendo el carácter /, </p>.

A HTML se le denomina lenguaje de etiquetas o lenguaje de marcado. La

ventaja de estos lenguajes es que son sencillos de leer y escribir por parte de
personas y de los sistemas electrónicos.
 Estructura básica de HTML

Las páginas HTML se dividen en dos partes: la cabecera (head), el cuerpo

(body).

Cabecera y cuerpo

 <html> </html>: indica el comienzo y el final del documento. Todo lo

que este fuera de esta etiqueta será ignorado. (con una excepción que se ve
más adelante).

 <head></head>: delimita la cabecera del documento. Esta contiene

información de este, como título e idioma de la página. Los contenidos de esta
etiqueta no son visibles por el usuario, con la excepción de la
etiqueta <title> que se mostrará como título de esta ventana.

 <body></body>: delimita el cuerpo del documento. Este contiene

todos los contenidos que se muestran al usuario (párrafos, imágenes, tablas).

La estructura final quedaría de la siguiente manera:

Estructura final

En nuestro navegador lo veremos de la siguiente manera:

 Vista en el navegador

Etiquetas y atributos

HTML define 91 etiquetas que se pueden utilizar para marcar los diferentes

componentes de la página. Algunas etiquetas ya se consideran obsoletas como
por ejemplo: applet, basefont, center, dir, font, isindex, menyu, s, strike, u.

A pesar de existir tantas etiquetas, no es suficiente para crear páginas

complejas. Algunos elementos como imágenes y enlaces necesitan más
información adicional. A esa información se le llama atributos.

Un ejemplo de esto sería la etiqueta a, que sirve para indicar los enlaces, si
colocamos solo esa etiqueta no nos llevara a ningún sitio, necesitaremos
ponerle una url con el atributo href para que nos lleve a la dirección que
deseemos.

Etiquetas y atributos

No todos los atributos se pueden utilizar en todas las etiquetas, cada etiqueta
define su propia lista de atributos. Los atributos comunes son los siguientes:
 Atributos básicos: se utilizan prácticamente en todas las etiquetas
HTML.
o id=”texto” : Establece un identificador único a cada elemento
dentro de la página HTML
o class=”texto”: Establece la clase CSS que se aplica a los estilos
del elemento.
o style=”texto” : Establece de forma directa los estilos CSS

o title=”texto”: Establece un título a un elemento.

Elementos HTML

Además de etiquetas y atributos, también existe el término elemento para

referirse a las partes que componen los documentos HTML. Aunque en
ocasiones se habla indistintamente de “elementos” y “etiquetas”, en realidad si
tenemos dos párrafos en un documento HTML, tendríamos dos elementos y
cuatro etiquetas p.

HTML clasifica todos los elementos en dos grupos: elementos en línea

(inline) y elementos de bloque (block). La diferencia entre estos es que el de
bloque siempre empiezan en una nueva línea ocupándola hasta el final y los
elementos de tipo línea ocupan el espacio necesario.

La mayoría de elementos de bloque pueden contener en su

interior elementos en línea y otros elementos de bloque. Por ejemplo:

Elementos HTML

Elementos de bloque (block)

Las principales características de los elementos de bloque son:

 Forman un bloque y ocupan toda la línea colocando al final un salto de

línea

 Toma la anchura que este definida en la página o en su elemento padre

(contenedor).
 Su altura cambia en relación a su contenido.

 Puede contener otros elementos inline y block.

 Se le puede asignar una anchura (width) y una altura (height) utilizando

css.

Estos son los elementos que son por defecto de tipo block:

Elementos tipo Block

Elementos en línea (inline)

Los elementos en línea tienen las siguientes características:

 Se posiciona horizontalmente en línea con el resto de contenido.

 Toma la anchura y altura en relación a su contenido

 Solo puede contener otros elementos en inline

 No se le puede imponer una anchura y altura fijas mediante CSS.

Los siguientes elementos son de tipo inline o en línea:

Elementos Inline

Sintaxis de las etiquetas XHTML

Cuando se creó HTML, el lenguaje era muy permisivo y eso provocaba que el
código HTML quedara muy desordenado, difícil de mantener y poco profesional.
La llegada de XHTML ha provocado algunas restricciones que evitan esos
problemas:

 Las etiquetas se deben cerrar de acuerdo a como se abren:

 Etiquetas XHTML

 Los nombres de las etiquetas y atributos siempre se escriben en

minúsculas:

Etiquetas XHTML

 El valor de los atributos se encierra entre comillas

Etiquetas XHTML

 Los atributos se pueden comprimir

Etiquetas XHTML

 Todas las etiquetas deben cerrarse siempre: en el caso de etiquetas que

no encierren texto se deberá poner <etiqueta/>.

Etiquetas XHTML

Existen también otras restricciones o cambios que se ha de tener en

cuenta:

 Antes de acceder al valor de un atributo se deben eliminar todos los

espacios en blanco innecesarios, salvo para identificar diferentes palabras (solo
un espacio entre palabras).

 El código JavaScript debe encerrarse entre caracteres especiales <!

[CDATA[]]> ( ya hablaremos y más adelante).
 Debemos utilizar el atributo id para identificar de forma única los
elementos.

 Ejercicio práctico

 - Crea un documento HTML que contenga la estructura de las páginas
Web, y que deberá tener un título en la cabecera y texto normal en el
cuerpo sin importar el significado, tan solo crear la estructura base.

Json

JSON (JavaScript Object Notation) se utiliza para el intercambio de

información de manera sencilla. JSON nos permite representar los datos en
array y objetos “Arrays asociativos” en forma de texto. La notación de
objetos con JSON es una característica principal y un mecanismo que está
definido en los fundamentos elementales de JavaScript.

La notación de los arrays, como ya sabemos es un poco abstracta cuando

disponemos de muchos elementos:

Código de programación

Mediante JSON crearemos un array el cual, se indican los valores

separados por comas y entre corchetes. De tal forma que podemos utilizar
la notación de JSON para rescribir el ejemplo anterior.

Código de programación

La notación para los arrays asociativos es lo mismo de abstracta que la de los

normales:

Código de programación
 Aunque se pueden usar la notación de puntos para abreviar un poco su
definición:

Código de programación

Gracias a la notación de JSON, podemos definir los arrays asociativos de

forma menos tediosa y concisa. Veamos cómo podemos reescribir el
ejemplo anterior a la notación JOSN:

Código de programación

Este array se puede dividir en las siguientes partes:

1. Los contenidos del array asociativo se encierran entre llaves ({ y })

2. Los elementos del array se separan mediante una coma (,)
3. La clave y el valor de cada elemento se separan mediante dos puntos
(:)

Si la clave no dispone de espacios en blanco, podemos eliminar las comillas

que cierran el contenido. Pero las comillas son obligatorias cuando las claves
pueden disponer de espacios en blanco:

Código de programación

XML (eXtensible Markup Language) ó lenguaje extensible de etiquetas, no es

un lenguaje de marcado tal cual (como si lo es HTML) sino que es un meta-
lenguaje que nos permite definir lenguajes de marcado para adecuarlos a usos
definidos.

Los elementos que componen este metalenguaje pueden dar información

sobre que contienen y no es necesario que den información sobre su estructura
física ó presentación (en HTML si es necesario).
 XML

XML deriva del lenguaje SGML y ha establecido unas reglas más estrictas

pero más fáciles y coherentes.

XML no solamente se ha creado para aplicarlo en Internet, sino que se

postula como un estándar para intercambiar información estructurada entre
plataformas. Su uso es posible en editores de texto, bases de datos, hojas de
cálculo,...

Realmente, XML es una tecnología muy fácil que se rodea de otras

tecnologías para complementarla y que hacen de ella una herramienta más
grande y útil y con unas posibilidades para la sociedad de la información
enormes.

XML representa una forma distinta y más avanzada de realizar las cosas y su
mayor novedad es la de permitir compartir los datos en todos los niveles y para
todos los soportes y aplicaciones.

Actualmente, XML desempeña un papel muy importante ya que es la

tecnología que permite compartir información de forma fácil, segura y fiable.

Además, permite al programador y el soporte centrarse en las tareas

importantes ya que, por ejemplo, tareas tediosas como validar datos ó recorrer
datos, son realizadas por el propio lenguaje y se especifica en el estandar por lo
que el programador no tiene que tener preocupación por ello.

Podemos comprobar que XML no se encuentra sólo ya que existen muchas

tecnologías alrededor suya para lograr un avance con respecto al tratamiento
de información que es el objetivo general de la informática.

Podemos resumir que, XML, no es un lenguaje, sino varios, no es una

sintaxis, sino varias y no es una manera nueva de trabajar, sino una manera
más refinada que permitirá la comunicación entre aplicaciones sin problemas,
ya que los datos cobran sentido.

XML es muy interesante en Internet y el mundo e-bussiness ya que hay

muchos sistemas distintos que tienen que comunicarse entre ellos y mediante
XML esta comunicación es mucho más sencilla y efectiva.
 Latex

LaTeX es un sistema de preparación de documentos. Con él puedes preparar

manuscritos, artículos de revista, cartas, tesis, presentaciones y cualquier tipo
de documento que quisieras imprimir en papel o mostrar en pantalla.

Su construcción sigue la siguiente estructura:

latex

Teniendo como resultado lo siguiente:

 latexres

CGI. Applet.

CGI

Se trata de un protocolo que proporciona una interfaz entre un servidor de

información y un proceso externo.
 Dicho protocolo tiene como objetivo añadir interacción a los documentos web
que a través del HTML se presentan de forma estática.

A través del siguiente dibujo podemos ver como se realiza dicho protocolo:

Protocolo CGI

A la hora de enviar la información podemos realizarlo a través de dos formas:

 GET: envía la información dentro del URL separando los campos con
signos de interrogación '?' antes de la información

Método GET

 POST: envía la información directamente al servidor, haciéndolo

invisible en el URL
 Método POST

Applets: Normalmente son pequeños programas Java que se ejecutan en un

navegador web en el lado del cliente, que por tanto necesitará tener instalado
el complemento de Java en su navegador para poder ejecutarlo.

La forma que tienen de ejecución es en un contenedor dentro del programa

anfitrión, además debe ser a través de un plugin.

Un ejemplo de un Applet a través del IDE Netbeans es el siguiente:

Ejemplo de Applet

Las cookies son pequeños almacenes de información que como su definición

dice, guarda los datos en el navegador del usuario que son enviados desde un
sitio web. De esta manera la página o sitio puede mantener una referencia del
cliente que la está visitando y realizar procesos con eso.

El desarrollo de aplicaciones Web necesita frecuentemente mantener estado.

Para esto son usadas las cookies, es información que un servidor almacena en
el cliente. Esto da la posibilidad a las aplicaciones Web instituir el concepto
de "sesión", y también nos da la posibilidad de rastrear usuarios ya que las
cookies pueden guardarse por tiempo indeterminado.

Las sesiones son mecanismos para preservar datos a lo largo de un sitio, se

puede guardar información y cambiar de página en página sin perder
información, ya que se guarda en el servidor con un identificador único de
sesión (es único por cliente) y en el navegador del usuario (cliente) se guarda
una cookie con la información de acceso a la sesión (el número de identificación
de sesión).

Cookies

Tipos de cookies

Vamos a realizar una clasificación de las cookies en función de una serie de

categorías:

Según la entidad que las gestione

Tenemos que dependiendo la entidad que gestione el dominio desde donde se

envían las cookies, podemos diferenciar entre:

 Cookie propias: aquellas que se envían al equipo terminal del usuario

desde un dominio y desde el que se presta servicio solicitado por el usuario.

 Cookies de terceros: aquellas que se envían al equipo terminal del

usuario desde un dominio gestionado por otra entidad que trata los datos
obtenidos a través de las cookies.
 Según el plazo de tiempo que permanecen activadas

Según el plazo de tiempo que permanecen activadas en el equipo terminal

podemos diferenciar:

 Cookies de sesión: diseñadas para guardar datos mientras el usuario

accede a una página web.

 Cookies persistentes: la información sigue almacenada en el terminal

y puede ser tratado durante un tiempo definido por el responsable de la cookie.

Según su finalidad

Según la finalidad para la que se trate la información obtenida a través de las

cookies, podemos diferenciar entre:

 Cookies técnicas: aquellas que permiten al usuario navegar a través de

una web y utilizar los distintos servicios que ofrece.

 Cookies de personalización: aquellas que permiten al usuario acceder

al servicio con algunas características de carácter general.

 Cookies de análisis: aquellas que permiten al responsable, llevar un

seguimiento y análisis del comportamiento del usuario del sitio web.

 Cookies publicitarias: aquellas que permiten la gestión de los espacios

publicitarios.

 Cookies de publicidad comportamental: aquellas que permiten la

gestión de los espacios publicitarios que el editor haya incluido en una página
web, aplicación o plataforma desde la que presta el servicio solicitado.

Política de coolies

Se trata de una página necesaria en toda web o blog en la cual se debe

informa de las cookies que van a ser establecidas cuando alguien realiza una
visita a nuestra web.

En la actualidad, las cookies revelan una gran fuente de información sobre

nuestras conductas, gustos, hábitos y afinidades por lo que es comprensible
que el usuario sea consciente de la trascendencia que tienen. Por lo que se
estableció la regulación europea sobre las cookies.

Las cookies, para el responsable de una web, se tratan como un simple

recurso técnico con un valor como mucho estadístico. Pero en otras ocasiones,
tenemos que las cookies suponen una base de conocimiento de cada usuario.

Permiten entonces llegar a una información muy intensa sobre los gustos o
intereses, por lo que es conveniente que los usuarios tengan una protección.
 Regulación Legal

La regulación sobre las cookies y la trazabilidad de la navegación que

aportan, arranca con la Directiva 2009/136/CE que a su vez modificaba la
directiva 2002/58/CE, relativa al tratamiento de datos personales.

Esa directiva fue trasladada a nuestro ordenamiento interno por el apartado

tres del artículo 4 del Real Derecreto-Ley 13/2012, de 30 de marzo, que
modificaba el artículo 22 de la Ley de Servicios de Sociedad de la
Información(LSSI) que es el que nos da en su apartado segundo la
regulación que nos afecta:

Los prestadores de servicios podrán utilizar dispositivos de almacenamiento y

recuperación de datos en equipos terminales de los destinatarios, a condición
de que los mismos hayan dado su consentimiento después de que se les haya
facilitado información clara y completa sobre su utilización, en particular, sobre
los fines del tratamiento de los datos, con arreglo a lo dispuesto en la Ley
Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter
Personal.

Cuando sea técnicamente posible y eficaz, el consentimiento del destinatario

para aceptar el tratamiento de los datos podrá facilitarse mediante el uso de los
parámetros adecuados del navegador o de otras aplicaciones, siempre que
aquél deba proceder a su configuración durante su instalación o actualización
mediante una acción expresa a tal efecto.

Lo anterior no impedirá el posible almacenamiento o acceso de índole técnica

al solo fin de efectuar la transmisión de una comunicación por una red de
comunicaciones electrónicas o, en la medida que resulte estrictamente
necesario, para la prestación de un servicio de la sociedad de la información
expresamente solicitado por el destinatario.

Obligaciones que impone la Ley de Cookies

Respecto de las obligaciones que debe cumplir todo prestador de servicios, el

artículo 22 de la Ley de Servicios de Sociedad de la Información exige que
se informe suficientemente al usuario de que se van a instalar cookies
en su ordenador y que el usuario de su consentimiento a dicha
instalación.

La información debe ser clara y precisa, no es suficiente con cláusulas

genéricas si no que bien al contrario debe determinarse qué cookies y para qué
se usan.

Si queremos que el usuario acepte las condiciones legales de uso de nuestro

sitio y la utilización de cookies, deberemos formularlo en dos casillas diferentes
y no en una sola.

Además de esa información inicial se debe detallar el funcionamiento de las

cookies en nuestro sitio, completando la información resumida que se ha
ofrecido de forma inicial, hasta completar de esta forma una política de cookies
completa.
 Nunca será suficiente con advertir de la mera existencia o uso de cookies si
no que deberá ajustarse al uso que las cookies de nuestro sitio realicen.

Por último, aunque no sea obligatoria, sí es muy recomendable informar al

usuario de qué son las cookies para qué se usan y cómo puede configurar su
navegador para usarlas o no.

Se debe ofrecer al usuario una imagen capaz de crear confianza, ya que va a

ser utilizada mediante la grabación de archivos de seguimiento en su sistema.

Configuración de los principales navegadores

Un navegador o navegador Web es una aplicación que funciona a través

de Internet, interpretando la información de archivos HTML de webs, para que
estos puedan ser leídos mediante enlaces.

Los principales navegadores son los siguientes:

Google Chrome

Es un navegador Web desarrollado por Google y compilado con base en

componentes de código abierto como el motor de renderizado WebKit y su
estructura de desarrollo de aplicaciones (framework), disponible gratuitamente
bajo condiciones de servicio específicas. Cuenta con más de 310 millones de
usuarios y dependiendo de la fuente de medición global, puede ser considerado
el navegador más usado de Internet variando hasta el segundo puesto, algunas
veces logrando la popularidad mundial en la primera posición. Su cuota de
mercado se sitúa aproximadamente entre el 17% y 32% para finales de junio
de 2012 con particular éxito en la mayoría de países de América Latina donde
es el más popular, El nombre del navegador deriva del término usado para el
marco de la interfaz gráfica de usuario («chrome»).

Internet Explorer y derivados

Anteriormente reconocido como Microsoft Internet Explorer, y conocido

comúnmente como IE, es un navegador Web desarrollado por Microsoft para
el sistema operativo Microsoft Windows desde 1995. Es el navegador Web más
utilizado de Internet desde 1999, con un pico máximo de cuota de utilización
del 95% entre el 2002 y 2003. Sin embargo, dicha cuota de mercado
ha disminuido paulatinamente con los años debido a una renovada
competencia por parte de otros navegadores, logrando aproximadamente entre
el 30% y 54% en 2012, y aún menos, cuando logra ser superado por Google
Chrome, dependiendo de la fuente de medición global.

Mozilla Firefox

Es un navegador Web libre y de código abierto desarrollado para Microsoft

Windows, Mac OS X y GNU/Linux coordinado por la Corporación Mozilla y la
Fundación Mozilla. Usa el motor Gecko para renderizar páginas Webs, el cual
implementa actuales y futuros estándares Web. A partir de agosto de 2012
Firefox tiene aproximadamente un 23% de la cuota de mercado, convirtiéndose
en el tercer navegador Web más usado, con particular éxito en Indonesia,
Alemania y Polonia, donde es el más popular con un 65%,47% y 47% de uso,
respectivamente.

Opera

Es un navegador Web y suite de Internet creado por la empresa

noruega Opera Software, capaz de realizar múltiples tareas como navegar por
sitios Web, gestionar correo electrónico, contactos, fuentes Web, charlar vía
IRC y funcionar como cliente BitTorrent. Opera ha sido pionero en incorporar
muchas de las características que hoy en día se pueden ver en el resto de los
navegadores Web como el zoom y la búsqueda integrada y popularizar otras
como las pestañas, aunque ellos no las inventaron (las pestañas fueron
introducidas por InternetWorks de Booklink Technologies en 1994, luego
Netcaptor en 1997, IBrowse en 1999 antes de la aparición en Opera en 2000).

Safari
 Es un navegador Web de código cerrado desarrollado por Apple Inc. Está
disponible para Mac OS X, iOS (el sistema usado por el iPhone, el iPod Touch y
el iPad) y Windows

Incluye navegación por pestañas, corrector ortográfico, búsqueda progresiva,

vista del historial en CoverFlow, administrador de descargas y un sistema de
búsqueda integrado.

Configuración de navegadores

Firefox

Lo primero que vamos a hacer es abrir Internet Explorer y buscar en Google

por ejemplo el navegador Firefox.

Firefox

Una vez hecho esto, abrimos la página principal de Firefox, como vemos
nos aparece un cuadro verde que pone Descargar ahora, hacemos clic sobre
el.
 Descarga Firefox

A continuación nos aparecerá una página donde nos avisará que en pocos
segundos se nos abrirá una ventana donde se nos pondrá a descargar el
navegador, si no es así tendremos que hacer clic sobre el mensaje en la zona
superior que dice: “Intenta descargarla otra vez”.
 Mensaje de descarga

Una vez se nos abra el la descarga de Firefox, le daremos a ejecutar,

primero se nos pondrá a descargar el programa y posteriormente nos aparecerá
la siguiente ventana. Haremos clic para empezar la instalación del programa.

Descargar ejecutable

Cuando empiece a instalarse nos aparecerá una ventana dándonos la

bienvenida a la instalación del Firefox, aunque antes puede que se nos abra una
ventana de permisos de instalación.
 Instalaci'on
Esperaremos a que se termine la instalación de Firefox y cuando termine se nos
abrirá Firefox automáticamente.

Página Firefox
 Google Chrome

A continuación vamos a instalar Google Chrome, hacemos el mismo

procedimiento que antes, buscamos en Google, “Google Chrome”.

Google Chrome

Pinchamos en la página para descargar Google, nos aparecerá la siguiente

página, haremos clic sobre Descarga Google Chrome.

Descarga Chrome

Una vez hecho esto nos aparecerá una ventana donde nos pondrá
las políticas de privacidad, simplemente con pinchar en “Aceptar e Instalar”
se nos abrirá una ventana donde tendremos que indicar dónde vamos a
guardar el ejecutable para la instalación.
 Política Google

Una vez que descargado haremos doble clic sobre el, nos aparecerá la
siguiente ventana donde tendremos que pulsar ejecutar.

Descarga

Una vez pulsado empezará la instalación de nuestro Google. Una vez que
termine se nos abrirá la ventana del navegador de Google.
 Instalación

Google Chrome

Opera

En último lugar vamos a instalar el último de nuestros navegadores, Opera,

para ello haremos lo mismo, buscaremos opera en Google y pulsaremos en la
página para descargarlo.

Descargar Opera
 Se nos abrirá la siguiente página en donde podremos instalar el navegador
opera para PCS y también el navegador opera para teléfonos móviles.

Descarga Opera

Nosotros claro está vamos a elegir el navegador para ordenadores, al hacer

clic nos preguntará donde deseamos guardar el archivo de instalación y una vez
descargado nos aparecerá la ventana de ejecutar el programa.
 Instalación

Una vez le demos a ejecutar el programa, nos aparecerá la siguiente ventana

de Opera, pulsaremos sobre Instalar y cuando termine la instalación, nos
abrirá el navegador directamente.
 Proceso de Instalación

Navegador Opera

Hay más navegadores, pero los navegadores principales son estos ,

contando con Internet Explorer.

Sistemas operativos móviles.

Android.

Android es un sistema operativo basado en el kérnel de Linux desarrollado

inicialmente para teléfonos móviles con una interfaz táctil. Posteriormente ha
visto su evolución y migración también a una gran familia de dispositivos, ya
que en la actualidad podemos encontrar android en tabletas, navegadores GPS,
relojes, televisores, etc.
 Logo Android

Este sistema operativo fue desarrollado por Android Inc., empresa fundada

en 2003 por Andy Rubin, Rich MIner, Nick Sears y Chiirs White, varios de los
cuales como Rubin ya habían trabajado para grandes compañías del sector de
la informática como Apple y Microsoft. Esta empresa estaba establecida en Palo
Alto, California.

Poco tiempo después del germen de esta compañía, empezó a resonar en

medios especializados, comparando su nuevo sistema operativo con el sistema
reinante en aquel momento Symbian y con el nuevo sistema operativo de
moda iOS. Google primero respaldó económicamente este proyecto, para en
2005 adquirir la compañía e incorporarla a sus proyectos.

La presentación oficial de la primera versión de Android se realizó en la Open

Handset Alliance, consorcio de empresas formadas por algunas de las más
grandes del sector involucrado en el segmento de los teléfonos móviles cuyo fin
es estandarizar de forma abierta dichos dispositivos.

El 22 de Octubre de 2008 Google lanzó en colaboración con T-Mobile y

HTC el primer dispositivo comercial con Android, se trata del modelo HTC
Dream (T-Mobile G1 o Google Phone). En su interior se encontraba la versión
1.0 de Android. Contaba con pantalla táctil, teclado QWERTY, cámara de 3.2
megapíxels, conectividad 3G y WiFi, entre otras características.

A partir de esa fecha, gracias a Sony, HTC, Samsung, Qualcomm, Texas

Instruments y Google, entre otros de los miembros más florecientes de la Open
Handset Alliance, comienzan a aparecer en el mercado numerosos dispositivos
con Android como sistema operativo.
 En 2010 Google, de nuevo en colaboración con HTC, lanza el primer
dispositivo de una exitosa serie que continúa en la actualidad denominada bajo
el nombre Nexus. Los posteriores modelos de la gama Nexus han sido
fabricados en colaboración con otros fabricantes como Samsung, Asus y LG.
Google ha expresado varias veces que sus dispositivos de esta serie irían
variando de fabricante en el tiempo y hasta la fecha ha cumplido su promesa,
también con el objetivo de demostrar a la industria que no pretende crear un
monopolio, sino un ecosistema en el que distintas marcas incluyan sus sistema
en sus teléfonos móviles, tabletas y demás dispositivos.

Desde 2008 se lanzan de manera asidua actualizaciones constantes del

sistema en el que se van incorporando mejoras de seguridad, de rendimiento y
estabilidad, además de numerosa funcionalidad.

Existe un repositorio a disposición de cualquiera que incluye el código fuente

completo del proyecto, llamado Android Open Source Proyect. Dicho proyecto
está licenciado bajo licencias de software libre y permite a cualquiera descargar
el código, modificarlo, compilarlo y usarlo en cualquier dispositivo./p>

Android también ofrece un kit de desarrollo de software (SDK de aquí en

adelante) que comprende una serie de herramientas enfocadas a los
desarrolladores de software para que puedan crear entre otras cosas,
aplicaciones, actualizaciones para dispositivos, nuevas versiones del sistema,
etc. SDK de Android está basado en Java. Además ofrece también un kit
llamado NDK que permite la programación nativa para Android usando los
lenguajes C o C++ y otro kit más llamado ADK que está enfocado al desarrollo
y comunicación con dispositivos “wearables” como relojes, ropa, etc y
dispositivos que usen Arduino.

IOS

Se trata del sistema operativo utilizado por los dispositivos iPhone. La

compañía productora de este sistema operativo es Apple Inc., la cual ha
ocupado gran parte del mercado de la telefonía durante años. Este sistema
operativo se ha convertido en el más valorado debido a sus grandes
innovaciones desde su primer lanzamiento y su exclusividad para los
dispositivos de la misma empresa.

Este sistema está muy optimizado en lo que ha rendimiento se refiere, ya

que se caracteriza por una rápida respuesta, gran capacidad de procesamiento
y una interfaz muy intuitiva y amigable.

Estos son los más utilizados, pero existen gran variedad de ellos.

Otros ejemplos de sistemas operativos para dispositivos móviles

 BlackBerry OS

 Windows Phone

 Symbian OS

 HP WebOS
 Bada

 Firefox OS
Configuraciones .

Dominios Web

Un dominio en Internet se trata de un nombre de un servidor de internet

que facilita de forma sencilla la dirección IP de un servidor.

El conjunto de caracteres que forma una dirección concreta sirve para

identificar el sitio de la red, o lo que es lo mismo, la máquina o grupo de
máquinas en las que reside o se aloja esa web. Este nombre destaca porque es
único, por lo que no se permite que dos personas u organizaciones tengan
simultáneamente el mismo nombre de dominio. Dado que las direcciones IP no
resultan fáciles de recordar para los usuarios, se creó un sistema de nombres,
que asocia a estas direcciones unos caracteres de texto, normalmente dos
palabras separadas por un punto.

Teniendo el concepto de dominio pasamos a explicar lo que es un hosting o un

alojamiento web, que básicamente se trata de un servicio que provee a los
usuarios de internet un sistema para poder almacenar contenido accesible vía
web. Además del servicio mencionado también incluye los siguientes servicios:

 Un servidor de correo electrónico que permite que tengas cuentas de

correo con tu propio nombre de dominio.

 Alojamiento de aplicaciones web basada en PHP y bases de datos para

crear webs.

 Además de un acceso vía SFTP para almacenar y descargar ficheros.

 La opción de crear discos virtuales, es decir, crear almacenamiento en la

nube con tu propio servicio de hosting al que accedes como si lo tuvieras en tu
ordenador.

Aunque la mayoría de las empresas ofrecen tanto dominios como hosting, no

hace falta comprar un dominio a la misma empresa que ofrece el hosting. Lo
único que se debe tener en cuenta es que habrá que enlazar el dominio al
hosting, esto se realizará configurando llamadas DNS. A la hora de hablar de
DNS, nos tenemos que referir a los Servidores DNS.

El servidor DNS es el encargado de informar al navegador en qué servidor

se encuentra la web, es decir, conecta el dominio con el hosting. Una vez
conectado el dominio al hosting, se debe detallar donde están los servidores de
cada servicio del hosting, esto se utiliza con los registros DNS. Un registro DNS
es el encargado de distribuir los distintos servicios de un dominio.

Servidor DNS

Configuración de DNS

Una de las razones por la que es importante configurar el DNS es por ejemplo
para obtener más velocidad de navegación, para acceder a distintos servicios,
páginas webs o portales, etc.

Nuestra compañía nos puede ofrecer una por defecto asignada de forma
automática y también podemos encontrar algunas ofrecidas por otras
empresas:

 Cloudflare – 1.1.1.1 y 1.0.0.1

  Level3 – 209.244.0.3 y 209.244.0.4

  IBM Quad9 – 9.9.9.9

  Verisign – 64.6.64.6 y 64.6.65.6

  Google – 8.8.8.8 y 8.8.4.4

 Cualquier sistema operativa ofrece la posibilidad de cambiar dicha
configuración, vamos a explicar el caso de Windows, como se realiza
esto.
 A través del Panel de Control de Windows accedemos a la sección
de Redes e Internet y seleccionamos Centro de Redes y Recursos
compartidos, dentro de esta página nos ubicaremos en Cambiar
configuración del adaptador
 

 Ventana Centro de Redes

En esta ventana encontraremos todos los casos de adaptadores posibles.

Seleccionaremos una y a través del botón derecho elegiremos Propiedades.

Adaptador de redes
 Propiedades

Dentro de la anterior ventana accederemos a Protocolo de Internet

versión 4 (TCP/IPv4), dentro de esta ventana aparecerán dos opciones en
cuanto a los DNS.
 TCP/IPv4

Rellenaremos los campos mencionados o los cambiaremos dependiendo

nuestras preferencias, terminado esto pulsaremos Aceptar y reiniciaremos el
PC para que se reflejen los cambios.

Si no podemos navegar a través de internet, es que nuestro DNS está mal

configurado por lo que será necesario vovler a cambiar los anteriores
parámetros.

Servicios Web.

El modelo OSI se define como un modelo de red compuesto por siete capas,
presentes en cada en equipo conectado a la red. Cada capa tiene
funcionalidades propias y deja un servicio a la capa que va justo después. Hoy
en día el modelo OSI se usa muy poco, el más usado a día de hoy es el modelo
TCP/IP.

El modelo OSI (Open System Interconnection) fue creado en 1984 por la

Organización Internacional de Normalización (ISO) con el objetivo de
estandarizar el intercambio de datos entre dos máquinas.

El modelo está compuesto por siete capas de forma jerárquica, de forma

ascendente. Cada capa presenta un servicio para la capa justo superior. Para
que cada capa pueda hacer su funcionalidad con los datos, estos deben pasar
por las capas inferiores. Una vez procesado todos los datos se descodifican y se
devuelven.

Como hemos dicho antes, cada capa tiene una funcionalidad específica
durante la transmisión de datos. La capa N utiliza a la capa N – 1 y le pasa los
datos a la capa N + 1.

Para que la información pase de unas capas a otras se deben establecer unas
normas, unos protocolos. En el modelo OSI cada capa tiene un protocolo. En
realidad, unos protocolos funcionan en varias capas, otros en una solo capa y
otros en una parte de una capa..

2.1.1. Funcionalidades de las capas

Las funcionalidades de las capas van desde el transporte de la señal que cifra
los datos a la preparación de los datos para que el receptor los use.

Capa física: Es la capa principal. Se encarga de la topología de la red y de

las infraestructura que conectan las máquina a la red, tanto los medios físicos
(cableado, routers…) como la forma de transferir datos bit a bit (señales
eléctricas, ondas, fibra…).

Capa de enlace de datos: Esta capa se encarga de recibir los bits de la

capa anterior, los trata y los transforma los datos en tramas para siguiente
capa. La capa se encarga del direccionamiento físico (MAC) para comprobar la
conexión entre las máquinas y arreglando los fallos.

Capa de red: Responsable del tráfico de datos llamados paquetes,

escogiendo la mejor ruta cuando existen varias. La capa contiene la dirección
física (MAC) y la convierte en la dirección lógica (IP).

Capa de transporte: Núcleo del modelo, se encarga de que los paquetes se

transmite sin ningún error con su dirección lógica. Este transporte de datos
tiene un sistema de calidad para asegurar dicho transporte, QoS (Calidad de
Servicio). Si el envío de algún paquete falla durante las comprobaciones, el
paquete se da por extraviado y se vuelve a enviar. La capa tiene como
protocolo su propio mecanismo de control, TCP (Transport Control Protocol).
 Capa de sesión: Se encarga del mantenimiento del enlace entre las dos
máquinas, asegura y sincroniza la sesión establecida entre las dos máquinas. Si
la comunicación falla se vuelve a establecer la conexión.

Capa de presentación: Se encarga de estandarizar los datos. Traduce los

datos en un formato que pueda entender el protocolo usado. Si distintas redes
con distintos protocolos están comunicadas, la capa de presentación actúa
traduciendo los datos. Esta capa también se encarga de la compresión y cifrado
de datos (el emisor comprime y emisor descomprime)

Capa de aplicación: Se encarga de garantizar la interfaz de comunicación

entre las dos máquinas mediante los programas adecuados como correos
electrónicos o servidor de ficheros (FTP). Existen tantos protocolos como
programas distintos. El usuario no actúa con la capa de aplicación, actúa con el
programa que a su vez actúa con la capa de aplicación.

A la hora de hablar de un servicio web o un servidor web diremos que es un

programa que se encarga de procesar una aplicación del lado del
servidor haciendo conexiones bidireccionales y/o unidireccionales y síncronas o
asíncronas con el cliente creando o cediendo una respuesta en cualquier
lenguaje o aplicación del lado del cliente.

Un servidor Web o también conocido con el nombre de servidor HTTP es un

programa que se encarga de procesar una aplicación del lado del
servidor haciendo conexiones bidireccionales y/o unidireccionales y síncronas o
asíncronas con el cliente creando o cediendo una respuesta en cualquier
lenguaje o aplicación del lado del cliente.

El código obtenido por el cliente suele ser compilado y realizado por un

navegador Web. Para la transmisión de toda esta información suele usarse
algún protocolo.
 Generalmente se hace uso del protocolo HTTP para estas comunicaciones,
que pertenecen a la capa de aplicación del modelo OSI. El término además
se utiliza para referirse al ordenador que ejecuta el programa.

Servidor web

Características Del Servidor Web

Espera y recibe peticiones del servidor. Después de recibir la petición, la ejecutan y

a continuación envían la respuesta al cliente. Aceptan multitud de conexiones de
clientes. No actúan directamente con el usuario final.

Arquitectura servidor web

La arquitectura que se aplica en este servidor es la de cliente/servidor,

esto es que un cliente realiza una solicitud o una petición a un equipo servidor,
y éste atiende a dicha solicitud.

En el cliente lo normal es que se ejecute una aplicación

llamada navegador que:

 Sirve como interfaz para el usuario: mostrando resultados, consultas y

proporcionando al usuario las herramientas que facilitan su comunicación

 Se comunica con el servidor web: transmitiendo las peticiones de los

usuarios

En el servidor la única tarea es:

 Atender las peticiones recibidas desde el navegador y realizarlo de forma

eficiente y segura.

Funcionalidades principales
 1. SERVIDORES DE ARCHIVOS
Almacenan archivos y aplicaciones de productividad como por ejemplo
procesadores de texto, hojas de cálculo, etc.

2. SERVIDORES DE BASE DE DATOS

Almacenan bases de datos, tablas, índices. Es uno de los servidores que más
carga tiene.

3. SERVIDOR DE TRANSACCIONES
Procesa todas las transacciones. Valida primero y recién genera un pedido al
servidor de bases de datos.

4. SERVIDORES DE GROUPWARE
Permiten colaborar a los usuarios, sin importar la localización, vía Internet o
vía Intranet corporativo y trabajar juntos en una atmósfera virtual.

El esquema de funcionamiento del servidor web es el siguiente:

Funcionamiento

Acceso

Para que el navegador pueda establecer conexión con el servidor web es

necesario tener asignado una dirección IP única que identifique al equipo en la
red.

Cuando el navegador hace una petición de página al servidor web utiliza un

nombre que identifica al servidor y esta solicitud se transmite a un servidor
DNS. Éste resuelve el nombre y devuelve la dirección IP que corresponde al
nombre.

La solicitud del navegador, entonces, se encamina al servidor web correcto.La

información que el usuario proporciona al navegador para conectar con un
servidor web se llama URL
 Apache HTTP Server

Consiste en un tipo de servidor web de código abierto, disponible para

cualquier plataforma. Se trata de un servidor seguro y además dispone de una
gran documentación para la facilidad de acceso a sus usuarios.

Apache HTTP Server

Apache proporciona dos tipos de contenidos al cliente web:

 Páginas estáticas: se transfieren archivos HTML, imágenes, etc y no se

requiere un servidor muy potente en lo que al hardware se refiere.

 Páginas dinámicas: la información cambia continuamente ya que se

obtiene de consultas de bases de datos u otras fuetnes de datos.
 Los ficheros Web que incluyen lenguajes de programación (PHP, JSP,
Java,...) son leídos e interpretados por el servidor, pero no
ejecutados, aunque contengan programas, requieren permisos de
lectura, pero no permisos de ejecución.
 A continuación un mostramos un resumen de los permisos mínimos para
que funcione adecuadamente una página Web:


 Permisos de Ficheros
 Ocultar descripción alternativa
 Permisos mínimos que tienen que tener los ficheros de una página Web para que funcione
adecuadamente
  El problema más frecuentes en instalaciones de Apache, es que no
se Configura adecuadamente la directiva DocumentRoot, lo cual
posibilita el acceso a otros directorios o subdirectorios, fuera de
/www/htdocs/.

Listado de directorios

Se utiliza la siguiente estructura de archivos de configuración diseñada para

facilitar la administración:

 \xampp\apache\conf: En esta carpeta se encuentra httpd.conf que

nos permite aplicar directivas a todos los servidores web.

 \xampp\php: Aquí se encuentra php.ini donde se configura PHP.

 \xampp\htdocs: directorio donde se sitúan los sitios web.

Conexiones seguras.

SSH

El protocolo SSH “Secure Shell” se define como un programa el cual ofrece

la posibilidad de crear conexiones entre máquinas a través de una red abierta
de una manera segura, además es capaz de permitir lanzar programas en una
máquina remota y copiar o mover archivos de una máquina a otra de forma
segura. Este ofrece una exhaustiva autenticación y comunicación seguras en
redes no seguras

El SSH nace como reemplazo de los comandos “telnet, rsh, rcp, etc…” los
cuales presentan una gran inseguridad a la hora de administrar una red. SSH
es capaz de ofrecer una autenticación y comunicación segura sobre un canal
inseguro. No solo se utiliza para lo comentado anteriormente, si no que este
también puede ser utilizado en conexiones X Windows o en conexiones TCP.
La autentificación suele utilizar como algoritmo de cifrado RSA o DSA. Sin
embargo para la transmisión de datos mediante la red, utiliza 3DES, IDEA,
Blowfish...

¿Qué aporta SSH en términos de seguridad?

Al usar SSH en un inicio de sesión de shell remota o para copiar archivos,

pueden reducir estas amenazas a la seguridad en gran medida. Esto se debe a
que el cliente SSH y el servidor utilizan firmas digitales para verificar su
identidad.

SSL

SSL “Secure Sockets Layer” este protocolo se diseñó para permitir

transmitir información de forma segura mediante aplicaciones. Las aplicaciones
con SSL implementado saben cómo ofrecer y recibir claves de cifrado con otras
aplicaciones, además de conocer la manera de cifrar y descifrar los datos
enviados entre ambas aplicaciones.
 El navegador prueba conectarse a un sitio web con SSL y pide la
identificación del servidor

 El servidor da respuesta y envía al navegador una copia de su certificado

SSL.

 El navegador verifica si es posible confiar en el Certificado SSL y una vez

verificado envía un mensaje al servidor.

 El servidor emite un acuse de recibo, firmado digitalmente, para crear

una sesión SSL cifrada.

 De tal manera, que la información o datos se comparten encriptados

entre navegador y servidor.

¿Qué aporta SSL en términos de seguridad?

SSL garantiza la integridad de las comunicaciones en las redes a través

de Certificados Digitales que implican procesos de encriptación, autenticación
y verificación. En otras palabras ofrece una autenticación de las partes que
colaboran en las intercambio de datos en línea y encripta las sesiones de
comunicación.

Verificación de los estándares de una web -W3C (World Wide Web

Consortium)

Existen varias formas para validar el código HTML5, entre ellas el validador
de la página de W3C. Desde aquí podemos subir un trozo de código, una
página o directamente toda nuestra Web y validarla.

Para que nos valide el código HTML5, debemos elegir en el Document Type
la opción de HTML5 (experimental).

Una vez elegido, seleccionamos el fichero que deseamos validar y hacemos

clic sobre Check. La dirección es la siguiente:

http://validator.w3.org/
 Si no tenemos ningún error un mensaje en verde nos mostrará que está todo
correcto. Es posible que el validador no nos arroje errores pero si advertencias
o ‘warnings’. Estas advertencias no evitan que nuestra web sea válida HTML5,
pero conviene tenerlos en cuenta ya que nos aconsejan una serie de mejoras.
Como vemos en la siguiente imagen, tenemos 5 avisos para mejorar nuestra
Web HTML5.

También podemos validar nuestra página usando la página

http://HTML5.validator.nu/. Es prácticamente igual que la anterior, pero esta
está hecha para validar solo HTML5.

El proceso es prácticamente el mismo, subir el fichero y validarlo. También

nos mostrará los avisos en caso de haberlos.
También podemos encontrar un tipo de aplicación para validar las hojas de
estilo CSS solas o presentes en documentos HTML, comprobando de esta
manera si se cumplen las especificaciones del W3C.

CSS Validator

Recursos

A continuación hablaremos sobre una serie de herramientas de evaluación de

la accesibilidad y los recursos disponibles:

Validadores automáticos de accesibilidad

Se tratan de unas herramientas que analizan las páginas en base al

cumplimiento de estándares de pautas de accesibilidad. Podemos encontrar las
siguientes:
 TAW:Servicio online que permite revisar la accesibilidad de una
determinada URL. Se puede seleccionar nivel A, AA, AAA y existe versión en
español.

TAW

 Examinator:Servicio online que permite revisar la accesibilidad de una

determinada URL. Se puede seleccionar nivel A, AA, AAA y existe versión en
español.
 Examinator

 Wave:Esta herramienta, además de señalar los errores, permite ver la

estructura de la página o visualizarla en formato texto.

Wave
DISEÑO Y DESARROLLO DE APLICACIONES WEB.

OBJETIVOS

 Distinguir las principales tecnologías usadas actualmente en la WEB.

 Conocer las tecnologías principales que actualmente se utilizan en la

WEB.

 Saber los distintos elementos críticos que existen en páginas e-

commerce.

Mapa Conceptual
DISEÑO Y DESARROLLO DE APLICACIONES WEB:
- ELECCIÓN DE LA PLATAFORMA
- LENGUAJES
- COMPONENTES DEL ESTÁNDAR
- ELEMENTOS CRÍTICOS EN PÁGINAS E- COMMERCE
- IMÁGENES DIGITALES
- EDICIÓN MULTIMEDIA
- EL VÍDEO DIGITAL
- HISTORIA. PIXEL
- FRAME

Elección de la plataforma.

Una aplicación web, es una aplicación que se encuentra alojada en un

servidor, de manera que los usuarios la pueden usar desde cualquier punto,
habitualmente a través de un navegador web. Esto ofrece grandes
posibilidades, ya que hoy en día no solo limitamos el uso a través de un
ordenador, si no que se puede usar desde cualquier dispositivo que tenga
un navegador instalado. Además los clientes pueden ser aplicaciones
instaladas en otros dispositivos, como electrodomésticos, relojes, coches...
de manera que se comunique con un servidor para obtener información o
realizar alguna de sus funcionalidades. Gracias a estos avances vemos
que estas aplicaciones pueden tener un propósito multidispositivo.
 Plataforma

 En una aplicación web, están bien diferenciados los siguientes componentes:

 Servidor Web. Donde está instalada la aplicación.

 Conexión de red. A través de la cual se comunican los clientes

 Clientes web.

 Desde un punto de vista más orientado al desarrollo de aplicaciones

web, se pueden distinguir las siguientes partes, cada una con un
objetivo y funcionalidad bien definidos. Diferenciamos las
siguientes:
 1. Lógica de negocio

 Es la parte de la aplicación que se encarga de realizar operaciones y

procesos con los datos para proveer el servicio y los resultados
demandados por el cliente.

2. Datos

Almacenamiento y mantenimiento de los datos necesarios para la aplicación.

3. Interfaz

Es la parte por la que los usuarios realizan las peticiones a nuestra apliación.
Habitualmente será una página mostrada en un navegador web

Para diseñar la arquitectura de una aplicación web, habitualmente se

modelan por lo que conocemos como capas, las cuales representan un
elemento que procesa o trata la información.
A continuación comentaremos los modelos más habituales que se suelen dar en
la arquitectura web.

Modelo de dos Capas

Este modelo también se conoce como cliente/servidor. Para esta

arquitectura el servidor se encarga del procesamiento de los datos y
servirlos al cliente.
El cliente además de tener la aplicación con el interfaz de usuario, se encarga
de realizar toda la lógica de la aplicación con los datos recibidos del
servidor. Por este motivo también se conoce este modelo con el nombre
de cliente pesado (fat-client)
Los principales inconvenientes de esta arquitectura son:

 Presenta dificultades para el escalado.(Aumento del número de clientes)

 El número de conexiones es reducido

 Provoca una alta carga en la red. Debido a que tiene enviar el grueso de
los datos para que el cliente los procese.

 Problema con los accesos a los datos, debido a la necesidad de

implementar bloqueos para mantener la consistencia de los datos. (Dos clientes
distintos no pueden modificar el mismo dato a la vez)

Modelo de tres Capas

Surge con el objetivo de mejorar y eliminar las limitaciones que

presenta el modelo en 2 capas. Para este fin se introduce una capa
intermedia, entre la presentación y los datos, que se encarga de realizar
las operaciones y centralizando la lógica de negocio. Con esto se
consigue que la administración sea más sencilla, que puedan concurrir un alto
número de clientes y que se reduzca el tráfico en la conexión al ser necesario
solo el envío de los resultados para que los visualice el cliente.
A continuación comentamos las distintas capas de este modelo.
 Cliente servidor tres niveles

Modelo de tres Capas (II)

Comentamos las características de cada una de las capas que forman este
modelo:

1. Capa de presentación

Esta capa se encarga de recoger la información del usuario y enviar la

petición al servidor. Recibe los resultados de la capa de lógica del proceso, y
genera la presentación para que el cliente la visualice.
Se encuentra principalmente en el cliente, aunque se entiende que es el
servidor el encargado de comunicar los datos a la capa de proceso y de generar
la presentación, que se enviará al cliente.

2. Lógica del proceso

Recibe los datos de la capa de presentación, recupera los datos que

sean necesarios, de la capa de datos, para realizar las operaciones y los
procesos que correspondan. Genera la presentación con los resultados
obtenidos del procesado.
Toda esta capa la localizamos en el servidor.

3. Capa de datos

Es la capa en la que se encuentran los datos, habitualmente en una

base de datos. Las principales funciones son almacenar los datos, permitir
modificaciones y lectura de los datos, así como mantener la consistencia de los
datos.

Para poner en práctica lo aprendido sobre la arquitectura de una aplicación

vamos a realizar un ejemplo en el que podremos identificar las distintas
partes o capas que hemos estudiado.

Ahora que hemos visto como recoger información del usuario a través de
formularios, y de procesarlos, ¿no sería una buena idea guardarlos de manera
permanente en nuestro equipo por si nos hicieran falta para algo?

Pues esta es la idea de los accesos a archivos. También podemos hacerlo

mediante bases de datos, pero esto lo estudiaremos en el tema siguiente.

Veamos un ejemplo:

Formulario varios campos y botón

Lo que estamos viendo es un simple formulario en el que introducimos

nuestro nombre, una contraseña y repetimos la contraseña, si los dos
últimos campos son iguales, entrará.

Por tanto, una vez bien introducidos los datos, nos hará falta un sitio donde
almacenar estos datos, pues bien, esto será lo primero que haremos.

Código html
 Debemos ir a la carpeta Htdocs  de nuestra instalación de Xampp y dentro de
la carpeta del proyecto que estemos trabajando crear una carpeta, llamada por
ejemplo “usuarios”.

Allí es donde almacenaremos estos datos.

Pero hay un problema, prueba a crearla y a acceder a ella mediante la barra

de dirección del navegador de esta manera:

Url local

Página ficheros en el navegador

Como vemos, hemos entrado en la carpeta y podremos ver todos los datos
de los usuarios registrados.

Esto debemos evitarlo, ¿Cómo?, pues la clave está en el

archivo httpd.conf  que lo podrá encontrar en

C:\apachefriends\xampp\apache\conf\httpd.conf (o donde haya instalado

apache).

Y crear una nueva directiva de este modo:

Código de configuración

De esta manera (y recuerde, después de haber reiniciado apache), al acceder

otra vez a la misma dirección, nos aparecerá un mensaje como este:
 Error html acceso

Con lo que ya tendremos protegida nuestra carpeta con los datos que
no queramos que sean accesibles para otros usuarios.

Esta forma de proteger un directorio tiene también algún inconveniente, ya

que es necesario tener acceso al archivo de configuración del servidor Apache.

Si nuestro sitio web está alojado en un servido externo, esto seguramente no

podrá ser. Para estos casos, podremos crear archivos con el nombre
.htaccess (se incluye un punto al principio) en el propio directorio de nuestro
sitio web.

En este archivo incluiríamos la configuración particular que queremos

aplicar y que complementa a la del archivo general de
configuración httpd.conf, siempre que en este último no se impida con la
opción AllowOverride None.

Lenguajes.

En este apartado vamos a comentar los principales lenguajes de

programación encontrados dentro de la programación web. Entre los que
encontraremos:

HTML

HTML siglas de Hyper Text Markup Language, es el lenguaje más utilizado

para la creación de páginas Web. Es un lenguaje bastante sencillo de aprender
y de escribir. Los navegadores se encargan de leer documentos basados en
este lenguaje y generar una vista para el usuario.
 HTML

Este lenguaje está reconocido como estándar y sus normas están definidas
por el organismo oficial W3C, World Wide Web Consortium. Este organismo lo
define “un lenguaje reconocido universalmente y que permite publicar
información de forma global”.

Historia de HTML

El origen de este lenguaje se remonta al año 1980, Tim Beners-Lee,

trabajador de la Organización Europea de la Investigación Nuclear (CERN),
definió un sistema de “hipertexto” para compartir ciertos documentos.

Este sistema ya se había desarrollado antes, el cual ofrecía que los usuarios
accedieran a la información relacionada con los documentos electrónicos que
estaban viendo. Tras desarrollar el sistema, Tim Beners y el ingeniero Robert
Cailliay publicaron la propuesta a la llamada World Wide Web (W3).

Como comentemos es un lenguaje que se basa en etiquetas, una etiqueta se

define con los símbolos < y > conteniendo un nombre identificativo. Por
ejemplo escribiríamos <p> para un párrafo, seguidamente escribiríamos el
texto del párrafo y terminamos escribiendo de nuevo la etiqueta pero con una
barra que precede al nombre, </p>. También cada etiqueta puede tener
atributos como por ejemplo una id, <p id="parrafo"></p>.

Cada etiqueta puede contener otras en función de lo definido en el estándar,

un documento HTML se basa en una etiqueta <html> que contiene a su vez
un <head>, donde se definen meta-datos del documento, y un <body> que
contiene el cuerpo de la página web. En la documentación de HTML puede
encontrar más información.

Más recientemente en 2014 se presentó la especificación HTML5 tras diez

años de desarrollo. Debemos recordar que no es lo mismo el desarrollo de un
lenguaje y su implementación por parte de los navegadores. HTML5 añade
bastantes mejoras en comparación con su versión anterior. La más
característica y simple es la especificación del DOCTYPE. HTML deriva de XML
por lo que se utilizamos DOCTYPE para especificar un fichero DTD el cual define
las reglas de la versión HTML que estemos utilizando, este elemento es el
primero que debe definirse.
 HTML5 es la quinta versión del lenguaje de marcado para la elaboración de
páginas web. Esta versión está todavía en desarrollo, aunque algunas empresas
ya lo están usando para crear sus páginas Web.

HTML5 incluye una nueva serie de elementos y atributos que reflejan el uso
convencional de los sitios web modernos. Algunos elementos tienen las mismas
características técnicamente hablando que las etiquetas < div > y < span >,
pero con un significado semántico. Por ejemplo < header >, para la cabecera,
< footer > para el pie de página. Otros elementos como < audio > y < video >
pretenden ofrecer nuevas funcionalidades a través de una interfaz
estandarizada. También es importante las mejores en el elemento < canvas >,
que ahora es capaz de renderizar elementos 3D en algunos navegadores. A
continuación vamos a ver con más detalle estos nuevos elementos.

Con la llegada de HTML5 se han incluido nuevos atributos globales como:

Atributo contenteditable

Este atributo está enfocado a la edición de todo el documento, es como una

especie de editor HTML con el que se pueden realizar modificaciones. Permite
editar también los elementos hijos que contenga un elemento con este atributo.

Atributo html5 contenteditable

Estamos hablando de un atributo asignable a distintas etiquetas y su uso es

trivial. Si colocamos el valor true, podremos editar los elementos y hasta incluir
en ellos más información.

Si el atributo tiene el valor false, el texto no se podrá editar. Si colocamos

inherit, heredará el valor que tenga el padre. Los navegadores que son
compatibles con este atributo son:

Atributo html5 contenteditable resultado Google Chrome

a Google Chrome

Atributo html5 contenteditable resultado firefox

a Firefox

Atributo html5 contenteditable resultado Opera

a Opera
 Atributo html5 contenteditable resultado safari
a Safari

Atributo html5 contenteditable resultado internet explorer

a Internet Explorer

¿Cuáles son las mejoras?

 Nuevas etiquetas para representar semánticamente el contenido de las

páginas Web.

 Eliminación de etiquetas y atributos que ya no tienen sentido.

 Nuevos elementos para crear animaciones o reproducir vídeo y audio sin

necesidad de utilizar ningún complemento externo al navegador.

 Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details,

Menu y Command. Permiten generar tablas dinámicas que pueden filtrar,
ordenar y ocultar contenido.

 Formularios mejor estructurados y con funcionalidad para validar los

datos nativamente. Nuevos tipos de datos (eMail, number, url, datetime…).

 Visores de fórmulas matemáticas (MathML) y gráficos vectoriales (SVG)

 Arrastrar objetos, Drag & Drop.

Etiquetas Obsoletas

Con la llegada de HTML5 y CSS3 hay varios elementos que se han quedado
obsoletos, por lo tanto estos se han omitido, son:

 < acronym >: usado para definir los acrónimos, se usa ahora < abbr >

 < applet >: se usaba para meter applet embebidos, ahora se utiliza la
etiqueta < object >

 < basefont >: Usado para definir el color, tamaño y tipo de letra para
todo el documento. Actualmente se usa CSS.

 < big >: Usado para hacer el texto más grande. Actualmente se usa
CSS.

 < center >: Usado para centrar el texto, actualmente se usa CSS.
 < dir > Usado para definir una lista de directorios. Ahora se usa
o < font > Especificaba el color, tamaño y fuente de un texto
determinado, actualmente se usa CSS para cambiarlo.
o < frame > y < frameset > usados para definir una determinada
ventana, se han dejado de usar debido a los efectos negativos a la hora de
usarlo. < noframes >: es usado para mostrar el texto por el navegador que no
manejan los frames.
o < isindex >: manda información al servidor.

o < strike> : usado para definir texto tachado. Ahora se usa < del
>
o < tt >: usado para definir el tipo de texto.

Etiquetas modificadas

CSS

CSS es el lenguaje de hojas de estilo creado para controlar el aspecto y la

presentación de las páginas Web. Es imprescindible para la creación de páginas
Web complejas.

CSS

Este lenguaje separa la definición de los contenidos y la definición de su

aspecto. Esto hace que mejore la validación de los documentos HTML y XHTML
ya que mejora la accesibilidad, reduce la complejidad del mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
 Historia de CSS

CSS se creo para cubrir la necesidad de definir un mecanismo que permitiera

aplicar diferentes estilos a los documentos. Este lenguaje se impulsó con el
crecimiento del lenguaje HTML. La guerra de navegadores y la falta de un
estándar que definiera los estilos, dificultaba la creación de documentos con la
misma apariencia en diferentes navegadores.

El organismo W3C (World Wide Web Consortium) es el encargado de crear los

estándares relacionados con programación Web, se le propusieron varias
propuestas de hojas de estilo. Las dos propuestas que se tuvieron en cuenta
son: CHSS (Cascading HTML Style Sheets) y SSP (Stream-based Style
Proposal).

Estas dos propuestas se unieron entre 1994 y 1995 por Håkon Wium Lie y
Bert Bos y definieron un lenguaje con lo mejor de cada una este fue llamado
CSS (Cascading Style Sheet). En 1995, W3C aposto por este lenguaje y lo
estandarizo.

En 1998 se publicó la segunda versión de este lenguaje que fue llamada “CSS
nivel2”. Es la versión que se utiliza actualmente en los navegadores. Y ese
mismo año se empezó con el desarrollo de “CSS nivel 3” que continua en
desarrollo actualmente, solo se han publicado borradores.

¿Y qué aporta de nuevo CSS3?

  Nuevos selectores.

  Técnicas de diseño avanzado: esquinas redondeadas, gradientes,

múltiples imágenes de fondo, etc.

 Color HSL y transparencia.

 Incrustación de fuentes y nuevo formato WOFF.

 Transiciones, transformaciones y animaciones.

PHP

Orientado al desarrollo de aplicaciones web dinámicas con acceso a

información almacenada en una base de datos.

Es considerado un lenguaje fácil de aprender, como es el caso de la definición

de las variables primitivas, ejemplo que se hace evidente en el uso de php
arrays.
 PHP

El código fuente escrito en PHP es invisible al navegador web y al cliente, ya

que es el servidor el encargado de ejecutar el código y realizar el envío de su
resultado HTML al navegador.

Capacidad de conexión con la mayoría de los motores de base de datos que

se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.

Capacidad de expandir su potencial utilizando módulos (llamados ext's o

extensiones).

Posee una amplia documentación en su sitio web oficial, entre ella todas las
funciones del sistema están claramente explicadas y ejemplificadas en un único
archivo de ayuda.

Lo primero es saber que en PHP las variables no se tienen que declarar.

Para crear una variable, no tenemos que hacer nada más que escribir su
nombre, antecediéndole el signo $, y asignarle un valor.

Tenemos que tener en cuenta que un nombre de variable valido tiene que
empezar con una letra o una raya (subrayado), seguido de cualquier número
de letras, números y rayas.

Veamos un ejemplo:
 Uso de variables

En este ejemplo podemos destacar varias cosas:

1. La variable “variable” va precedido del $(dólar) indicando que es una

variable.
2. Cada instrucción en PHP acaba en “ ; ”.
3. La orden echo sirve para imprimir una cadena de texto.
4. En la línea 10 hemos utilizado comilla dobles “, aunque también
podríamos haber utilizado comillas simples ‘, la única diferencia es que si
utilizamos estas últimas, no podremos acceder al contenido de la variable
$variable, y por lo tanto en vez de aparecer un 5, aparecería como tal
$variable.

Algo curioso a tener en cuenta es que como hemos dicho, no hace falta
declarar la variable, pero si es así… ¿Cómo sabe el intérprete el tipo de dato al
cual nos referimos?

Pues es el propio interprete quien decide a su juicio qué tipo de dato va a

utilizar, por lo que lo transforma en dicho tipo de dato. A esto se le conoce
como Conversión Implícita y se aplica en cualquier situación, no solo durante
las asignaciones.

Cuando el tipo de datos de un valor (ya esté almacenado en una variable o

al evaluar una expresión mayor) no concuerde con el tipo de datos de la
operación o expresión en que se encuentre, PHP convertirá el tipo de datos de
dicho valor para que así sea.

Esto proporciona mucha flexibilidad, pero también es una de las

características que más errores lógicos pueden introducir en nuestro código
PHP.
 Adicionalmente, podremos convertir una variable a un determinado tipo de
forma explícita, aunque primero tendremos que conocer qué tipos de datos
disponemos en PHP.

Javascript

Debido a que todas las web actuales se ubican en un entorno más bien
dinámico, surge una serie de framework que permiten ejecutar código en
la parte del cliente, es decir el navegador. Esto nos da la posibilidad de
aumentar la funcionalidad de nuestras aplicaciones y darle mejor usabilidad.
Vamos a hacer un repaso de cómo podemos incluir y utilizar estas
herramientas a nuestras aplicaiones web.

JavaScript desde los comienzos de la web, ha sido el apoyo principal para el

diseño de las páginas HTML, ya que este permitía añadirle a las páginas
mucha interactividad. Aunque este también estaba limitado, respecto a las
dificultades para desarrollar script compatibles con todos los navegadores.

JS

Con la llegada de DOM el cual permite acceder o actualizar el

contenido, la estructura y estilo de documentos html, esta fue la primera
renovación de JavaScript.
Después apareció AJAX y las consultas XMLHttpRequest asociadas, las
cuales permitieron el nacimiento de javaScript asíncrono, dando la
opción de modificar una parte de las web sin tener que recargar la
página entera.
Otros frameworks como Prototype, Dojo Toolkit y Scriptaculous, por citar
algunos.

Ahora vamos a repasar algunos conceptos relacionados con la programación

que nos serán útiles a la hora de programar en JavaScript.

Un concepto muy importante, es el concepto de variable.

Una variable es una ubicación temporal de memoria donde el programador

guarda cierto valor que le interesa retener durante la ejecución del script o
guión.
 Observemos durante un minuto el siguiente código:

Seguramente habremos visto ya, algunas curiosidades a la hora de escribir

código en JavaScript, pero quizás las más destacadas en este ejemplo sean:

 Para poder utilizar las variables, estas deben estar declaradas (es decir,
tendremos que darles un nombre y opcionalmente podremos inicializarlas o
no):
o Para declarar la variable se utilizar la palabra reservada “var”
seguida del nombre de la variable.
o Para inicializar la variable lo haríamos así var Mivariable = “Esta
es mi variable”.

 Al inicializar una variable a un campo de texto es necesario poner las

comillas dobles (“”) o las comillas simples (‘’). Da igual cuales utilicemos pero si
empezamos con unas, debemos terminar con ellas.
 Principales elementos de la gramática de JavaScript:

jQuery

jQuery es un framework JavaScript libre y Open Source, del lado cliente, que
se centra en la interacción entre el DOM, JavaScript, AJAX y Html. El objetivo
de esta librería JavaScript es simplificar los comandos comunes de JavaScript.
De hecho, el lema de jQuery es « Escribir menos para hacer más » (write less
do more).
 Jquery

jQuery, al menos en su origen, es obra de una sola persona: John Resig. Este
joven prodigio de JavaScript desarrolló la primera versión de jQuery en enero
de 2006. En aquel momento tenía sólo 20 años. Resig continúa siendo el motor
de jQuery, pero ahora le ayuda una comunidad de apasionados.

Las especificaciones de jQuery son numerosas, pero lo principal es asegurar

la flexibilidad que aporta para acceder a todos los elementos del documento
Html a través de la multitud de selectores que existen (ver el capítulo Los
selectores en jQuery). Esta característica se utilizó para dar nombre a este
framework: j para JavaScript y Query para buscar o acceder a los elementos.

También podemos observar que esta librería jQuery está en constante

evolución. Las actualizaciones y las nuevas versiones se suceden a un ritmo
regular:

Agosto de 2006: versión estable de jQuery 1.0.

Enero de 2007: jQuery 1.1.

Septiembre de 2007: jQuery 1.2.

Enero de 2009: jQuery 1.3.

Enero de 2010: jQuery 1.4.

Enero de 2011: jQuery 1.5.

Mayo de 2011: jQuery 1.6.

Noviembre de 2011: Jquery 1.7

Agosto de 2012: Jquery 1.8

Abril de 2019: Jquery 3.4.0

 Las grandes firmas de la Web y de la informática reconocen la calidad de
jQuery. Por ejemplo, podemos mencionar a Google, Mozilla, Dell, IBM,
WordPress, Nokia, Amazon, Twitter4 y otros. Microsoft lo ha incorporado en su
última versión de Visual Studio. Su crecimiento es rápido y supone una seria
competencia para otros frameworks como Prototype, Dojo Toolkit y
Scriptaculous, por citar algunos.

JQuery no consiste en solo una codificación para los script que sea más
intuitiva y concisa, sino que se centra en reunirse en un conjunto
de elementos que gestiona el DOM

jQuery es capaz de acceder simplemente a todos los elementos DOM, como

los
métodos getElementById,getElementsByName y getElementsByTagNam
e de JavaScript.

jQuery su código es compatible con los distintos navegadores. La variación de

los navegadores, reducida o más señalada, en función con los estándares DOM
y las hojas de estilo, es la cruda realidad en el desarrollo de aplicaciones web
evolucionadas. Con la interface que aplica jQuery, el codigo de las
aplicaciones se vuelve compatible con los principales navegadores

AJAX

Ajax es un acrónimo de las siglas “asynchronous JavaScript and XML” en

español “JavaScript y XML asíncronos”, aunque en su nombre se hace
referencia a las tecnologías JavaScript y XML, son muchas más las que lo
componen. El termino general Ajax describe el uso de varias tecnologías Web
para convertir el lento comportamiento de las aplicaciones basadas en lotes en
una capacidad de respuesta mucho más rápida, cercana a la capacidad de las
aplicaciones de escritorio. No obstante está mejora en la respuesta de las
aplicaciones Web conlleva un precio: aumento significativo en la complejidad de
la programación, mayor ocupación de la red, nuevos diseños web para mejorar
la experiencia del usuario, etc.
 AJAX

Las tecnologías que forman AJAX son:

 XHTML y CSS, para crear una presentación basada en estándares.

 DOM, para la interacción y manipulación dinámica de la presentación.

 XML, XSLT y JSON, para el intercambio y la manipulación de

información.

 XMLHttpRequest, para el intercambio asíncrono de información.

 Un lenguaje de servidor como PHP o ASP.NET para procesar las

peticiones en el servidor y enviar las respuestas.

 JavaScript, para unir todas las demás tecnologías.

 En las aplicaciones web tradicionales, las acciones del usuario en la página
(pinchar en un botón, seleccionar un valor de una lista, etc.) desencadenan
llamadas al servidor. Una vez procesada la petición del usuario, el servidor
devuelve una nueva página HTML al navegador del usuario.

En el siguiente esquema, la imagen de la izquierda muestra el modelo

tradicional de las aplicaciones web. La imagen de la derecha muestra el nuevo
modelo propuesto por AJAX:

La técnica tradicional para crear aplicaciones web funciona correctamente,

pero no crea una buena sensación al usuario. Al realizar peticiones continuas al
servidor, el usuario debe esperar a que se recargue la página con los cambios
solicitados. Si la aplicación debe realizar peticiones continuas, su uso se
convierte en algo molesto.

AJAX permite mejorar completamente la interacción del usuario con la

aplicación, evitando las recargas constantes de la página, ya que el intercambio
de información con el servidor se produce en un segundo plano.

Las aplicaciones construidas con AJAX eliminan la recarga constante de

páginas mediante la creación de un elemento intermedio entre el usuario y el
servidor. La nueva capa intermedia de AJAX mejora la respuesta de la
aplicación, ya que el usuario nunca se encuentra con una ventana del
navegador vacía esperando la respuesta del servidor.

El siguiente esquema muestra la diferencia más importante entre una

aplicación web tradicional y una aplicación web creada con AJAX. La imagen
superior muestra la interacción síncrona propia de las aplicaciones web
tradicionales. La imagen inferior muestra la comunicación asíncrona de las
aplicaciones creadas con AJAX.
 Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se
realizan al elemento encargado de AJAX. Las peticiones más simples no
requieren intervención del servidor, por lo que la respuesta es inmediata. Si la
interacción requiere una respuesta del servidor, la petición se realiza de forma
asíncrona mediante AJAX. En este caso, la interacción del usuario tampoco se
ve interrumpida por recargas de página o largas esperas por la respuesta del
servidor.

Desde su aparición, se han creado cientos de aplicaciones web basadas en

AJAX. En la mayoría de casos, AJAX puede sustituir completamente a otras
técnicas como Flash. Además, en el caso de las aplicaciones web más
avanzadas, pueden llegar a sustituir a las aplicaciones de escritorio.

A continuación se muestra una lista de algunas de las aplicaciones más

conocidas basadas en AJAX:
 Gestores de correo electrónico: Gmail (http://www.gmail.com), Yahoo
Mail (http://mail.yahoo.com), Windows Live Mail (http://www.hotmail.com).

 Cartografía: Google Maps (http://maps.google.com) , Yahoo Maps

(http://maps.yahoo.com), Windows Live Local (http://maps.live.com).

 Aplicaciones web y productividad: Google Docs

(http://docs.google.com), Zimbra (http://www.zimbra.com/), Zoho
(http://www.zoho.com/).

 Otras: Netvibes (http://www.netvibes.com) [metapágina], Digg

(http://www.digg.com) [noticias], Meebo (http://www.meebo.com)
[mensajería], 30 Boxes (http://www.30boxes.com) [calendario], Flickr
(http://www.flickr.com) [fotografía].

Json

JSON (JavaScript Object Notation) se utiliza para el intercambio de

información de manera sencilla. JSON nos permite representar los datos en
array y objetos “Arrays asociativos” en forma de texto. La notación de
objetos con JSON es una característica principal y un mecanismo que está
definido en los fundamentos elementales de JavaScript.

Json

La notación de los arrays, como ya sabemos es un poco abstracta cuando

disponemos de muchos elementos:

Código de programación
 Mediante JSON crearemos un array el cual, se indican los valores
separados por comas y entre corchetes. De tal forma que podemos utilizar
la notación de JSON para rescribir el ejemplo anterior.

Código de programación

La notación para los arrays asociativos es lo mismo de abstracta que la de los

normales:

Código de programación

Aunque se pueden usar la notación de puntos para abreviar un poco su

definición:

Código de programación

Gracias a la notación de JSON, podemos definir los arrays asociativos de

forma menos tediosa y concisa. Veamos cómo podemos reescribir el
ejemplo anterior a la notación JOSN:

Código de programación

Este array se puede dividir en las siguientes partes:

1. Los contenidos del array asociativo se encierran entre llaves ({ y })

2. Los elementos del array se separan mediante una coma (,)
3. La clave y el valor de cada elemento se separan mediante dos puntos
(:)

Si la clave no dispone de espacios en blanco, podemos eliminar las comillas

que cierran el contenido. Pero las comillas son obligatorias cuando las claves
pueden disponer de espacios en blanco:
 Código de programación

MySQL

MySQL es el servidor de bases de datos relacionales más popular,

desarrollado y proporcionado por MySQL AB. MySQL AB es una empresa cuyo
negocio consiste en proporcionar servicios en torno al servidor de bases de
datos MySQL.

MySQL es un sistema de administración de bases de datos

Una base de datos es una colección estructurada de datos. La información que
puede almacenar una base de datos puede ser tan simple como la de una
agenda, un contador, o un libro de visitas, ó tan vasta como la de una tienda
en línea, un sistema de noticias, un portal, o la información generada en una
red corporativa. Para agregar, accesar, y procesar los datos almacenados en
una base de datos, se necesita un sistema de administración de bases de datos,
tal como MySQL.

MySQL es un sistema de administración de bases de datos relacionales

Una base de datos relacional almacena los datos en tablas separadas en lugar
de poner todos los datos en un solo lugar. Esto agrega velocidad y flexibilidad.
Las tablas son enlazadas al definir relaciones que hacen posible combinar datos
de varias tablas cuando se necesitan consultar datos. La parte SQL de "MySQL"
significa "Lenguaje Estructurado de Consulta", y es el lenguaje más usado y
estandarizado para accesar a bases de datos relacionales.

Detalles sobre MySQL

El software de bases de datos MySQL consiste de un sistema cliente/servidor

que se compone de un servidor SQL multihilo, varios programas clientes y
bibliotecas, herramientas administrativas, y una gran variedad de interfaces de
programación (APIs). Se puede obtener también como una biblioteca multihilo
que se puede enlazar dentro de otras aplicaciones para obtener un producto
más pequeño, más rápido, y más fácil de manejar. Para obtener información
técnica más detallada, es necesario consultar la guía de referencia de MySQL.

Python

Introducción a Python

Python es un lenguaje de programación interpretado multiparadigma, es

decir, soporta la programación orientada a objetos, la programación imperativa
y, en menor medida, la programación funcional. Fue creado por Guido Van
Rossum a principios de los años 90 como lenguaje de programación para
administrar sistemas operativos, en concreto Amoeba.
 Python

Usa tipado dinámico, es multiplataforma y debido a que es de código libre,

la comunidad de desarrolladores han creado librerías o módulos para hacer casi
cualquier cosa. Su filosofía hace hincapié en una sintaxis que favorezca un
código legible, de ahí que la curva de aprendizaje de este lenguaje de
programación sea sencilla y rápida.

Por tanto, Python es un lenguaje de programación poderoso y fácil de

aprender. Cuenta con estructuras de datos eficientes y de alto nivel y un
enfoque simple pero efectivo a la programación orientada a objetos. La
elegante sintaxis de Python y su tipado dinámico, junto con su naturaleza
interpretada, hacen de éste un lenguaje ideal para scripting y desarrollo rápido
de aplicaciones en diversas áreas y sobre la mayoría de plataformas.

Resumiendo, es un lenguaje dirigido a objetos y con limpieza ya que su

sintaxis usa el mínimo de caracteres necesarios. Es muy adecuado como primer
lenguaje de programación, pero en la actualidad es un lenguaje maduro usado
para todo tipo de aplicaciones como pueden ser las aplicaciones web o temas
relacionados con bioinformática o análisis de datos.

Principales características de Python

Aunque ya hemos hablado prácticamente de todas ellas, a continuación

resumimos algunas de las generalidades o características que presenta
Python como:

 Simple: Es un lenguaje simple y minimalista. Permite concentrarse en la

solución del problema en lugar de la sintaxis.

 Sencillo de aprender: Debido a su simplicidad, aprenderlo resulta

bastante fácil.
 Libre y código abierto: Se puede distribuir libremente, leer su código
fuente, hacerle cambios, etc. Esto ha contribuido a que este lenguaje se haya
vuelto tan bueno y estable, debido a la comunidad que existe en torno a él con
el afán de mejorarlo.

 Lenguaje de alto nivel: Abstrae el problema de manejo de memoria u

otros detalles de bajo nivel.

 Portable: Por ser Open Source, Python ha sido portado a diferentes

plataformas. Todos los programas podrán ejecutarse en alguna de esas
plataformas sin requerir cambio alguno. Se debe, no obstante, ser cuidadoso de
evitar las características con dependencia del sistema.

 Interpretado: No existen compilaciones separadas y pasos de

ejecución. Solo es necesario ejecutar el código fuente, internamente Python
convierte el código fuente en una forma intermedia llamada bytecodes y
después lo traduce en el nativo del computador para ejecutarlo.

 Orientado a objetos: El programa está construido sobre

procedimientos o funciones reutilizables.

 Ampliable: Puede ser modificado por la comunidad en el caso de

necesitar nuevas funciones o mejorar las existentes.

 Librerías extendidas: Python contiene una gran cantidad de librerías,

tipos de datos y funciones incorporadas en el propio lenguaje, que ayudan a
realizar muchas tareas comunes sin necesidad de tener que programarlas
desde cero. Estas librerías pueden ayudas a hacer varias cosas como
expresiones regulares, generación de documentos, evaluación de unidades,
pruebas, procesos, bases de datos, navegadores web, CGI, ftp, correo
electrónico, XML, XML-RPC, HTML, archivos WAV, criptografía, GUI, y otras
funciones dependientes del sistema.

 Modo interactivo: El intérprete de Python estándar incluye un modo

interactivo en el cual se escriben las instrucciones en un intérprete de
comandos: las expresiones pueden ser introducidas una a una, pudiendo verse
el resultado de su evaluación inmediatamente, lo que da la posibilidad de
probar pociones de código en el modo interactivo antes de integrarlo como
parte de un programa.

En la última década Python ha experimentado un importantísimo aumento

del número de programadores y empresas que lo utilizan. Google por ejemplo,
usa Python como uno de sus principales lenguajes de desarrollo (otros son Java
y C++). También Youtube usa Python en sus sistemas de explotación.
Industrial Light & Magic (la empresa de efectos especiales de George Lucas) y
Pixar recurren a Python en sus sistemas de producción cinematográfica.
 Gramática y sintaxis en Python

En Python, todos los identificadores pueden incluir letras, número y guion

bajo (_), pero nunca podrán comenzar por un número.

Python además es sensible a mayúsculas y minúsculas y aquellos

identificadores que comiencen con un guion bajo tendrán un significado
especial.

Como en cualquier lenguaje de programación existe una lista de

palabras reservadas que nunca podrán ser utilizadas como constantes o
variables, o cualquier otro nombre de identificador.

Una de las principales diferencias entre un código en Python y otros lenguajes

de programación es que no utiliza llaves ({}) para controlar las clases, las
funciones y otras lógicas. El control de estas lógicas se realiza mediante
espacios en blanco.

Las sentencias de Python en general terminan con un salto de línea, pero

podemos hacer uso de la barra invertida (\) para terminar la declaración de la
sentencia en varias líneas como mostramos en la siguiente imagen.

Para las declaraciones que tengan corchetes [], llaves {} o paréntesis (), no

es necesario hacer uso de la conexión de varias líneas. Por ejemplo:

Si lo que queremos es hacer comentarios, tendremos que comenzar la línea

con la almohadilla #.
 Esos comentarios solamente son útiles cuando queremos comentar una única
línea, mientras que si lo que queremos es hacer un comentario de varias líneas,
podemos hacer uso de las tres comillas simples (‘’’) o bien de tres comillas
dobles (“””).

Librerías en Python

La comunidad de Python crea cosas que son verdaderamente útiles, y en esta

sección veremos algunas de las librerías oficiales que posee Python y que se
puede acceder a ellas desde su página oficial.

 Colorama: Esta es una librería que siempre deberíamos tener a mano.

La función de esta librería es la de mostrar el texto con diferentes fondos y
distintos colores de una forma sencilla y sin quebraderos de cabeza. Es una
librería muy recomendada si queremos hacer un script visualmente atractivo.

 Kivy: La librería Kivy es una librería multiplataforma que nos va a

permitir crear aplicaciones para Android, así como aplicaciones multitouch para
Windows, Mac OS X y Linux.

 PyWeather: Con esta librería tendremos la posibilidad de recoger datos

de varias fuentes meteorológicas y mostrarlo de la manera que más nos guste.
 PyQt: Es un binding de la biblioteca gráfica Qt que está disponible para
lenguajes de programación.

 PyGTK: Librería que nos va a permitir crear programas de interfaz

gráfica multiplataforma.

Angular JS

Angular se trata de un framework utilizado para el desarrollo de aplicaciones

web de una sola página, y está desarrollado en TypeScript. El propósito de
Angular, es el de generar una mayor cantidad de aplicaciones basadas en un
navegador, permitiendo el uso del modelo vista controlador (MVC).

Para utilizarlo, debemos disponer de Node.js. Se trata de un entorno

multiplataforma utilizado para la programación, cuyo objetivo principal es el de
construir programas de red escalables y que permitirá la integración de Angular
para poder programar con él.
 TypeScript

TypeScript es un lenguaje de programación multiparadigma, que se trata

de un superconjunto de JavaScript, y que generalmente posee una extensión
“.ts ”. Éste es el lenguaje que hemos utilizado, por ejemplo,
en app.module.ts, y en esta unidad aprenderemos mejor su funcionamiento.

Para entender mejor la programación orientada a objetos, comencemos con

un ejemplo. Supongamos que tenemos un coche de una marca determinada
(clase ), el cual tiene una serie de funciones, como arrancar, frenar, acelerar…
(métodos ) y también una serie de atributos, como por ejemplo el color,
modelo, plazas… (propiedades ) que lo hacen distinto de otro coche de la
misma marca.

Es decir, una clase puede ser considerada un molde a través del cual
podemos crear una serie de objetos con características similares.

DJANGO

Django es un framework para aplicaciones web gratuito y open source,

escrito en Python. Es un WEB framework, un conjunto de componentes que te
ayudan a desarrollar sitios web más fácil y rápidamente.

ana

Para entender para qué es Django, necesitamos mirar más de cerca a los
servidores. Lo primero es que el servidor necesita saber que quieres que te
sirva una página web.

Imagina un buzón (puerto) el cual es monitoreado por cartas entrantes

(peticiones). Esto es realizado por un servidor web. El servidor web lee la carta,
y envía una respuesta con una página web. Pero cuando quieres enviar algo,
tienes que tener algún contenido. Y Django es algo que te ayuda a crear el
contenido.

Principales características:

 El objetivo esencial de este marco de desarrollo es la creación de

aplicaciones web sin complicaciones. Pretende ser sencillo, rápido, como ellos
mismos afirman, “puedes concentrarte en escribir tu aplicación sin la necesidad
de tener que reinventar la rueda”. Es un resumen casi perfecto de Django:
programación rápida de páginas y aplicaciones web. Esto es gracias a Python,
un lenguaje sencillo, directo, de máxima eficiencia gracias a que la cantidad de
código necesario para programar cualquier proyecto digital es realmente baja.
 Basado en la filosofía DRY (Don’t Repeat Yourself: No te repitas). Muchas
aplicaciones web y proyectos digitales comparten numerosas líneas de código
unos con otros. Django es el marco de desarrollo de refactorización de código
casi por excelencia. Permite reutilizar programación de unas aplicaciones a
otras sin la obligación de tener que repetir las mismas líneas de código entre
distintos proyectos.

 Django es un framework web de alto nivel basado en el paradigma

Modelo-Vista-Controlador. No podría ser de otra forma en un marco de
desarrollo que apuesta por la sencillez, la rapidez y la reutilización de código.
Por tanto, por un lado están los datos (el modelo) y por otro la interfaz de
usuario (la vista) y la lógica de negocio (el controlador).

 Base de datos embebida. Django viene con SQLite, una base de datos

usada por compañías tan importantes como Facebook o Bloomberg.

 Sistema ORM de conexión a bases de datos. ORM es el sistema por el

que este marco de desarrollo se conecta y almacena sus datos en la BD. Dentro
de este proceso son esenciales los Querysets, listados de datos del modelo que
pueden ser leídos, ordenados y filtrados.

 Una API propia para el desarrollo de proyectos digitales. Django

REST framework es un conjunto de herramientas que permite a los
desarrolladores la construcción de Web APIs navegables, compatibles con
lectura de datos ORM o no ORM y con políticas de autenticación basadas
en paquetes tan conocidos como OAuth1 y OAuth2.

 Antes de instalar Django, instalaremos una herramienta

extremadamente útil que ayudará a mantener tu entorno de desarrollo
ordenado en su computadora. Es posible omitir este paso, pero es muy
recomendable no hacerlo.

 Así que, vamos a crear un entorno virtual (también llamado

un virtualenv). Aislará la configuración Python/Django con base en cada
proyecto, lo que significa que cualquier cambio que realices en un sitio
web no afectará a otros que también estés desarrollando.

 Todo lo que necesitas hacer es encontrar un directorio en el que desees

crear el virtualenv; tu directorio home, por ejemplo. En Windows puede
verse como C:\Users\Name (donde nombre es el nombre de tu usuario).

 En éste caso usaremos un nuevo directorio djangogirls en tu directorio

home:


 Haremos un virtualenv llamado myvenv. El comando general estará en el

formato:

 Windows

 Para crear un nuevo virtualenv, debes abrir la consola y ejecuta

C:\Python34\python -m venv myvenv. Se verá así:

 En donde C:\Python34\python es el directorio en el que instalaste

Python previamente y myvenv es el nombre de tu virtualenv. Puedes
utilizar cualquier otro nombre, pero asegúrate de usar minúsculas y no
dejar espacios, acentos o caracteres especiales. También es una buena
idea mantener el nombre corto. 

 Linux y OS X

 Crear un virtualenv en Linux y OS X es tan simple como

ejecutar python3 -m venv myvenv. Se verá así:

 myvenv es el nombre de tu virtualenv. Puedes usar cualquier otro

nombre, pero mantén el uso de minúsculas y no incluyas espacios.
También es una buena idea mantener el nombre corto. 

 Instalar Django

 Ahora que tienes tu virtualenv iniciado, puedes instalar Django

usando pip. En la consola, ejecuta pip install django==1.8 (fíjate que
utilizamos un doble signo igual: ==).


 El primer paso para crearlo es iniciar un nuevo proyecto en Django.

Básicamente, esto significa que podrás correr algunos scripts
proporcionados por Django que crearán el esqueleto de un proyecto para
nosotros: un montón de directorios y archivos que vamos a utilizar más
adelante.

 Los nombres de algunos archivos y directorios son muy importantes para

Django. No deberías renombrar los archivos que estamos a punto de
crear. Moverlos a un lugar diferente tampoco es una buena idea. Django
tiene que mantener una cierta estructura para ser capaz de encontrar
cosas importantes.

 En la consola debes ejecutar (RECUERDA no escribir (myvenv)

~/djangogirls$

 En Windows:

 manage.py es un script que ayuda con la administración del sitio. Con

ello podremos iniciar un servidor web en nuestro ordenador sin
necesidad de instalar nada más, entre otras cosas.
 El archivo settings.py contiene la configuración de tu sitio web.

 Cambiando la configuración

 Vamos a hacer algunos cambios en mysite/settings.py. Abre el archivo

usando el editor de código que has instalado anteriormente.

 Sería bueno tener el horario correcto en nuestro sitio web. Ve a la lista

de husos horarios de Wikipedia y copia tu zona horaria (TZ). (por
ejemplo, Europe/Berlin )

 En settings.py, encuentra la línea que contiene TIME_ZONE y modifícala

para elegir tu propia zona horaria:

 Modificando "Europe/Berlin" como corresponda

 También necesitaremos agregar una ruta para los archivos estáticos. Ve

hacia abajo hasta el final del archivo, y justo por debajo de la
entrada STATIC_URL, agrega una nueva llamada STATIC_ROOT:

 Configurar una base de datos

 Hay una gran variedad de opciones de bases de datos para almacenar

los datos de tu sitio. Utilizaremos el que viene por defecto, sqlite3.

 Esto ya está configurado en esta parte de tu archivo mysite/settings.py:

 Para crear una base de datos para nuestro blog, ejecutemos lo siguiente
en la consola: python manage.py migrate (necesitamos estar en el
directorio de djangogirls que contiene el archivo manage.py). Si eso va
bien, deberías ver algo así:
 

 Debes estar en el directorio que contiene el archivo manage.py (en la

carpeta djangogirls). En la consola, podemos iniciar el servidor web
ejecutando python manage.py runserver:

 Ahora todo lo que debes hacer es verificar que tu sitio esté corriendo -
abre tu navegador (Firefox, Chrome, Safari, Internet Explorer o el que
utilices) e ingresa la dirección:

 El servidor web se apropiará de tu consola hasta que lo termines

manualmente: para tipear más comandos o abres una nueva terminal (y
no te olvides de activar tu virtualenv allí también), o frena el servidor
web yendo a la consola en la que está corriendo y presionando Ctrl+C -
las teclas Control y C juntas (en Windows, deberás presionar Ctrl +
Break).

Phalcon

Se trata de un framework de PHP, implementado como una extensión del

lenguaje C que ofrece un alto rendimiento y un menor consumo de recursos por
cada petición, lo que hace que tenga mayor rapidez. Está basado en el patrón
modelo-vista-controlador (MVC). Se trata de un proyecto de código abierto con
licencia bajo los términos BSD.

Phalcon

Instalación en Windows

A la hora de realizar la instalación se necesita sólo que la versión de nuestro

php sea igual o superior a la 5.3.9, una vez se haya comprobado esto, se
descarga la dll de la versión correspondiente. Una vez hecho, simplemente abre
el panel de control de xampp y pulsa en config de Apache, a continuación pulsa
sobre BROWSE PHP, simplemente debes abrir la carpeta ext de la lista que
aparece, que son las extensiones de php que se tienen en el equipo, y pegar la
dll que se acaba de descargar, así de sencillo. La ruta puede ser
C:\xampp\php\ext, todo puede variar en correspondencia con las opciones que
usted desea para su instalación. Ahora sólo queda abrir php ini y debajo de
extension=php_xmlrpc.dll, al final de la carga de todas las extensiones, añadir
lo siguiente.

Funcionamiento

 Los componentes están libremente acoplados. Con Phalcon, nada está impuesto:
tienes la libertad de usar todo el framework, o solo las partes que necesiten.
 Optimizaciones de bajo nivel ayudan a reducir la sobrecarga requerida para correr
aplicaciones MVC.
 Las operaciones con base de datos se efectúan con la máxima eficiencia al usar un
ORM para PHP escrito en C.
 Phalcon accede directamente a las estructuras internas de PHP optimizando además
cada ejecución.

Laravel

Laravel es un framework para aplicaciones web con sintaxis expresiva y

elegante. Creemos que el desarrollo debe ser una experiencia agradable y
creativa para que sea verdaderamente enriquecedora. Laravel busca eliminar el
sufrimiento del desarrollo facilitando las tareas comunes utilizadas en la
mayoría de los proyectos web, como la autenticación, enrutamiendo, sesiones y
almacenamiento en caché. Laravel es un framework para el lenguaje de
programación PHP. Aunque PHP es conocido por tener una sintaxis poco
deseable, es fácil de usar, fácil de desplegar y se le puede encontrar en muchos
de los sitios web modernos que usas día a día. Laravel no solo ofrece atajos
útiles, herramientas y componentes para ayudarte a conseguir el éxito en tus
proyectos basados en web, si no que también intenta arreglar alguna de las
flaquezas de PHP.

Beneficios de Laravel

 Incluye un ORM intergrado.

 Cuenta con múltiples paquetes de extensión

 LA foram de programación es bastante elegante y eficiente

 Se controla la base de datos a través del código

  Rutas elegantes y seguras: Una misma ruta puede responder de distinto

modo a un método GET o POST.

  Cuenta con su propio motor de platillas HTML.

 Se actualiza facilmente desde la línea de comandos: El framework es

actualizable utilizando composer update y listo, nada de descargar un ZIP y
estar remplazando.

 Cuenta con una comunidad activa que da apoyo rápido al momento de

que lo necesitas.

Requisitos iniciales

Para poder trabajar con LAravel es necesario tener instalado lo siguiente:

 Un entorno de desarrollo web como puede ser Apache, IIS, Nginx, entre
otros

 Una base de datos como por ejemplo MySQL, Sqlite, PostgreSQL o

sqlserver

 Contar con la libreria de php llamada Mcrypt

Bootstrap se define como un conjunto de archivos HTML, CSS y Javascript

bien definidos y totalmente comprobados los cuales componen una sólida
estructura mediante la cual construir podemos construir un proyecto web o
aplicación.

En otras palabras Bootstrap es simplemente un archivo css y un js que

contienen componentes listos para utilizarse y que se adaptan a los diferentes
estándares para generar sitios web y aplicaciones web totalmente
responsivos.
 Bootstrap te incorpora una biblioteca de componentes reutilizables los
cuales se pueden utilizar en cada proyecto, desde un sistema llamado rejilla o
“grid”, una barra de navegación, botones o los estilos tipográficos, todos estos
están preparados para tener compatibilidad con todos los navegadores y
adaptarse a los diferentes tipos de pantalla, como puede ser la de móvil, una
Tablet, escritorio o SMARTV.

La gran ventaja de Bootstrap es que con él te ahorras todo aquel trabajo

inicial y aparte dispones de un código revisado y probado el cual es mucho
más fiable y escalable, proporcionando así una sólida estructura sobre la cual
desarrollar nuestra Web

Algunas ventajas de usar bootstrap en nuestros proyectos web son:

 Velocidad

 Componentes

 Responsive

 Temas

La nueva versión de Bootstrap, trae consigo una serie de notables cambios en

las generalidades de Bootstrap.

Botones: Se añaden nuevos colores, además de las clases dark, secondary y

light.
 Alertas: Se ha renovado el diseño de las alertas, además como en muchos
componentes se ha modificado el prefijo default  por s econdary.

Tarjetas: Estas sirven para mostrar texto o imágenes en una serie de

formatos, estas son las sustitutas de los paneles.

Carousel: Leves cambios estéticos para darle un aspecto más limpio y

diferente.
 Formularios: al igual que en los Crousel, podemos apreciar cambios
estéticos en los componentes.

Navbar: Esta es la barra la cual se utiliza como menú principal, está ahora

permite una mayor capacidad de personalización.

En este apartado vamos a comenzar con la descarga y la creación de nuestro

primer proyecto en Bootstrap.

Antes de nada vamos a crear una carpeta en nuestro ordenador, en está

vamos a ir guardando los archivos de nuestro proyecto web.
 El siguiente paso será acceder a la Web de descarga
de Bootstrap, https://v4-alpha.getbootstrap.com/getting-
started/download/#content y hacemos clic en Download Bootstrap:

Se nos descargará un fichero .rar, el cual lo guardamos y

descomprimimos en la carpeta que hemos creado:
 El siguiente paso será crear dentro de la carpeta que nos hemos descargado
un fichero index.html vacío:

Ahora vamos a volver a la página oficial de Bootstrap:

https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

Para copiar la plantilla de Inicio, para ello pulsamos sobre copy para copiar el
código HTML:

Abrimos el fichero index.html, con el editor de texto que deseemos en

nuestro caso Notepad ++, y pegamos el código:
 Si guardamos y abrimos este fichero mediante un navegador veremos que ya
tenemos Bootstrap instalado:

Bien vemos que funciona ,pero nos preguntaremos para que hemos
descargado los ficheros de Bootstrap. Muy fácil, para utilizar bootstrap tenemos
dos opciones

Utilizarlo haciendo referencia a su CND

Esta ocpión la utilizaremos si no deseamos tener en nuestro servidor los

archivos de Bootstrap. Un CDN es un grupo de servidores ubicados en distintos
puntos de la red los cuales tienen copias locales de determinados contenidos,
en nuestro caso, los ficheros de Bootstrap. Si elegimos utilizar el CDN, quedaría
tal cual hemos copiado anteriormente:

Utilziarlo en local haciendo referencia a los fichero que hemos

descargado
 Si nos decantamos por esta opción tendremos que llamar a los ficheros CSS y
Javascript de Bootstrap para que podamos hacer uso de sus funcionalidades. En
concreto necesitamos linkar los ficheros:

bootstrap.min.css ubicado en la carpeta CSS:

Y bootstrap.min.js  ubicado en la carpeta JS:

Para ello editamos el fichero index.html y modificamos las siguientes líneas

de manera que queden así:
 Estas serían las dos formas que podemos llevar a cabo para instalar y utilizar
Bootstrap.

Spring

Spring es una plataforma para desarrollar aplicaciones web y contenedores

para invertir el control, open source y bajo el estándar Java.

Rod Johnson creó la primera versión junto con su libro Expert One-on-ONe
J2EE Design and Development. Esta plataforma se lanzó con la licencia Apache
2.0 en 2003. En 2004 se lanzó la versión 1.0 y actualmente se encuentra
disponible la versión 4.

Spring

Aunque las principales características de Spring pueden usarse en una

aplicación Java cualquiera, hay varias extensiones para desarrollar soluciones
web gracias a la plataforma Java EE. Aunque no se impone ningún paradigma
de programación, esta plataforma se ha popularizado por considerarse una
opción, sustituto y extensión al modelo de Enterprise Java Beans.

Historia

Los primeros elementos de los que se ha acabado convirtiendo en Spring

Framework se desarrollaron por el propio Rod Johnson allá por el año 2000,
cuando trabajaba como consultor freelance para clientes del sector financiero
en Londres. A la vez que escribía su libro antes mencionado, Rod fue ampliando
el código para plasmar su enfoque de cómo las apliaciones que funcionan con
múltiples componentes de J2EE podrían ser capaces de ser más simples y
por ende más consistentes que las que se estaban desarrollando por
programadores y empresas en aquella época.

En el 2001 el API de Java Servlet y el modelo de Enterprise Java

Beans eran las plataformas imperantes para las aplicaciones web. Estos dos
estándares fueron creados por la hoy extinta Sun Microsystems colaborando
con otras compañías y desarrolladores que contaban con
bastante popularidad en la comunidad de desarrollo en Java. Estas
aplicaciones no se basaban en soluciones web, como las aplicaciones cliente o
las aplicaciones batch, que podían escribirse con la base de utilidades y
proyectos open source y comerciales que van a proveer las necesidades que
requerían aquellos proyectos.

Se compuso un equipo pequeño de desarrolladores cuyo fin era ampliar

el framework y crearon para ello un proyecto en Sourceforge en el año
2003. Tras más de un año de trabajo llegó la versión 1.0 en el 2004. tras este
lanzamiento, Spring se popularizó entre la comunidad, en parte gracias al
empleo de Javadoc y la disponibilidad de una documentación para los
desarrolladores muy por encima del resto de proyectos open source.

No obstante, Spring también fue víctima de muchas críticas y aún hoy crea

controversia. A la vez que realizaba su puesta de largo, muchos desarrolladores
y entendidos acogieron Spring como un paso adelante en referencia al
modelo tradicional de programación. Realmente era así si se comparaba
con Enterprise Java Beans. Uno de los objetivos de Spring era que fuese
fácilmente integrable con J2EE y las utilidades comerciales que existían en
aquel momento. Esto evitaba en gran parte la obligación de plasmar sus
características en una especificación elaborada por parte de un comité
oficial y que podría ser víctima de más críticas.

Carpeta Archivador llena de documentos

Ocultar descripción alternativa
Carpeta con una cremallera cerrada y llena de documentos.

Spring logró que aquellas técnicas nuevas que no conocía la gran mayoría

de desarrolladores se popularizaran en poco tiempo. El ejemplo más
relevante es la inversión de control. En 2004, Spring fue muy adoptado y por
ende popularizaó su nuevo paradigma de programación, la programación
orientada a aspectos entre la comunidad Java.

En 2005 Spring siguió batiendo récords de adopción con respecto al año

anterior gracias a la publicación de nuevas versiones y nuevas características.
La creación de un foro oficial para la comunidad Spring, The Spring Forum,
lanzado a finales del año anterior, fue en gran medida responsable de este
incremento de popularidad ya que no ha parado de crecer, convirtiéndose
por derecho propio en la fuente de información y de ayuda más importante
en referencia a Spring.

Vue.JS

Vue.js es un framework progresivo, eso quiere decir que podemos usarlo

para algo múy básico, igual que antes se usaba jQuery para cosas sencillas, o
para algo más complejo como el desarrollo de una SPA, o para Server-
Rendering. Siempre con un rendimiento y experiencia de desarrollo muy buena.

Vue.JS

Vue no necesita de Webpack ni de instalación de transpilers o cualquiera

parecido. Su inclusión en proyectos es tan sencillo como importar la libreria en
el HTML.

Componentes del Estándar J2EE: Servlets y JSPs.

Los servlets son programas Java que se ejecutan en un contenedor Web

dentro de un servidor de aplicaciones y actúan como una capa intermedia entre
la petición de un cliente y la aplicación del servidor o la base de datos.

Un servlet puede:

 Leer los datos explícitos enviados por el cliente. Suele ser información
introducida en un formulario HTML.

 Leer los datos implícitos de la petición HTTP enviada por el navegador.

La información HTTP incluye las cookies, y toda la información que se incluye
dentro de la cabecera de una petición HTTP.

 Generar resultados. Este proceso puede requerir comunicarse con la

base de datos, ejecutar una llamada RMI, invocar un servicio Web o generar la
respuesta directamente.

 Enviar datos explícitos al cliente. El documento puede ser enviado en

una gran variedad de formatos, ya sea HTML o XML, imágenes GIF o JPG,
archivos EXCEL, etc.
 Enviar datos implícitos en la respuesta HTTP al cliente. La información
HTTP incluye el establecimiento de cookies y cualquier cabecera que pueda
enviarse dentro de la respuesta HTTP, como el almacenamiento en caché, etc.

Podemos resumir que un servlet se dedica a responder peticiones HTTP de los

navegadores clientes y a generar resultados dinámicos en respuesta a estas
peticiones.

Los servlets no solo se limitan a responder peticiones HTTP. Existen servlets

que pueden ser embebidos en un servidor FTP o en servidores de correo, pero
en la práctica solamente se utilizan los servlets que responden peticiones HTTP.

Un servlet tiene un ciclo de vida bien definido, es decir, está especificado

cómo y cuándo un servlet debe ser cargado e instanciado en la memoria,
inicializado, ejecutado y finalmente destruido.

Instanciación:

El container de servlets es el encargado de cargar e instanciar cada servlet.

Esto puede suceder en la inicialización del container o después, hasta que el
container determine que el servlet es necesario para procesar un request.

Los archivos necesarios para ejecutar un servlet deben ser localizados por el
container para poder cargarlos utilizando el Java Class Loader que proporciona
el lenguaje.

Inicialización:

Después de que un servlet se haya instanciado, el container debe inicializar el

servlet.

La inicialización permite a un servlet realizar tareas como leer datos

persistentes de configuración, crear recursos como conexiones a bases de
datos, o cualquier tarea que deba ser ejecutada sólo una vez previamente a
interactuar con clientes.

Aunque los servlets se ejecutan en servidores multithreads, no existen

problemas de concurrencia durante su inicialización.

El container debe ejecutar sólo una vez el método de inicialización al crear la

instancia del servlet y no debe volver a hacerlo sin antes destruirlo
previamente.

Interacción con Clientes:

Después de ser inicializado, un servlet es utilizado para procesar peticiones

(request) de diferentes clientes.

Todos los requests que corresponden al mismo servlet son procesados por la
misma instancia en forma concurrente por lo que hay que tomar las medidas
necesarias para evitar problemas en el acceso a variables compartidas.
 El container garantiza que si un servlet implementa la interfaz
SingleThreadModel, sólo un thread a la vez ejecutará el servlet, evitando de
forma simple, pero menos óptima, estos problemas de sincronización.

Destrucción:

No es obligatorio que un container mantenga un servlet cargado por un

período de tiempo específico.

Cuando el container determina que un servlet debe ser destruido, que podría
ser entre la inicialización del servlet y el cierre del container, se ejecuta un
método particular con el objetivo de guardar configuraciones, cerrar
conexiones, archivos, etc.

Cuando se encuentra en ejecución el método de destrucción, el container no

debe aceptar nuevos clientes para esa instancia, y una vez finalizado debe
eliminar la referencia a la instancia con el fin de ser eliminado por el recolector
de basura de Java.

Gráfico del ciclo de vida de un servlet:

Al estar escritos en Java, tienen todas las ventajas de este lenguaje (pueden
hacer uso de cualquier paquete de Java). Como es un lenguaje altamente
escalable surgirán paquetes de una forma muy rápida (por ejemplo, ya existen
paquetes para la gestión de documentos XML).

Los Servlets son portables entre plataformas (siguen la premisa de Java

"escribir una vez, ejecutar en cualquier lugar"). Netscape, Apache e IIS, los tres
servidores Web más populares, soportan los Servlets.

En esta imagen podemos apreciar el esqueleto básico de una aplicación

Servlet:
 Las sentencias import indican al compilador de Java la inclusión de
todas las clases públicas e interfaces de los paquetes java.io y
javax.servlet en la compilación.

La clase extiende (extends), es heredera de la clase HttpServlet. Esta

clase permite incluir la interfaz para que el servidor le pase las peticiones al
servlet y el mecanismo se utilice para controlar el ciclo de vida de este servlet.

Los servlets heredan de la clase HttpServlet y sobreescriben el método

doPost o doGet, dependiendo de si los datos han sido enviados por el método
POST o GET.

Los servlets no tienen una parte gráfica, sino que son clases que representan
una petición de un cliente, para posteriormente, ejecutar una serie de acciones
o representar un código de salida HTML como respuesta a la llamada.

Podemos realizar la misma acción tanto para peticiones GET y POST

simplemente llamando a doGet desde doPost o viceversa.

Ambos métodos, doPost y doGet, ofrecen dos argumentos:

 Un objeto HttpServletRequest: Encapsula la petición http

 Un objeto HttpServletResponse: Encapsula la respuesta HTTP.

El objeto HttpServletRequest nos permite acceder tanto a los datos como a

las cabeceras de la petición HTTP.

El objeto HttpServletResponse nos permite modificar la información de salida,

como los códigos de estado HTTP o las cabeceras de respuesta.

Además podemos obtener un objeto PrintWriter sobre el que generar el

contenido dinámico del documento al cliente.
 Los métodos doGet y doPost pueden lanzar las
excepciones ServletException e IOexception por lo que deben controlar
dichas excepciones, ya sea mediante throws o mediante try-catch.

Código de los métodos doGet y doPost:

doGet y doPost

Para poder trabajar con servlets, debemos importar los paquetes java.io
(para el PrintWriter), javax.servlet (para el HttpServlet) y javax.servlet.http
(para el HttpServletRequest y HttpServletResponse).

Los objetos para la definición de servlets se encuentran divididos en dos

paquetes: javax.servlet.*, que proporciona clases necesarias para crear
servlets genéricos, independientes del protocolo utilizado,
y javax.servlet.http.*, que proporciona las clases que definen un servlet
específico para el protocolo HTTP.

Servlet define la funcionalidad básica que tiene un servlet como es su ciclo

de vida (métodos init, destroy) y procesar requests (método service).

Es implementado por la clase GenericServlet.

SingleThreadModel es una interfaz utilizada para marcar los servlets que se

desea que se ejecuten en forma secuencial por requests simultáneos, evitando
posibles problemas de procesamiento paralelo.

HttpServlet agrega la funcionalidad para procesar los variados tipos de

request HTTP (principalmente los métodos doGet, doPost para procesar
formularios GET y POST, respectivamente).

HttpServletRequest proporciona información del request del cliente al

servlet a través del protocolo HTTP. Se pueden obtener datos como
encabezados, cookies y características genéricas como dirección del cliente y
parámetros recibidos desde él (getParameter). Permite también asociar objetos
(setAttribute) y acceder al objeto HttpSession.

HttpServletResponse asiste a un servlet para enviar una respuesta al

cliente a través de un canal de comunicación binario o de texto (getWriter).
Provee también funcionalidad específica para respuestas HTTP como enviar
encabezados, cookies (addCookie) y errores con códigos numéricos como 403
(sendError).
 HttpSession permite identificar un usuario a través de más de una página,
para esto se le asigna un identificador único que se mantiene mientras el
usuario navega en el sitio (getId). Permite asignar un tiempo máximo de
inactividad y se le pueden asociar objetos para compartir entre servlets
(setAttribute y getAttribute).

El código completo de cualquier servlet sería el siguiente:

Servlet Código

Cualquier servlet debe tener un sistema de carpetas específico para poder ser
ubicado en su contenedor y su servidor.

Si visualizamos el entorno de carpetas dentro del IDE NetBeans, veremos los

siguientes elementos:
 La carpeta WEB-INF indica el fichero xml que contiene el descriptor de
acceso, que indica los servlets que están ubicados dentro de nuestra aplicación.

Tenemos una carpeta llamada Source Packages dónde irían los códigos de
nuestras clases y de los servlets. Es recomendable poner los servlets dentro de
estructura de paquetes.

Por último, tenemos una carpeta llamada Web Pages dónde estarían las
páginas web que realizarán la llamada a los servlets.

Introducción a la tecnología de páginas JSP

Cuando una JSP es invocada por primera vez, ésta es convertida a un servlet
normal, en el cual la parte HTML estática se imprime directamente sobre el
flujo de salida asociado con el método service de dicho servlet.

Los desarrolladores de las JSP pueden invocarlas por primera vez al

instalarlas si quieren evitar el retardo en el que se incurre en la primera
invocación, cuando la JSP es convertida a un servlet y el servlet es compilado y
cargado.

Hay tres tipos de construcciones JSP que podemos incluir en una página:

Profundicemos un poco más en cada una de estas construcciones:
 Elementos de Script JSP

Los elementos de script de JSP te permiten insertar código Java en el servlet

que será generado a partir de la página JSP. Hay tres formas:
 Las expresiones de la forma <%= expression %> serán evaluadas e
insertadas en la salida.

Los Scriptlets de la forma <% code %> serán insertadas en el método

service del servlet.

Las declaraciones de la forma <%! code %> serán insertadas en el cuerpo

del servlet, fuera de cualquier método.

2.1. Expresiones JSP

Una expresión JSP es usada para insertar valores Java directamente en la

salida. Tiene el siguiente formato:

<%= Java Expression %>

La expresión es evaluada, convertida a String e insertada en la página. La

evaluación es realizada en tiempo de ejecución (cuando la página es solicitada),
y por eso tiene acceso completo a la información de la petición.

Existen un número de variables predefinidas que se pueden usar (no

podrán ser definidas como variables nuestras dentro de la página JSP):
Elementos críticos en páginas e-commerce.

A finales del siglo XIX algunas empresas de Estados Unidos comenzaron a

vender por catálogo. Fue un sistema de venta que revolucionó el mercado en
esos momentos ya que los clientes potenciales no tenían que desplazarse hasta
los espacios de venta, simplemente tenían que ver el catálogo que llevaba fotos
ilustrando los productos que se vendían. Este tipo de venta permitía dirigirse a
personas que vivían en otros lugares físicos e incluso éstos podían escoger
cómodamente los productos desde su casa, sin tener la obligación de
desplazarse a la tienda física y sin verse sometidos a la presión de ningún tipo
de vendedor. Podemos seguir manteniendo que hoy día éstas son dos de las
principales características del comercio electrónico.

La venta por catálogo tuvo su mayor impulso cuando aparecieron las tarjetas
de crédito, ya que además de las ventajas mencionadas anteriormente había
que tener en cuenta que se mantenía el anonimato entre comprador y
vendedor.

La práctica en sí del comercio electrónico comienza a principios de los 70

cuando se inventa en Estados Unidos el EDI, una forma de Intercambio de
Datos Electrónicos que permite a las empresas realizar transacciones
comerciales y permite el intercambio de información comercial, desarrollándose
diferentes tipos de procesos comerciales. Además, es en este año cuando
aparece la computadora como tal y aparecen las primeras relaciones
comerciales que usan un ordenador, ofreciendo un servicio limitado en un
primer momento permitiendo realizar solamente facturas y llevar a cabo
órdenes de compra.

Una de las innovaciones más importantes que han ocurrido en comercio

electrónico ha sido la aparición del World Wide Web o WWW, haciendo que la
comunicación y la comercialización en la empresa diera un giro de 360º.

Los países que componían el G7/G8 crearon hacia 1995 una nueva iniciativa,
un Mercado Global para PYMES. El objetivo primordial de esta nueva plataforma
era conseguir que empresas de todo el mundo adoptaran esta nueva forma de
trabajo, el comercio electrónico. En este mismo año se crea la OMC,
Organización Mundial del Comercio para regularizar y estandarizar todos los
procesos comerciales de intercambio entre países.

A finales del siglo XX aparecen las primeras empresas que comienzan a usar
Internet como canal de venta y aunque no son las pioneras, empresas como
Ebay o Amazon siguen teniendo éxito desde entonces.

Todo esto lleva asociado la primera crisis de las ‘punto com’ (así se llamaba a
las compañías de ese período de tiempo que se basaban en Internet), ya que a
finales del año 2000 estalla esta burbuja debido principalmente a la sobre
valoración de los negocios electrónicos y a la creencia de que las visitas son
sinónimo de rentabilidad para la empresa.

Seguramente, alguna innovación tecnológica revolucione de nuevo el

mercado y el modelo de negocio de las diferentes empresas que utilizan
comercio electrónico.
 Hoy en día, aceptamos que las nuevas tecnologías y, sobre todo, el acceso a
Internet, hayan modificado la forma de comunicarnos. Han cambiado las
relaciones entre la empresa y sus clientes, proveedores y trabajadores.

Podemos decir que el comercio electrónico hace referencia a la integración de

herramientas basadas en las tecnologías de la información y la comunicación
(TIC’s), con el objetivo de mejorar el funcionamiento de la misma y crear valor
para la empresa, sus clientes y sus socios.

Tenemos que tener en cuenta que comercio electrónico no sólo se aplica a

empresas virtuales, es decir, a aquellas empresas que no tienen
establecimiento o tienda física cuya actividad es totalmente online (basada en
la web), sino que también se aplica a empresas tradicionales (offline).

El objetivo de cualquier negocio que utilice comercio electrónico es crear

valor. El valor en sí se puede crear de diferentes maneras:

1. Por la satisfacción del cliente. Ésta se puede deber a diversas

razones:

 Mayor atención al cliente.

 Productos y servicios adecuados a las necesidades del cliente.

 Funcionamiento transparente para el usuario.

2. Por las relaciones con los proveedores. El establecimiento de

canales de comunicación con los proveedores permite:

 Más familiaridad en la relación proveedor-empresa.

 Capacidad de reacción superior.

 Anticiparse al cambio con rapidez.

 Recursos compartidos para beneficio de ambas partes.

3. Aumento del margen por producto (debido bien a la reducción de

los costes de producción o al aumento del beneficio):

 Búsqueda de nuevos clientes.

 Calidad superior en los productos y servicios.

 Aumento de la lealtad del cliente.

 Eficiencia en el funcionamiento interno de la empresa.

 Búsqueda de nuevos mercados.

4. Aumento de la motivación de los trabajadores:

 El trabajo en equipo mejora las competencias.

 El funcionamiento del comercio electrónico implica que todos los
participantes en el proyecto asuman su parte de responsabilidad.

 Se favorece la cultura y la filosofía empresarial, debido a que la

estrategia global del negocio se hace muchísimo más visible para los
trabajadores.

Con esto, lo que hay que tener muy claro es que un proyecto de estas
características, que use el comercio electrónico, sólo funcionará si
aporta valor tanto a la empresa como a sus clientes y sus proveedores.

A estas alturas es imposible pensar que el desarrollo del comercio electrónico

es una moda pasajera, por tanto la empresa debe preocuparse de estar
presente en esta moderna modalidad de negocio, sin pensar en los resultados
a corto plazo.

Aumento de competidores

La información, productos, tarifas, etc. son también vistos por los

competidores.

Los compradores todavía no tienen hábitos desarrollados en este nuevo

canal.

En determinadas zonas geográficas no hay suficientes usuarios conectados a

Internet.

Problemas de seguridad.

Desconfianza en la aportación de datos personales y financieros.

Soluciones técnicas no adecuadas; mal diseño de la página Web, catálogo

electrónico, carrito, tarifas y datos no actualizados, transporte.

Perderse en la Red.

Hay que ser optimista, ante este emergente e imparable medio de

compra/venta. A pesar de los inconvenientes todos superables, las cifras de
negocio actualmente crecen geográficamente, al igual que los nuevos
internautas.

Está igualmente emergiendo un nuevo perfil de consumidor más casero,

sedentario y progresivamente más virtual. Es decir, utiliza cada vez más el
ordenador para todo.
 Se aconseja establecer las métricas que se deben evaluar periódicamente
para realizar los análisis, corregir los fallos que se adviertan y obtener los
mejores resultados.

Algunas de las métricas que se pueden tomar para la evaluación de los blogs
son:

 Número de visitas mensuales.

 Número de nuevos suscriptores por mes.

 Páginas con más visitadas en el mes.

 Análisis de fuente de tráfico.

 Ubicación o zona geográfica de los visitantes.

 Porcentaje de rebote.

 Número de Comentarios en el blog.

Además, las empresas se deberían incorporar métricas para medir el nivel de

interacción y crecimiento en las redes sociales.

Errores comunes

En la actualidad nos encontramos con multitud de comercios electrónicos, ya

que la competencia es enorme, sin embargo podemos encontrar una serie de
erorres que es posible que se cometan.

Elección de plataforma incorrecta

Es recomendable investigar sobre las distintas plataformas y comparar sus

ventajas y desventajas dependiendo de las características del negocio a
montar.
 La siguiente imagen muestra una comparativa enre Prestashop y Magento
(dos tipos de E-Commerce existentes en el mercado)

Comparativa Prestahop y Magento

No invertir lo suficiente en mostrar al público

Lo importante es establecer una buena estrategia de SEO, posicionamiento

local, buenos anuncios a través de las diferentes redes sociales, etc. Lo
importante es establecer una estrategia adecuada en función del sector y el tipo
de producto a vender.

Búsqueda Elemento SEO

Tienda lenta

Esto deriva a cuando estamos utilizando un hosting de baja calidad y que la

IP se comparte en muchas webs, de forma que el rendimiento se verá afectado.

Lo recomendado es utilizar un hosting dedicado o uno privado virtual (VPS).

 Hosting

Olvidarse del SEO

Se necesita tráfico y visitas para generar números aceptables de ventas cada

mes.

Por lo que es recomendable una estrategia SEO comenzando por una

investigación de palabras clave, una buena optimización SEO y una buena
arquitectura Web.

SEO
Imágenes Digitales.

Para la creación de imágenes digitales y todo tipo de contenido existen

herramientas destinadas a ello. La más utilizada hoy en día es Photoshop,
aunque existen otras más también muy utilizadas.

Adobe Photoshop es una aplicación informática en forma de taller de pintura

y fotografía que trabaja sobre un "lienzo" y que está destinado para la edición,
retoque fotográfico y pintura a base de imágenes de mapa de bits (o gráficos
rasterizados).

A medida que ha ido evolucionando el software ha incluido diversas

mejoras fundamentales, como la incorporación de un espacio de trabajo
multicapa, inclusión de elementos vectoriales, gestión avanzada de color,
tratamiento extensivo de tipografías, control y retoque de color, efectos
creativos, posibilidad de incorporar plugins de terceras compañías, exportación
para web entre otros.

Photoshop se ha convertido, casi desde sus comienzos, en el retoque

fotográfico, pero también se usa extensivamente en multitud de disciplinas
del campo del diseño y fotografía, como diseño web, composición de imágenes
bitmap, estilismo digital, fotocomposición, edición y grafismos de vídeo y
básicamente en cualquier actividad que requiera el tratamiento de imágenes
digitales.

A la hora de la elección de una imagen en una página web podemos

establecer un tipo de formato de dicha imagen digital.

Entre los que podemos encontrar tenemos:

 JPEG/JPG: se trata del formato más utilizado en todos los medios,

además es el formato realizado por teléfonos móviles. Aplica compresión de
imagen pero manteniendo la calidad de la imagen, ya que solo escoge los
píxeles que capta, sin usar variantes. De esta manera se puede capturar
degradados y detalles de la imagen con el tamaño de capacidad mínimo.

 GIF: se utiliza mayormente en web y es bastante útil si se quiere poner

el logo de uan empresa o utilizar un gráfico de pocos colores, como icono. Este
formato es muy utilizado por las redes sociales de Facebook y Whatsapp para
crear animaciones de pocos frames.

 PNG: tiene mejor calidad que GIF en cuanto al nivel de compresión de la

imagen en ilustraciones de pocos colores, pero no tiene la posibilidad de crear
animaciones.

 WBMP: se trata de un formato de estilo monocrono dedicado a web, es

el menos utilizado pero es interesante su uso puesto que convierte una imagen
en una trama en blanco y negro. Se suele utilizar para icono, aunque son más
utilziados GIF o PNG.
 Un ejemplo de uso de Adobe Photoshop para la creación de diseños de
páginas web puede ser el siguiente:


 Ejemplo de Adobe
Edición multimedia.

La edición multimedia se trata de la edición digital de un texto en el que se

integrarán elementos complementarios de naturaleza gráfica y/o audivisual. De
esta forma el texto digital se ve enriquecido por la imagen y el soniudo,
permitiendo superar las limitaciones de otro tipo de ediciones.

Una de los elementos clave a la hora de una edición multimedia es la

realización de transformaciones, que estas escalan, rotan, sesgan, encogen o
deforman un objeto. Puede aplicar transformaciones a una selección, una capa
completa, varias capas o una máscara de capa.

También puede aplicar transformaciones a un trazado, una forma vectorial,

una máscara vectorial, un borde de selección o un canal alfa.

La transformación afecta a la calidad de la imagen cuando se manipulan

los píxeles. Para aplicar transformaciones no destructivas a imágenes
rasterizadas, utilice los objetos inteligentes.

La transformación de una forma o trazado de vector siempre es no

destructiva, ya que sólo se están cambiando los cálculos matemáticos que
producen el objeto. 

Código de edición
Para realizar una transformación, primero seleccione un elemento para
transformarlo y, a continuación, seleccione un comando de transformación. Si
es necesario, ajuste el punto de referencia antes de manipular la
transformación.

Se pueden realizar varias manipulaciones sucesivamente antes de aplicar las

transformaciones acumuladas.

A la hora de realizar cualquier edición serán necesarios dos requisitos

indispensables:

 Hardware: se necesitarán procesadores de altama gama, buena

memoria RAM, tarjetas gráficas potentes, monitores de alta gama, una buena
conexión a internet, entre otras muchas más.

 Software:lo normal es el uso de programas de adquisicion y tratado de

audio. imagen, video o auditoría.

A continuación se expondrán algunos ejemplos de programas Open Source de

Edición Multimedia.

GIMP

Se trata de una alternativa gratuita y libre para Photoshop, emula y agrega

funciones de edición adicionales. Cuenta con el inconveniente que su interfaz es
un poco pobre en cuanto a la calidad.

GIMP

Inkscape

Se trata de la alternativa gratuita a Adobe Ilustrator. Siendo este un

programa potente de diseño vectorial que permite el trabajo de formatos como
el SVG y los de otras suites de diseño y aplicaciones como es Blender (para
efectos 3D), para las transformaciones, conversiones, el soporte para web, etc.

Inkscape
El video digital.

A la hora de realizar ediciones de video digitales podemos utilizar la

versión Photoshop Extended CS6 que nos permite editar video y crear
animaciones cuadro a cuadro, aplicar las herramientas de ajustes de exposición
o color, incluir texto o imágenes en archivos de video, etc. Las animaciones y
los videos modificados se pueden guardar en un archivo PSD.

Estos documentos se pueden abrir y ejecutar en otras aplicaciones

Adobe (Premiere Pro o After Effects), o pueden verse y exportarse, como
película QuickTime, AVI, MPG, y otros formatos, o como secuencia de
imágenes. Photoshop no permite editar las pistas de sonido de los documentos
de vídeo.

Al abrir un archivo de vídeo o una secuencia de imágenes con Photoshop

Extended, los cuadros forman parte de una capa de vídeo. En el panel Capas,
una capa de vídeo se identifica mediante un icono en forma de tira de
diapositivas.

El desplazamiento por los cuadros se realiza mediante el modo de línea de

tiempo del panel Animación (Ventana > Animación).

El trabajo con capas de vídeo se realiza al igual que con capas normales,
ajustando el modo de fusión, la opacidad, la posición y el estilo de capa.
También se pueden agrupar las capas de vídeo en el panel Capas.

Las capas de vídeo vacías le permiten crear animaciones hechas a mano.

Importar vídeo

Con Photoshop Extended, puede abrir archivos de vídeo y secuencias de

imágenes con los siguientes formatos.

Formatos de vídeo
 QuickTime

 MPEG -1 (.mpg o .mpeg)

 MPEG-4 (.mp4 o .m4v)

 MOV

 AVI

 MPEG-2 se admite si hay instalado un codificador MPEG-2 en el

ordenador.

Formatos de secuencias de imágenes

 BMP

 DICOM

 JPEG

 OpenEXR

 PNG

 PSD

 Targa

 TIFF

 Se admiten Cineon y JPEG 2000 si están instalados los plugins.

Para usar un vídeo creamos un nuevo documento y nos dirigimos hacia el

menú Archivo Colocar. En el panel animación aparecerá una capa con el
nombre de nuestro vídeo.

Es importante tener en cuenta, al trabajar con vídeo, que Photoshop hace

como otros editores. Los datos del video no se incluyen en el documento
Photoshop. Sólo se incluye una referencia de la ubicación del vídeo original en
el disco.

Esta referencia no se debe modificar, es decir, no debemos eliminar, cambiar

de ubicación ni de nombre el archivo original. Si se realiza alguna de estas
acciones, se pierde esta referencia el vídeo no podrá mostrarse en el
documento Photoshop.
Colocación de un vídeo o secuencia de imagen

Al importar una carpeta de archivos de secuencias de imágenes, cada imagen

se convierte en un cuadro en una capa de vídeo. Asegúrese de que los archivos
de imagen se encuentran en una carpeta y de que están nombrados de forma
secuencial.

La carpeta debe contener sólo aquellas imágenes que desea

utilizar como cuadros. La animación resultante será mejor si todos los archivos
tienen las mismas dimensiones en píxeles. Para ordenar los cuadros
correctamente para la animación, nombre los archivos por orden alfabético o
numérico. Por ejemplo, nombredearchivo001, nombredearchivo002,
nombredearchivo003, etc.

 Para abrir directamente una secuencia de imágenes, seleccione Archivo

> Abrir.

 Para importar una secuencia de imágenes a un documento abierto,

seleccione Capa > Capas de vídeo > Nueva capa de vídeo desde archivo.

 En el cuadro de diálogo Abrir, desplácese hasta la carpeta que contenga

los archivos de secuencias de imágenes.

 Seleccione un archivo, elija la opción Secuencia de imágenes y haga clic

en Abrir.
Historia. Píxel.

El píxel es la unidad más pequeña que existe en una imagen. Es como

comparar al cuerpo humano con las células, los píxeles forman la imagen digital
en su conjunto.

Los píxeles es una unidad que posee un color propio, y la unión de todos

los píxeles con diferentes colores hacen de un color compuesto. Es decir estos
tienen los colores más básicos que son el rojo, el azul, el amarillo y alguno
más.

Si queremos ver los píxeles que componen una imagen,

podemos redimensionarla hasta un tamaño tan grande que se vean los
cuadrados.

Respecto a su historia, los píxeles nacieron a finales de los años 30 cuando

aparecieron las primeras películas. Desde entonces ha ido progresando la idea
de utilizar más y más píxeles para formar una resolución mayor.

Con el inicio de las primeras televisiones y ordenador, todos utilizaron los

píxeles desde un inicio como referencia para seguir avanzando en esta
tecnología.
 Si observamos a través de una escala menor una imagen podemos observar
los pixeles tal y como se puede observar en la siguiente imagen:

Pixel
Frame (fotograma).

El frame consta de ser cada una de las imágenes en las que podemos

separar una película, y que al juntarlas e ir pasando de unas a otras de manera
secuencial, se produzca el efecto de movimiento. Es decir, representa el
contenido de una pelicula en un instante de tiempo. Por lo que una animación
es más que una sucesión de frames.

Dichos frames se pueden controlar a trabés de líneas de tiempo, pero cada

uno tendrá su propio comportamiento.

Frame

Tipos de frames

KeyFrame: son frames con un contenido específico, se crean para insertar

en ellos un nuevo contenido no existente. Se identifican por que tienen un
punto negro.

Normal Frame: no representan contenido nuevo y son de color gris.

Frame Vacío: se tratan de frames sin contenido.

Label Frame: contiene en la parte superior una "bandera" roja que indica
que tienen un nombre asociado. Dicho nombre se establece desde el Panel
"Frame". Si la duración del frame es la suficiente, se puede leer el nombre (o
etiqueta) que identifica al conjunto de fotogramas.

También cabe la posibilidad de encontrar frames de animaciones en

movimiento, que para ello se usan los Keyframe y se instancian dde inicio a fin,
todo esto entre flechas.

La medida de un fotograma varía dependiendo del formato de ésta. En el

formato de aficionado más pequeño de 8 mm, es aproximadamente 4,8 × 3,5
mm. Mientras que en el formato IMAX es tan grande como 69,6 × 48,5 mm.
Cuanto más grande es el fotograma, más aguda resulta la imagen sobre la
pantalla de proyección.
Relación de Aspecto (Aspect Ratio).

Podemos definirla como la proporción que existe entre el ancho y la altura de una

imagen, y que es calculada dividiendo el ancho por la altura de la imagen que se puede
visualizar en pantalla. Sus valores suelen ser expresados con X:Y.

Edición de imágenes

Existen varias relaciones que podemos ver de manera estándar a lo largo de

nuestro día a día:

 3:2 o 15:10 (1.50:1). Estándar usado por las televisiones NTSC.

 5:4 (1.25:1). Estándar usado para las resoluciones de 1280x1024 en

pantallas de 17".

 16:9 (1.77:1). Este es el probablemente más veamos a día de hoy ya

que es el usado por las televisiones de alta definición en general.

 1.85:1 (aprox. 17:9). Este estándar es el más utilizado en salas de

cine.
 Ratio

En CSS es común del uso de expresiones como aspect-ratio usando por

ejemplo proporciones de 16:9

También es común el uso de la sentencia divice-aspect-ratio en cuanto

queramos especificar el diseño físico real de algún dispositivos.
Ratio en CSS
FPS (Frames per second).

FPS se define como la velocidad a la cuál un sistema o dispositivo puede

reproducir una cantidad de imágenes en un segundo. El ojo humano es capaz
de procesar sobre 12 imágenes por segundo, captando su faceta individual,
pero si se excede esta velocidad, lo veríamos como un vídeo o imágenes en
movimiento de manera más o menos clara.

FPS

Antes en el cine la norma son 24 fps, sin embargo en televisión es más

habitual 25 fps. Para los vídeos en slow motion la grabación se realiza en 60 y
120 fps. Este frame rate también lo podemos observar en videojuegos, esto se
debe a que requieren movimientos más rápidos para su correcta visualización.

Tipos

 Cine. En el cine se trabaja con un frame rate de 24 fotogramas por

segundos. En el caso del cine utilizamos el concepto fotogramas para hablar de
la cadencia de imágenes, pero cuando trabajamos para vídeo utilizamos el
concepto de frame.
 PAL.En el sistema PAL la frecuencia de imagen es de 25 fps o 50i (su
equivalencia en el sistema de entrelazado). En el sistema entrelazado dividimos
la imagen en dos medias imágenes, la primera media imagen son las líneas
impares y la segunda son las líneas pares, y la fusión de estas dos medias
imágenes son las que conforman el frame completo.

 NTSC.El sistema NTSC es utilizado en países de américa del norte y

américa del sur, y en algunos países asiáticos. Su frame rate es de 29,97 – 30
fps o 59.94i – 60i en el sistema de entrelazado, ya que ocurre lo mismo que en
el sistema PAL

 HDTV. Es el formato de vídeo de la alta definición en el que tenemos un

frame rate que va desde 23.976 fps hasta los 60 fps. A finales del 2013 se
aprobó la norma de la ultra alta definición (UHDTV), en donde todavía se
amplio más la gama de frame rate.

  UHDTV.La ultra alta definición incluye frame rate que van desde los
23.976p a los 120p.
Video progresivo/entrelazado.

A la hora de dibujar una imagen en una pantalla podemos encontrarnos con

barrido entrelazada y barrido progresivo.

En la actualidad la mayoría de las televisiones o pantallas aplican el barrido

progresivo.

Diferencias

Entrelazado

El barrido entrelazado o exploración entrelazada (interlaced scanning)

es un método desarrollado en 1932 por Randall C. Ballard que consiste en
dividir un fotograma en dos fotogramas diferentes. Uno formado por líneas
pares y otro por las líneas impares.

Este sistema engaña al ojo que no es capaz de detectar cambios tan rápidos
y percibe la ilusión de una imagen completa.

Sin embargo, el sistema entrelazado tiene problemas a la hora de gestionar

imágenes con movimiento muy rápido.
 Entrelazado

Progresivo

El barrido o escaneo progresivo es mucho más sencillo: toda la imagen se

pinta a la vez. Esto soluciona el problema con las imágenes con movimiento,
además de crear una imagen más clara y en un menor parpadeo o flickering de
la imagen.

Progresivo
Compresión de video.

Hablamos de compresión de video cuando se reduce el tamaño de

datos para mostrar las imágenes de video digital. Esto se convierte en una
pérdida de calidad generalmente. La digitalización proporciona enormes
ventajas con respecto a la señal analógica: más robustez frente al ruido,
calidad y resoluciones muy altas, edición y efectos muy sofisticados... pero esta
digitalización propicia una cantidad de información que supera en gran medida
las posibilidades de proceso de nuestros sistemas. Por ejemplo, una señal de
video de 720x485 a una velocidad de 30Hz; suponiendo una resolución de 24
bits/pixel, necesita alrededor de 250 Mbps.

Si necesitáramos guardar una película con condiciones similares a las

expuestas, necesitaríamos más de 200GB mínimo. Esto sería inconcebible para
nuestro disco duro, por ello el papel de la compresión tiene tanta importancia
hoy en día.

Multimedia

Contenedor de vídeo.

Se trata de un almacén que contiene la información del video, metadatos y

corrección de errores. Además indica cómo se ordenan todos los contenidos
multimedia del video. Existen contenedores como pueden ser MOV, MPG o AVI,
entre muchos otros. El formato se presenta comprimido, tanto para audio como
para vídeo.
 Después a la hora de reproducir cada archivo, primero un splitter se encarga
de dividir y reconocer cual es el patrón del contenedor. Después tras haber
separado las pistas de audio y vídeo, son interpretadas por el decodificador y
reproducidas.

Formato

Estándares de video analógico y digital.

Analógico. En este estándar podemos ver los formatos más usados para la
difusión televisiva. Estos podemos dividirlos en:

 PAL: El más utilizado en Europa.

 NTSC: Se utiliza principalmente en Norte América y parte de Oriente.

 SECAM: Los países que aprovechan este son Rusia y Francia.

 HDTV: Cada vez está siendo más usado dada su buena calidad de

imagen.

Digital. Sus estándares son:

 QCIF.

 CIF.
 CCIR.

Vídeo
Emisión de TV analógica: PAL, NTSC y SECAM.

Este criterio hace referencia a la forma de emisión y recepción de los

canales. La tendencia es que todos los canales tiendan a emitirse de forma
digital, aunque aún tiene cierta presencia la emisión de canales analógicos (vía
satélite y en menor medida ámbito local).

PAL, NTSC y SECAM son estándares en los que se basa la difusión de

imágenes por televisión, rigiéndose cada uno por la región en la que se
encuentre del mundo.

Emisión

Sistema televisivo NTSC

El estándar NTSC, o más bien traducido como: National Televisión Systems

Committee, es el que se utiliza los países de Japón y Estados Unidos. La forma
de transmisión en NTSC, es de 525 líneas en la pantalla a una velocidad de
unos 30 fotogramas por segundo o imágenes mostradas por segundo (fps),
también se denomina (frame rate), velocidad de los fotogramas. En lo referente
a maquinas informáticas ordenadores, encontraremos vídeos en el sistema
NTSC da 29,97 fps, no de 30.

Sistema televisivo PAL

El sistema PAL es el estándar utilizado en Europa, Australia, China y

Suramérica, con lo cual España utiliza este sistema de transmisión. El sistema
PAL responde a las siglas Phase Alernating Line. El sistema PAL emite 625
líneas a través de una serie de ráfagas producidas por electrones sobre la
pantalla del televisor a una velocidad o frecuencia de 25 fotogramas o
imágenes por segundo o fps.

Sistema televisivo SECAM

El sistema SECAM es el que se utiliza en los países de FRANCIA y JAPÓN.

SECAM viene de las siglas “Séquentiel Couleur avec Mémoire” en francés o
“Color secuencial con memoria”. La transmisión televisiva en SECAM, se forma
escaneando la pantalla del televisor a 625 líneas y a una frecuencia de 25
frames por segundo. Este sistema es compatible con el sistema PAL, ya que
utilizan los mimos formatos de escaneo y velocidades en los frames, la
diferencia es la forma de cómo se codifica el color. Con esto queremos decir
que podemos reproducir filmaciones en aparatos de sistema SECAM o a la
inversa.

Formatos estándares analógicos: VHS, S-VHS, Video8.

Historia

Fue desarrollado en la década de 1970 por JVC y lanzado al mercado en 1973

por la propia JVC y su empresa matriz, Matsushita (Panasonic), junto con un
grupo amplio de licenciatarias. Vino a competir con el entonces único sistema
doméstico del mercado, el Betamax de Sony, también fabricado bajo licencia
por Sanyo. Consiguió popularizarse y convertirse en estándar durante más de
quince años gracias a una mejor estrategia de comercialización. Tuvo un
sistema de licencias de fabricación más flexible que el de Sony y supieron
conocer mejor las necesidades de los usuarios, ofreciendo desde el principio un
mayor tiempo de grabación, de dos horas, frente a sólo una hora de los
primeros aparatos Beta. Además hicieron alianzas con las distribuidoras
cinematográficas (sobre todo la exclusividad sobre las películas pornográficas).
En 1988 Sony admitió su derrota y anunció la producción de una línea de
grabadoras en VHS. VHS tenía el 95% del mercado. El resultado, VHS se
convertiría en el estándar por los próximos 10 años.

VHS (Video Home System): Es un sistema de grabación y reproducción de

vídeo analógico utilizado durante varios años, desde 1976 hasta la salida del
DVD.

S-VHS: Es la versión mejorada del VHS original, la cual mejoraba la calidad

de este debido a la demanda de una mejor grabación.

Video8: Al igual que el VHS, era un sistema de grabación y reproducción

pero fue sacado al mercado como competencia de este.

Formato Analógico
Formatos estándares digitales de reproducción: DV, miniDV, DVD, Blu-
Ray.

En los vídeos, el código influye en la calidad de la imagen, la calidad del sonido,

si incluye o no subtítulos y, en especial, la relación entre calidad y tamaño del
archivo. Así pues, en la actualidad consumimos contenido audiovisual digital
mediante discos físicos (DVD, Blu-Ray), mediante streaming y a través de IPTV
(televisión por Internet), pero también manejamos archivos de vídeo digitales,
especialmente para contenido que generamos nosotros mismos. A continuación
vamos a repasar los formatos de vídeo digital más habituales que podemos
encontrarnos.

DV: Es un formato utilizado por las videocámaras durante su grabación y

transferencia de datos. Este puede contener tanto video como audio.

miniDV: Pasó a ser el formato de tamaño reducido del DV. Era utilizado por
las videocámaras más pequeñas, para que la ergonomía no se perdiera.

DVD: Tipo de disco óptico que contiene datos almacenados de video y audio

para su posterior reproducción.

Blu-ray: Podemos definirlo como la siguiente versión de los DVD. Lo mejora

en todos los aspectos para poder reproducir vídeos de alta definición gracias a
una mayor capacidad.

Comparativa de calidad
Interfaces de señal de video: analógicas y digitales.

Este criterio hace referencia a la forma de emisión y recepción de los canales.

La tendencia es que todos los canales tiendan a emitirse de forma digital,
aunque aún tiene cierta presencia la emisión de canales analógicos (vía satélite
y en menor medida ámbito local). La función principal de las interfaces
visuales digitales es la de lograr la máxima calidad de visualización que se
pueda.

Conversión analógico-digital

La conversión de una señal de vídeo de analógica en digital obedece los

mismos principios que se aplican a cualquier otra señal analógica y se basan en
el principio de muestreo de Nyquist. La señal analógica debe limitarse en banda
mediante un filtro de paso bajo y luego muestrearse a intervalos tales que la
frecuencia de muestreo sea, por lo menos, el doble de la frecuencia máxima de
la señal filtrada.

El resultado del muestreo es una señal discreta de amplitud variable, a la que

a continuación se somete a un proceso de cuantificación a fin de traducir la
amplitud de las muestras a un código, generalmente binario, con pulsos de la
misma amplitud y en que el número de posibles niveles de cuantificación está
determinado por el número de bits con que se codifican las muestras.

Conversión analógico-digital

Conversión digital-analógico

La función del conversor digital/analógico es traducir cada palabra de 8 bits al

nivel correspondiente de amplitud. Así, la sucesión de palabras de 8 bits da
lugar a una sucesión de voltajes de salida que corresponden a las sucesivas
muestras de la señal analógica original.
 Conversión digital-analógico

Se usará con frecuencia la interfaz visual digital o DVI para obtener la

máxima calidad de visualización posible en pantallas digitales de tipo LCD.

DVI

Pero también podemos encontrar otras de mayor calidad como el HDMI que
se trata de una norma de video, cifrada sin compresión capaz además de
proveer video y también audio.

HDMI
Audio digital.

El audio digital es totalmente distinto al analógico, ya que son los equipos

informáticos los encargados de almacenar la información del audio en forma
digital. Se podría deducir que es la codificación digital de las ondas que
representan al sonido. Esta se representa como un conjunto de números los
cuales se obtienen y traducen mediante el muestreo y la cuantificación
digital.

Audio digital

Podemos distinguir los diferentes soportes de almacenamiento para el

analógico como para el digital:

1. Analógico

Cilindros, discos de diferentes materiales y cintas

2. Digital

Cintas, Cds, DVDs, discos rígidos, etc.

La señal de audio como archivo.

Las señales de audio pueden guardarse en forma digital para su posterior

utilización, existiendo varios formatos dependiendo de la procedencia de esta
señal. Son los equipos informáticos los encargados de hacer que esta
información sea guardada en una serie de 1 y 0 dentro del disco duro, para que
así el usuario tenga la posibilidad de reproducir el archivo de audio cuando lo
desee.

Además la gran ventaja de almacenar el audio como archivo es la capacidad

para interactuar con él y modificar todas las características que el usuario
necesite.

Conexión de audio
Storyboard para diseñar películas y animaciones.

¿Qué es el storyboard?

Es un conjunto de ilustraciones presentadas de forma secuencial con el

objetivo de servir de guía para entender una historia, previsualizar una
animación oplanificar la estructura de una película.Un story es básicamente una
serie de viñetas que se ordenan conforme a una narración previa. Se utiliza
como planificacióngráfica, como documento organizador de las secuencias,
escenas y por lo tanto planos (determinado en el guión técnico) aquí (en el
story)ya visualizamos el tipo de encuadre y ángulo de visión que se va a
utilizar.

Storyboard

¿Para qué se hace?

La elaboración de un storyboard está en funcióndirecta con suuso: en

publicidad a menudo es mucho más general para que el director y el productor
aporten con su talento y enriquezcan la filmación, mientras que en cine es
mucho más técnico y elaborado para que sirva de guía a cada miembro del
equipo de trabajo.

Tipos

Podemos encontrar storyboards llenos de color o en blanco y negro, colmados

de detalles o simplemente con trazos que esbozan una idea de figuras.

Vamos a verlo en Photoshop con la creación de animaciones.

 El panel Animación

Este panel es el protagonista principal de esta forma de trabajo en

Photoshop. Desde aquí se controla tanto los vídeos como las animaciones.

Este panel tiene dos presentaciones: una cuando se ha importado un video y

otra cuando se trata de animaciones formadas por secuencias de imágenes.

Panel Animaciones (modo línea de tiempo) es la que se muestra cuando se

trata de un archivo de video.

En el modo de línea de tiempo, el panel Animación muestra cada capa de un

documento de Photoshop a excepción de la capa de fondo. Este modo se
encuentra sincronizado con el panel Capas.

Siempre que se añada, elimine, cambie el nombre, agrupe, duplique o asigne

un color, los cambios se actualizan en ambos paneles.

Panel capas - Animaciones

A continuación mostramos las diferentes opciones que nos ofrece el

panel:

Habilitar reproducción de sonido:

 Control de zoom. Aumentar y reducir:

Conmutar papeles cebolla:

Eliminar imágenes principales:

Para cambiar de una a otra animación pulsamos en panel animación los

siguientes iconos:

Panel Animación (modo de cuadros)

Este panel se usa para realizar animaciones cuadro a cuadro.

Veamos el panel Animación cuando se trata de una secuencia de imágenes,

es decir, en el Modo de cuadros. Los íconos, opciones y botones son los
siguientes:

 Permite definir las veces que se repetirá la animación.

1. Selecciona el primer cuadro

2. Selecciona el cuadro anterior
3. Reproduce la animación
4. Selecciona el cuadro siguiente
5. Intercala cuadros de animación
6. Duplica los cuadros seleccionados
7. Elimina los cuadros seleccionados

Si hacemos clic en la opción destacada podemos definir la duración del

cuadro seleccionado:

En la siguiente imagen puede ver el botón Menú de opciones del Panel

animación:

Opción gratuita

A través de la página http://www.storyboardthat.com/ podremos crear de

forma gratuita cualqueir storyboard combinando imágenes y palabras en una
misma producción.
 Página StoryBoardThat

Empezaremos accediendo a la página anteriormente mencionada y nos

registramos o no, ya que permite trabajar sin registro previo.

Accedemos primero a la creación de nuestra primera historia gráfica haciendo

click en el botón naranja "Crear un Guión Gráfico".

Botón

En su interfaz podemos ver las principales funciones y además cuenta con

una interfaz de fácil diseño.
 Interfaz

En el menú superior nos encontramos con múltiples escenas, personajes,

bocadilos de texto que se pueden insertar en nuestras viñetas, solamente con
el gest ode arrastrar y soltar. También permite la modificación del tamaño de
los elementos, incluso realizar transformaciones.

Zona superior

Los botones inferiores sirven para realizar diferentes acciones con las viñetas:
elegir diseño (solo viñeta, viñeta con cuadro de título superior, viñeta con
cuadro de título superior y descripción inferior), modificar tamaño y posición,
añadir (versión de pago), eliminar, incorporar rejilla y guardar trabajo.

Zona inferior
 Terminado de realizar el trabajo podemos compartirlo en las redes sociales,
enviar el enlace a través de correso electrónico, imprimirlo, verlo como
presentación o incrustrarlo en un blog o página web.

Guardar

Configuración
Hardware para la manipulación de audio/video digital.

Para poder realizar cualquier manipulación de archivo digital tan solo es

necesario algún sistema computacional con el software adecuado que deje
recoger el archivo, procesarlo, realizar los cambios deseados, y volver a
exportarlo.

Podemos dividir entre hardware específico para el audio digital y hardware

específico para el video digital.

Audio y video

En cuanto al sonido se refiere será necesario:

 Tarjeta de sonido: capaz de reproducir archivos, capturar sonidos,

generar sonidos en formato MIDI y procesar sonidos y almacenarlos al disco
duro.

Tarjeta sonido

En cuanto al video se refiere será necesario:

 Camara de video capaz de poder aplicar los sistemas PAL y NTSC y
poder capturar las imágenes sin ningún problema, además de almacenarlas en
el disco duro.

Cámara 4K

 Un buen equipo multimedia, desde un disco duro, memoria RAM,

procesador, puerto usb 3.0, etc.

Tarjeta de sonido.

Es una tarjeta de expansión utilizada por los ordenadores que sirve para

controlar la salida de audio de estos mediante un software especializado para
cada una llamada driver o controlador.

Sonido
 Básicamente se encarga de procesar los datos que llegan del microprocesador
codificando estos en información para así que se pueda entender por un
traductor como un altavoz o unos auriculares.

En la actualidad la mayoría de placas base cuenta con tarjeta de sonido

integrada, si se necesita tener una calidad de sonido alta será necesario ampliar
con una tarjeta de sonido de mayor calidad que se inserta dentro de la placa
base en la ranura correspondiente, normalmente a través de una conexión PCI.

Las tarjetas de sonido no integradas cuentan, por lo general con su

propio procesador y memoria, de forma que no acaparan recursos del sistema
para realizar sus procesos

Conexiones de audio.

Para poder realizar las conexiones de audio, existen varias tipos. A destacar:

 Cable simple: es utilizado para llevar una señal de audio mono.

 Cable doble: permite transportar la señal de audio por dos canales y

escuchar el sonido en sistemas estéreo.

 Cable coaxial: Su función es llevar las señales de audio de alta

frecuencia hasta la antena.

Conectores
 Podemos encontrar conexiones que establezcan una conexión de audio y de
video digital, ese es el ejemplo del HDMI.

HDMI Acrónimo de High Definition Multimedia Interface, interfaz multimedia

de alta definición. Es el más utilizado por televisiones de LED y Plasma o
proyectores que admitan imagen en alta definición. Es el equivalente a una
conexión DVI pero con audio en alta definición incluido. Existen cables de DVI a
HDMI, muy útiles para conectar un ordenador a un televisor de pantalla plana,
teniendo en cuenta que para transmitir audio necesitaremos un cable aparte.

Cualquier conexión de HDMI a otro tipo de conector perderá el audio en la

transformación. Existen varias versiones de HDMI:

 HDMI v1.0: Transmite video en alta definición hasta 1080p y audio de 8

canales a 192 kHz y 24 bits.

 HDMI v1.1: Soporta DVD Audio

  HDMI v1.2: Soporta transmisión de DSD para Super Audio CD

 HDMI v1.3: Soporta resoluciones superiores a 1080p, mayor cantidad de

bits de color, y audio de alta definición como Dolby TrueHD y DTS-HD, formato
utilizado por los discos BluRay.

 HDMI v1.4: Soporte 3D, resoluciones de 4K, retorno de audio y Ethernet

HDMI

Otro tipo relacionado con el audio y el video es el conocido DisplayPor, es

similar al HDMI pero este es libre de licencias por lo que se suele incluir en
algunas tarjetas gráficas.
 DisplayPort

En cuanto a conexión de audio analógico podemos encontrar:

 Jack: se utiliza para interconectar instrumentos musicales o altavoces o

para equipos de audio.

Jack

 RCA:Se utiliza para todo tipo de dispositivos, sobre todo si se necesita

separar la señal en dos canales bien diferenciados, como en un sistema de
audio envolvente o un mini sistema que reproduce un canal por altavoz.

RCA

 DIN: Son un tipo de conectores que tienen un extremo delimitado por

una camisa metálica circular que contiene unos pines que pueden variar en
número dependiendo de las necesidades del usuario, la camisa metálica tiene
unas muescas cuya función es no permitir que el conector se introduzca de
manera incorrecta en la ranura pudiendo dañar el dispositivo o los pines del

conector.
 DIN

En cuanto a conexión de audio digital podemos encontrar:

 S/PDIF coaxial: la señal completa se transmite a través de un único

cable, soporta audio estéreo y sonido codificado en Dolby Digital.

S/PDIF coaxial

 Toslink: Se trata de una conexión de audio creada por Toshiba, que

emplea una señal óptica que funciona transmitiendo pulsos de luz a través de

un cable de fibra óptica que transmite la información digital.

Toslink

 
 XLR : Es el más utilizado para audio profesional, se utiliza sobre todo
para módulos de sonido de estudio, micrófonos, y aparatos de alta gama para
uso doméstico, también se utiliza para equipos de iluminación de gran tamaño.

XLR
Capturadora de video analógico.

Las imágenes que grabamos con una cámara de vídeo analógica se

convierten en una señal eléctrica, la base de este sistema de grabación de
vídeo analógico es la acción que esta señal eléctrica ejerce sobre un campo
magnético (la cinta de vídeo) y de forma reversible, la base del sistema de
reproducción del vídeo es que todo campo magnético genera a su vez una señal
eléctrica. Dos procesos silenciosos e invisibles para generar un sistema
audiovisual.

Captura

La cinta de vídeo consiste en una sucesión de partículas ferromagnéticas que

se desplazan frente a la cabeza de grabación, imantándose secuencialmente
según la intensidad de magnetismo que en ese instante esté produciendo la
señal de vídeo.

Señal
Tarjeta de video.

Es una tarjeta de expansión utilizada por los ordenadores que sirve para

controlar la salida de video de estos mediante un software especializado para
cada una llamada driver o controlador.

Tarjeta Gráfica

Actualmente muchas placas base tienen su propia tarjeta gráfica integrada,

pero no sueleofrecer un buen rendimiento para labores concretas. Llevan un
pequeño microprocesador y al notener su propia memoria utilizan la memoria
RAM del equipo para almacenar sus procesos. Siqueremos realizar labores mas
complejas y que requieran mayor procesamiento de imagen necesitaremos
ampliar nuestro equipo con una tarjeta gráfica.

Las tarjetas gráficas tienen su propio microprocesador

(llamado GPU o“graphics proccesingunit”) y sistema de refrigeración, así como
memoria para no colapsar la memoria RAM delequipo.

Así mismo, las tarjetas gráficas tienen que ser acordes al medio en el que
van a mostrar la imagen. No tiene sentido montar una tarjeta gráfica cara y
potente para usar un monitor de baja gama, así como tampoco tiene sentido
utilizar un monitor de alta gama para la tarjeta gráfica que viene de serie con la
placa base.

Las tarjetas gráficas ofrecen varios tipos de salida de información para

conectar un dispositiv oque muestre la imagen (pantalla). Actualmente los mas
usados son los que conectan la pantalla y la tarjeta gráfica mediante cable VGA
(Video Graphics Array), DVI (Digital VisualInterface) oHDMI (High-Definition
Multimedia Interface).
Animaciones Flash.

¿Qué son?

Las animaciones flash son un tipo de animación que emplea gráficos

vectoriales y que suelen emplearse principalmente en la web.

Las animaciones flash se han convertido en un estándar para la animación

web, junto con Shockwave de la misma empresa, pues actualmente la
mayoría de los navegadores las soportan

Icono de flash

Flash admite los siguientes tipos de animación:

1. Interpolaciones de movimiento"

Las interpolaciones de movimiento se utilizan para establecer las propiedades

de un objeto, por ejemplo, la posición y la transparencia alfa de un fotograma
y, de nuevo, de otro fotograma. Flash interpola los valores de las propiedades
de los fotogramas intermedios. Las interpolaciones de movimiento resultan
útiles para animaciones con movimiento continuo o para la transformación de
objetos. Las interpolaciones de movimiento aparecen en la línea de tiempo
como grupos de fotogramas contiguos y se pueden seleccionar como un solo
objeto de forma predeterminada. Las interpolaciones de movimiento son
realmente potentes y fáciles de crear.

2. Interpolaciones clásicas

Las interpolaciones clásicas son como las interpolaciones de movimiento,

aunque más difíciles de crear. Las interpolaciones clásicas permiten agregar
efectos de animación específicos que no son posibles en interpolaciones
basadas en el tamaño.
 3. Interpolaciones de forma

En la interpolación de forma, se dibuja una forma en un fotograma concreto

de la línea de tiempo y se modifica o se dibuja otra forma en otro fotograma
específico. Seguidamente, Flash interpola las formas intermedias de los
fotogramas intermedios y crea la animación de una forma cambiante.

4. Fotograma a fotograma animación

Esta técnica de animación permite especificar distintas ilustraciones para

cada fotograma de la línea de tiempo. Utilice esta técnica para crear efectos
como el de fotogramas de una película que se suceden rápidamente. Esta
técnica resulta útil en animaciones complejas donde es preciso que los
elementos gráficos de cada fotograma sean distintos.

Captura de video digital.

Un vídeo que ha sido capturado mediante procedimientos y dispositivos

informáticos es un vídeo digital, cualquier otro es analógico. Las imágenes y el
sonido van grabados en pistas diferentes, que luego se ejecutan
simultáneamente.

Una película grabada sobre CD o DVD está en formato digital, mientras la

grabada sobre una cinta VHS es analógica. Tanto el vídeo analógico como el
digital pueden contener audio.

La captura de vídeo se hace con videocámaras digitales, webcams, cámaras

fotográficas o teléfonos móviles con opción vídeo. La captura desde webcam a
cámara de vídeo digital se hace por software (propio o libre ) que es el que
permite guardar secuencias de vídeo en un dispositivo de almacenamiento en el
ordenador.

Un ejemplo de capturadora de video digital es la capturadora de

video Elgato.

Su función es capturar por ejemplo las imágenes producidas por

videoconsolas o por las imágnenes realizadas por los ordenadores actuales.
Capturadora video digital