HTML5: Ejemplo de formulario - Google Actívate
Curso de Introducción al Desarrollo Web: HTML y CSS (1/2): módulo 5/5

Cómo se escribe una página web bien estructurada

Añadir a mi plan de formación
Quitar de mi plan de formación
Compartir
Twitter
Facebook
LinkedIn

Genial, vas por buen camino.

Sigue aprendiendo con más tutoriales gratuitos.

{[ ((lesson.showTranscript) ? 'Ocultar' : 'Ver transcripción') ]}

Como ya hemos analizado en lo que llevamos de curso, una de las características más importantes que nos trae el nuevo estándar HTML5 son los nuevos elementos disponibles para el manejo de formularios ya que nos permite gestionarlos de manera nativa y por tanto, se puede prescindir de JavaScript para realizar algunas validaciones de formulario del lado del cliente. Esto facilita mucho el trabajo del desarrollador porque no se tiene que preocupar por problemas de compatibilidad entre distintos navegadores. Además, supone un ahorro de tiempo y de ancho de banda ya que, por un lado, permite que el formulario no se ha enviado si no es válido y, por otro lado, permite informar al usuario de que alguno de los valores introducidos no cumple con los requisitos definidos.

En este vídeo vamos a ver un ejemplo de un formulario en HTML5 y para ello, vamos a usar la aplicación Notepad Plus Plus, para la edición del código y el navegador Google Chrome para ver los resultados.

Para poder comprender y aprovechar al máximo la información que vamos a ver a continuación, deberías haber visto previamente los vídeos "HTML5 nuevas funcionalidades en formularios parte 1 y parte 2".

En primer lugar, vamos a analizar cómo debe de ser la estructura básica de nuestro fichero HTML5. Lo primero que debemos colocar siempre es la declaración de DOCTYYPE. Debe estar antes de la etiqueta HTML. A continuación, debemos tener este elemento raíz, HTML. Este elemento contiene el documento completo y únicamente el DOCTYPE estará fuera de él. Debe contener dos elementos, head y body. Con lang, indicamos el idioma base de los valores de los atributos y del texto del contenido. Esta información puede ser utilizada por un agente de usuario de diferentes formas para controlar la presentación de la página. En este caso, hemos asignado el español. La etiqueta head, es el contenedor de todos los elementos de cabecera. Debe incluir un título para el documento y puede contener script, estilos, meta información, etcétera.

Charset UTF-8 sirve para especificar la codificación de caracteres de marcado del documento. Esto ya os sonará porque lo habéis visto en detalle en otros vídeos del curso, así que no vamos a explicarlo en este.

La etiqueta title es obligatoria en todos los documentos HTML y define el título del documento, lo que significa que define el título para la barra del navegador. Proporciona un título para la página cuando ésta se añada a favoritos y muestra un título para la página en los resultados de los motores de búsqueda.

La etiqueta body indica que se trata de la sección principal del documento. Está siempre definida después de la etiqueta de cierre del elemento head y antes de la etiqueta de cierre del elemento HTML. El elemento h1 define un encabezado de nivel 1. Como ya sabéis, existen seis niveles de encabezado y nos ayudan a organizar la información de un documento. En este caso, lo usamos para definir un texto como un titular, más grande y destacado que cualquier otro texto.

La etiqueta p define un párrafo, por lo que los navegadores añadirán un margen antes y después de este elemento. En este caso, hemos escrito un párrafo descriptivo sobre el contenido de la página que vamos a crear. La etiqueta for se usa para crear formularios de entrada de datos en HTML. Este elemento puede contener uno o más de los siguientes elementos, input, textarea, button, select, option, optgroup, fillset, datalist, output y ladel. Finalmente, tenemos un tipo de input submit para definir un botón que nos permita enviar el formulario.

A continuación, podemos ver el resultado del código escrito hasta el momento en el navegador Google Chrome. Como podéis observar, en la barra superior del navegador tenemos el título que hemos definido para la página. Después podemos ver un encabezado de tipo h1, en un tamaño grande y destacado y, debajo de él, tenemos un párrafo con un texto descriptivo en un tamaño de texto estándar. Por último, podemos ver el botón que hemos definido para enviar el formulario que vamos a crear a continuación.

A continuación, vamos a ir añadiendo elementos al formulario, usando los input type y los nuevos atributos de contenidos vistos en los videotutoriales y vamos a ir viendo cómo se comportan en el navegador Google Chrome.

En primer lugar, vamos a añadir un elemento input de tipo text que contiene los siguientes componentes, una etiqueta label, que como ya sabéis a estas alturas del curso, define la etiqueta para el elemento input. Cabe destacar que, cuando esta etiqueta recibe el foco, automáticamente se lo cede al control asociado. Existen dos tipos de asociación de las etiquetas con los controles de formulario: asociación implícita y asociación explícita. En la asociación implícita la etiqueta debe estar colocada inmediatamente antes o después de su control en la misma línea o encima del control si la línea es diferente, o el control debe estar dentro de la etiqueta. En la asociación explícita, la asociación se realiza identificando cada control con un atributo id único y asociándola a través del atributo for, de la etiqueta label corresponde. Las normas de accesibilidad WCAG 2.0 recomiendan usar la asociación explícita, ya que algunas tecnologías asistivas no manejan correctamente las etiquetas implícitas. En este caso, la usamos de forma explícita, aunque más adelante, veremos cómo usarla de forma implícita también. Además, tenemos un atributo placeholder para mostrar un texto por defecto dentro del campo. En este caso, es un ejemplo de un nombre y un apellido. También tenemos un atributo autofocus, para que sea el campo que recibe el foco automáticamente cuando se carga la página. Después, tenemos un atributo autocomplete, para que se pueda seleccionar un valor introducido en este campo con anterioridad y, por último, tenemos un atributo required para definir este campo como obligatorio, si no lo rellenamos, el sistema nos avisa de que es un campo de entrada requerido.

