Preproduccion Interactiva

Preproduccion-Interactiva.
pdf
lmprz
Preproducción interactiva
3º Grado en Comunicación Audiovisual
Escuela Politécnica Superior de Gandía

Universidad Politécnica de Valencia
Reservados todos los derechos.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
TEMA 1: Diseño web
¿Qué es el diseño web?
El diseño web es el proceso de creación de un sitio o página web que se centra en aspectos estéticos
como la distribución del contenido (layout), las interfaces de usuario y otros aspectos visuales para
hacerla más atractiva visualmente y fácil de usar. Algunos de los aspectos a tener en cuenta a la
hora de diseñar una web son los navegadores y dispositivos de acceso al sitio, las resoluciones de
pantalla, el tipo de web y su contenido o la estructura de navegación.
¿Por dónde empezamos?
Empezaremos por conocer el contexto, que se conforma de todos los factores externos que rodean
a la web. En primer lugar, tendremos que realizar un análisis de la competencia para conocerla y
saber si tienen webs y qué ofrecen en ellas (servicios que presta y a qué precio, tiempo de respuesta,
información, etc.). En segundo lugar, haremos un análisis del contexto social que nos permita
conocer la audiencia a la que dirigimos nuestra web (es específica o general, qué la caracteriza, etc.)
y sus necesidades. A continuación, será importante analizar el contexto tecnológico para conocer
qué requerimientos y limitaciones tienen los dispositivos de acceso a la web. Finalmente, nos
centraremos en el contexto económico que nos permitirá identificar la calidad del sitio web a
desarrollar, teniendo en cuenta el tiempo y los recursos humanos y monetarios de los que
disponemos.
Principios de diseño
Los navegadores – Un navegador es un software que instalas en el ordenador para poder acceder
a las páginas web. Mientras que un buscador o explorador web es una herramienta que el navegador
pone a tu disposición para hacer búsquedas en su índice. Algunos ejemplos de navegadores son
Chrome, Explorer, Safari, Firefox, etc.
Los dispositivos/resoluciones de pantalla – Cada dispositivo, en incluso cada versión y cada
sistema operativo, tendrá una resolución distinta. La resolución nos indica la anchura de la pantalla
en la que se está visualizando el contenido de una página, así como otros argumentos técnicos de
la pantalla. Tendré que asegurarme de que el diseño de mi web sea adecuado para la mayoría de las
resoluciones (webs adaptativas o responsives).
El tipo de sitio/página web – Podemos clasificarlos en diferentes tipos de sitios web.
Sitios de presentación o sitios escaparate, permiten a empresas públicas/privadas
presentar las actividades que están llevando a cabo, los productos y servicios que ofrecen,
o los proyectos que desarrollan. Toda esta información está disponible en la web para el
gran público.
Sitios de información, la mayoría de las publicaciones en papel tiene un equivalente en
Internet con mayor o menos restricción de visualización, son sitios de prensa digital.
Sitios de venta online, que ofrecen la venta de servicios/productos y pueden ser
generalistas, como Amazon, o especializados, como Casa del libro.
Blogs, herramientas para publicar información sobre aficiones e intereses donde cada post
se publica cronológicamente y se permite interactuar con los lectores mediante
comentarios.
a64b0469ff35958ef4ab887a898bd50bdfbbe91a-7911169
Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Foros, lugares de debate sobre temas determinados que se divide en subforos con un
moderador dónde la gente publica sus preguntas y respuestas. A veces requiere inscribirse.
Wikis, bases de conocimiento o enciclopedias en línea. Las hay generalistas o universales,
como Wikipedia, o especializadas (Wikitravel, Wikibooks, etc.).
El contenido del sitio/página web – Se compone de la información que va a mostrar la página
y también indicar su estructura y aspecto visual. Algunos de los contenidos esenciales en una web
son los textos (encabezados, párrafos, listas, etc.), los hiperenlaces (enlace texto, menú, botón,
etc.), iconos (FontAwesome), multimedia (imágenes, vídeos, audios) y formularios. Visualmente,
este contenido adquirirá un aspecto distinto en función del formato del texto (negrita, cursiva,
etc.), de la fuente del texto (genérica, con o sin serifa, y web, sacada de Google Fonts) y del color.
Finalmente, el contenido se organizará en torno a una estructura determinada, que dependerá de
la finalidad de la web y su público, entre otros factores.
Para desarrollar todo este contenido, debemos combinar dos lenguajes informáticos, el HTML y
el CSS, una vez construyo mi página HTML podré aplicar o definir una hoja de estilo con CSS
para otorgarle aspectos variados al mismo contenido. Algunos beneficios del uso de hojas de estilo
son la facilidad de mantenimiento, la accesibilidad y la velocidad de carga de la página web.
La estructura de navegación – Es lo que permite a los visitantes de un sitio web moverse de
forma fácil e intuitiva a través de las páginas que forman el sitio. Toda página web se estructura en
torno a una página de inicio (HOME) y otras páginas de navegación del sitio, a las que podremos
acceder mediante la estructura de navegación de la web. Esta estructura se compone de un nivel
de navegación principal (compuesto por el menú principal en la página de inicio), y otro nivel de
navegación secundaria dentro de las diferentes secciones o páginas (menús secundarios,
breadscrum, mapa del sitio, vuelta a la página de inicio, etc.).
TEMA 2: Accesibilidad web
Introducción
El poder de la web reside en su universalidad, la accesibilidad web persigue el objetivo de que el
mayor número de usuarios puedan percibir, entender, navegar, interactuar y contribuir a la red,
independientemente del idioma, cultura, localización geográfica y capacidades de los usuarios. La
accesibilidad web puede ayudar a usuarios con discapacidades físicas (visuales, auditivas, motrices,
cognitivas, de lenguaje, etc.), usuarios de edad avanzada, usuarios con dispositivos limitados
(displays pequeños, versiones antiguas, conexiones lentas, etc.) y usuarios en entornos especiales
(espacio muy ruidoso, con poca iluminación, etc.). Así, permite el acceso igualitario e igualdad de
oportunidades para las personas con discapacidades, ayudándolas a participar de forma más activa
y autónoma en la sociedad.
Debe garantizarse por ley, como indica el artículo 27.1 de la Declaración Universal de los Derechos
Humanos: “Toda persona tiene derecho a tomar parte libremente en la vida cultural de la
comunidad, a gozar de las artes y a participar en el progreso científico y en los beneficios que de
él resulten.” Sin embargo, según estudios recientes, el 90% de sitios Web sufre problemas de
accesibilidad y/o usabilidad. Las razones para hacer nuestras webs accesibles son muchas, desde
razones éticas y sociales, hasta razones políticas, económicas o legales, pero está claro que no existe
accesibilidad absoluta. Podemos medir el nivel de accesibilidad de un sitio web con un indicador
de letras (AAA para las más accesibles, A para las menos).
si lees esto me debes un besito

Preproducción interactiva
Banco de apuntes de la
Problemas de accesibilidad
Conociendo y cumpliendo los estándares de creación de contenido web, y aquellos específicos de
accesibilidad, así como testeando la página en diferentes entornos y usuarios con discapacidades
reales, podré ayudar a mejor la accesibilidad de mi web. Aquí se exponen los principales usuarios
con problemas de accesibilidad web:
Usuarios con discapacidades visuales – Los problemas más comunes a los que se enfrentan
estos usuarios es que no distinguen bien los colores (daltonismo, miopía), necesitan textos grandes
o directamente no pueden ver y consumen ese texto de forma secuencial usando lectores de
pantalla/navegadores por voz (JAWS, Orca, Home Page Reader o terminales Braille).
Las deficiencias más comunes que encontramos en los sitios web y que afectan a personas con
discapacidades visuales son imágenes sin descripción textual, tablas y marcos (frames) mal
etiquetados, colores de bajo contraste, texto no escalable, ventanas emergentes (pop-up) o que no
funcionan con teclado
Usuarios con discapacidades cognitivas – Los problemas más comunes a los que se enfrentan
son entender el contenido o concentrarse, no recordar el contenido, dislexia o limitaciones de
aprendizaje.
Las deficiencias más comunes son documentos mal estructurados, con demasiada información y
lenguaje complejo, la falta de imágenes clarificativas o el uso de animaciones y elementos
decorativos superfluos que atrapan su atención.
Usuarios con discapacidades auditivas – Presentan problemas a la hora de acceder al contenido
sonoro. La principal deficiencia de las webs en este ámbito es la falta de descripciones textuales en
archivos de vídeo y audio.
Usuarios con discapacidades motoras – Presentan problemas a la hora de manejar el ratón o
el teclado. Las principales deficiencias son formularios no navegables por teclado o falta de atajos
de teclado.
Usuarios con contextos específicos – Su edad, educación, idioma, limitaciones de sus
dispositivos, etc. suponen un problema a la hora de navegar la web.
Estándares
Para el desarrollo de contenido web se usan los lenguajes HTML, CSS y Java script (no
obstructivo), que separa funcionalidad de estructura y presentación de contenido. Es importante
separar el contenido, que será el mismo para todos los usuarios, del aspecto, que se modificará en
función de las condiciones particulares.
Para el desarrollo de contenido web accesible se llevan a cabo diferentes estándares, como la WAI
(Web Accesibility Initiative), que cuenta con el apoyo de la Comisión Europea. Con esta iniciativa,
la W3C desarrolla una serie de recomendaciones y directrices sobre contenido web accesible
(WCAG 2.1), pero también sobre herramientas de autor (ATAG) que permitan la creación
accesible y que genere un contenido que también lo sea, o sobre agentes de usuario (UAAG) para
el desarrollo de navegadores accesibles.

