Ninjas del Marketing Podcast

David nos cuenta los consejos de productividad que le han servido a él para llegar a tan productivo y llevar para delante tantos proyectos.

Para qué sirven PHP y Javascript, con Adrián Cobo y Fernando García Rebolledo, auténticos ninjas del desarrollo web. ¿Nos resolverán la duda?

¿Tienes un comercio de moda y no sabes cómo empezar a vender online? Escucha, que te lo contamos.

¿Qué es CSS? Si quieres saber un poco más sobre fundamentos de la web y cómo están hechas... quédate a escucharnos.

Google Search Console es la herramienta de analítica web gratuita de Google, orientada a los resultados en el buscador, y tiene muchas cosas que te van a interesar saber.

Sacra Jáimez ha tomado las riendas del programa de hoy para charlar de transformación digital del sector de la educación con Isa Gómez.

Hoy hablamos de cómo está construída una página web en su código, hablaremos de qué es HTML. David nos va a contar en qué consiste el HTML y en qué se diferencia del HTML5, entre otras cosas.

Pero antes, vamos a ver algunas noticias:

La semana pasada se iniciaron las charlas sobre WooCommerce, y comenzamos con Diego Nieto, que nos habló sobre cómo optimizar las fichas de producto.En la Meetup Málaga David dará una charla sobre su plugin para Visual Studio Code: +150 snippets, que tiene más de 4.300 instalaciones en el momento de escribir este artículo. Si queréis descargarlo, podéis hacerlo desde el marketplace de Visual Studio.El podcast que os recomendamos escuchar es el de El Arroyo Dev.

Y ahora, ya sí, nos metemos en el tema del día.

Fundamentos de la Web: Qué es HTML

En concreto, vamos a ver qué es HTML5, que es el standard que se usa hoy día. David nos contará la diferencia entre los dos tipos de lenguajes que hay para construir webs:

Lenguaje de clienteLenguaje de servidor

HTML es un lenguaje del lado del cliente, por lo que es interpretado por el navegador, mientras que los lenguajes de servidor como PHP son interpretados del lado del servidor.

Algunas características del lenguaje HTML son:

HTML sirve para definir la estructura del contenido.Utiliza un sistema de etiquetas.HTML fue inventado por Tim Berners-Lee en 1990HTML5 se consolidó más o menos en 2014, y se caracteriza por la semántica, conexión, rendimiento y soporte multimedia.

  Título principal 

  Subtítulo interesante

  

Primer párrafo

 

   

  

Segundo párrafo con un hipervínculo

La mayoría de las etiquetas abren y cierran con Las etiquetas HTML que debes conocer son:Composición base:, indica al navegador que va a leer HTML5., indica el comienzo de la raíz del documento Metadatos del documento. Título. Con esta etiqueta le indicamos a los buscadores qué contenido pueden rastrear o cuál no.Head - Glosario | MDN. Se trata de la cabecera que vemos en la pestaña de nuestro navegador.. Con estas etiquetas cargamos contenidos tan importantes como el favicon, el pequeño icono que vemos en la parte superior de la pestaña del navegador., aquí es donde de verdad empieza la parte de la página web que vemos en el navegador., permite delimitar contenido en una especie de caja.

  

      

  

  

    

  

¿Cuáles son las secciones de un documento HTML5?

Todas las páginas web tienen varias secciones claramente diferenciadas, gracias a las nuevas etiquetas que se introdujeron para este cometido.

Cabecera de un documento o artículo Navegación de elementos Pie de página Barra lateral Contenido principal del body Composición autocontenida en un documento Sección genérica

¿Cómo añadimos contenido en HTML?

Para añadir contenido en HTML utilizaremos las siguientes etiquetas, tanto si se trata de texto como de contenido multimedia.

Si se trata de contenido multimedia, utilizaremos las siguientes etiquetas:Para contenido de texto utilizaremos las siguientes:<h1>, <h2>, <h3>, <h4>, <h5><p><br/><a> href class rel<img><strong><em><button><ul><li></li></ul>input: type

Por último, es muy importante tener en cuenta comprender qué es HTML, que este lenguaje solamente sirve para añadir y estructurar el contenido. Para darle estilos utilizaremos CSS, y para añadirle un comportamiento usaremos Javascript.

Fuentes

MDN Mozilla Web docs: https://developer.mozilla.org/es/docs/HTML/HTML5

¿Qué es HTML? https://www.hostinger.es/tutoriales/que-es-html/