Ahora vamos a pasar a ver cuál sería el resultado de este código en el navegador Google Chrome. Como podéis observar, nos ha aparecido un nuevo campo de input tipo text que, cuando cargamos la página, recibe el foco automáticamente gracias al atributo autofocus. Además, tenemos un texto mostrado por defecto, que hemos definido mediante el atributo placeholder Si intentamos escribir, vemos que nos aparece el autocompletado con otros textos que hemos introducido en este campo anteriormente y, además, intentaremos enviar el formulario sin escribir nada dentro del campo, el sistema nos avisa de que este campo es obligatorio rellenarlo.

A continuación, vamos a añadir un elemento input de tipo password, contraseña, que contiene los siguientes atributos: un atributo pattern, para definir la estructura de la contraseña en base a una expresión regular definida, un atributo placeholder, para mostrar un texto por defecto dentro del campo, en este caso, es un ejemplo de una contraseña válida según la expresión regular definida, lo que puede ayudar al usuario a entender qué formato es el correcto en este campo de contraseña y, por último, tenemos un atributo de tipo required para definir este campo como obligatorio.

Como podemos observar ahora, tenemos un nuevo campo nuestro formulario. Es el campo contraseña de tipo password tiene un texto por defecto que hemos definido con el atributo placeholder, además, con el atributo required, hemos definido este campo como obligatorio, por lo que el sistema nos avisa si intentamos enviar el formulario sin haber rellenado este campo.

Como veis, el sistema nos está diciendo que debemos completar este campo. A este campo le habíamos definido con el atributo pattern una expresión regular, por lo que el sistema nos debe avisar si escribimos un texto que no cumple con dicha expresión regular. Vamos a probar a introducir un montón de letras para ver si el sistema nos avisa de que es incorrecto. Efectivamente, el sistema nos avisa de que el formato no coincide con el definido en este campo, así que, vamos a cambiarlo por uno correcto, por ejemplo, jjj9999 y, si tratamos de enviar el formulario ahora mismo, efectivamente, el sistema nos ha dejado enviarlo ya que no contenía ningún error.

A continuación, vamos a añadir tres tipos nuevos de input, en nuestro formulario. Un tipo de input tel, un tipo de input email y un tipo de input url. Los tres con un texto o número definido, como ejemplo, para que el usuario sepa lo que debe introducir en este campo. Como podemos observar en el navegador, tenemos estos tres nuevos campos. En el caso del campo teléfono, como no hemos definido una expresión regular con pattern, nos va a dejar introducir cualquier valor y nos va a permitir enviar el formulario, sin darnos ningún mensaje de error. En el campo de email, sin embargo, la cosa cambia, porque si introducimos una dirección de correo electrónico no válida, el sistema nos advierte de que la dirección de correo electrónico no es correcta. Para el caso de la página web, ocurre lo mismo que con email, si intentamos escribir una dirección que no es correcta, el sistema nos advierte de que la dirección URL no es correcta. Sin embargo, si ponemos una dirección de correo electrónico correcta, el sistema nos permite enviar el formulario.

A continuación, vamos a añadir dos tipos de input más, uno es un tipo de input number y el otro es un tipo de input date. En el tipo de input number, podemos ver los siguientes atributos, un atributo min y max para fijar los valores mínimo y máximo respectivamente, permitidos dentro del campo. En este caso, el mínimo sería 2 y el máximo 14. Además, tenemos el atributo placeholder para definir un número por defecto que aparecerá en el campo automáticamente.

Finalmente, podemos ver que tenemos un atributo step, que como ya habíamos visto en vídeos anteriores, sirve para especificar los intervalos de valores válidos para el campo. En este ejemplo, su valor es 2. Y, como su valor mínimo es 2, los valores válidos para este campo serían 2, 4, 6, 8, 10, 12 y 14.

El siguiente tipo de input que hemos definido es un tipo de input date, un atributo min para fijar una fecha mínima por defecto. Como podemos observar ahora, tenemos estos dos nuevos campos, el número de temas, que era el tipo number y la fecha de envío que era el tipo date. En el caso del número de temas, tenemos un valor por defecto definido, el de 2, mediante el atributo placeholder. Además, tenemos un mínimo y un máximo, por lo tanto, no me deja disminuir la cifra por debajo de 2. El atributo máximo me obligaba a tener máximo permitido de 14 y además con step, podemos comprobar que solo nos deja movernos con cifras de dos en dos, en este caso, cifras pares. En cuanto al campo de fecha de envío, si lo pulsamos, podemos ver un calendario en el que podemos seleccionar una fecha y que contiene una fecha mínima del 16 de julio, por lo tanto, antes del 16 de julio no nos deja seleccionar ninguna fecha. Esto lo conseguíamos con el atributo min, dentro del tipo de input date.