WCAG 2.1 (Web Accessibility Guidelines 2.1)
Este estándar establece 4 principios o fundamentos para que cualquiera pueda acceder y utilizar
contenidos web. Existen una serie de guías que se organizan de acuerdo con estos principios y
aseguran que el contenido es accesible por el máximo número de usuarios.
Perceptible – Los usuarios deben ser capaces de percibir la información presentada (no
puede aparecer invisible a todos sus sentidos). Las guías que se definen son alternativas
al texto (texto alternativo a cualquier contenido no textual), alternativas para contenido
multimedia (como subtítulos), adaptable (contenido que pueda presentarse de distintas
formas sin perder información ni estructura) y distinguible (fácil de ver y escuchar por
los usuarios).
Operable – Los usuarios deben ser capaces de realizar todas las operaciones ofrecidas
mediante el interfaz (no se puede requerir ninguna interacción que no pueda llevarse a cabo
por el usuario). Las guías que se definen son teclado accesible (hacer toda la
funcionalidad disponible también desde el teclado), suficiente tiempo (para leer y usar el
contenido), convulsiones y reacciones físicas (no diseñar contenido que pueda
provocarlas) y navegable (ayudar a los usuarios a encontrar el contenido dentro de la
estructura del sitio y facilitar el uso de otros dispositivos de entrada además del teclado).
Entendible – Los usuarios deben ser capaces de entender la información, así como el
funcionamiento del interfaz. Las guías que se definen son legibles (hacer el contenido
textual legible y entendible), predecible y asistencia en la entrada de datos (ayudar a
los usuarios a evitar errores y corregirlos si aparecen).
Robusto – Los usuarios deben ser capaces de acceder al contenido independientemente
de los avances tecnológicos que ocurran. La principal guía es que sea compatible, hay que
maximizar la compatibilidad con herramientas de usuario actuales y futuras, incluyendo
tecnologías de apoyo.
Este estándar exige a las páginas web una serie de requisitos o criterios que permitirán identificar
el grado en que satisfacen la accesibilidad de los usuarios.
Nivel de conformidad – Define tres niveles de conformidad: A, AA y AAA.
Páginas completas – Especifica que la conformidad se refiere a la totalidad de la página,
no a una parte de ésta.
Procesos completos – Todas las páginas web que conforman la serie de páginas de un
proceso (por ej. proceso de compra en una tienda on-line) son conformes a cierto nivel de
conformidad.
Uso de tecnología de forma que ésta sea soportada por herramientas de apoyo a la
accesibilidad – Se incluye información extra que permite a las herramientas de apoyo
entender y controlar tecnología que éstas desconocen y no saben cómo procesar.
No interferencia – Se utiliza tecnología que no está soportada por herramientas de apoyo,
es decir, cuando hago una web no tiene que interferir en otras herramientas que yo use
para visualizarla correctamente.

Por último, se detallan, para cada guía, una serie de técnicas sobre cómo evitar fallos y satisfacer
cada requisito. Entre estas técnicas encontramos las ARIA, las CSS, las generales, las Flash, las
HTML, las PDF, los fallos comunes, etc.
Niveles de conformidad con WAI
Como ya hemos comentado, existen tres niveles de conformidad. El nivel “A” significa que la web
satisface TODOS los requisitos de nivel más básico u ofrece una versión equivalente. El nivel
“AA” va un paso más allá y satisface, además de los requisitos de nivel “A”, los “AA”. Y por
último el nivel “AAA” que satisface todos los requisitos “A”, “AA” y “AAA”, siendo el nivel de
mayor accesibilidad.
Cada nivel tiene su sello, que se incluye por decisión propia del diseñador, pues no hay un
organismo que verifique la accesibilidad de las páginas. Habitualmente se intenta alcanzar el nivel
“AA”.
Para saber si mi web es accesible puedo comprobarlo navegando por ella con distintos navegadores
y dispositivos, con las imágenes, el JavaScript y los applets de Java deshabilitados o con el sonido
desconectado. Probando la web con personas con diversas discapacidades visuales, motrices y
cognitivas. O revisando el código de la página con herramientas que comprueben la sintaxis y
algunas guías o manualmente para ver si es válido.
Son necesarias las dos revisiones (automática y manual) porque las herramientas automáticas
pueden producir “falsos negativos” y “falsos positivos”. Además, muchas guías no son
interpretables y necesitan validación manual. Lo importante es tener en mente que las guías son
indicadores de la accesibilidad real, pero nunca la conoceremos si no interactuamos con usuarios.
Algunas herramientas que nos ayudan a conocer los errores de nuestra página web son WAVE,
TAW o W3C Markup Validation Service. Una vez identificados los problemas podemos
resolverlos utilizando nuestros editores de texto HTML (Brackets o incluso el propio Plesk que
ofrece uno).
Herramientas de apoyo
Otra herramienta muy común son los lectores de pantalla, que permiten a las personas con
discapacidad visual la navegación y la interacción con el sistema operativo y sus aplicaciones,
incluyendo los navegadores Web (JAWS for Windows: lector de pantalla de los más conocidos).
Otros problemas comunes: No tener texto alternativo en las imágenes (añado etiqueta alt), o en
formularios (añado etiqueta label)
TEMA 2.1: Accesibilidad web ARIA
Introducción
Accesible Rich Internet Applications (ARIA) son una especificación de la W3C que propone un
conjunto de atributos y valores que extienden el lenguaje y la semántica de HTML para mejorar la
accesibilidad de los lectores de pantalla.
Las páginas web se pueden “consumir” a través de un navegador de manera visual, o a través de
su árbol de elementos (DOM) del código HTML, que puede mejorarse semánticamente
introduciendo ARIA para que sea más fácil su lectura con herramientas de asistencia (lectores de
pantalla).
ARIA
Definimos ARIA como el conjunto de atributos que definen formas de hacer que el contenido
web y las aplicaciones web (especialmente aquellas desarrolladas con JavaScript) sean más
accesibles para las personas con discapacidades. Se divide en tres tipos diferentes de atributos:
Roles –Describen widgets (controles deslizantes, barras de menú, pestañas y cuadros de diálogo)
que de otro modo no están disponibles en HTML. Se colocan como atributos dentro de las
etiquetas que queramos (p, div, button, etc.) y cambian su comportamiento
. Por ejemplo, con role=“tab” dentro de la etiqueta button sirve para especificar que el botón se
comporta como una pestaña, o con role=“tabpanel” dentro de div, especificamos que los
elementos dentro de ese espacio se comportan como paneles.
Estados – Describen el estado de interacción actual de un elemento, informando a la tecnología

de asistencia si está ocupado, desactivado, seleccionado u oculto.
Propiedades – Describen las características de los widgets descritos por los roles: si se pueden
arrastrar, si tienen un elemento requerido o una ventana emergente asociada, etc.
5 reglas para utilizar ARIA