Portada del libro HTML5, the missing manual. Libro fantástico para aprender HTML5.

El libro que hemos recomendado durante el episodio es Missing Manuals HTML5, de Matthew Macdonald, y es un libro fantástico para iniciarse y comprender todos los conceptos que hemos explicado aquí.

¡Con Ángel Rodríguez! Vamos a aprender cómo utilizar una Herramienta de investigación de Palabras Clave en condiciones para posicionar nuestra web.

Tema del día: Aplicaciones de analítica web

¿Por qué debemos instalar una aplicación de analítica web?

Porque lo que no se mide no existe.Hay quien dice que si no vas a medir no instales nada y no recopiles inutilmente información.Tarde o temprano te vas a arrepentir.A veces puede ser útil para detectar movimientos raros en la web.

¿Qué opciones tenemos?

GoogleGoogle AnalyticsGoogle Search ConsoleSi eres un outsiderMatomo (antiguo Piwik) https://matomo.org/Sistema de analítica web autoinstalable en nuestro servidorTambién se puede utilizar en la nube (en la de ellos)Es una especie de WordPress de las analíticasVentajasNo hay filtros por parte de una empresa que recoge tus datos y te ofrece los que quiereDe cara a la privacidad es mucho más seguro ya que los datos que recoge los almacenas en tu propio servidorEs open-sourceSi os interesa este tema, podemos hacer un programa especial dedicado a Matomo más adelante

¿Qué vamos a obtener con Google Analytics?

Sobre todo, vamos a obtener datos de analítica web relativa a visitasDatos en tiempo realCuántos usuarios hay en ese momentoUbicaciónProcedenciaQué están visitandoIncluso si se está produciendo alguna conversión (hay que configurarlo)AudienciaDatos demográficos (Edad y sexo)Información geográficaTecnología (Navegador)Dispositivos móvilesAdquisiciónCanales de procedencia (orgánico, directo, referido y social)Google Ads (obtener datos de las campañas de publicidad)Constructor URL: https://ga-dev-tools.appspot.com/campaign-url-builder/Etiquetar en la firma del emailEtiquetar en GMBSearch Console (podemos ver datos de GSC por páginas, países, dispositivos e incluso consultas)Influencia de los medios sociales en nuestra webHacer seguimiento de las campañas en medios sociales y su conversión en visitas de la web.ComportamientoFlujo del comportamiento del usuario desde que entra en una página hasta que se va. Ruta por todas las páginas.Visitas que han recibido cada una de las páginasVelocidad del sitio (podemos ver si se están produciendo anomalías en el tiempo de carga)Vemos si hay páginas que tardan en cargarse más que otras.Podemos ver las búsquedas que se producen dentro del sitio (para ello hay que configurar que haga un seguimiento del parámetro “s”Hacer seguimiento de eventos (compras clics a enlaces de afiliación, descargas, etc).ConversionesHay que definir unos objetivos (envío de un correo, compra, descarga de leadmagnet…)Analizamos en qué medida se han cumplido esos objetivos y qué valor tienen.Incluso podemos hacer un seguimiento de embudos multicanal.

¿Y qué vemos en Google Search Console?

Las analíticas de Google Search Console están más relacionadas con el buscador de googleRendimientoImpresiones y clicsCTRPosicionamiento medioPalabras clave que traen tráfico a nuestra web

CoberturaDetectar páginas con error (errores 500, noindex enviadas a través del sitemap, etc)Sitemap (podemos enviar nuestro sitemap a Google para ayudarle a indexar)Métricas de web principales (nos permite ver si hay URLs que tienen problema de lentitud.Usabilidad móvil (nos indica si hay problemas de usabilidad como textos demasiado pequeños, contenido más ancho que la pantalla, etc).AMPAquí podemos hacer un seguimiento de la versión AMP de nuestra página web, sobre todo si surgen errores.Rich snippets (controlamos algunos rich snippets desde aquí).EnlazadoEnlaces externosDominios desde los que proceden más enlacesAnchor texts (texto de enlace más frecuente)Enlaces internosPáginas más enlazadasOtras ventajasControl de envío de sitemapsInspeccionar URLs para indexar inmediatamente una URL (aunque esto lleva un tiempo dando algunos fallos)Resolución de penalizaciones manuales por parte de google, etc.Detección de problemas de seguridad… y lo que vaya viniendo

Compartimos Guía Instalación de Etiquetas en Google Tag Manager.

¿Por qué nos interesa digitalizar nuestros servicios? ¿Qué beneficios reporta para nuestro negocio?