A continuación, vamos a añadir tres campos más a nuestro formulario, un tipo de campo de input color, un tipo de input search y un tipo de input range. En el caso de color, tenemos el atributo value, que nos permite especificar el valor por defecto del elemento. Su tipo de valor difiere según el tipo de input, por ejemplo, value, para color, especifica el código hexadecimal del color por defecto, pero, por ejemplo, en el tipo submit, como podemos ver en el botón de Enviar, lo que define es el texto del botón. En el caso del tipo de input search, lo que nos encontramos es un campo de búsqueda y, por último, hemos añadido un tipo de input range, que es un tipo de campo con un rango específico de valores delimitado en este caso por los valores mínimo de 1 y máximo de 10. Como podemos observar, ahora tenemos estos tres nuevos campos en nuestro formulario, uno es el de color, que, cuando lo pulsamos, nos permite seleccionar un color dentro de una paleta de colores y al que habíamos puesto un color azul por defecto con su código hexadecimal y el atributo value. En cuanto al campo de búsqueda, cuando nos colocamos en el campo y empezamos a escribir, podemos ver que aparece el aspa, para borrar lo escrito hasta el momento. Y en cuanto al tipo de input range, podemos ver que nos permite seleccionar un valor en un rango de 1 a 10.

A continuación, vamos a añadir una agrupación de campos de tipo radio, lo que significa que solo un valor del grupo podrá ser seleccionado al mismo tiempo. Tenemos un grupo de 3, dónde la etiqueta fillset se usa para agrupar elementos relacionados entre sí, dentro del mismo formulario, esta etiqueta dibuja una caja alrededor de todos los elementos agrupados. Con la etiqueta legend, lo que definimos es un título o leyenda para el conjunto de elementos agrupados mediante el fillset. En este caso la etiqueta label, como podéis observar, la estamos usando de manera implícita. No es incorrecto, pero recuerda que lo recomendado es usar la asociación explícita. Cada una de las tres opciones tiene un texto diferente definido mediante el atributo value. Y por último, el atributo check, nos permite especificar qué elemento debe estar preseleccionado cuando la página se carga. Se usa en tipos de input checkbox o radio. En este grupo podemos ver que el atributo check está en la primera opción, definiendo por tanto que esta opción será la que estará seleccionada cuando se carga la página. Como podemos observar, ahora tenemos el nuevo campo o agrupación de campos en la que tenemos tres opciones para seleccionar una prioridad. Este tipo de campo está enmarcado gracias a la etiqueta fieldset y, además, debido a que son de tipo radio, solo podremos seleccionar una opción cada vez.

A continuación, vamos a añadir una agrupación de campos de tipo checkbox. A diferencia de los de tipo radio, estos tipos de input permiten que haya más de una opción seleccionada al mismo tiempo. Actúan individualmente como conmutadores, como en el caso de radio, se ha usado la etiqueta fieldset para agrupar los elementos, la etiqueta legend para dar un título a esta agrupación. Además, se ha usado la etiqueta label de forma implícita. Cada opción tiene un texto diferente definido mediante el atributo value y, el atributo check se ha colocado en la primera opción para que sea ésta la que esté seleccionada por defecto. Como podemos observar ahora en el navegador, ha aparecido un nuevo campo o agrupación de campos, de tipo check que nos permite realizar una selección de cada una de las opciones individualmente pudiendo haber más de una opción seleccionada al mismo tiempo, además, mediante la etiqueta fieldset se muestra un marco alrededor de la agrupación de campos.

Con esto hemos terminado de realizar nuestro formulario en HTML5. Para recordar un poco todo lo que hemos visto, hemos visto un campo de tipo text, en el que teníamos un placeholder, un texto por defecto, tenía un autofocus y un autocomplete. Después, hemos visto una contraseña que tenía definida una expresión regular, gracias al atributo pattern y, además, tenía un texto por defecto para ayudar al usuario a saber cómo debe ser el formato que debe poner en el campo de contraseña. Además, teníamos un teléfono, un email y una página web con un texto por defecto. Después teníamos un elemento de tipo number, que nos permitía incrementar o decrementar el valor hasta un máximo y dentro de un valor mínimo y mediante saltos de dos en dos. Además, teníamos un campo date, que nos permitía seleccionar una fecha a partir del 16 de julio de 2012. También teníamos un control de tipo color que nos permite seleccionar dentro de una paleta de colores un color determinado, el que queramos. Además, teníamos un campo de tipo búsqueda que, dependiendo un poco del navegador que estemos usando, nos mostrará el aspa para eliminar el texto cuando hemos escrito o nada más poner el foco dentro del campo. Después teníamos un input de tipo range que nos permite definir un rango dentro de un mínimo y un máximo, entre 1 y 10 y, luego, teníamos una agrupación de campos de tipo radio que solo permiten seleccionar una opción de cada grupo y una agrupación de campos de tipo checkbox que nos permitían seleccionar más de una opción al mismo tiempo.

Espero que toda esta información te sea muy útil. Muchas gracias por tu atención y hasta pronto.

Ranking del anuncio