Regla 1: Si podemos utilizar HTML nativo, lo haremos. ARIA no debe usarse cuando HTML
proporciona suficiente semántica para la accesibilidad, pues puede llegar a introducir barreras.
Regla 2: No cambiaremos la semántica original o el significado de HTML a menos que sea
realmente necesario para que se pueda transmitir a los usuarios de lectores de pantalla. ARIA puede
anular y cambiar esa semántica con este fin.
La etiqueta HTML <ul> (unordered list) define una lista desordenada que los lectores de pantalla
identifican como tal: anunciando la cantidad de elementos de la lista, habilitando la navegación de
elementos, etc. Si agregamos un rol ARIA, por ej. <ul role="navigation"> la semántica de la
lista se anula y el elemento se convierte en un punto de referencia de
navegación, perdiendo los beneficios de accesibilidad de la lista desordenada.
Una alternativa para que no se anulen estas propiedades es añadir el rol de

navegación a la etiqueta <div>, dentro de la que se encuentra <ul>, pues nos proporcionará ambos
beneficios, los del punto de referencia de la navegación, y los de la lista desordenada.
Otra alternativa, en la que el uso de ARIA no será necesario para tener
los beneficios del punto de referencia de navegación y el de lista
desordenada, es añadir la etiqueta <ul> dentro de otra etiqueta <nav>.
Regla 3: Todos los controles interactivos ARIA deben poder ser
utilizados desde el teclado. Los patrones de diseño definen interacciones de teclado estándar para
widgets y controles de ARIA que permiten a todos los usuarios hacer uso del widget usando el
teclado. Así se garantiza que las instrucciones proporcionadas por los lectores de pantalla se alineen
con la funcionalidad real de la página.
Regla 4: Los controles interactivos deben tener semántica apropiada y no deben estar ocultos.
Cualquier elemento que se pueda enfocar con el teclado (principalmente con la tecla Tabulador)
debe tener la semántica adecuada para que se identifique como un enlace, botón, control de
formulario o cualquier otro elemento con un valor de función adecuado. role="presentation"
elimina la semántica, por ello NUNCA debe aplicarse a un elemento de este tipo. Tampoco deben
ocultarse mediante CSS ni aria-hidden="true".
Regla 5: Todos los elementos interactivos deben tener un nombre accesible. El texto que describe
un control interactivo se denomina "nombre accesible" y debe presentarse a los usuarios de
lectores de pantalla cuando se encuentra el control.
Algunas etiquetas ARIA
Aria-label permite especificar una cadena de texto
para usar como etiqueta accesible y anula cualquier
otro mecanismo de etiquetado nativo, como un
elemento label. Ej. Si un botón tiene contenido de
texto y una aria-label, solo se usará el valor de la aria-
label.
Aria-labelledby permite especificar el id de otro elemento del DOM como etiqueta de un
elemento, para asociar dos o más elementos de la página.

Aria-owns permite decirle a la tecnología asistencial que un elemento separado del DOM se
debería tratar como un elemento secundario del actual, o que se reorganicen los elementos
secundarios existentes en otro orden.
Aria-describedby brinda una descripción accesible. Es una técnica útil cuando hay texto
explicativo adicional que un usuario puede necesitar, ya sea si se aplica solo a usuarios de tecnología
asistencial o a todos los usuarios.
TEMA 3: Usabilidad web

¿Qué es la usabilidad?
Se define como el atributo de calidad que evalúa cómo de fáciles son de utilizar las interfaces de
usuario (la interfaz de usuario puede ser manual, es el objeto a través del que una persona va a
interaccionar con el objeto, puede ser el objeto en sí). Según Jakob Nielsen, son métodos para
mejorar la facilidad de uso durante el proceso de diseño. Los componentes de calidad que definen
la usabilidad con:
Capacidad de aprendizaje, es decir, cómo de fácil es para los usuarios llevar a cabo tareas
básicas la primera vez que se enfrentan a ellas.
Eficiencia, cómo de rápido pueden llevar a cabo los usuarios una tarea una vez aprendida.
Capacidades de memorizar, es decir, cómo de fácil puede un usuario retomar su
competencia en el uso de un diseño tras u periodo sin utilizarlo.
Errores, cuántos errores cometen los usuarios, cómo de críticos son con ellos y si es fácil
recuperarse de ellos.
Satisfacción, cómo de agradable es el uso de un diseño.

¿Qué es la usabilidad web?
En el caso de la web, la usabilidad es la calidad de las interfaces de las páginas que componen un
sitio web.
¿De qué principios consta la usabilidad web?
Basándonos en el libro Usability 101: Introduction to Usability de Jakob Nielsen, existen 10 principios
de usabilidad para el diseño de interfaces.
Visibilidad del estado del sistema – El sistema debería mantener informado a los
usuarios sobre lo que está ocurriendo en el sistema a través de retroalimentación adecuada
y en un tiempo razonable. Por ejemplo, cuando me aparece el tiempo que tarda en
descargarse un archivo.
Mapeo entre el sistema y el mundo real – El sistema debería hablar el lenguaje de
usuario, con palabras, frases y conceptos familiares en vez de tecnicismos. Se aconseja
seguir convenciones del mundo real, haciendo que la información aparezca en un orden
natural y lógico.
Control del usuario y libertad – Los usuarios a menudo eligen funciones del sistema por
equivocación y necesitan una salida de emergencia claramente identificada para abandonar
el estado no buscado sin tener que ir a través de un diálogo extenso. Se aconseja que el
sistema ofrezca funcionalidades de deshacer y rehacer.
Consistencia y estándares – Los usuarios no se deberían preguntar si diferentes palabras,
situaciones o acciones significan la misma cosa. La iconografía y señalética debe ser
parecida para evitar esto, por eso se aconseja seguir siempre convenciones de plataforma.
Prevención de errores – Antes que diseñar buenos mensajes de error, debemos diseñar
interfaces para prevenir la aparición de estos. Se debe eliminar aquellas condiciones que
son propensas a cometer errores y proporcionar mecanismos de confirmación por los
usuarios antes de llevar a cabo una acción.
Reconocimiento antes que memoria – Minimizar la carga de memoria de los usuarios
haciendo objetos, acciones y opciones visibles. El usuario no debería tener que recordar
información de una parte del diálogo a otro, por eso deben hacerse visibles o fácilmente
recuperables las instrucciones de uso del sistema.
Flexibilidad y eficiencia de uso – Los aceleradores (atajos de teclado) suelen a menudo
acelerar la interacción con usuarios expertos de forma que el sistema puede satisfacer tanto
a los usuarios inexpertos como a los más avanzados. Se debe permitir a los usuarios adaptar
acciones frecuentes.
Estética y diseño minimalista – Los diálogos no deberían contener información
irrelevante o rara vez necesitada. Cada unidad de información extra en un diálogo compite
con unidades de información relevante, desestimando su visibilidad relativa.
Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores – Los
mensajes de error deberían estar expresados en un lenguaje llano (sin códigos), indicando
con precisión el problema y sugiriendo de forma constructiva una solución.
Ayudar y documentar – A pesar de que es mejor si el sistema puede utilizarse sin ningún
tipo de documentación, ésta puede ser necesaria en algunos casos. Por eso, cualquier tipo
de información debería ser fácil de buscar, estar centrada en la tarea que está realizando el
usuario, listar los pasos concretos a realizar y no ser muy extensa.
¿Cómo abordar el desarrollo de sitios web usables?
Cuando desarrollamos un sitio web y ya hemos seguido todas las pautas de diseño y accesibilidad,
es momento de facilitar el uso de mi web al usuario. Lo primero que debo hacer es evaluar si mi
página web es un sitio usable de cara a los usuarios, para esto haremos pruebas con personas reales.
Para abordar este test debemos conseguir usuarios representativos al target de mi web, pedirles
que realicen tareas representativas con la web y observar cómo lo hacen.
Una vez hemos evaluado a los usuarios tanto grupal como individualmente y tenemos claros los
errores o las barreras que impiden la usabilidad de la web modificaremos su diseño, desarrollando
una nueva versión que volveremos a evaluar hasta conseguir la versión final.
¿Cómo mejorar la usabilidad web?
Identidad de la empresa – Lo primero que necesito conocer de una dirección web es su dominio.
Debe ser una dirección memorable, fácil de recordar y en concordancia con la identidad de la
empresa. El dominio no debe usar más de dos palabras y debe incluir el nombre propio de la
empresa y el tipo de negocio. Es interesante incluir el logotipo de la compañía en cada página,
podemos hacerlo creando un ‘favicon’ para el sitio web. Así conseguiremos un esquema gráfico
consistente con la identidad corporativa.
Posicionamiento del sitio web – Utilizar los términos genéricos más usados para describir el
contenido de una página facilitará que el usuario la escoja. Otra técnica es no cambiar la dirección
URL de las páginas, esto puede dar error al acceder a ellas desde la carpeta de Favoritos del
buscador. En caso de tener que cambiar la URL debemos usar técnicas de redirección automática
para que esto no ocurra. Sirve también para posicionarse mejor crear un mapa del sitio web
activando un hipervínculo hacia él desde la página principal. Este mapa es un esquema de todo lo
que contiene la web y será muy útil tanto a los motores de búsqueda como a la navegación de los
usuarios.
Calidad en la navegación – Tengo que probar si se navega de forma correcta desde diferentes
navegadores, resoluciones y dispositivos. Debemos evitar la navegación horizontal, es decir que
las páginas sean demasiado anchas y excedan la resolución de pantalla del dispositivo (es uno de
los problemas más graves de usabilidad). Otras recomendaciones son ubicar el contenido más
importante en la parte superior, no usar ventanas que se abran automáticamente, ni textos
descriptivos para sus hipervínculos. Para sitios web extensos se deberá incorporar una función de
búsqueda a través de menús y submenús de navegación.

