1.- La calidad de tu sitio web
2.- Accesibilidad web
3.- Buenas Prácticas web
4.- Velocidad web
5.- PWA Progresive Web Apps
6.- SEO Search Engine Optimization
1.- La calidad de tu sitio web
Más allá de las opiniones o los gustos personales, siempre respetables, medir la calidad de una página web tiene parámetros objetivos. El decorado, las fotos o la tipografía pueden gustar más o menos, pero en realidad son aspectos que también se rigen por criterios normativos a la hora de seducir a los robots de indexación. Los aspectos que determinan el posicionamiento SERP (Search Engine Results Page) o Resultado de página en el motor de búsqueda son múltiples. Todos los elementos que componen un sitio web, son evaluados y medidos con precisión milimétrica por complejos algoritmos que determinan la posición en la que un sitio web aparecerá en un buscador. Existen 5 parámetros que determinan ese posicionamiento: Accesibilidad, Buenas prácticas, Velocidad, PWA y SEO. A continuación, vamos a ver en qué consisten.
2.- Accesibilidad web
La red ha de ser para todos, ahí radica la importancia de la accesibilidad. Sistematizar la accesibilidad afecta a desarrolladores y diseñadores de páginas web y tiendas online. Cumplir las normativas de Accesibilidad que determina W3C es una parte importante de su trabajo; para que la página web pueda ser accesible a cualquier usuario, independientemente de su edad, de su capacitación o de sus habilidades. [leer más…]
3.- Buenas Prácticas web
Hoy en día, crear una página web está al alcance de cualquiera que se lo proponga. Sin embargo, presentar sus contenidos optimizados, hacer un diseño eficaz, que suscite interés y transmita credibilidad a quienes lo consultan, ya no es tan fácil. Un diseño sólido y estructurado, una navegación fácil y unos contenidos de calidad serán premiados por el algoritmo de los buscadores y la consiguiente afluencia de visitas. [leer más…]
4.- Velocidad web
La rapidez con la que se carga una página web es un elemento muy importante para su difusión en la red. Para quien visita una página web, unos milisegundos se convierten en una eternidad. Una fracción de segundo es suficiente para engrosar la temida Tasa de Rebote o Bounce Rate, limita las posibilidades de comunicación y, muy a menudo, este retraso se originar en la carga de las imágenes incorrectamente comprimidas. [leer más…]
5.- PWA. Progresive Web Apps
Las aplicaciones web, son nuevo estándar que mejora el rendimiento de la página web en el front-end, o sea, la parte de la página web visible para el usuario. Las PWA, aplicaciones web progresivas, permiten que las aplicaciones se carguen sin conexión a la red, que se sincronicen en segundo plano, lo que en definitiva facilita la acción del usuario. Las PWA facilitan el acceso de los usuarios en todo tipo de dispositivos. [leer más…]
6.- SEO Search Engine Optimization
Se puede traducir como Optimización de motores de búsqueda. Aproximadamente, el 90% de los usuarios de internet, en cualquiera de los buscadores, ya sea Google, Yahoo, Bing o cualquier otro, no se interesa por los resultados que hay más allá de la primera página de la consulta. No aparecer en la primera página, o sea dentro de los primeros 10 resultados es como condenarse a la invisibilidad. [leer más…]
1.0.- W3C como autoridad normativa
2.0.- WAI
3.0.- WAI-ARIA
4.0.- WCAG
4.1.0.- WCAG 2.1
4.1.1.- Perceptibilidad
4.1.2.- Usabilidad
4.1.3.- Comprensión
4.1.4.- Consistencia
5.0.- ATAG
6.0.- UAAG
7.0.- XAG
1.0.- W3C como autoridad normativa
Una normativa es una serie estructurada de reglas que emite una entidad competente en una determinada materia. Estas reglas deben tenerse en cuenta, no como una imposición sino, más bien, como un sello de calidad.
La autoridad que regula los estándares de la web, el World Wide Web Consortium W3C, fundado por Tim Berners-Lee, publica desde 1994 las normas en el uso y desarrollo de internet. Una de las mayores inquietudes de este organismo, a lo largo de su trayectoria, es que la web sea accesible al mayor número de personas, incluso a las personas con algún tipo de discapacidad, lo que incluye a personas mayores, con discapacidades motoras, sensoriales o con movilidad reducida.
2.0.- WAI
Las normativas emitidas por este organismo no solo incluyen las páginas web, también afectan a las aplicaciones web. En 1997, W3C creó un grupo de trabajo que se denominó WAI (Iniciativa de accesibilidad web) para desarrollar normas específicas con el propósito de facilitar el acceso a la web a todas las personas, tuvieran o no algún tipo de discapacidad.
3.0.- WAI-ARIA
En 2014 apareció ARIA (Accesible Rich Internet Applications) como ampliación de WAI, que incorpora marcadores semánticos y de metadatos al contenido HTML con la finalidad de mejorar la accesibilidad a la interfaz de usuario y a los contenidos. WAI indica que ARIA debe utilizarse únicamente si el estándar HTML no incorpora la gestión semántica
4.0.- WCAG
Sin embargo, el estándar WCAG (Web Content Accessibility Guidelines), o sea, Normas de accesibilidad al contenido web, está considerado el más importante en términos de accesibilidad. La primera normativa WCAG fue publicada por W3C en 1999, con 14 pautas de accesibilidad. De ésta, 11 tenían por objeto asegurar el acceso a contenidos simples, es decir, ofrecer alternativas de acceso a los contenidos HTML de carácter visual y auditivo.
En 2008 aparece la actualización 2.0 que amplía las directrices de la anterior. La WCAG 2.0 amplía su ámbito de actuación al incorporar otras tecnologías, como CSS, PDF, XML, entre otras. También crea una guía para diseñadores digitales que se centra en 4 conceptos; el diseño ha de ser fácil de a) percibir, b) de usar, c) comprensible y d) consistente. Se establecen tres niveles: A, AA y AAA, siendo este último el de nivel superior y muy difícil de lograr. La mayoría de expertos coincide en que el nivel AA es suficiente para un sitio web de grandes dimensiones y de cierta complejidad obtenga una buena calificación en accesibilidad.
4.1.0.- WCAG 2.1
En 2018, W3C publica WCAG 2.1 que amplía las normas de accesibilidad para los contenidos de la web 2.0. En ningún caso estas nuevas normas sustituyen a las de la versión 2.0, sino que significan un reforzamiento y profundización de la versión anterior, de tal modo que si se cumplen las normativas de WCAG 2.1 también se cumplen las de WCAG 2.0. Esta nueva versión incorpora 17 nuevas pautas relacionadas con discapacidades que afectan a la visión, a la movilidad o al desarrollo cognitivo. Su ámbito de influencia alcanza administraciones públicas de todo el mundo, como lo demuestra la Guía de adaptación a WCAG 2.1 desde WCAG 2.0 publicado por el Ministerio de Política Territorial y Función Pública, Gobierno de España, en diciembre de 2018.
4.1.1.- Perceptibilidad. Todos los contenidos no textuales (videos, imágenes, campos de formulario, CAPTCHA, etc.), han de tener una alternativa textual. También implica a los lectores de pantalla que solo pueden interpretar texto (códigos y contenidos en HTML o CSS). Deben utilizarse formas y colores que permitan distinguir el contenido y la forma, el primer plano y el fondo, tener en cuenta los contrastes de colores y el tamaño de los textos. En cuanto a los contenidos de sonido, deben grabarse con un sonido de fondo suave, con un contraste igual o superior a los 20 dB.
4.1.2 Usabilidad. Es preciso que los elementos de la navegación y de la interfaz de usuario puedan ser accesibles con el teclado o el ratón, lo que es especialmente importante si se emplean dispositivos de asistencia técnica.
4.1.3.- Comprensión. Los usuarios deben comprender con facilidad la información y el funcionamiento de la interfaz de usuario; por lo tanto, ha de ser legible, y tanto sus contenidos como su funcionalidad deben ser fácilmente comprensibles para cualquier usuario.
4.1.4.- Consistencia. El contenido debe presentarse de tal manera que sea accesible de la misma manera para todo el mundo, cualquiera que sea la herramienta de navegación que utilicen.
Aquí puedes encontrar una información más extensa sobre WCAG 2.1.
5.0 ATAG
ATAG (Authoring Tool Accessibility Guidelines (ATAG) o Pautas de accesibilidad de la herramienta de autoría, es un estándar de desarrollador creado por W3C. La versión 1.0 fue aprobada en enero de 2000 y la versión 2.0 data de septiembre de 2015. ATAG desarrolla pautas para la creación de contenidos web. Un buen ejemplo serían las herramientas empleadas para la creación de páginas web, los CMS (Content Management System) o Sistema de gestión de contenidos. ATAG trata de que estas herramientas sean más accesibles para las personas con algún tipo de discapacidad y que su diseño accesible facilite y estimule la creatividad de los autores que emplean esas herramientas de creación. El estándar indica que estas herramientas han de ser accesibles, pero no el trabajo que producen, pues ese ámbito ya pertenece a WCAG.
6.0 UAAG
UAAG (User Agent Accessibility Guidelines) o Pautas de accesibilidad del agente de usuario, determina las normas que deben seguir los desarrolladores de agentes de usuario; o sea, las aplicaciones empleadas para acceder al contenido web, tales como navegadores o reproductores de contenido multimedia a fin de que estas aplicaciones sean accesibles a usuarios con alguna discapacidad.
7.0.- XAG
XAG (XML Accessibility Guidelines) o Pautas de accesibilidad XML, se centran en la accesibilidad de las aplicaciones XML (Extensible Markup Language) o Lenguaje de marcado extensible. XAG trata de incluir elementos que promueven la accesibilidad en aplicaciones diseñadas en lenguaje XML. Sin embargo las pautas de XAG no han pasado de ser un borrador de trabajo.
1.0.-- Qué son las Buenas Prácticas
2.0.- Las 8 categorías de las Buenas Prácticas
2.1.- Comprensión.
2.2.- Procesabilidad.
2.3.- Descubrimiento.
2.4.- Reutilización.
2.5.- Confianza.
2.6.- Enlace.
2.7.- Accesibilidad
2.8.- Interoperabilidad
2.8.1.- Interoperabilidad técnica.
2.8.2.- Interoperabilidad organizativa
2.8.3.- Interoperabilidad semántica
2.8.4.- Interoperabilidad en el tiempo
1.0.-- Qué son las Buenas Prácticas
Best Practices o Buenas Prácticas es un concepto desarrollado por el World Web Consortium W3C, autoridad normativa de ámbito mundial que regula los estándares de internet. Este concepto remarca la importancia de que tanto los usuarios como los agentes de software comprendan y puedan procesar los datos que deben mantenerse actualizados y ser fácilmente detectables en la Web.
Explicado de otro modo, este concepto tiene que ver con la percepción del usuario que visita una página web. Por tanto, está directamente relacionado con la Experiencia de Usuario, UX (User eXperience) y el Interface de Usuario (User Interface). Esto afecta a la credibilidad y a las conversiones que un sitio web puede generar.
El World Web Consortium W3C distingue hasta 35 pautas que configuran las Buenas prácticas. En ellas se remarca la importancia de que tanto los usuarios como los agentes de software comprendan y puedan procesar los datos y que éstos deben mantenerse actualizados y ser fácilmente detectables en la Web. Estas 35 normas de buenas prácticas se adscriben a 8 categorías básicas. A continuación, vamos a verlo.
2.- Las 8 categorías de las Buenas Prácticas
En internet circulan constantemente informaciones y datos de todo tipo, representados de muchos modos y maneras. Para que esta información sea fácilmente comunicable debe tener una forma identificable, reconocible y sistematizada.
Los metadatos son elementos que nos identifican el contenido de una información. El metadato “Autor” nos puede indicar todos los escritores que tienen un libro en una biblioteca.
Tan importante como conocer la naturaleza de la información es saber de donde se obtiene. Las URL (Uniform Resource Locator) o Localizador Uniforme de Recursos es un tipo de URI (Uniform Resource Identifier) o Identificador Uniforme de recursos cuya función es facilitar el dónde encontrar una determinada información.
Textos, imágenes, videos y todos los contenidos que hay en una página web son datos que queremos que sean accesibles, que todo el mundo pueda acceder a ellos y, al mismo tiempo hay muchas personas interesadas en acceder a esa información. De lo que se trata es de facilitar ese enlace.
2.1.- Comprensión.
Este apartado se centra en los usuarios. Se trata de que las personas comprendan los datos, la información que, en cualquiera de sus soportes (texto, imagen, video, etc.) pueden encontrar en una página web. Que estos datos se encuentren referenciados, que el dato “Cervantes” se encuentre asociado al metadato “Autor” y que todo ello se encuentre contextualizado; “Literatura clásica”.
2.2.- Procesabilidad.
Este apartado está centrado en las máquinas que procesan la información. Para que los usuarios puedan acceder con facilidad y precisión a los contenidos de su interés a través de internet, los autores de las páginas web (redactores de contenidos, programadores, diseñadores) deben facilitar que las máquinas y sus algoritmos puedan procesar eficazmente los datos y atribuirles un contexto.
2.3.- Descubrimiento.
Aquí se trata de que las máquinas de detección puedan establecer analogías. Si un usuario entra en una librería online y compra “El Quijote” es fácil que una aplicación de la propia página web le recomiende la lectura de “Las Novelas Ejemplares” que es otra obra del mismo autor. Lo que permite que una máquina encuentre lo que para el usuario puede ser un descubrimiento es su capacidad de identificar un conjunto de datos o datos dentro de un conjunto de datos.
2.4.- Reutilización.
La información, los datos que interesan a un usuario también pueden interesar a un conjunto de usuarios. Los usuarios, entre los que se pueden contar compradores, viajeros, científicos, investigadores, entre muchos otros, generan cada día una enorme cantidad de información. Al acceder y reutilizar estos datos, nuevos usuarios pueden reutilizar el conocimiento generado por otros. Sin embargo, esta información no siempre está fácilmente disponible. Incluso cuando se trata de datos compartidos, éstos no siempre pueden reutilizarse fuera del contexto de donde se han generado.
2.5.- Confianza.
Consolidar y mejorar la confianza que usuarios y consumidores depositan en la red tiene que ver con la seguridad tanto de la información que obtienen en internet como de la seguridad con la que la red trata sus propios datos. La protección de los datos personales, el respeto a los derechos de autor, la fiabilidad en las aplicaciones que gestionan la información y en la calidad de la información obtenida son solo algunos aspectos a los que alude este concepto.
2.6.- Enlace.
Los enlaces vinculan información, interconectan datos, datos relacionados con otros datos. Esta interconexión está basada en las tecnologías web convencionales, tales como HTTP, URI, RDF. Esto permite a los ordenadores una lectura sistematizada de los datos y tiende a que internet se convierta en una base de datos a escala mundial. Este concepto fue descrito por primera vez por Tim Berners-Lee en 2006 en relación al proyecto de la web semántica. En 2009, él mismo definió los enlaces web, “la enlazabilidad” en torno a tres reglas que calificó de extremadamente simples: 1) Todo concepto ha de tener un nombre que empieza con HTTP. 2) Cuando se toma uno de estos nombres HTTP y se hace una búsqueda, se encontrarán datos en un formato estándar, una información útil para el que desea conocer, informarse sobre el significado de ese nombre, de ese concepto objeto de su interés. 3) Cuando se obtiene información sobre lo que se busca, esta información está enlazada, relacionada con otras cuyos nombres también empiezan por HTTP.
2.7.- Accesibilidad
La Accesibilidad se incluye dentro de las Buenas prácticas, si bien merece por sí misma una consideración tan relevante[1] que dispone de su propia auditoría. Accesibilidad quiere decir que las personas con alguna discapacidad, ya sea crónica o temporal puedan usar los sitios web y sus herramientas, y puedan intervenir bien como desarrolladores o bien como usuarios, independientemente de que su limitación sea de tipo cognitivo, neurológico, físico, auditivo, visual o de habla. La accesibilidad a la web también debe beneficiar a personas sin discapacidad, como personas mayores con menos habilidades técnicas, o aquellas que se encuentran con limitaciones circunstanciales a causa de un accidente o una enfermedad pasajera; imaginemos el caso del que se ha dislocado un brazo o sufre de una infección en un ojo. La accesibilidad también tiene en cuenta a quienes se conectan a la intemperie con intensa luz solar o a los que se encuentran en un entorno en el que no pueden escuchar audio, los que usan un teléfono móvil, o bien que usan una conexión lenta a internet.
2.8.- Interoperabilidad
La interoperabilidad es el conjunto de propiedades que permiten a diferentes sistemas compartir recursos. Esto afecta a las capacidades de hardware y software de las máquinas que intercambian datos, ya sea en redes de área local (LAN) o redes de área amplia (WAN). La interoperabilidad tiene cuatro dimensiones de aplicación:
2.8.1.- Interoperabilidad técnica.
Se refiere a la interoperabilidad entre dispositivos, sistemas y servicios de las tecnologías de la información. Esto está relacionado con las interfaces de usuario, con el modo de presentar la información, la integración de datos, etc.
2.8.2.- Interoperabilidad organizativa
Empresas. instituciones y organismos pueden intercambiar datos para mejorar el nivel de sus prestaciones, coordinar servicios, y otros objetivos que hayan acordado.
2.8.3.- Interoperabilidad semántica
El tráfico entre un dispositivo emisor y otro receptor son mensajes estructurados que contienen datos codificados y estandarizados; lo que permite que el receptor pueda interpretar, hacer uso de los datos automáticamente y reutilizarlos en otras aplicaciones.
2.8.4.- Interoperabilidad en el tiempo
Se refiere a la capacidad de interoperar entre dispositivos de generaciones tecnológicas distintas. Se relaciona especialmente con la capacidad de almacenar la información en dispositivos electrónicos.
4.1.- Qué es la velocidad web
4.2.- Por qué una página web es veloz
4.2.1.- Mejorar el tiempo de respuesta del servidor
4.2.2.- Evitar los redireccionamientos de páginas de destino
4.2.3.- Optimizar imágenes
4.2.4.- Aprovechar el almacenamiento en caché del navegador
4.2.5.- Optimizar la entrega de CSS
4.2.6.- Usar secuencias de comandos asincrónicas
4.2.7.- Priorizar el contenido visible
4.2.8.- Minimizar recursos
4.2.9.- Eliminar JavaScript que bloquea el procesamiento
4.2.10.- Habilitar la compresión
4.3.- Por qué es tan importante la velocidad
1.- Qué es la velocidad web
La velocidad con la que se carga una página web depende de varios factores. Por ejemplo, si elementos tales como plug-in o imágenes con formatos de compresión inadecuados, entre otros, bloquean el renderizado y ralentizan el proceso de carga. PageSpeed Tools Insights recomienda evitar que se hagan redirecciones a las páginas de destino y eliminar los códigos de programación que originan el bloqueo. El navegador también tiene una gran responsabilidad en la percepción de la rapidez de carga por parte del usuario, que suele ser impaciente. Los programadores y diseñadores crean una página atractiva pero no siempre acaban por entender los procesos que sufre su trabajo cuando es procesado por el navegador. Sin embargo, para optimizar la rapidez de la página web que han creado necesitan una buena comprensión de los pasos intermedios que su trabajo experimenta hasta que el usuario puede ver la página web en su PC o teléfono móvil.
2.- Por qué una página web es veloz
Los elementos que condicionan la velocidad de una página web son muy diversos, y afectan tanto al software como al software que intervienen en el proceso. A continuación, exponemos los principales:
2.1.- Mejorar el tiempo de respuesta del servidor
Cuando el usuario accede a una página web, el navegador envía una solicitud al servidor en el que se halla el contenido. Si el servidor web es deficiente, o su configuración incorrecta o su capacidad es insuficiente, el usuario puede desesperarse por la lentitud de la respuesta. También puede ocurrir que el servidor se agobie por la cantidad de recursos que emplea la página web, tales como Javascript, CSS o similares.
2.2.- Evitar los redireccionamientos de páginas de destino
Cuando el navegador detecta que hay más de una redirección que apunta a la URL final se produce un retraso en la carga de esa página, pues esa redirección necesita de solicitudes HTTP adicionales.
2.3.- Optimizar imágenes
Las imágenes en una página web son un aspecto importante y forman parte de su atractivo. Sin embargo, cuando las imágenes son muy grandes, no están optimizadas o no han sido comprimidas correctamente, el tiempo de carga se puede eternizar.
2.4.- Aprovechar el almacenamiento en caché del navegador
El navegador web ha de gestionar información en distintos formatos; imágenes, htmal, CCS, etc. Si se utiliza la memoria caché para almacenar algunos de estos elementos, la página se cargará con mayor rapidez, por lo que es recomendable que en el diseño de la página web se configure un recurso de almacenamiento en caché.
2.5.- Optimizar la entrega de CSS
CSS (Cascading Style Sheets) u «hojas de estilo en cascada» es un código de programación que determina el estilo y las funciones de una página web. Sin embargo, antes de renderizar, CSS necesita un tiempo extra para ejecutarse, y eso ralentiza el tiempo de carga de la página.
2.6.- Usar secuencias de comandos asincrónicas
Una programación correcta evita secuencias de comandos sincronizadas para que el navegador no tenga que esperar a la finalización de una instrucción para pasar a la siguiente. Si el código se ejecuta de forma asíncrona, el navegador podrá pasar a la siguiente tarea antes de haber finalizado la anterior.
2.7.- Priorizar el contenido visible
Codificar una página web desde los aspectos visuales más importante a los menos importantes. Si el código de la página no se estructura correctamente, el usuario puede percibir que los elementos menos relevantes aparecen antes que los elementos principales, dando así la impresión de lentitud.
2.8.- Minimizar recursos
En el diseño de una página web es conveniente controlar el tamaño de los archivos de Javascript, HTML y CSS. Cuando estos archivos son excesivos, innecesarios o redundantes, afecta al funcionamiento del navegador y retrasa de modo innecesario el tiempo de carga de la página web.
2.9.- Eliminar JavaScript que bloquea el procesamiento
Unas líneas de código de Javascript mal situadas pueden impedir que una página web se cargue. Por esa razón muchos programadores difieren la carga del código de Javascript hasta la carga del resto de elementos que configuran la página web.
2.10.- Habilitar la compresión
Comprimir los archivos HTML y CSS permiten al servidor web agilizar el envío de solicitudes al usuario. La compresión de los archivos con alguna de las aplicaciones apropiadas puede reducirlos a menos de la mitad de su tamaño original.
3.0.- Por qué es tan importante la velocidad
La velocidad es un elemento fundamental para los resultados de una página web. Un ejemplo es el de Pinterest, que al reducir la percepción de espera del usuario en un 40%, vio que aumentaban en un 40% sus registros. Otro caso mencionado por Google Developers es el de Cook que, al reducir el tiempo de carga promedio en 850 milisegundos, vieron aumentar su conversión y disminuir el índice de rebote en un 7%, mientras que aumentaban el 10% las páginas por sesión. Según muchos expertos, casi el 60% de los usuarios abandonarán la página web si tarda en cargar 3 segundos o más. Las ¾ partes de los usuarios reconocen que suelen cambiar a otra página web si la que ha elegido tarda en cargar. Frente a las páginas web que tardan un segundo en cargar, las que tardan 3 segundos duplican la tasa de rebote y reciben hasta una cuarta parte de visitas y conversiones. Todos los esfuerzos que se hayan hecho en una página web pueden verse por el suelo si la página web no es rápida. Por todo eso es de suma importancia testear la velocidad de una página web.
1.- Qué es PWA (Progresive Web Apps)
2.- Lo que el usuario percibe de PWA (Progresive Web Apps)
3.- Qué hace PWA (Progresive Web Apps)
3.1.- Velocidad
3.2.- Utilizable en cualquier navegador
3.3.- Utilizable con cualquier tamaño de pantalla
3.4.- Instalable en cualquier dispositivo
3.5.- El usuario accede sin conexión
3.6.-Un código de programación riguroso
3.7.- PWA se entiende con todos los periféricos
3.8.- Accesible por búsqueda
4.- Algunos datos
1.- Qué es PWA (Progresive Web Apps)
PWA (Progresive Web Apps) o aplicación web progresiva es un concepto creado en 2015 por Frances Berriman, diseñadora, y Alex Russell, ingeniero de Google Chrome. PWA es una página web cuyo comportamiento es similar al de una aplicación móvil. Ya en 2016, los usuarios de internet desde dispositivos móviles (teléfonos inteligentes o tablets) igualaban en número a los que lo hacían desde la pantalla de su ordenador y, desde entonces no han dejado de crecer. Este es un dato importante para entender por qué un año después, en 2017, Android superaba a Windows en número de usuarios y se convertía en el sistema operativo más utilizado en todo el mundo, pues las búsquedas en internet son más numerosas desde dispositivos móviles y tablets que en ordenadores.
2.- Lo que el usuario percibe de PWA (Progresive Web Apps)
Cuando entramos en un sitio web que se comporta y se ve como si de una aplicación móvil se tratara, lo más probable es que nos encontremos ante una PWA. Esto quiere decir que su diseño está aprovechando al máximo las características nativas del dispositivo móvil, sin que hayamos tenido que descargar una aplicación en App Store o en Google Play. Su ícono, como el de una aplicación convencional, se verá en la pantalla y no será necesario insertar la URL cada vez que queramos conectarnos. Cuando lo hagamos, notaremos que la página se carga con gran rapidez y puede verse sin conexión, no ocupa espacio en la memoria del dispositivo y permite opciones como ver en pantalla completa o rotar. El usuario ya no interviene en su actualización, que se realiza en segundo plano y en tiempo real. Además, funcionan en todos los sistemas operativos y pueden adaptarse a todas las áreas geográficas.
3.- Qué hace PWA (Progresive Web Apps)
Para que una aplicación pueda considerarse como PWA ha de seguir una serie de condiciones, que sea instalable y pueda ser utilizada por todos los usuarios, pero no solo eso. A continuación, definimos las características que ha de seguir una PWA.
3.1.- Velocidad
El usuario valora el rendimiento, la rapidez cuando se conecta a internet. Está demostrado que las páginas web de alto rendimiento logran más tráfico y retienen la atención de los usuarios. La tasa de rebote es inversamente proporcional a la velocidad de carga de una página web.
3.2.- Utilizable en cualquier navegador
Cualquier usuario en cualquier navegador ha de poder usar esta aplicación, aunque haya quien todavía esté utilizando un navegador o un dispositivo anticuado. Los expertos recomiendan que a la hora de programar una PWA se emplee la tecnología más simple. Diseñar las funciones principales con HTML y usar CSS y Javascript para mejorar la experiencia de usuario.
3.3.- Utilizable con cualquier tamaño de pantalla
Incluso un mismo usuario puede consultar una PWA con distintos dispositivos con distintos tamaños de pantalla. Por tanto, es preciso garantizar que los contenidos de una PWA puedan adaptarse a todos los tamaños de pantalla. Los dispositivos móviles como tablets y teléfonos inteligentes exigen a los programadores que se centren en los aspectos más importantes de una aplicación; en la reducida pantalla de un teléfono móvil no hay espacio para elementos redundantes.
3.4.- Instalable en cualquier dispositivo
Un usuario percibe una PWA como cualquier otra aplicación instalada. Esto es especialmente significativo si tenemos en cuenta que los usuarios prefieren utilizar las aplicaciones que ya tienen instaladas. La PWA se ejecuta en su propia ventana, desvinculada del navegador, como lo hace el resto de aplicaciones instaladas por el usuario, le aparece en la lista de tareas y, en definitiva, la percepción del usuario es muy positiva, lo que redunda en visitas más repetidas y mayor tasa de conversión.
3.5.- El usuario accede sin conexión
Una aplicación PWA pueda funcionar igualmente con o sin conexión a internet. Para ello es preciso que los diseñadores definan qué contenidos y características van a estar disponibles para el usuario cuando éste no disponga de conexión a internet. Las aplicaciones de redes sociales (RRSS) o noticias, pueden almacenar en caché los últimos contenidos para que los usuarios puedan acceder a ellos sin conexión. También es conveniente que el diseñador de PWA trabaje en la autenticación, para que los usuarios puedan seguir autenticados aunque no tengan conexión a internet.
3.6.-Un código de programación riguroso
PWA exige un código de programación con fundamento, pero además ha de mantenerse actualizado para que puedan introducirse nuevas funciones. Es preciso verificar su pleno funcionamiento en cualquier navegador, lo que puede hacerse con pruebas automatizadas. Los expertos también recomiendan que se eviten bibliotecas vulnerables o API obsoletas.
3.7.- PWA se entiende con todos los periféricos
Bien sea con el teclado, con el mouse, el touchpad o el lápiz óptico, una aplicación PWA ha de entenderse perfectamente con cualquiera de estos dispositivos. Los procedimientos de interactuación del usuario con la PWA no pueden depender del tamaño de la pantalla o de otras características de su dispositivo.
3.8.- Accesible por búsqueda
La web nos permite descubrir sitios y aplicaciones web que son de nuestro interés. Las búsquedas orgánicas representan más de la mitad de todas las consultas que los usuarios formulan a la web. Por tanto, una PWA ha de ser localizable en una consulta orgánica. Por tanto, una PWA ha de disponer de URL canónicas para que los robots de búsqueda puedan indexarlas y permitir que los usuarios puedan satisfacer su consulta en una búsqueda orgánica.
4.- Algunos datos
En 2019, Google advertía que los usuarios multiplicaban por 5 las conversiones en una PWA frente a una aplicación nativa a la hora de bajarse una app. Meses después se publicaban los resultados de las marcas que habían adoptado esta tecnología. Trivago, uno de los grandes buscadores de hoteles en la red, informaba que la PWA había aumentado en medio millón los usuarios agregados, y pasaron de 0,8 visitas repetidas en su página web a 2 visitas por usuario de PWA . La PWA de Starbucks ha doblado los usuarios diariamente. Aliexpress incrementó sus conversiones un 104% y un 74% el tiempo promedio de sesión por usuario.
6.- SEO Search Engine Optimization
1.- Qué es SEO.
2.- SEO, un poco de historia.
3.- HTML, el esqueleto de la página web.
3.1.- La declararación DOCTYPE.
3.2.- El contenedor principal.
3.3.- La cabecera (HEAD)
3.3.1.- Título (TITLE)
3.3.2.- Declaraciones de estilo
3.3.3.- Scripts para el cliente
3.3.4.- Metadeclaraciones:
3.3.5.- Datos relacionales
3.4.- El cuerpo (BODY)
4.- SEO y tag (etiquetas)
4.1.- Etiquetas de edición.
4.2.- Etiquetas de contenido.
4.3.- Etiquetas de especificación.
5.- Marketing y SEO
1.- Qué es SEO.
SEO o Search Engine Optimization, lo que significa optimización de motores de búsqueda, es otro de los fundamentos de la comunicación web. Una buena manera para introducirse en este concepto puede ser echar un vistazo a su historia.
2.- SEO, un poco de historia.
Tim Berners Lee, científico de la computación británico, logró establecer por primera vez una comunicación entre un cliente y un servidor en noviembre de 1989. Lo hizo empleando un protocolo HTTP. Su propósito en el CERN (Conseil Européen pour la Recherche Nucléaire), en Suiza, era el de crear una red global para transmitir y almacenar información. Estableció la primera comunicación entre un cliente y un servidor usando el protocolo HTTP en noviembre de 1989.
El protocolo HTTP permite estructurar la información que contiene un mensaje, lo que permite una comunicación fluida entre el emisor y el receptor del mensaje. Con el imparable incremento de la demanda de servicios de internet y la necesidad de nuevos protocolos, en 1994 se funda el W3C (Consorcio World Wide Web). Desde entonces, este consorcio regula las normativas y protocolos que han permitido el desarrollo mundial de internet como red de comunicación mundial. SEO, al optimizar su comunicación con los motores de búsqueda, está estructurando la información de tal modo que sea fácilmente reconocible para el buscador. El lenguaje que estructura esta información es HTML y su primera versión data del año 2000. Veinte años después, en muchas agencias de comunicación digital, los editores de contenidos, redactores y diseñadores confían a los programadores todo lo relativo al SEO. Sin embargo, la optimización de los motores de búsqueda es una tarea que implica a todos los profesionales que intervienen en la creación de una página web, de una web app o de una tienda online.
3.- HTML, el esqueleto de la página web.
HTML (HyperText Markup Language) o “lenguajes de marcas de hipertexto” es el protocolo que estructura la información para la difusión de su contenido. HTML es un lenguaje que se aprende con facilidad y se puede escribir en cualquier editor de texto por sencillo que sea. Estas características han facilitado el acceso a la web a muchas personas, ya no como usuarios sino como creadores de nuevos contenidos.
Cualquiera que sea el navegador que utilicemos, está concebido para entender el esqueleto de HTML, lo que le indica cómo están estructurados los datos que contiene y cómo interpretarlos.
Un documento HTML sigue una estructura determinada que se compone de 4 elementos básicos y que vamos a describir a continuación. Aunque las últimas versiones de HTML lo han suprimido; en las primeras, un archivo HTML contenía etiquetas meta-keyword, para que el motor de búsqueda interpretara los contenidos de la página web.
3.1.- La declararación DOCTYPE.
La declaración DOCTYPE es el principio de todo documento HTML y su función es la de indicar al navegador el tipo de documento que ha de procesar. Cada versión de HTML tiene su propia enunciación de esta declaración.
3.2.- El contenedor principal.
Menos la declaración DOCTYPE, todo el documento está contenido en este elemento básico de HTML. Indica la configuración de idioma con la que se ha editado el documento, lo que, entre otras cosas, permite a los sintetizadores de voz determinar la pronunciación correcta en cada idioma.
3.3.- La cabecera (HEAD)
Este elemento básico de HTML se emplea para contener los metadatos del documento. Los programadores aprovechan la cabecera para cargar definiciones de estilo o scripts, puesto que este elemento es procesado antes que el cuerpo (BODY). Los metadatos contenidos en la cabecera (HEAD) son de 5 tipos:
3.3.1.- Título (TITLE)
Indica el título del documento y hace una breve síntesis del contenido del documento.
3.3.2.- Declaraciones de estilo
Concentra las declaraciones de estilo con la que se presentan los contenidos.
3.3.3.- Scripts para el cliente
Se utilizan para introducir instrucciones que facilitan la interacción con el usuario.
3.3.4.- Metadeclaraciones:
Se usan para definir atributos y elementos personalizados.
3.3.5.- Datos relacionales
Se utilizan como un enlace que vincula contenidos relacionados con el documento.
3.4.- El cuerpo (BODY)
Este es el elemento de HTML en el que se editan los contenidos; textos, imágenes, vídeos. La parte del documento a la que acceden los usuarios.
4.- SEO y tag (etiquetas)
Navegadores y robots leen las etiquetas para conocer la estructura y el contenido de la página web , registrarlos y responder a las consultas de los usuarios. Las etiquetas son códigos que van entre cochetes “<>”. Podemos distinguir tres tipos de etiquetas:
4.1.- Etiquetas de edición.
Son etiquetas que contienen una instrucción para la edición de un texto y no se consideran muy relevantes para el motor de búsqueda. Puede ser un salto de línea (<BR>) o de párrafo (<P>).
4.2.- Etiquetas de contenido.
Son las que mejor transmiten a los motores de búsqueda los datos más relevantes del documento HTML, de ahí su especial significado en todo proyecto SEO. Como las imprescindibles etiquetas que indican la jerarquía de unas determinadas palabras, las (<h1>). (<h2>) o las que se emplean para destacar en negrita (<b>). Estas etiquetas, entre muchas otras, están proporcionando información valiosa al motor de búsqueda.
4.3.- Etiquetas de especificación.
Son etiquetas generalmente empleadas para especificar parámetros de formato (video, audio, etc.) a los recursos de hardware y software que emplea el usuario.
5.- Marketing y SEO
La finalidad del marketing en una empresa es obtener valor añadido. La finalidad de SEO es optimizar la información para ésta que sea fácilmente accesible a los motores de búsqueda y pueda difundirse a muchos usuarios. La acción conjunta de marketing y SEO permite que los productos o servicios de una compañía puedan llegar a una gran parte de sus potenciales clientes a través de internet, pero sobre todo permite dirigirse muy especialmente al segmento de usuarios definidos en un segmento muy concreto, el público objetivo, el target. El marketing SEO tiene dos áreas importantes de desarrollo, el Onpage y el Offpage
Todas las medidas que ahora sirven para mostrar el sitio web de una empresa en los llamados resultados de búsqueda genéricos de Google para las palabras clave relevantes de la empresa representan el lado de la actividad del marketing SEO. Las medidas típicas del marketing SEO son:
- Marketing
estratégico de SEO Para las preguntas estratégicas de marketing de SEO que pueden derivarse de la combinación de marketing, la pregunta es particularmente relevante para qué temas, problemas y productos desea que estén presentes en el grupo objetivo relevante. Una búsqueda de palabras clave generalmente se deriva de esta pregunta para aclarar qué términos de búsqueda del cliente desea ser relevante. Partiendo de esto, surge la pregunta de con qué contenido desea poblar un sitio web y en qué contexto desea moverse para que el motor de búsqueda indexe y muestre este contenido cuando el cliente relevante busque las palabras clave previamente definidas.
- Optimización onpage
Otra actividad de SEO es la optimización onpage del sitio web. Los motores de búsqueda como Google & Co tienen requisitos muy específicos para un sitio web para que puedan indexarlo e integrarlo en su propio algoritmo. Todas las optimizaciones que tienen lugar en el sitio web en sí ayudan a SEO Marketing a ubicar mejor el sitio web en los resultados genéricos. Dichas optimizaciones en la página incluyen, por ejemplo, temas técnicos, de contenido o estructurales del sitio web.
- Optimización offpage
Otro punto importante en el marketing SEO es la llamada optimización offpage, que tiene lugar fuera del sitio web real. Al clasificar el contenido, Google también tiene en cuenta la relevancia del contenido en el mundo web. Una medida de relevancia es la cuestión de cuántos enlaces entran y salen de un sitio web y cómo el sitio web está vinculado a su entorno web. El objetivo de las optimizaciones offpage es generar enlaces y obtener enlaces adecuados que para un determinado sitio web.
Los motores de búsqueda como Google y Bing se utilizan todos los días para encontrar información. Después de ingresar la búsqueda, las páginas relevantes para el término de búsqueda ingresado se muestran en la página de resultados de búsqueda. El resultado de búsqueda de un motor de búsqueda consiste en información relevante para el anuncio y el resultado de búsqueda genérico. Para los anuncios que se reproducen, usted paga continuamente a Google en función de los clics. Nada para resultados genéricos y el tráfico generado con ellos. Por lo tanto, muchas empresas están muy interesadas en aparecer en los resultados de búsqueda relevantes y estar disponibles en el contexto del cliente. Un cliente potencial que luego esté interesado en obtener más información puede convertirse en el sitio web, en un cliente potencial o en ventas directas. Con SEO Marketing, la empresa puede posicionarse en el grupo objetivo relevante, puede desencadenar interacciones y esto conduce a reservas y ventas a largo plazo. Debido a que el marketing SEO es muy sostenible y se puede adaptar fácilmente al tamaño y la estrategia de la empresa, esta disciplina es particularmente interesante para las empresas jóvenes que desean establecerse en el mercado. Pero las empresas que siempre dependen de nuevos clientes también deberían hacer marketing SEO. El marketing SEO es un tamaño relevante en el contexto del marketing en línea para generar más ventas. que quieren establecerse en el mercado Pero las empresas que siempre dependen de nuevos clientes también deberían hacer marketing SEO. El marketing SEO es un tamaño relevante en el contexto del marketing en línea para generar más ventas. que quieren establecerse en el mercado Pero las empresas que siempre dependen de nuevos clientes también deberían hacer marketing SEO. El marketing SEO es un tamaño relevante en el contexto del marketing en línea para generar más ventas.
¿Para quién es útil el marketing SEO?
El marketing SEO es útil para todas las empresas cuyo grupo objetivo principal utiliza motores de búsqueda como parte del recorrido del cliente para la fase de información o compra. Por lo tanto, el marketing SEO es ciertamente relevante para todos los proveedores de comercio electrónico, ya que el tráfico a largo plazo que viene a través del marketing SEO es más barato que el tráfico generado a través de medidas de publicidad en motores de búsqueda (SEA).
El marketing SEO también es interesante para autónomos o especialistas que tienen que posicionarse y abordar un tema de manera limpia. Con la ayuda del marketing SEO y la experiencia técnica específica, las partes interesadas pueden ser informadas.
El SEO también desempeña un papel importante en el marketing B2B, ya que los motores de búsqueda también se utilizan de manera intensiva en el entorno empresarial para encontrar soluciones, identificar proveedores y generar consultas.
El marketing SEO tiene menos sentido para las empresas si no tienen un grupo objetivo específico, el volumen de búsqueda de los temas y productos relevantes en Google es muy bajo y / o el grupo objetivo es heterogéneo y no conoce muy bien Internet.
¿Necesitas una agencia de marketing SEO?
Una pregunta muy emocionante es si eres una agencia de marketing SEOnecesario. Para dar una respuesta adecuada aquí, uno debe sopesar la situación en la que se encuentra la empresa. En organizaciones más grandes que se han centrado en el comercio electrónico, por ejemplo, probablemente tenga sentido adquirir conocimientos de marketing SEO internamente e implementar las actividades necesarias con su propio personal permanente. Sin embargo, en la mayoría de los casos, esto es ineficiente, ya que el marketing SEO es solo un componente del marketing en línea y los costos de configuración o la curva de aprendizaje en el marketing SEO son tan largos que, en caso de duda, una agencia de marketing SEO se convierte en una alternativa más barata. También está la cuestión de si puede obtener un gerente SEO competente en el mercado laboral. Lo que sin duda es una buena solución es la existencia interna de un oficial de SEO, quien, dependiendo de la importancia, trabaja con una agencia de marketing SEO externa y actúa como una interfaz "a la altura de los ojos". Esto ofrece un buen diseño, ya que proporciona el conocimiento especializado relevante en la empresa y la agencia puede controlarse bien. Para esto, sin embargo, es esencial que el empleado interno esté continuamente capacitado en marketing SEO.