Puntuación global que recibe un anuncio y que determina en qué posición de la página de resultados de un motor de búsqueda (SERP) puede aparecer. A mayor puntuación, mejor ranking en la SERP. La fórmula del ranking del anuncio que emplean los distintos motores de búsqueda es muy parecida: CPC máx. x Nivel de calidad. Por ejemplo, si el CPC máx. de un anuncio es de 2 € y el nivel de calidad es de 6/10, el ranking del anuncio será 12. Si este es el ranking más alto, el anuncio alcanzará la primera posición en la SERP. Ejemplo: "Conseguí mejorar el ranking de mi anuncio aumentando tanto su relevancia como la puja".

CTR

Número de veces que los usuarios hacen clic en un elemento que les interesa, por ejemplo, un anuncio, en comparación con el número de veces que están expuestos a él. Ejemplo: "Mis anuncios de pintor de fachadas registran un CTR del 2%, y los de murales interiores, menos del 1%".

Nivel de calidad

Unidad de medida que valora del 1 al 10 la relevancia de los anuncios y las páginas de destino con respecto a las palabras clave para las que se puja. Si se incrementa el nivel de calidad, puede mejorarse la posición de los anuncios y disminuir el precio de los clics.

Término de búsqueda

Palabra clave o frase que los usuarios introducen en un motor de búsqueda para encontrar lo que buscan. Ejemplo: "Cuando alguien introduce el término de búsqueda 'peluquería', puede que esté buscando un establecimiento de este tipo por la zona o simplemente consejos para peinarse".

Motor de búsqueda

Herramienta que indexa y muestra contenido digital relevante como respuesta a las palabras clave que introducen los usuarios. Algunos de los motores de búsqueda más conocidos de Internet son Google, Bing, Yahoo, DuckDuckGo, Baidu y Yandex, entre muchos otros. Ejemplo: "Utilizo motores de búsqueda para encontrar información sobre tendencias de decoración del hogar".

Aplicación

Programa diseñado para ejecutarse en smartphones, tablets y otros dispositivos móviles. Ejemplo: "Mi casa necesitaba una mano de pintura, así que utilicé una aplicación para buscar un servicio de confianza por la zona".

Fichas de pago

Anuncios que aparecen en las páginas de resultados de los motores de búsqueda. Ejemplo: "Me estoy planteando pagar para que mi sitio web aparezca en las fichas de pago y así atraer a más clientes".

Optimización en buscadores

Proceso mediante el cual se modifican y promocionan contenidos y páginas web para mejorar la visibilidad en los resultados orgánicos (gratuitos) de los motores de búsqueda. Ejemplo: "Gracias a la inversión que hice en la optimización en buscadores, el posicionamiento de mi sitio web en los resultados de los motores de búsqueda mejoró considerablemente".

Anuncio

Resultado patrocinado que aparece en la página de resultados de un motor de búsqueda o SERP. Normalmente, los anuncios están compuestos de algunas líneas de texto y pueden incluir elementos adicionales, por ejemplo, una dirección postal, reseñas o números de teléfono. Ejemplo: "Gracias a mi anuncio 'Fotos de bodas originales' estoy consiguiendo muchas oportunidades de negocio".

Resultados naturales

A diferencia de los anuncios de pago, estos son los resultados gratuitos que muestran los motores de búsqueda. Ejemplo: "Cuanto mejor posicionado esté mi sitio web en los resultados naturales de un motor de búsqueda, más tráfico recibirá".

SEO

Proceso mediante el cual se modifican y promocionan contenidos y páginas web con el fin de mejorar la visibilidad en los resultados orgánicos (gratuitos) de los motores de búsqueda. Ejemplo: "Gracias a la inversión que hice en SEO, el posicionamiento de mi sitio web en los resultados de los motores de búsqueda, mejoró considerablemente".

Retorno de la inversión

Cálculo que emplean los anunciantes para averiguar si sus campañas de marketing online son rentables. Esta es una de las fórmulas más utilizadas para calcular el ROI: Retorno de la inversión = (Beneficios obtenidos de la inversión – Coste de la inversión) / Coste de la inversión. Ejemplo: "Este trimestre, las ventas que han generado nuestras campañas de publicidad de display han registrado un retorno de la inversión positivo".

Enlaces internos

Enlaces de una página que dirigen a otra dentro de un mismo sitio web. Ejemplo: "Los visitantes de mi sitio web pueden hacer clic en enlaces internos de la página principal para acceder a las páginas de la sección de frutas y verduras de la galería de fotos".

Visita

Conjunto de interacciones que se llevan a cabo en un sitio web durante un periodo de tiempo determinado. Por ejemplo, en una misma visita se pueden registrar varias páginas vistas y transacciones de comercio electrónico. Ejemplo: "El mes pasado mi sitio web recibió 2000 visitas, pero lo que realmente me interesa es saber si esas visitas generaron ventas".

Redireccionamiento

Desvío automático a una URL distinta de la que ha introducido el usuario. Ejemplo: "Cuando cambiamos el dominio del sitio web implementamos redireccionamientos".

URL

Dirección exclusiva de una página o contenido digital en Internet. Ejemplo: "Carlos, si quieres acceder a mi sitio web solo tienes que escribir la URL en el navegador".

Porcentaje de clics (CTR)