Visualización del contenido del sitio web – Debemos usar un buen contraste entre fondo y
texto, evitando los fondos con texturas que dificulten la lectura. También evitaremos usar más de
tres tipos de fuente en nuestras páginas (como mucho una para el texto principal de igual o mayor
a 10 puntos, otra para encabezados y otra para las opciones de navegación). Además, usando
fuentes diseñadas especialmente para la web se facilitará la lectura de esta. Por último, no debemos
incluir archivos de audio que se abran automáticamente, mejor hacerlo a través de enlaces o
hipervínculos donde el usuario, voluntariamente, elija el contenido.
Calidad del contenido del sitio web – Es conveniente utilizar un estilo de redacción que facilite
la lectura a través de párrafos pequeños, encabezados frecuentes para dividir el contenido en
porciones relevantes, palabras importantes resaltadas en negrita, puntos destacados, etc. Además,
debemos evitar utilizar elementos gráficos que no añadan valor y que creen una apariencia confusa
o poco profesional (contadores de visitas, gifs animados, excesivo uso de mayúsculas, imágenes de
publicidad, etc. Por último, debemos escribir en términos claros y concisos, evitando palabras
rebuscadas o muy técnicas excepto cuando la audiencia lo requiera, y presentar argumentos
utilizando el menor número de palabras posibles.
Entendimiento del sitio web – Tengo que definir contenidos de forma consistente, utilizando
diagramado y esquemas de colores en todas las páginas del sitio web para que el usuario pueda
deducir fácilmente que se encuentra en la misma web al navegar entre sus páginas. Para facilitarlo
aún más podemos usar un color diferente para los hipervínculos ya visitados, sin usar ese mismo
color en otros elementos como el encabezado o palabras destacadas en negrita (pues puede dar
lugar a confusión). Es necesario indicar claramente hipervínculos hacia archivos de formato
distintos al HTML (Word, Excel, PowerPoint) y usar atributos html (ALT y TITLE) para añadir
descripciones a contenidos no textuales.
Rendimiento del sitio web – Debemos diseñar las páginas de forma que se carguen lo más
rápidamente posible reduciendo el peso de la página. Para esto podemos optimizar el tamaño de
las imágenes (.jpg), no incluir imágenes que residan en otros servidores o minimizar el uso de la
tecnología Flash.
TEMA 4: Posicionamiento web
¿Qué es el posicionamiento web?
SEO (Search Engine Organic) son las técnicas o el proceso de mejora de mi página web para
mejorar su visibilidad en diferentes buscadores y directorios de manera orgánica (sin previo pago).
A lo largo de los años se ha producido un crecimiento exponencial en el número de páginas web
existentes y ya superan los 2 billones, aprox.
Regular el posicionamiento es importante porque las visitas atraídas por buscadores nos aportan
tráfico web de calidad (usuarios que buscan satisfacer una necesidad), con un ratio de
conversión superior (los usuarios son los que nos buscan y van a tener un objetivo concreto en
ella) y un coste de adquisición inferior al resto de estrategias de marketing digital (no hay que
pagar para tener más visitas).
Existen muchas webs que nos muestran estadísticas sobre el uso de internet en todo el mundo,
algunos de los datos más relevantes en España indican que Google es el buscador usado por el
95,3% del total de usuarios, que un 71,81% utiliza Chrome para navegar por Internet o que un
76,03% de los móviles españoles son Android.

Marketing de buscadores o SEM
Las estrategias SEM (Search Engine Marketing) aprovechan distintas funcionalidades de
buscadores como Google para promocionar un producto, servicio, marca, empresa o contenido
entre su público objetivo. Al hablar de marketing sabemos que lleva asociada algún tipo de
inversión (económica). Su principal objetivo es incrementar la visibilidad en los motores de
búsqueda.
El SEM se basa en el tráfico (nº de visitas) obtenido de dos formas:
Gratuita (SEO) – Es un subconjunto de técnicas SEM que se basan en un
posicionamiento natural u orgánico donde el nº de palabras claves que podemos usar es
limitado, pues se basa más en el propio contenido de la página web, por eso este debe ser
de calidad. Dentro de las técnicas SEO distinguimos entre técnicas:
On-site, aquellas reglas que aplicamos a nuestro sitio web para hacerlo más
amigable a los motores de búsqueda (optimizando títulos, incluyendo contenidos
de calidad, formateando URLs correctamente, haciendo uso correcto de los
elementos h1, imágenes, etc.).
Off-site, procesos dirigidos a obtener votos de otros sitios web con el propósito
de incrementar la credibilidad de cara a los motores de búsqueda (número y calidad
de sitios web que apuntan a nuestras páginas).
De pago (PPC – Pay per Click) – Se consigue un posicionamiento basado en publicidad
(online, RRSS, e-mail marketing), con un número de palabras claves ilimitado y flexible, y
donde tenemos un número reducido de caracteres y diseños específicos (se refiere a que
se posicionan como anuncios al inicio del índice porque han pagado para estar ahí).
Mientras que el SEO no tiene un coste directo, sino que se basa en el trabajo constante y resultados
a medio/largo plazo en un proceso de incremento constante; en el SEM tenemos un coste directo
por clic que nos da resultados a corto plazo, pero en el que solo hay visibilidad si se paga.
Directrices para webmasters
Cuando hacemos una búsqueda en Google realmente estamos buscando dentro del índice que ha
construido sobre toda la información existente en Internet. Esto lo lleva a cabo a través de las
“arañas” que indexan y conectan los datos para proporcionarnos la información deseada a partir
de ciertas palabras claves que nosotros ponemos en el buscador. A partir de estas palabras, Google
selecciona y organiza la información en torno a una jerarquía (posicionamiento) para mostrarnos
aquella que cree que puede servirnos más.
El funcionamiento del algoritmo o las “arañas” de Google nos permite rastrear la web y descartar
aquellas páginas estáticas (que no se actualizan), huérfanas (sin URL que permita legar hasta
ellas) o con URLs muy complejas. Después, almacenará las páginas rastreadas en su índice para
indexarlas (recuperarlas y mostrarlas) cuando sea necesario y atendiendo a las palabras claves. Por
cada una de las páginas, Google rastrea y almacena en su índice el código fuente de las páginas
web, su tamaño, la última fecha de actualización, la url de la página y sus enlaces; y las
imágenes/vídeos que contiene.
Cuando cuenta con esta información, aplicará el PageRank, un sistema que determina la
importancia o relevancia del sitio en función de la calidad de las páginas que enlazan o referencian

nuestra web. El algoritmo del PageRank valora más la calidad que la cantidad, por lo que las
referencias de sitios web importantes hará que Google nos tenga mucho mejor valorados que si
tenemos muchas referencias de sitios webs de menor calidad.
Este es el algoritmo inicial, pero se han lanzado numerosas versiones para actualizarse y adaptarse
a las necesidades reales del momento, a las evoluciones del lenguaje HTML y evitar engaños. Entre
ellas encontramos la versión Florida (2003), Vince (2009), Panda (lanzado en 2011 se centra en el
contenido y su calidad), Penguin (lanzado en 2013 se centra en ver el tipo de enlaces que llegan y
salen de mi página), Pirate (se centra en temas de copyright), Pigueon (se centra en las búsquedas
locales de mi página) y Page Layout (se centra en la disposición de los elementos o layout). Los
algoritmos que tenemos más a mano para mejorar nuestro posicionamiento son:
Panda – Se centra en la calidad de los contenidos, evitando así que páginas web con
contenido de baja calidad sean mostradas en los primeros resultados del buscador.
Sanciona el contenido de mala calidad (duplicado, copiado, reescrito), las granjas de
contenido (páginas sólo con spam, contenidos generados automáticamente o por otras
páginas) y sitios que abusen de anuncios. Recompensa sitios con contenido de calidad, es
decir, único y significativo.
Si hemos sido penalizados por Panda, podemos recuperarnos mejorando el contenido del
sitio web de forma que sea único (eliminando duplicidades), de alta calidad, con enlaces a
otras páginas de calidad, con la publicidad justa y que esté optimizado para personas, no
sólo para los buscadores.
Penguin – Se centra en los enlaces que entran y salen de mi web, evitando que páginas
web que manipulen los rankings sean mostradas en los primeros resultados del buscador.
Sanciona los enlaces artificiales (aquellos que no están relacionados con el contenido de mi
sitio web y sólo están enlazados para mejorar el posicionamiento).
Si hemos sido penalizados por Penguin, podemos recuperarnos deshaciéndonos de los
enlaces artificiales. Para esto debemos identificar todos los enlaces que apuntan a tu sitio
web, aislar todos aquellos que sean artificiales, solicitar a los sitios que borren dichos
enlaces artificiales, desautorizar los enlaces que no nos hayan borrado y enviar solicitud de
reconsideración a Google.
En este algoritmo aparecen entre 500 y 600 cambios/año, y aunque la mayoría son cambios
menores, algunos afectan los resultados de búsquedas significativamente.
El algoritmo de Google penaliza las técnicas blackhat (que tratan de engañarlo):
El abuso de palabras clave irrelevantes con el único objetivo de copar posiciones de
Google, así como el abuso de palabras clave relevantes cuando su exceso dificulta la
lectura. Se recomienda una densidad máxima del 10%, es decir, si mi página tiene 100
palabras, solo 10 podrán coincidir con las palabras claves sobre las que quiero definir una
búsqueda.
Las granjas de enlaces, sitios creados para albergar vínculos a otras páginas web sin más
objetivo que el de elevar artificialmente su posicionamiento.
Contenido oculto (cloaking), colocar enlaces y palabras clave de forma que no sean
visibles para los usuarios, pero sí para los robots de los buscadores (y hacerles creer que
formaban parte del contenido de la página)
Contenido copiado y publicado con leves modificaciones para hacer creer a Google que
es propio.
El algoritmo de Google recomienda seguir una serie de buenas prácticas o whitehat para mejorar
el posicionamiento en las búsquedas:
Escribir para personas, no para máquinas, siendo menos agresivos con el uso de palabras
clave dentro de los artículos, pues saturarlos con palabras claves será penalizado.
Crear un blog (de constante actualización y actividad) y enlazarlo con mi página web. Si
antes era importante tener contenido fresco y de calidad en actividad constante.
Propagar los contenidos a redes, los botones de propagación en redes sociales son muy
útiles para lograr visibilidad y posicionamiento por la misma razón de constante actividad
y actualización.
Evitar contratar sistemas de backlinks (generación de enlaces externos) automatizados,
porque serán considerados spam.
Distribuir esfuerzos de optimización evitando concentrar los esfuerzos en optimizar
una única página de la web y distribuyéndolos en varias páginas para evitar que nos puedan
confundir con spam.
Evitar el uso excesivo de anuncios Adsense (sin relación con mi contenido) pues si los
enlaces no tienen relación con mi contenido me pueden penalizar, aunque me estén
pagando los anunciantes.
Directrices generales para webmasters
Para ayudar a Google a encontrar y entender tanto las páginas como su contenido, y para ayudar
a los usuarios a usar las páginas podemos seguir una serie de principios básicos. El primero es
hacer páginas para usuarios, no buscadores, y no engañar ni a usuarios ni a buscadores con trucos
para mejorar la clasificación del sitio. Debemos crear sitios web únicos, valiosos y atractivos.
Es importante evitar el contenido generado automáticamente, la participación de esquemas de
enlaces (yo te sigo y tú me sigues pero con enlaces), la creación de páginas con poco o ningún
contenido original, el encubrimiento (mostrar contenidos distintos a usuarios y a navegadores),
redirecciones engañosas, textos o enlaces ocultos, páginas puerta (sitios que se crean para que
aparezcan como respuesta a consultas de búsquedas similares y específicas, me conduce a una
página intermediaria antes de llegar a mi destino final). También evitaremos el contenido copiado,
la participación en programas de afiliados que no añaden valor suficiente (asociarse con
vendedores copiando la información que estos ofrecen sobre el producto, sin añadir nada original),
rellenar con palabras clave irrelevantes, crear páginas con comportamiento malicioso (que te metan
virus), el abuso del marcado de datos estructurados o el envío de consultas automáticas a Google.
Tipos de búsquedas en Google
Debemos entender que detrás del algoritmo de Google existen personas con dudas, problemas y
necesidades muy concretas. Por esta misma razón se dan tipos de búsquedas muy variadas:

Búsqueda navegacional – El usuario sabe exactamente qué página busca, pero no
recuerda el dominio.
Búsqueda transaccional – El usuario quiere realizar una transacción (compra, registro,
suscripción a un servicio, etc.).
Búsqueda informacional – El usuario busca información, ya sea de carácter general o un
dato en concreto
Palabras clave
Son términos que utiliza el usuario en los motores de búsqueda para dar respuesta a sus
necesidades. Debo luchar por tener en aquellas palabras clave que mejor definan el contenido de
mi sitio web y, a su vez, sean usadas por el target para encontrarlo. Es crucial entender quién es
nuestra Searcher Persona, es decir, el cliente objetivo imaginario ideal en representación de todo
un segmento de mercado. Identificarlo nos va a ayudar a imaginar los objetivos, deseos y
limitaciones de nuestro cliente potencial, así como a no perder el foco a la hora de trabajar aspectos
clave del SEO.
Una plantilla que nos ayudaría a
describir un searcher persona
empieza por asignarle un nombre
que nos permita empatizar con el
perfil abstracto que estamos
definiendo. Además, definiremos
su trabajo y cargo (nos permite
identificar si la búsqueda obedece a
su ocupación profesional o
personal), sus datos demográficos
(conocer en más detalle a la persona
a través de su sexo, edad, capacidad
adquisitiva, nivel educativo, etc.),
sus objetivos y retos (cuáles son sus principales metas y cómo podríamos ayudarle a conseguirlos)
o sus valores y miedos (permiten definir ventajas competitivas que refuercen los valores del
usuario y les ayude a superar sus miedos), que se conectan directamente con sus motivaciones y
objeciones.
El viaje del cliente nos permite visualizar el proceso de decisión del cliente. Algunos aspectos
que permiten diseñar un buen viaje del cliente son las motivaciones (aquello que ilusiona al cliente:
placer de adquirir algo nuevo, de aprender algo nuevo, etc.) y las objeciones (aquello que frena el
proceso del viaje: dudas, miedos, riesgos, aspectos desconocidos, etc.).
Para poder seleccionar las palabras claves tendremos que inspirarnos en el viaje del cliente de
nuestra searcher persona, los contenidos de nuestra web, el posicionamiento de nuestra
competencia (a través de qué palabras claves se posiciona la competencia) y las intenciones de
búsqueda del cliente. Son cuatro las cuatro intenciones de búsqueda del cliente potencial: el saber
(necesidad de satisfacer la curiosidad), el hacer (realizar algún tipo de acción), el navegar a un sitio
web (del que desconocen su dominio) y el visitar en persona (necesidad de localizar
geográficamente un sitio).

¿Cómo se consigue un buen posicionamiento web?
Podemos conseguir un buen posicionamiento a través de un proceso natural u orgánico con
aspectos on-page, que se refieren al contenido de la página Web. Este contenido debe incluir las
palabras clave en los nombres de archivos y el dominio; la cabecera en etiquetas meta y título; y
dentro del cuerpo en párrafos, títulos y subtítulos, información asociada a imágenes y videos o
texto de los vínculos, entre otros. Resaltaremos los aspectos on-page aumentando la densidad o
frecuencia de la palabra clave, usando formato en los caracteres (negrita, etiqueta de cabecera
<Hn>) o dando más proximidad a las palabras clave.
También podemos conseguir un buen posicionamiento orgánico resaltando los aspectos off-
page, aquellos que se refieren a la popularidad de la página web en cuanto a su número de visitas
o el número y calidad de páginas webs externas al sitio que apuntan a la página. Otra forma de
posicionar nuestra web es a través de un proceso de pago.
TEMA 5: Dominios y alojamiento web
Introducción
No me sirve de nada realizar una página web si no la voy a dejar pública en Internet. Para tener
presencia en Internet, lo primero será hacerme con un dominio web y alojarlo en un servidor. El
dominio no es completamente obligatorio, porque las webs tienen además una dirección IP
(mapeo entre dominio y dirección IP, pero los usuarios no sulen saber este nº, sino que saben el
dominio), pero el alojamiento web sí que será obligatorio.
Dominios en internet
¿Qué es un dominio en internet?
Según la RAE, un dominio es un nombre exclusivo que se la da a un sitio web para que cualquiera
pueda visitarlo en internet. Denominación que identifica a un sitio a la red y que indica su
pertenencia a una categoría determinada. Existen entidades en cada país que gestionan los
dominios para asegurarse que no existen 2 iguales.
Los nombres de dominios son fáciles de recordar y no se guardan en los servidores de alojamiento,
lo que se guarda es su dirección IP (ej. 158.42.4.23). Podemos traducir de nombres de dominio a
IP mediante servidores DNS (Domain Name System), que son servidores de sistemas de
nombres de dominio. Los DNS tienen una lista de algunos sitios en internet y si uno de ellos no
tiene la traducción pregunta a otro y así sucesivamente hasta dar con la IP. En Windows puedo
hacer ping en Símbolo del sistema para conocer
el IP de una web. Podemos utilizar ambos (IP y
dominio) desde nuestro navegador para acceder
al sitio web.
La práctica habitual es que el usuario se conecte a su navegador, escriba el dominio de la página
que desee consultar, se haga una consulta al servidor DNS más cercano y este devuelva la IP
asociada al dominio buscado. Así, mi navegador accede al servidor donde está alojada la web y ese
servidor devuelve el sitio web.

¿Qué estructura tiene?
Tiene una estructura jerárquica,
pudiendo estar formado por distintas
partes denominadas etiquetas. La
etiqueta más a la derecha se
denomina dominio de primer
nivel o TLD (.es, .com, etc.). El
dominio de segundo nivel es la etiqueta que solemos usar para dar a entender la finalidad de
nuestro sitio web (el nombre de la web). La etiqueta más a la izquierda corresponde con un
subdominio del dominio de segundo nivel, y suelen usarse para gestionar distintas “áreas” de
un mismo dominio (ej. ftp, mail, webmail, etc.).
¿Qué tipos de dominios existen?
Dominios de primer nivel geográficos, que están reservados para los distintos países o territorios
y usan dos letras como extensión (.es (España), .fr (Francia), .eu (Unión Europea), etc.)
Dominios de primer nivel genéricos, que están reservados inicialmente para propósitos
específicos, actualmente sin restricciones y usan tres letras como extensión ( .com (comercial), .org
(organizaciones), etc.).
¿Quién regula los dominios?
Hay organizaciones sin ánimo de lucro, como la ICANN (Internet Corporation for Assigned
Names and Numbers) que centralizan y coordinan el listado de nombres y direcciones IP de
Internet para evitar que existan dos dominios iguales. En los dominios para países se delega a
organizaciones sin ánimo de lucro de cada país o territorio. En España se encarga dominios.es
que depende del Ministerio de Economía y Empresa de España, y nos permite consultar qué
dominios están disponibles.
¿Cuál es el ciclo de vida de un dominio?
Cuando me planteo tener presencia en Internet, debo pensar en qué dominio voy a comprar y
asociar a mi web, este dominio debe estar disponible. Cuando encuentro un dominio que se
adecúe a mis necesidades y que esté libre, lo registro para que deje de estar disponible. Una vez
asociado con la dirección IP, ese dominio estará activo, pero tras un plazo (pago por tener el
dominio x tiempo), conocido como el periodo de gracia, el dominio dejará de funcionar si no se
ha renovado (tiene un coste habitual, son penalización). Pasado el periodo de gracia, pasaremos al
periodo de castigo, un plazo de tiempo en el que aún puede renovarse el dominio, pero a mayor
coste del habitual (hay penalización). Finalmente, si tras el periodo de castigo sigue sin renovarse,
pasaremos al periodo de eliminación, en el que el dominio ya no se puede renovar y habrá que
esperar a que quede disponible para volver a registrarlo.
En el caso de dominios de primer nivel geográfico (.es, .eu), estará activo de 1-10 años y
tendremos un periodo de gracia de 10 días para decidir si renovarlo o no. En el caso de los
genéricos (.com, .org), estará activo de 1-10 años, tendremos un periodo de gracia de 30 días, un
periodo de castigo de 30 días, y 5 días para la eliminación.
¿Cómo obtener información sobre un dominio?
Esta información es pública y nos la ofrece dominios.es. En primer lugar, puedo consultar si el
dominio está libre y de quién es (este servicio lo ofrecen todos los agentes registradores, por
ejemplo https://www.dondominio.com). También me interesará saber cuándo caduca a través de
WHOIS, un directorio público y gratuito, o si el sitio web está penalizado.
Para saber si una web está o no penalizada podemos comprobar el contenido del dominio
(podemos hacer uso de archive.org para hacer búsquedas en el historial de una web a lo largo del
tiempo), su perfil de enlaces (revisar los backlinks y qué calidad tienen estos sitios con herramientas
como Majestic, Ahref o Monitor Backlinks) o su tráfico web (es difícil de saber ya que
necesitaríamos acceder al Google Analyitics del sitio web, pero hay herramientas como
feinternational que nos dan algo de información).
¿Cómo elegir el nombre de dominio perfecto?
A la hora de elegir el nombre de mi dominio, debo tener en cuenta que será la primera impresión
de nuestro sitio web, por lo que afecta al SEO y define nuestra marca. Es importante que nuestro
dominio sea único y “brandable” (define nuestra marca personal o se asocia con una ya existente).
Buscaremos nombres que sean únicos, pegadizos y fáciles de recordar, incluso podemos inventar
nuevas palabras.
Nos ayudará saber qué tipo de dominios están utilizando nuestros competidores, para evitar
confusiones, pero es importante que sea un nombre corto y conciso (preferiblemente entre 6 y
15 caracteres). Los nombres largos son más propicios a introducir errores tipográficos y más
difíciles de recordar.
Los dominios también se propagan entre personas (anuncios de radio, conversaciones, etc.), por
eso deben ser fáciles de pronunciar, deletrear y teclear, evitando que el usuario navegue a un
sitio web diferente.
Evitaremos guiones y números pues pueden ser un signo de dominios de spam, y son más
propensos a cometer errores ortográficos. Si elegimos un dominio con guiones porque el que
queremos no está disponible, los usuarios acabarán navegando por la página de nuestro
competidor si olvidan poner los guiones.
Incluir palabras clave nos permitirá decirles a los motores de búsqueda de qué trata tu sitio web,
cosa que puede mejorar el SEO y conseguir una mejor valoración de Google en su ranking.
Debemos ser creativos porque es difícil encontrar un buen nombre de dominio con palabras clave
que esté libre.
Es importante pensar a largo plazo porque cambiar el dominio en el futuro nos costará dinero,
imagen de marca (branding) y posicionamiento web orgánico (SEO). Contemplaremos la
posibilidad de elegir un dominio que nos permita expandirnos en caso de que fuera necesario.
Utilizaremos herramientas online para comprobar la disponibilidad de un dominio como nombre
de usuario en RRSS para intentar tener el mismo nombre en ambos. Esto facilita a los usuarios
encontrarnos en la web.

Utilizaremos la extensión correcta, .com sigue siendo la mejor por ser la más familiar y fácil de
recordar. Si esta extensión no está disponible buscaremos otro nombre antes de plantearnos otra
extensión. Si seguimos queriendo utilizar el nombre de dominio, plantearemos otras extensiones
(por este orden) .net, .org. Lista de nuevos dominios de nivel superior genéricos (gTLD).
Podemos hacer uso de generadores de nombres de dominio como
http://www.leandomainsearch.com/ o https://www.namemesh.com/.
¿Cómo registrar un nombre de dominio?
Podemos registrar nuestro dominio a través de empresas que se dedican a registrar dominios
(Google Domains, dominios.es), o a través de empresas donde alojemos nuestra web (1and1,
hostalia). Las empresas de alojamiento web suelen ofrecer el primer año de dominio gratis, pero si
cambiamos de hosting posiblemente queramos llevarnos también el dominio y puede que nos
pongan pegas.
Alojamiento web
El alojamiento web consiste en el acto de alojar (subir) ficheros que conforman un sitio web (.html,
.css, .js, .jpg, etc.) en un servidor abierto al público y accesible desde Internet a través de
navegadores y otras herramientas (ej. clientes FTP - File Transfer Protocolo: Protocolo de red
para la transferencia de ficheros, herramientas que utilizo para poder cargar ficheros en un
servidor).
Al alojar mi sitio en un hosting obtengo una dirección IP (Internet Protocol – Número que
identifica un dispositivo con acceso a internet) que identifica mi sitio web y a la que asociamos el
dominio elegido, además de acceso al servidor para alojar los ficheros de mi sitio (necesitaremos
un usuario y una clave).
Para subir ficheros al servidor puedo usar una herramienta ftp basada en la web de hosting, o
acceder desde herramientas ftp cliente como Filezilla o Cyberduck. Son herramientas con un
conjunto de botones, desde donde me conecto al servidor para subir ficheros. Tendremos un
apartado en el que se mostrará el estado de conexión con el servidor, una vista de mi carpeta local,
y otra vista de la carpeta en el servidor (puedo arrastrar entre ventanas para actualizar los ficheros).
Dependiendo de las necesidades del sitio, se alojará en un tipo de alojamiento web u otro. Para
ilustrar esto, se usan los conceptos de piso (alojamiento compartido, compartimos gastos entre
muchos, pero lo que les ocurre a los vecinos me afecta a mi), adosados (alojamiento en servidor
virtual, comparto recursos con muy pocos pero necesito de conocimientos técnicos para manejar
y evitar ataques al servidor) y chalets (alojamiento en servidor dedicado). Tendremos:
Compartido (Shared Web Hosting) – Nuestro sitio web está almacenado en un servidor
que aloja otros sitios web. Es barato, ya que los costes son compartidos por todos los sitios
alojados, pero el rendimiento de tu sitio puede verse afectado por los otros sitios alojados
en el mismo servidor. Opción que se suele contratar al dar de alta un sitio nuevo.
Servidor Web Dedicado – Alquilamos un servidor íntegramente sobre el que tenemos
control absoluto. No debemos preocuparnos por otros sitios como ocurre en la opción de
“Compartido”, pero es una opción más cara y tengo que contratar a una persona que nos
mantenga el servidor. Opción para empresas con un tráfico elevado.

Servidor Virtual Privado (VPS) – Físicamente comparte servidor con otros sitios web,
pero cada sitio está lógicamente separado en el servidor. Es barato, ya que los costes son
compartidos por todos los sitios alojados y las páginas no se ven afectados en su
rendimiento por problemas con sitios web alojados en el mismo servidor. Se trata de una
opción intermedia entre un hosting compartido y uno dedicado.
Basado en la nube (Cloud Based Web Hosting) – Cientos de servidores trabajan juntos
como si fuera un único servidor gigante. El plan se acomoda a las necesidades actuales del
sitio web y si el tráfico crece se dedican más máquinas, tiene la gran ventaja de que pagas
por los recursos utilizados.
Hosting de Wordpress (Managed WordPress Hosting) – Servicio en el que el
proveedor del alojamiento mantiene la instalación de WordPress al día para proteger los
sitios alojados allí de amenazas de seguridad. La web se crea mediante plantillas ofrecidas
por la plataforma, pero no es tan barato como un hosting compartido a pesar de ser similar.
Para saber qué tipo de alojamiento web me interesa debo pensar en el tipo de sitio que voy a crear
o los requisitos técnicos de mi sitio, esto dependerá de si va a ser un sitio web:
Estático – Los sitios web estáticos no requieren de ninguna capacidad especial para
funcionar, son sitios creados con HTML, CSS y Javascript.
Dinámico (con acceso a bases de datos) – Para sitios web dinámicos dependerá del
lenguaje de programación que utilizo la versión (php, asp, perl, Python, Java), pues de esto
dependerá el gestor de base de datos que utilice (MySQL, Oracle, SQL Server).
Sitio web de Wordpress – Servidor de Wordpress.
También tendré en cuenta el nivel de seguridad que necesita mi sitio web en función de su
contenido. Si capturamos o procesamos datos sensibles de personas como números de tarjeta,
números de teléfono o direcciones, el servidor donde alojemos nuestra web y sus datos deberá
incluir servicios de antivirus, monitoreo de software, contra hackeos y caídas del servidor.
Otra característica a tener en cuenta en si necesito un email asociado al dominio, y en caso
afirmativo, cuántos. O si crearé más de un sitio web que se mostrarán como subdominios del
primero (poliformat, webmail, polilabs, etc.).
Además, es importante el volumen de datos que almacenará y proveerá mi sitio. Deberemos tener
en cuenta dos aspectos:
El tráfico del sitio web – ¿Qué volumen de tráfico espero inicialmente y en un futuro?
La mayoría de los sitios web nuevos tienen un nivel de tráfico pequeño, pero debemos
elegir un plan de alojamiento web que nos permita ampliar la capacidad en el tiempo.
El tamaño de los ficheros almacenados – Si nuestro sitio web ofrece imágenes de alta
calidad necesitaremos un alojamiento con mucho espacio en disco.
Por último, me interesa conocer mi presupuesto mensual para el alojamiento, pues cada plan
ofrecido por las compañías de hosting tiene un precio, que varía a lo largo del tiempo . Así como
mi nivel de confort manejando tareas técnicas, pues los proveedores ofrecen planes con
diferentes niveles de experiencia técnica (Hosting compartido vs. Hosting dedicado).

TEMA 6: Google Analytics y Search Console
Google Search Console
Se trata de una herramienta gratuita de Google que nos permite saber qué páginas de nuestro sitio
web han sido rastreadas e indexadas por Google, además de detectar problemas que estén
afectando a nuestro sitio web (como penalizaciones del algoritmo de Google). Gracias a esta
herramienta podemos conocer la valoración que Google tiene de nuestro sitio web, analizar el
rendimiento del tráfico orgánico a nuestro sitio web y verificar que el rendimiento del sitio web es
el adecuado.
Google Search Console ofrece diversos servicios, entre ellos el de enviar y comprobar el mapa de
nuestro sitio web, comprobar y ajustar la frecuencia de indexación del Googlebot (con qué
frecuencia Googlebot visita un sitio determinado) o producir y comprobar un archivo robots.txt,
que indica a los rastreadores de los buscadores a qué URLs de tu sitio pueden acceder. Además,
permite enumerar los enlaces de páginas internas y externas a ese sitio, ver qué palabras clave en
las búsquedas de Google han llevado a ese sitio, y la tasa de clic en las palabras de esa lista o las
estadísticas sobre cómo Google indexa el sitio, y los errores que haya podido encontrar.
Para usarlo es necesario tener una cuenta en cualquier de los servicios de Google, iniciar sesión en
GSC y allí añadir nuestro sitio web y verificar la propiedad. Podremos hacerlo descargando un
fichero HTML de verificación proporcionado por Google, subiendo dicho fichero en nuestro sitio
web y confirmando la subida correcta mediante el enlace proporcionado por Google.
El botón Search Console Insights
nos muestra un resumen del
rendimiento de nuestro sitio web
(vista general del sitio, contenido
más popular y canales de tráfico
principales hasta nuestro sitio web.
En descripción general nos
muestra un resumen de las métricas
y notificaciones más importantes,
incluidos el rendimiento en la
búsqueda de Google, la indexación
y algunas métricas sobre el sitio.
En rendimiento se muestran
métricas importantes sobre el
rendimiento que tiene el sitio web
en los resultados de la Búsqueda de
Google.
Esta información debe utilizarse para mejorar el rendimiento de tu sitio web en los resultados:
Los clics totales son el
número de veces que los
usuarios han hecho clic sobre
el enlace de nuestro sitio web
desde la página de resultados
de Google.
Las impresiones totales son el número de veces que se ha visto un enlace a nuestro sitio web en
los resultados de búsqueda de Google.
El CTR medio se refiere a los Click Through Rate (CTR): Porcentaje de impresiones que han
generado clics (de cada 100 impresiones el 5,1% hacen click).
La posición media nos muestra en qué posición de los resultados de búsqueda aparece nuestro
sitio web de media.
Otros elementos del panel de control:
Consultas son las palabras clave que utiliza la gente para encontrar las páginas que
tenemos posicionadas.
Lista de páginas de mi sitio web que reciben más tráfico.
Países desde donde nos llega el tráfico.
Dispositivos desde donde se está accediendo a nuestro sitio web.
Aparición en búsquedas nos permite ver qué datos muestra Google de nuestro sitio
cuando aparece en el resultado de una búsqueda.
Fechas es el número de veces que se ha visto un enlace de nuestro sitio web en el resultado
de búsqueda de Google.
En Inspección de URLs se nos proporciona información sobre la versión indexada por Google
de una página concreta. Permite también solicitar la indexación de una página nueva.
En páginas podemos consultar qué páginas se han incluido en el índice y si se ha detectado algún
problema al indexar tu sitio web. Aquí encontramos el nº de páginas indexadas y aquellas que
por algún error no pueden indexarse y por lo tanto no aparecerán en ningún resultado de
búsqueda. También encontraremos las páginas indexadas que tienen algún problema, y que
dependiendo del tipo de problema aparecerán o no en los resultados de búsqueda. Por último,
encontraremos las páginas que no se han indexado de manera intencionada incluyendo la
etiqueta “meta” <meta name="googlebot" content="noindex"> en la sección <head>.
El sitemaps es una lista de los archivos con un listado de las páginas que componen un sitio web.
Un fichero sitemap.xml debe estar codificado en UTF-8 (Codificación más extendida en la web
que incluye tanto signos lingüísticos como elementos textuales de casi todos los idiomas). Además,
solo puede hacer referencia a las urls de su misma ubicación, es decir, si se encuentra ubicado en
http://misitio.com/blog/sitemap.xml solo deberá incluir páginas de su misma ubicación
http://misitio.com/blog/ y no puede hacer referencia a URLs fuera de su ubicación como
http://misitio.com/tienda/ o http://subdominio.misitio.com/

Un fichero sitemap.xml debe incluir la etiqueta <urlset> al inicio del fichero, cada URL incluida
en el fichero debe ir dentro de una etiqueta <url> y cada una de esas URL debe incluir las siguientes
etiquetas: <loc> con la URL de la página, <lastmod>* con la última fecha de modificación del
contenido, <changefreq>* con la frecuencia de posible modificación del contenido y <priority>*
con la prioridad relativa de esta URL con respecto al resto de URLs.
La sección retirada de URLs nos permite decirle a Google que elimine cierta página (url) de
nuestro sitio web de su índice.
En usabilidad móvil se nos muestra información sobre los problemas de usabilidad móvil que
presentan las páginas de nuestro sitio web.
En el apartado enlaces se nos proporciona información sobre las páginas más enlazadas desde
dentro y fuera de nuestro sitio web.
Google Analytics
Herramienta gratuita que permite saber cuánta gente visita nuestra web, qué gente visita nuestra web
(país/dispositivo/sistema operativo/edad/intereses), qué páginas son más/menos populares, cuánto
tiempo pasan los visitantes en nuestro sitio web y desde dónde llegan las visitas a nuestra web.
Desde Google Analytics podemos manejar sesiones (visitas que ha tenido la página/sitio web),
usuarios (número de persona diferentes que nos han visitado), número de visitas a páginas (número
de páginas que los usuarios han visitado), páginas por sesión (número medio de páginas que visita
un usuario antes de marcharse de la web), duración media de la sesión (tiempo medio que los
usuarios navegan por la web), porcentaje de rebote (porcentaje de usuarios que se marchan sin
visitar ninguna otra página, es decir, que se van por donde han llegado), porcentaje de nuevas
sesiones (porcentaje de visitas que llegan por primera vez al sitio web) y conversión (acciones que
deseamos que realicen los usuarios que acceden y navegan por nuestra web).
Para empezar a usarlo debemos tener una cuenta en cualquier de los servicios de Google, iniciar
sesión en Google Analytics y completar el formulario de registro de nuestro sitio web. Al final del
registro se genera un código de seguimiento exclusivo para nuestro sitio web que sirve para medir
las visitas a nuestra web. Debemos copiar este código e incluirlo en la sección <head> de todas
las páginas de nuestro sitio web.

En la esquina superior izquierda del panel de control tenemos un desplegable que nos permite
seleccionar sobre qué vista de qué página queremos ver el resumen de Google Analytics. La página
principal es la vista resumen de los datos de la propiedad seleccionada. Bajo esta, en el listado de
informes principales encontramos información sobre distintos aspectos de los visitantes:
Visitas a tiempo real – Nos indica el nº de usuarios conectados ahora mismo a la web y
el dispositivo desde el que se conectan. Además, proporciona información sobre las
páginas que están visitando, desde dónde han llegado y desde qué ubicación se están
conectando.
Audiencia – Muestra el tipo de usuarios de nuestra web a través de varios gráficos con el
número de visitas, datos sobre la audiencia (datos demográficos, tipo de ordenador/móvil
desde el que se conectan, porcentaje de visitantes nuevos y antiguos). También incluye un
mapa con el listado de países desde donde proviene nuestra audiencia.
Adquisición – Monitoriza los canales desde los que los visitantes llegan al sitio web (desde
redes sociales, por búsqueda directa, por enlace desde otra web, etc.) e incluye un detalle
del comportamiento desde cada canal.
Comportamiento – Debajo de un gráfico con el número de visitas a la página
encontramos información numérica sobre cómo se comportan y qué hacen los visitantes
cuando navegan por la web, con detalles de visitas por página.
Conversiones –Indican si los visitantes navegan por nuestra web de la forma que nosotros
queríamos. Funciona en base a objetivos que representan una actividad completada
(llamada conversión) que contribuye al éxito de nuestro negocio. Algunos ejemplos de
objetivos son realizar una compra, terminar un nivel o enviar un formulario de
información.
Para ello incorporan un gráfico con la fecha en la que se cumplieron objetivos de la página
y un resumen sobre consecución de objetivos con los ficheros involucrados en este. Para
generar estos informes deberemos definir todos los objetivos a medir al principio. Este
informe nos dirá si se están alcanzando los objetivos y desde dónde se están alcanzando
(RRSS, tráfico directo). Existen diferentes tipos de objetivos:
Destino: El usuario llega a una determinada página web o a una pantalla de la
aplicación.
Duración: El usuario está un periodo de tiempo mínimo especificado en nuestro
sitio o aplicación.
Páginas/pantallas por sesión: El usuario ve la cantidad mínima de páginas o
pantallas que se haya especificado.
Evento: El usuario realiza una acción especificada, como por ejemplo ver un vídeo.
Por último, en la esquina inferior derecha encontramos un engranaje desde el que se accede al
panel de administración que muestra todos los sitios web que tenemos enlazados y permiten
realizar varias gestiones.

Preproduccion Interactiva

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Preproduccion Interactiva

Cargado por

Copyright:

Formatos disponibles

Preproduccion-Interactiva.

3º Grado en Comunicación Audiovisual

Escuela Politécnica Superior de Gandía

Reservados todos los derechos.

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

Estados – Describen el estado de interacción actual de un elemento, informando a la tecnología

5 reglas para utilizar ARIA

si lees esto me debes un besito

si lees esto me debes un besito

TEMA 3: Usabilidad web

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

si lees esto me debes un besito

También podría gustarte