Número de veces que los usuarios hacen clic en un elemento que les interesa, como por ejemplo, un anuncio, en comparación con el número de veces al que están expuestos a él. Por ejemplo, si un anuncio recibe 100 impresiones y 3 clics, el CTR será del 3%. Este indicador es fundamental para saber si tus anuncios son relevantes para los usuarios del motor de búsqueda. Podría decirse que es el resultado de dividir las personas que entran en una tienda entre las que solo miran el escaparte. Aunque no existen unas directrices específicas sobre este indicador, lo ideal es mejorarlo siempre que se tenga la oportunidad. Ejemplo: "Después de añadir información sobre precios en mi anuncio de fotografía de bodas, el porcentaje de clics mejoró bastante y empecé a recibir más clics".

Coste por clic (CPC) real

Importe real que una empresa paga al motor de búsqueda cuando alguien hace clic en su anuncio. Las empresas fijan un CPC máx. que sirve de límite, es decir, nunca se les cobrará más de dicho importe. Sin embargo, este importe puede variar según el número de anuncios que participan en la subasta y la relevancia que tienen. La fórmula de coste por clic que emplean los distintos motores de búsqueda es muy parecida: (Ranking del anuncio que se debe superar ÷ Nivel de calidad del anuncio) + 0,01 €. Veamos un ejemplo. El anuncio de la competencia, Bodas Santiago, tiene un ranking de 12, que es superior al del siguiente mejor anuncio, y el ranking que hay que superar en esta fórmula. A continuación, habrá que dividir esa cifra por el nivel de calidad de tu anuncio; supongamos que es de 9/10. Por lo tanto, el coste por clic real de tu anuncio será el resultado de la siguiente operación: (12 / 9) + 0,01 € o 1,34 €. Ejemplo: "Estoy dispuesto a pujar hasta 1,75 € por mi anuncio de fotografía de bodas pero, por suerte, mi coste por clic real es solo de 1,60 €".

Araña

Programa diseñado para explorar contenido en Internet de forma sistemática y recabar información relacionada para ayudar a los usuarios a encontrar lo que buscan. Ejemplo: "Me dan miedo las arañas, pero no las que ayudan a mi sitio web a aparecer en los motores de búsqueda".

Posición media del anuncio

Posición de un anuncio en la página de resultados del motor de búsqueda (SERP). En los motores de búsqueda, la posición más alta suele ser la posición 1. Si la mitad del tiempo un anuncio aparece en la posición 1 y la otra mitad, en la posición 2, la posición media será de 1,5. Ejemplo: "La posición media de mi anuncio sobre fotos de mascotas ha pasado de 7 a 3. ¡Increíble!".

Descripción meta

Descripción de una página web que se incluye en el código de dicha página. También puede servir como descripción en la página de resultados de los motores de búsqueda. Ejemplo: "Escribo descripciones meta de todas las páginas de mi sitio web por si los motores de búsqueda las muestran en los resultados".

Texto alternativo

Texto que se emplea en el código de una página para describir una imagen. Si la imagen está dañada y la página no la puede cargar, el texto alternativo aparece en un cuadro vacío en el que debería mostrarse la imagen. Gracias al texto alternativo, los lectores de pantalla pueden utilizarse para describir las imágenes y mejorar así la accesibilidad de las personas invidentes o con problemas de visión. Ejemplo: "En la página principal de mi sitio web www.blakeproduce.com aparece una imagen de una huerta con verduras y árboles frutales. Decidí incluir el siguiente texto alternativo en el código de la imagen a modo de descripción: 'Frutas y verduras recién cogidas en Blake Produce'".

Segmentación geográfica

Sirve para mostrar anuncios únicamente a personas de una determinada zona geográfica. Ejemplo: "Hemos configurado los ajustes de segmentación geográfica para que nuestros anuncios solo se muestren a aquellas personas que se encuentran a una distancia máxima de 80 km de nuestra empresa".

Sesión

Conjunto de interacciones que se llevan a cabo en un sitio web durante un periodo de tiempo determinado. Por ejemplo, en una misma sesión se pueden registrar varias páginas vistas y transacciones de comercio electrónico. Ejemplo: "El mes pasado mi sitio web registró 2000 sesiones, pero lo que realmente me interesa es saber si esas sesiones generaron ventas".

Sitemap

Lista de las páginas que contiene un sitio web. Permite a los motores de búsqueda conocer el contenido del sitio. Ejemplo: "Gracias al sitemap que creé de mi sitio web, los motores de búsqueda conocen el contenido de www.blakeproduce.com".

Adquisición de tráfico

Proceso mediante el cual se atraen visitantes (o tráfico, como se denomina comúnmente) a sitios web, aplicaciones móviles y otros canales digitales. Ejemplo: "Mi estrategia de adquisición de tráfico se centra en orientar la publicidad a aquellas personas que han comprado casas viejas recientemente".

Impresiones

Número de veces que se muestra un anuncio. Ejemplo: "Mi nueva campaña de marketing de galletas caseras para perros recibió miles de impresiones, pero no sé si se ha completado alguna venta todavía".

Optimización de conversiones

Proceso mediante el cual se mejora la estrategia digital con el fin de aumentar el porcentaje de visitantes que cumplen los objetivos que has definido. Ejemplo: "Cuando haya añadido la nueva línea de falsos acabados en mi sitio web, me centraré en la optimización de conversiones".

Coste por clic

Cantidad de dinero necesaria para que se produzca un clic en un anuncio digital. Ejemplo: "Al parecer, los precios del coste por clic son más altos los fines de semana, así que solo publico mis campañas durante los días laborables".

CGU

Contenido que crean los usuarios de una plataforma online, como por ejemplo, vídeos, comentarios o entradas de blog. Ejemplo: "En la mayoría de las redes sociales se publica y comparte CGU".

Red social

Comunidad de personas que crean y comparten contenido. Ejemplo: "Las redes sociales podrían ser una buena plataforma donde mostrar mis espectaculares murales de interior y quizás conseguir más clientes".

Realidad virtual

Simulación generada por tecnología informática de un entorno tridimensional con el que puedes interactuar mediante periféricos como, por ejemplo, auriculares, sensores o joysticks.

Navegador

Programa informático que sirve para navegar por Internet desde ordenadores, tablets y smartphones. Algunos ejemplos de navegadores son Chrome, Firefox, Internet Explorer o Safari. Ejemplo: "No sé muy bien por qué, pero mi sitio web se ve distinto según el navegador que utilice el usuario".

Analítica

Análisis que se realiza de los datos generados por la actividad de los usuarios en sitios web o aplicaciones móviles para identificar cómo se puede mejorar un sitio o una campaña de marketing. Ejemplo: "Utilizo una herramienta de Analítica Web para saber cómo mejorar ciertas páginas y así poder aumentar la interacción con el cliente en el sitio".

Spam web

Técnicas fraudulentas para conseguir que un sitio web ocupe las primeras posiciones de los resultados de búsqueda, por ejemplo, mediante la repetición de palabras clave, el pago a otros sitios para obtener enlaces entrantes o la inclusión de texto invisible en pantalla. Se consideran prácticas perjudiciales porque, debido a ellas, los sitios web verdaderamente relevantes se pierden entre los resultados de búsqueda. Ejemplo: "He recibido ofertas por correo electrónico para aparecer en la primera posición de los resultados de búsqueda de Google, pero las he ignorado porque emplean técnicas spam web".

Visitante único

Persona que visita el mismo sitio web durante un determinado periodo de tiempo. Ejemplo: "Da igual las veces que mi tío Juan visite nuestro sitio web; se le considerará un visitante único".

Medios sociales

Contenido que crean los usuarios y que posteriormente comparten en Internet, como por ejemplo, texto, imágenes o vídeos. Ejemplo: "Los medios sociales cambian constantemente, así que contraté a un profesional para que me ayudara a crear una estrategia".

Contenido duplicado

Contenido idéntico o muy similar al de otro sitio web. Ejemplo: "Nuestra empresa invierte en contenido original y así evitamos usar contenido duplicado".

Contenido

Material digital que se ofrece a los usuarios en formato de texto, vídeo, audio, imágenes, etc. Ejemplo: "Voy a añadir más contenido de imagen y vídeo a mi sitio web con el fin de hacerlo todavía más interesante para los usuarios".

Consulta de búsqueda

Palabra o frase exacta que una persona introduce en un motor de búsqueda para buscar aquello que le interesa. Puede coincidir o no con las palabras clave que los anunciantes incluyen como objetivo en sus campañas publicitarias. Ejemplo: "La consulta de búsqueda 'fotógrafo de mascotas en Zaragoza' me da buenos resultados todos los meses".

Objetivo

Acción que quieres que realicen los visitantes, por ejemplo, comprar a través de tu sitio web de comercio electrónico, enviar formularios, llamarte por teléfono o ver vídeos. Ejemplo: "Mi principal objetivo es que los usuarios pidan cita para recibir asesoramiento, aunque registrarse para recibir el boletín informativo por correo electrónico también lo consideraría una conversión".

Blog

Sitio web que se actualiza con frecuencia y en el que se incluyen entradas escritas por una persona o empresa, normalmente en tono coloquial y sobre un tema concreto.

URL visible

URL que se muestra en el anuncio, normalmente, una versión abreviada de la URL real o de destino. Ejemplo: "Procuro evitar URL visibles demasiado largas en mis anuncios, como 'http://www.blakeproduce.com/prouctos/especiales/tomatesraf'. Para acortarlas y adaptarlas al contenido de las redes sociales, utilizo el servicio https://goo.gl/".

Elemento

Título de una página web, según se indica en su código HTML. Suele emplearse también como título de la página en los resultados de los motores de búsqueda. Ejemplo: "Procuro que el título del elemento de mis páginas web sea lo bastante descriptivo para que los motores de búsqueda sepan de qué trata el contenido".

Marketing en buscadores

Tipo de publicidad que permite pujar por un anuncio para que se muestre junto a los resultados de búsqueda correspondientes a las palabras clave que introducen los usuarios. De esta manera, las empresas aparecen en el momento justo en que los usuarios buscan sus productos o servicios. Ejemplo: "La optimización en buscadores es un proceso largo, pero gracias al marketing en buscadores conseguí incrementar el tráfico de mi sitio web muy deprisa".

PPC

Sistema publicitario por el cual los anunciantes pagan cuando los usuarios hacen clic en sus anuncios. Ejemplo: "Voy a usar anuncios de PPC para promocionar mi nueva línea de falsos acabados".

ROI

Cálculo que emplean los anunciantes para averiguar si sus campañas de marketing online son rentables. Esta es una de las fórmulas más utilizadas para calcular el ROI: Retorno de la inversión = (Beneficios obtenidos de la inversión – Coste de la inversión) / Coste de la inversión. Ejemplo: "Este trimestre, las ventas que han generado nuestras campañas de publicidad de display han registrado un ROI positivo".

Resultados orgánicos

A diferencia de los anuncios de pago, estos son los resultados gratuitos que muestran los motores de búsqueda. Ejemplo: "Cuanto mejor posicionado esté mi sitio web en los resultados orgánicos de un motor de búsqueda, más tráfico recibirá".

SERP

Lista de resultados que aparece en un motor de búsqueda como respuesta a la consulta de un usuario. Ejemplo: "Cuando busqué 'comprar pintura de acabado brillante al por mayor', vi que la SERP incluía tanto resultados naturales como fichas de pago".

Rastreador

Programa diseñado para explorar contenido en Internet de forma sistemática y recabar información relacionada para ayudar a los usuarios a encontrar lo que buscan. Ejemplo: "Gracias a los rastreadores, mi sitio web puede aparecer en los motores de búsqueda".

White Hat

Conjunto de técnicas que se emplean para optimizar páginas web con el fin de favorecer a los usuarios y no a los motores de búsqueda. Ejemplo: "Solo utilizo técnicas White Hat para que los motores de búsqueda puedan encontrar mi sitio web www.blakeproduce.com".

Black Hat

Conjunto de técnicas de SEO engañosas que se emplean para optimizar las páginas web con el fin de favorecer a los motores de búsqueda en lugar de a los usuarios. Ejemplo: "Evité por todos los medios aplicar técnicas de Black Hat SEO porque no quería perjudicar el posicionamiento de www.mydeliciousorganicveggies.com en los motores de búsqueda".

Posicionamiento

Posición de un anuncio o sitio web en la página de resultados de un motor de búsqueda. Ejemplo: "Haré todo lo posible para que mi sitio web aparezca en la primera posición de los resultados de los motores de búsqueda".

Precio de la puja

CPC máximo o importe máximo que se está dispuesto a pagar por cada clic que recibe un anuncio. Sin embargo, no siempre se cobra el importe entero. Por ejemplo, si el CPC máx. es de 1,25 €, es posible que solo se paguen 1,04 € por clic, porque el precio depende de factores relacionados con la competitividad. También hay que tener en cuenta que, si se aumenta la puja, podrían incrementarse las posibilidades de que el anuncio aparezca en una posición superior en la página de resultados de los motores de búsqueda. Ejemplo: "Pujaré un máximo de 2,25 €. Ese es el precio de mi puja. Ni un céntimo más".

CPC máx.

Precio de la puja o importe máximo que se está dispuesto a pagar por cada clic que recibe un anuncio. Sin embargo, no siempre se cobra el importe entero. Por ejemplo, si el CPC máx. es de 1,25 €, es posible que solo se paguen 1,04 € por clic, porque el precio depende de factores relacionados con la competitividad. También hay que tener en cuenta que, si se aumenta la puja, podrían incrementarse las posibilidades de que el anuncio aparezca en una posición superior en la página de resultados de los motores de búsqueda. Ejemplo: "Pujaré un máximo de 2,25 €. Ese es mi CPC máx. Ni un céntimo más".

Marketing de contenido

Creación de contenido online, como por ejemplo, blogs, vídeos o gráficos, para atraer a una determinada audiencia e interactuar con ella.

HTML

HTML (Hypertext Markup Language o lenguaje de marcas de hipertexto) es el lenguaje que emplean los desarrolladores web para crear sitios. Ejemplo: "Mi sitio web se creó a partir de lenguaje HTML".

Generación de enlaces

Proceso mediante el cual se obtienen enlaces entrantes de gran calidad y relevancia en un sitio web. La generación de enlaces se logra creando contenido pertinente y exclusivo que acaba adquiriendo popularidad en la comunidad virtual de forma natural. Ejemplo: "Puesto que el contenido que publicamos es interesante y pertinente, es muy probable que otros sitios web enlacen con nuestras páginas. Así podemos generar enlaces y, por lo tanto, mejorar el posicionamiento en los motores de búsqueda".

Página principal

Página de bienvenida o página más importante de un sitio web. Ejemplo: "En la página principal de mi sitio web, los visitantes pueden ver muestras de las casas más bonitas que he pintado".

Página de resultados del motor de búsqueda

Lista de resultados que aparece en un motor de búsqueda como respuesta a la consulta de un usuario. Ejemplo: "Cuando busqué 'comprar pintura de acabado brillante al por mayor', vi que la página de resultados del motor de búsqueda incluía tanto resultados naturales como fichas de pago".

Herramientas de Analítica Web

Análisis que se realiza de los datos generados por la actividad de los usuarios en sitios web o aplicaciones móviles para identificar cómo se puede mejorar un sitio o una campaña de marketing. Ejemplo: "Utilizo una herramienta de Analítica Web para saber cómo mejorar ciertas páginas y así poder aumentar la interacción con el cliente en el sitio".

Ordenador

Ordenador sin tecnología móvil. Ejemplo: "En casa utilizo el ordenador, pero cuando salgo me llevo el portátil".

Enlace entrante

Enlace a una página o sitio web procedente de otra página o sitio web. Ejemplo: "Nuestras entradas de blog suscitan mucho interés y contienen información muy útil, así que es normal que tengan tantos enlaces entrantes de otros sitios web".

Coste por conversión

A menudo se denomina "CPA". Proporción que mide la cantidad de dinero que inviertes en publicidad con respecto al número de conversiones que han generado los anuncios. Por ejemplo, si inviertes 100 € y recibes 4 conversiones, el coste por conversión será 25 €. El coste por conversión debe ser inferior al valor de una conversión. Por ejemplo, si una conversión está valorada en 20 € y el coste por conversión es de 25 €, el anuncio no resulta rentable. Ejemplo: "El coste por conversión era demasiado alto, así que decidí invertir un poco menos en publicidad online y estudié la manera de mejorar los anuncios para incluirlos en futuras campañas".

Robot

Programa diseñado para explorar contenido en Internet y recabar información relacionada que ayude a los usuarios a encontrar lo que buscan. Ejemplo: "Cuando puse en marcha mi sitio web me aseguré de que los robots de los motores de búsqueda tuvieran acceso a las páginas y pudieran indexarlas".

Red publicitaria

Plataforma que conecta a anunciantes que quieren publicar anuncios con editores que quieren alojarlos. El anunciante paga a la red cada vez que ocurre un evento acordado previamente, como una impresión de anuncio, un clic o una venta. La red, que primero deduce la tarifa correspondiente a la prestación de sus servicios, comparte con el editor los ingresos que ha generado la publicidad del anunciante. Ejemplo: "Decidimos publicar nuestras campañas de Display en una red publicitaria. Así pudimos mostrar anuncios rápidamente en una gran variedad de sitios web".

Sitemap XML

Lista de las páginas que contiene un sitio web. Permite a los motores de búsqueda conocer el contenido del sitio. Ejemplo: "Gracias al sitemap XML que creé de mi sitio web, los motores de búsqueda conocen el contenido de www.blakeproduce.com".

Marketing por correo electrónico

Proceso por el cual se envía información, y se promocionan productos y servicios a través del correo electrónico.

Palabra clave

Término que buscan los usuarios antes de acceder a un sitio web. Ejemplo: "Las palabras clave 'escapada de lujo romántica' ofrecen muy buenos resultados en mi sitio web".

Chatbot

Programa informático capaz de simular una conversación con una persona real, a menudo a través de Internet. Ejemplo: "Creamos un chatbot para responder a las preguntas frecuentes de los usuarios y mejorar el servicio de atención al cliente".

Contenido generado por usuarios

Contenido que crean los usuarios de una plataforma online, como por ejemplo, vídeos, comentarios o entradas de blog. Ejemplo: "La mayoría de las redes sociales publican y comparten contenido generado por los usuarios".

Anuncio de banner

Tipo de anuncio que aparece en páginas web y aplicaciones móviles, disponible en varios formatos como, por ejemplo, imágenes, GIF animados o rich media. Ejemplo: "Gracias a los anuncios de banner consigo atraer clientes nuevos a mi sitio web".

Extensiones de anuncio

Información adicional que se puede mostrar opcionalmente debajo de un anuncio de búsqueda. Ejemplo: "Decidimos incluir en nuestros anuncios, extensiones con enlaces al sitio web para que los usuarios tuvieran más opciones de acceso".

Clic

Cuando los usuarios visitan un sitio web a través de un anuncio. En la mayoría de las campañas de SEM, se paga únicamente cuando el anuncio recibe un clic. Ejemplo: "Mi anuncio 'Fotos de cachorros preciosos' recibe muchos más clics que mi otro anuncio, 'Fotos de gatitos preciosos'".

Enlace

Texto o imagen que incluye un enlace de un sitio o página web a otro. Ejemplo: "Empecé a recibir una gran cantidad de visitantes después de que un importante blog de decoración incluyera un enlace a mi sitio web".

Porcentaje de clics

Número de veces que los usuarios hacen clic en un elemento que les interesa, por ejemplo, un anuncio, en comparación con el número de veces que están expuestos a él. Ejemplo: "Mis anuncios de pintor de fachadas registran un porcentaje de clics del 2%, y los de murales interiores, menos del 1%".

Índice

Catálogo de páginas web y contenido digital en el que se pueden realizar búsquedas, y que los motores de búsqueda emplean para mostrar resultados relevantes. Ejemplo: "Antes de que mi sitio web apareciera en el índice del motor de búsqueda, a los usuarios no les aparecía mi sitio cuando buscaban 'murales de interior'".

Pago por clic

Sistema publicitario por el cual los anunciantes pagan cuando los usuarios hacen clic en sus anuncios. Ejemplo: "Voy a usar anuncios de pago por clic para promocionar mi nueva línea de falsos acabados".

{[ ((lesson.showTranscript) ? 'Ocultar' : 'Ver transcripción') ]}

Aspectos clave

Debes ver el vídeo HTML5: Ejemplo de formulario en el que se desarrolla un ejemplo completo de formulario en HTML5.

Recuerda que los nuevos controles de formulario de HTML5 es una de sus mejores características.