iDESWEB

Introducción al desarrollo web, primer curso MOOC sobre desarrollo web en español

iDESWEB - Introducción al desarrollo web, primer curso MOOC sobre desarrollo web en español

Introducción al posicionamiento (SEO): conceptos básicos

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Olga Carreras, consultora en experiencia de usuario y autora del blog “Usable y accesible”. En este vídeo os voy a explicar qué es SEO y por qué es importante para vuestros desarrollos web.

Realicemos una búsqueda en Google, vamos a buscar por ejemplo “hoteles”.

La página de resultados que muestra un buscador tras realizar una búsqueda se denomina SERP. En una SERP podemos distinguir dos tipos de resultados.

Los resultados naturales u orgánicos, en la parte central de la página, que son los que están basados en el algoritmo que aplica el buscador, de manera objetiva, para determinar que resultados son más relevantes para esa búsqueda concreta, por tanto no puede comprarse aparecer o no en los resultados orgánicos, o aparecer en una u otra posición.

El segundo tipo de resultados son los resultados patrocinados, anuncios publicitarios de pago, comprados mediante Google Adwords, situados encima y a la derecha de los resultados orgánicos.

SEO, “Optimización para Motores de Búsqueda” o más común en español “Posicionamiento en buscadores” o “Posicionamiento orgánico”, es el conjunto de técnicas para mejorar la visibilidad de un sitio web en los resultados de búsqueda orgánicos de los diferentes buscadores.

El objetivo principal es aparecer en las primeras posiciones para determinados términos de búsqueda o palabras clave.

Por el contrario, la disciplina que se encarga de la contratación, gestión y análisis de los enlaces patrocinados en los buscadores se denomina SEM o “Marketing en Buscadores”.

A menudo hablamos de posicionamiento en buscadores como sinónimo de posicionamiento en Google, puesto que es el buscador más usado en el mundo.

En España es el buscador que utiliza más del 90% de los usuarios, pero no hay que olvidar que este porcentaje de uso es diferente según el país, por ejemplo vemos que es menor en Estados Unidos y que hay países, como por ejemplo China, en los cuales Google no es el buscador más usado.

¿Por qué es importante aparecer en las primeras posiciones de los resultados orgánicos del buscador?

Porque mejorar el posicionamiento orgánico de una página web, para una búsqueda determinada, aumenta las probabilidades de que esa página sea visitada por el usuario que está realizado esa búsqueda concreta, es decir, hay más probabilidades de que haga clic en nuestro resultado. Esto supone más visitas al sitio web, que podría traducirse por ejemplo en más ventas si hablamos de un ecommerce o de más alumnos inscritos si hablamos de una universidad.

Numerosos estudios de eye-tracking han demostrado que la mirada del usuario se concentra en los tres primeros resultados orgánicos de la SERP, un área denominada “triángulo dorado”. Y a medida que nos alejamos de estos primeros puestos el porcentaje de clics, como vemos, cae drásticamente.

El porcentaje de clics cae más aun cuando nos alejamos de la primera página de resultados.

En términos generales, porque como se observa en la gráfica, el primer resultado de la segunda página genera más visitas que el último resultado de la primera página. Es decir, aparecer en la posición 11 es mejor que aparecer en la posición 10.

También hay estudios sobre cómo influye cada uno de los elementos de un resultado de búsqueda en la decisión de discriminarlos y seleccionar uno u otro resultado.

En los resultados orgánicos, los usuarios se fijan casi la mitad del tiempo (el 44% del tiempo) en el snippet, que es la descripción de la página o fragmento de texto con la información más cercana a las palabras de la consulta.

Seguido del título, con un 39% del tiempo y por último se fijan en la URL, con un 17% del tiempo.

Aunque los porcentajes varían en función del tipo de búsqueda, como se puede consultar en el estudio que se cita en pantalla.

Pero ¿cómo funciona Google? ¿En qué se basa para determinar la relevancia de nuestra web respecto a la búsqueda que se ha realizado?

El robot de búsqueda de Google (Googlebot) rastrea contenido en Internet de forma continua y automática para el índice de Google, siguiendo los enlaces de las páginas e indexando de esta manera miles de millones de páginas que se almacenan en miles de máquinas. Es en este índice donde realmente realizamos nuestras búsquedas. Cuando se realiza una búsqueda en Google, no se busca en la Web, sino en el índice que Google hace de toda la Web, o al menos de la parte a la que puede acceder.

El algoritmo que aplica Google para determinar la relevancia de nuestra página para unos términos de búsqueda concretos, y en base al cual posicionar nuestra página en los resultados de búsqueda, es modificado con frecuencia y son más de 200 factores los que se tienen en cuenta.

El algoritmo de Google no se conoce con exactitud, pero sí muchos factores que influyen, como por ejemplo: el número, autoridad o temática de las páginas que enlazan con la nuestra, la velocidad de carga del sitio o que otorga prioridad a las páginas con contenido propio, actualizado y de interés para los visitantes.

Puedes consultar una recopilación de factores hecha en base a cientos de fuentes en la infografía que se cita en pantalla.

Las técnicas SEO para mejorar el posicionamiento de las páginas se centran por tanto en dos objetivos básicos.

Primero facilitar el rastreo y la indexación de las páginas de nuestro sitio por parte de los robots de los buscadores, y que esta se realice por determinadas palabras clave.

Y la segunda conseguir que Google considere nuestra página relevante para determinadas búsquedas.

Por tanto, una de las primeras cosas que debes plantearte desde el inicio es por qué palabras claves quieres posicionar tus páginas.

Google también puede penalizar un sitio web si considera que está empleando técnicas poco lícitas para mejorar su posicionamiento, lo que se denomina “black hat SEO” por contraposición a las buenas prácticas “white hat SEO”.

La mejor manera de mejorar el posicionamiento orgánico de nuestras páginas, que estas no sean penalizadas y que las variaciones en el algoritmo de Google no nos afecten, es seguir una serie de buenas prácticas.

Vamos a tratar estas buenas prácticas para mejorar el posicionamiento orgánico de vuestras páginas en la segunda parte de este vídeo que os invito a ver a continuación.

Ya para terminar, estas son las direcciones de mi blog, de mi web y de mi cuenta de Twitter. En ellas puedes encontrar información sobre mí y sobre mi trabajo, así como artículos relacionados.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es

Muchas gracias por tu atención.

Google Maps: inserción de un mapa personalizado

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un mapa personalizado de Google Maps en una página web.

En el vídeo anterior “Google Maps: inserción de un mapa”, te expliqué cómo insertar un mapa sencillo en una página web.

En este vídeo te voy a explicar cómo insertar un mapa personalizado, es decir, un mapa en el que se muestra información de nuestro interés.

Se puede mostrar texto, imágenes, vídeos.

Muy importante, lo que te voy a mostrar a continuación puede ser que sólo funcione si la página está publicada en Internet o en un servidor web propio. Con una página local puede ser que no funcione correctamente.

El acceso a la herramienta de creación de mapas personalizados lo podemos hacer de diferentes formas. Por ejemplo, [PULSAR] podemos acceder a través de esta URL.

O también podemos, en Google Maps, pulsar en el cuadro de búsqueda y se desplegará la opción de “Mis mapas”.

Vamos a crear un mapa personalizado.

En Google Maps, para que aparezca la opción de “Mis mapas” tengo que estar dentro de mi cuenta de usuario de Google, ya que mis mapas se asocian, se almacenan en mi cuenta. Si no estoy dentro de mi cuenta pues no aparecerá la opción.

Una vez que esté ya registrado, puedo acceder a “Mis mapas” y puedo crear un mapa nuevo.

Se abre una nueva pestaña en la que se mostrará un mapa de Google Maps pero con una serie de opciones para personalizar el mapa.

En primer lugar puedo cambiarle el nombre al mapa y ponerle por ejemplo “Mapa de prueba para iDESWEB”. Le puedo poner una descripción si quiero.

A continuación puedo empezar a dibujar el mapa, por ejemplo, me voy a situar sobre la Universidad de Alicante y voy a buscar el edificio en el que se encuentra mi despacho y voy a situar un marcador, las chinchetas que aparecen sobre los mapas en Google Maps. Por ejemplo, la voy a situar aquí y le puedo poner un nombre, “Mi despacho”, le puedo poner también una descripción y lo guardo.

Ya tengo un marcador en mi mapa personalizado, que aquí puedo editar sus características. Puedo cambiar el color, por ejemplo, o puedo cambiar el icono y podría buscar un icono más apropiado. Por ejemplo, podría poner un ordenador.

A continuación voy a buscar otro elemento. Por ejemplo aquí este comedor, este restaurante y le voy a poner otro marcador. Y voy a editar otra vez el icono y como es un restaurante le voy a poner este icono. Y ya lo tenemos ahí. Y ahora por ejemplo voy a buscar otro restaurante en la Universidad de Alicante, este bar, y le voy a colocar otro icono más. Y le vuelvo a cambiar el icono.

Y ya tenemos aquí un mapa personalizado en el que se muestran tres marcadores que yo he definido.

Podemos dibujar más cosas, por ejemplo podemos dibujar líneas. Voy a añadir una línea que es la ruta desde mi despacho hasta el restaurante. Este es el camino que suelo realizar para ir a comerme un bocadillo. “Camino al restaurante”. Guardo.

Otra vez aquí si quiero puedo editar algunas propiedades, por ejemplo el ancho. Y puedo cambiar pues también el color. Y voy a dibujar otra línea más, ya la última, al otro restaurante.

Pulso aquí, añadir línea. Y este es el camino que me conduce. Y a este también le voy a cambiar el ancho y le voy a poner otro color.

Muy bien, ya tenemos nuestro mapa. Y ahora yo lo quiero publicar en una página web. Para ello en primer lugar tengo que compartirlo. Le doy a esta opción de aquí, compartir. Con esto puedo indicar si quiero que el mapa sea privado, solamente compartirlo con una serie de usuarios que yo introduzco. O puedo cambiarlo y que el mapa sea público en la Web, de forma que cualquier persona pueda acceder. Lo cambio a “Público en la Web” y ahora ya a este mapa puede acceder cualquier persona.

¿Cómo lo comparto? ¿Cómo obtengo el código necesario para insertarlo en mi página web?

Necesito un fragmento de código HTML para insertarlo en mi página web. Esto me lo proporciona el propio Google Maps. Vengo a esta opción de aquí, tengo una serie de opciones, un menú. Y le doy a “Insertar en mi sitio”. Pulso y se me proporciona un fragmento de código HTML que debo de pegar en mi página web. Lo copio y ahora me voy a una página de ejemplo que tengo realizada y lo pego. Evidentemente no tengo que cambiar nada de este código HTML. Bueno, podría cambiar aquí la anchura y la altura para que el mapa fuera más o menos grande.

Lo guardo, lo ejecuto. Y, se está cargando, mi mapa, que ya puedo pues utilizar. Y aquí aparecen las descripciones que yo he etiquetado en mi mapa. Y lo puedo usar como cualquier otro mapa de Google Maps.

Interesante, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Google Maps: inserción de un mapa

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un mapa de Google Maps en una página web.

Muy importante, lo que te voy a mostrar a continuación puede ser que sólo funcione si la página está publicada en Internet o en un servidor web propio. Con una página local puede ser que no funcione correctamente.

Insertar un mapa de Google Maps en una página web es muy sencillo.

En primer lugar, nos vamos a Google Maps y centramos el mapa en la parte que queremos insertar, la parte que queremos que aparezca en nuestra página web. Por ejemplo, estoy centrando el mapa en la Universidad de Alicante, esto es lo que yo quiero que aparezca en mi página web.

A continuación, me vengo aquí al engranaje mecánico, pulso y me aparece un menú contextual. En este menú selecciono la opción “Compartir e insertar mapa”.

Tengo dos opciones para compartir el mapa. Puedo simplemente compartir un enlace al mapa o la opción de insertar mapa que es la que yo voy a elegir.

Puedo configurar el tamaño del mapa. Puedo tener un mapa pequeño, mediano, grande o incluso podría personalizar el tamaño del mapa. Voy a dejarlo como grande y aquí se me proporciona el código HTML que debo de copiar a mi página web. Lo debo de copiar todo.

Lo copio y me voy a una página web sencilla, una página web de ejemplo que he hecho para insertar el mapa.

Esta URL que aparece aquí lleva las coordenadas del mapa que yo quiero insertar. Lo guardo y lo ejecuto en un navegador. Y ya se carga el mapa centrado sobre la Universidad de Alicante que es la zona que yo había seleccionado. Y este mapa es un mapa interactivo, yo lo puedo mover, puedo hacer zoom si deseo o si quiero lo puedo ver en grande en Google Maps.

Como ves es muy sencillo insertar un mapa, me voy aquí a la rueda mecánica y elijo la opción “Compartir e insertar mapa” y la opción “Insertar mapa”.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Cómo comprar un dominio de Internet

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Armando Suárez Cueto, profesor de informática de la Universidad de Alicante, y en este vídeo —que forma parte del curso “Introducción al desarrollo web”— te voy a contar un par de cosas que debes saber para conseguir tu dominio propio en internet.

Ya tienes tu sitio web. Lo normal es que lo hayas desarrollado en tu ordenador, ahora es el momento de publicarlo y la URL es un elemento importante, cuanto más simple, corta y diferente a las demás, mejor. Para eso necesitas un dominio pero, ¿cómo se compra un dominio?

¿Está libre el dominio que yo quiero?

Ten en cuenta que, para elegir nombre de dominio, no puedes pedir cualquier cosa, hay normas, incluso de sintaxis. También hay términos prohibidos.

Pongamos que el dominio es lechugas.com. Comprueba primero que nadie lo ha registrado antes. Es tremendamente fácil, hay un protocolo de internet, “whois”, que te lo dice.

Podemos usarlo desde la página del gobernante supremo de internet, la ICANN. Lo primero que vemos es un resumen de los datos de registro de lechugas.com. Sí, ya está “comprado” y lo tiene la organización, la empresa, “DOMAINS FOR SALE, DBA NETEGG”. En realidad, este resumen sale de procesar el resultado de consultar con el protocolo whois por nuestro dominio deseado. En este aparece toda la información pública relacionada con el registro.

¿Y si preguntamos por lechugas.net? Este dominio sí está disponible, este sí lo puedo comprar.

¿Qué son los agentes registradores?

También es cierto que hay cientos de sitios web que dan esa y más información. Busca “whois” en tu navegador y te saldrán un montón de opciones. Yo voy a la primera que me ha salido. En whois.com nos vuelven a decir que no, que lechugas.com no puede ser, tampoco lechugas.es, pero lechugas.net sí. ¿Te interesa?

Es normal, whois.com, whois.net y muchos más parecidos son empresas que comercian con dominios de internet. Estas empresas se han puesto en contacto con el ICANN y, cumpliendo una serie de requisitos y peajes, se dedican a esto.

El propio organismo ofrece un listado de registradores reconocidos.

Eso para los dominios de primer nivel .com, .net, y similares. Para otros, por ejemplo, para el dominio .es, España, habría que acudir a “dominios.es”, el servicio de Red.es —una entidad pública— encargado del registro en este dominio en particular. Ellos mantienen su propia lista de empresas que tramitan el registro, sus “agentes registradores”.

¿Cuánto me va a costar?

Depende. Hay que tener cuidado con esto, unos ofrecen únicamente el registro del dominio y otros, además, servicios de hosting, housing, cloud…

Hablando estrictamente de nombres de dominio, comprar, comprar no se puede. Los nombres de dominio, digamos, se alquilan durante un periodo de tiempo. Lo cierto es que hay que buscar un poco para conseguir el mejor precio, hay mucha competencia y mucho que leer antes de pagar.

En una empresa muy conocida insistimos en nuestro lechugas.com. Ya sabíamos que estaba ocupado pero lechugas.net lo podemos conseguir por 10 €. Contratemos.

¿Qué te decía?

Esto es más o menos habitual. Esa competencia lleva a ofertas y muchas suelen ser de primer año: te cobramos 10 ahora pero 25 a partir del siguiente.

Hay una opción interesante que es el whois privado. Más o menos, para evitar que tus datos personales aparezcan en las bases de datos públicas de dominios en internet, la empresa pone los de una oficina suya virtual. Si alguien quiere contactar contigo, no podrá hacerlo directamente, antes debe pasar por el registrador. Así se evita, entre otras cosas, el spam.

Una vez elegida nuestra tarifa, daremos datos personales asociados al dominio, pagaremos y esperaremos 24 o 48 horas hasta confirmar que es nuestro.

¿Cómo lo renuevo?

Prácticamente igual que cuando adquieres por primera vez. Generalmente, unos días antes de su expiración, elige por cuánto tiempo más y paga lo que te digan. Red.es exige que no pasen más de 10 días para aportar la prueba de haber efectuado el pago. Como tú pagas al registrador y el registrador a Red.es… paga cuando te digan.

¿Por qué hay dominios registrados pero sin usar?

Antes esto era un festival. Se reservaban dominios libres que no se iban a utilizar, simplemente se adueñaban de ellos sabiendo que el dueño natural lo iba a reclamar. Y solo lo ceden por una “módica” cantidad. Se sigue haciendo, pero ya hay legislación suficiente como para poder evitar esta especie de secuestro.

En esa línea, ciertos nombres de dominio están bloqueados o con los que corres el riesgo de que te lo expropien sin más. Solo un ejemplo: reyfelipe6.es.

Nada más. Me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y cómo contactar conmigo.

Muchas gracias y hasta la próxima.

Picasa: inserción de un álbum de fotos

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un álbum de fotos de Picasa en una página web.

Antes de ver cómo se hace, un pequeño detalle.

A raíz de la aparición de la red social Google+, [PULSAR] el interés de Google por Picasa ha disminuído, a favor de la opción de fotos de Google+.

Si cuando accedes a tu álbumes de fotos en Picasa te aparece Google+, intenta acceder con esta otra dirección para volver al modo clásico.

Vamos a ver cómo insertar un álbum de fotos de Picasa en una página web.

Estos son los álbumes de fotos que tengo en mi cuenta en Picasa. Supongamos que queremos insertar las fotos de uno de ellos. En concreto vamos a insertar las fotos de este álbum de fotos, “Bernia”. Lo selecciono, entro en él y lo que tengo que hacer es buscar la opción “Enlazar a este álbum”. Tengo varias opciones, puedo incrustar el álbum directamente, vamos a probarlo. Copio el código y me lo llevo a una página de ejemplo que he realizado. Es una página muy sencilla donde simplemente copio todo el código. Le doy a guardar y lo visualizo en un navegador. Y aquí me aparece el álbum de fotos que simplemente pulsando sobre él, “Abrir enlace en una pestaña nueva”, me lleva al álbum de fotos.

Pero yo quiero ir un poco más allá. Yo quiero que me vayan cambiando las fotos una a una. Para ello, tengo que usar esta otra opción que es “Inscrustar proyección de diapositivas” pulso y me aparece este cuadro de diálogo, esta pestaña para copiar el código del álbum de fotos con presentación de diapositivas. Tengo aquí varias opciones, puedo cambiar el tamaño, por ejemplo lo puedo poner más grande, “Extra grande”. Y puedo mostrar el título de las fotos y puedo activar la reproducción automática.

Supongamos que yo quiero que mi álbum de fotos se muestre así, copio este código, “Copiar”, me voy a mi página web y voy a sustituir el código anterior.

Muy importante, este código, la presentación con diapositivas hace uso de un objeto Flash. Y si el dispositivo no admite Flash, como por ejemplo una tableta de tipo iPad o un teléfono móvil iPhone, pues no se va a poder ver el álbum de fotos.

Lo guardo, lo visualizo en un navegador y aquí tenemos el álbum de fotos en el que las fotos van cambiando automáticamente porque así yo lo he configurado y fíjate que aparece el título de la foto.

El álbum de fotos aparece con el tamaño de 600 píxeles que yo le he indicado. No hace falta que te vayas al configurador para cambiar el tamaño, lo puedes cambiar a mano.

¿Cómo? Es muy sencillo. En el código HTML simplemente busca los atributos width y height. Por ejemplo aquí yo le puedo cambiar y le puedo poner 1024 píxeles de ancho y 800 píxeles de alto. Lo guardo, vuelvo a mi página web y ahora el álbum de fotos pues aparecerá más o menos aquí, mucho más grande. Vamos a verlo, y aquí lo tenemos.

Sencillo, ¿verdad?

Simplemente, copiamos el código que nos proporciona Picasa, lo pegamos en nuestra página y ya tenemos el álbum de fotos.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Twitter: inserción de un botón

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un botón de Twitter en tus páginas web para que los visitantes puedan tuitear tus páginas.

Hoy en día, es muy normal que en cualquier página aparezca un botón con el logo de Twitter. Este botón permite tuitear la página web en la cuenta de Twitter del usuario. ¿Parece difícil lograr esto? No, es muy sencillo, como vas a ver a continuación.

Lo que te voy a mostrar está explicado en la página de Twitter.

En primer lugar, en la página, en el sitio web de Twitter busca el enlace “Desarrolladores”, que enlaza con el sitio web dedicado al desarrollo de aplicaciones con el API de Twitter.

En esta página busca el enlace “Documentation”.

A continuación se puede navegar a varias páginas.

Por ejemplo, “Twitter for Websites”.

En esta página se explican muchas cosas, se explica cómo crear un botón para tuitear o seguir a una persona, o como insertar un timeline en una página web.

Si pulsamos en “Create a Tweet or Follow Button”, llegamos a la página, al asistente al generador de botones que estamos buscando.

O también, a partir de las páginas anteriores, podemos navegar a “Tweet Button”.

En esta página nos explican cómo funciona el botón para crear un tuit. Lo que estamos buscando es el “Tweet Button Generator”.

Te voy a mostrar con un ejemplo real cómo se inserta un botón de Twitter.

He preparado una página web sencilla en la que voy a insertar el botón para tuitear. El botón lo voy a colocar aquí, al principio de la página. Esta es la página que he creado, con un tema, con una noticia relacionada con Twitter y el botón quiero que aparezca justo aquí.

Para ello, en el generador de botones, en el asistente que te he mostrado antes que ofrece el sitio web de Twitter elegimos el tipo de botón que queremos crear. En este ejemplo lo que quiero es un botón para tuitear, un botón para compartir un enlace. Así que elijo este botón y ahora tengo una serie de opciones que puedo configurar. Puedo por ejemplo elegir que se comparta la página actual, la URL de la página actual o yo podría fijar una URL específica. En principio voy a dejar todas las opciones marcadas, excepto esta, voy a elegir que quiero un botón grande.

Fíjate aquí, aparece una previsualización. Si desactivo la opción botón grande verás que el botón es más pequeño. Vamos a dejarlo en botón grande. Y la opción esta de idioma ahora te mostraré lo interesante que es. En principio vamos a dejarlo en “Automatic”.

El generador me ha generado este código, este código HTML y JavaScript, que debo de copiar en mi página web. Pulso, y estando seleccionado todo el código, esto es muy importante, tiene que estar seleccionado todo el código, pues simplemente botón derecho del ratón, copiar y me voy al código de mi página y en el punto en el que yo quiero insertar el botón simplemente pego el código.

¡Muy importante, tengo que pegar todo el código! Si no lo pego completamente, el botón no funcionará. De aquí no necesitas entender nada, simplemente copiar y pegar.

Bien, ya está. Yo ya puedo grabar la página y me puedo ir al navegador y puedo comprobarlo. Fíjate que aquí, cuando le dé a recargar aparecerá el botón para tuitear. Y si yo pulso en este botón, se abre la ventana para compartir esta página en Twitter.

Bien, ¿interesante, no?

Vamos a poner ahora otro botón. Vamos a poner el botón de seguir. Pulso en “Follow” y me vuelven a salir una serie de opciones. Las dejo como están, copio el código, me lo llevo a mi página web y ahora lo voy a colocar en este punto. Lo pego, vuelvo al navegador y le doy a recargar.

Tengo el botón de tuitear que tenía antes y ahora el nuevo botón de seguir. Fíjate que pone “Follow”, no pone “Seguir”.

Aquí tenemos en el configurador de botones una opción para elegir el idioma, y te he dicho antes que lo iba a dejar en automático. El botón está saliendo en inglés. ¿Por qué no me sale en español?

Si vuelvo a mi código fuente de la página, comprobamos que no he fijado el idioma de la página, no he puesto el atributo lang. Si le pongo lang=“es”, español, y grabo la página, ahora recargo mi página y fíjate como “Follow” cambia a “Seguir”.

¿Cómo es esto posible? Es muy sencillo, el código de Twitter que yo he pegado detecta, busca el idioma de la página. Fíjate lo importante que es, configurar, definir el idioma de una página web. Se emplea para muchas cosas, y este es un buen ejemplo de ello, para que el código insertado por terceras partes aparezca correctamente en el idioma que queremos.

Y esto es todo, en este vídeo te he mostrado cómo emplear el generador, el configurador de botones de Twitter para insertar un botón en tu página web.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

Twitter: inserción de un tuit

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un tuit cualquiera en una página web.

Vamos a ver el ejemplo.

En primer lugar vamos a localizar el tuit de Twitter que voy a insertar. Pues por ejemplo me voy a mis tuits y localizo uno que quiero insertar, por ejemplo este que pone “Vídeo: Accesibilidad web: el correo de Iberia”.

Simplemente lo que tengo que localizar es estos puntos de aquí, “Más” y le doy a “Insertar Tweet”. Y aparece este panel con el contenido que yo debo de copiar, el código HTML que debo de copiar en mi página web. Así que le doy a copiar y a continuación me voy a esta página sencilla que he hecho para poder insertar el código que me proporciona Twitter. Pego el código y en principio no necesito entender nada de todo este código, simplemente lo pego, guardo la página y la visualizo en un navegador.

Se ha cargado la página, ya me aparece el tuit, pero la página parece que sigue cargando y el tuit no me aparece con el estilo de presentación normal que vemos en muchas páginas.

¿Qué está ocurriendo?

Bueno, vamos a volver al código fuente de la página, el error lo tenemos aquí en el script que se está cargando, el atributo source.

Este código de Twitter está preparado para funcionar en una página que está publicada en Internet, pero en este caso mi página no está publicada en Internet, se está ejecutando localmente. Por eso aparece aquí el esquema, el protocolo “file:”.

Al intentar cargar el código JavaScript que es el que va a mostrar el tuit con un estilo de presentación, no se puede cargar, porque aquí falta poner “http:”. Esto como digo sólo hay que ponerlo cuando se esté ejecutando en local la página; si la página estuviese publicada en Internet, no haría falta. Yo ahora lo coloco, le doy a grabar, vuelvo al navegador, le doy a recargar y ¡magia! Ya me aparece el tuit con el formato de presentación visual y además también podemos ver el vídeo, el material multimedia que acompaña al tuit. Y todo funciona, lo puedo yo reproducir sin problemas.

¿Sencillo, verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

YouTube: inserción de un vídeo

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un vídeo de YouTube en una página web.

¿Crees que es difícil lograr que un vídeo cualquiera de YouTube aparezca en una página web?

Como te voy a mostrar a continuación, es muy sencillo, pero debes llevar un poco de cuidado.

En este ejemplo, vamos a insertar el vídeo “Evolución de la Web: de la página web a la aplicación web” en una página web que yo he realizado.

Una vez localizado el vídeo en YouTube tienes que buscar la opción “Compartir”. Hay tres métodos para compartir un vídeo: la opción “Compartir”, la opción “Insertar” y la opción “Enviar por correo”.

Vamos a emplear la opción “Insertar”, que nos permite insertar el vídeo en una página web. Tenemos aquí varias opciones. Podemos, por ejemplo, indicar que queremos insertar todo el vídeo o la lista de reproducción en la cual se encuentra el vídeo. En este caso, si queremos insertar la lista de reproducción podemos elegir a partir de qué vídeo, a partir del vídeo actual o a partir del primer vídeo de inicio de la lista de reproducción y también podemos elegir la forma de visualizar el vídeo cuando lo insertamos. Podemos cambiar el tamaño por defecto que aparece y podemos indicar si queremos que se muestren los controles del reproductor, reproducir, parar, avanzar y si queremos que se muestre el título del vídeo y acciones adicionales del reproductor.

Voy a dejar las opciones por defecto. Lo que voy a desactivar es “Compartir con la lista de reproducción” porque solamente quiero insertar el vídeo actual. Fíjate que cuando activo o desactivo la opción se modifica este código de aquí. Este código de aquí es el código que yo voy a copiar para insertar en mi página web. Lo dejo con la opción de no compartir la lista de reproducción, copio el código, muy importante, debo de copiar todo el código, si me dejo una parte, seguramente fallará. Lo copio y me lo llevo a mi página web.

Aquí tengo una página web sencilla en la que pego mi código fuente.

Lo guardo, le doy a ejecutar y, aquí debajo del encabezado <h1>, debajo del encabezado <h1>, debería de salir el vídeo. Sin embargo no va a salir. Puedo estar aquí esperando y esperando, y al final el vídeo no saldrá, seguramente saldrá un mensaje de error. Fíjate que está el icono de cargando la página.

¿Cuál es el problema?

Bueno, el problema está aquí en el atributo source, en la URL de carga del vídeo. El código de YouTube está preparado para insertar un vídeo en una página “viva”, una página real que está publicada en Internet.

En este caso mi página no está publicada en Internet, mi página la estoy ejecutando en local. Fíjate que aparece el protocolo, el esquema file. Este código está así porque está preparado tanto para conexiones http como conexiones https. El navegador incluirá aquí delante http o https según el tipo de página en la que estemos.

Esto sólo funciona cuando la página se ha transmitido a través de http, es decir, cuando la página está realmente en Internet. Como en este caso, como he dicho, está en local, el prefijo http, el esquema lo tengo que colocar yo a mano. Así que le pongo “http:”, lo grabo, ejecuto y ahora sí que sale el vídeo, el vídeo que funciona sin problemas. Yo puedo avanzar, le puedo dar a pausa o incluso podría ponerlo a pantalla completa, como puedes observar.

Así que, repito, simplemente hay que copiar el código de inserción, se copia en nuestra página web y a funcionar, salvo este pequeño detalle que hay que tener en cuenta cuando estamos ejecutando la página en local. Si la página está realmente publicada en Internet, con esto es suficiente.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

CSS: definir el estilo del texto (3)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.

En la segunda parte de este vídeo, vimos las propiedades que comienzan con el prefijo text: text-aling, text-indent, text-decoration y text-transform.

En este vídeo vamos a ver cuatro propiedades que se emplean para configurar la presentación del texto: letter-spacing, word-spacing, line-height y white-space.

La propiedad letter-spacing define la distancia de separación entre los caracteres de un texto.

El espacio se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

Esta propiedad puede tomar un valor negativo, tal como se muestra en este ejemplo.

Hay que llevar mucho cuidado con su uso, ya que los resultados pueden ser desastrosos, tal como se puede ver en este ejemplo.

La propiedad word-spacing es similar a letter-spacing, pero define el espacio entre las palabras.

Al igual que letter-spacing, la distancia de separación se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

Esta propiedad también puede tomar valores negativos y los resultados también pueden ser desastrosos, así que se tiene que usar con mucho cuidado.

La propiedad line-height especifica la altura mínima entre las líneas de texto en un elemento como puede ser un párrafo.

Otra vez, la altura de la línea se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo se visualiza con la altura por defecto, en el segundo párrafo se ha aumentado a 1.5em o un 150%, y en el último párrafo a 2em o un 200%.

Y ya por último la propiedad white-space que define cómo se comportan los espacios en blanco dentro de un elemento.

En HTML, los espacios en blanco y los saltos de línea no son significativos.

Este párrafo se representa de esta forma en un navegador web: entre las palabras “uno”, “dos”, “tres”, “cuatro”, “cinco” y “seis” sólo se visualiza un espacio en blanco, aunque en el código haya más espacios. Y la frase “Y esto está en otra línea” no aparece en otra línea, aparece en la primera línea.

Este comportamiento se puede modificar con la propiedad white-space, que puede tomar los valores normal, pre, nowrap, pre-wrap y pre-line.

En este ejemplo, al párrafo del ejemplo anterior se le aplica la propiedad “white-space: pre”, que produce que los espacios en blanco y los saltos de línea se respeten. Es equivalente a la etiqueta <pre> de HTML para definir texto preformateado.

El segundo párrafo es la forma normal de visualizar un párrafo: si el texto del párrafo no cabe en el ancho disponible, el navegador introduce un salto de línea para que el texto continúe en la línea siguiente.

Sin embargo, la propiedad “white-space: nowrap” anula este comportamiento y la línea no se corta, continúa más allá del ancho de la ventana del navegador y se tiene que mostrar la barra de desplazamiento horizontal.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.

CSS: definir el estilo del texto (2)

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar las principales propiedades de CSS que se existen para definir el estilo del texto.

En la primera parte de este vídeo, vimos la principales propiedades que comienzan con el prefijo font: font-family, font-size, font-weight, font-style y font-variant.
En este vídeo vamos a ver unas propiedades de CSS que comienzan con el prefijo text-.

En concreto, vamos a ver las propiedades text-align, text-indent, text-decoration y text-transform.

La propiedad text-align se emplea para definir la justificación o alineación del texto.

Esta propiedad puede tomar los valores left, a la izquierda, right, a la derecha, center, centrado y justify, justificado, es decir alineado a la izquierda y a la derecha a la vez.

En este ejemplo podemos ver el mismo párrafo alineado a la izquierda y a la derecha.

Y en este otro ejemplo, el primer párrafo está centrado y el segundo justificado, está alineado a la izquierda y a la derecha.

La propiedad text-indent especifica la sangría de la primera línea de un bloque de texto.

La sangría se puede indicar utilizando las unidades de medida que se emplean para indicar el tamaño del texto con la propiedad font-size.

En este ejemplo, el primer párrafo no posee sangría en la primera línea, mientras que en el segundo se ha definido una sangría de un 1cm.

En este otro ejemplo, la primera línea posee una sangría relativa del 50%, el 50% del ancho disponible para mostrar el texto.

La propiedad text-decoration se emplea para definir algunos adornos que se pueden añadir al texto.

Esta propiedad puede tomar los valores none, ninguno, underline, subrayado, overline, para el subrayado por la parte superior, line-through para el tachado y blink para el parpadeo.

En este ejemplo se muestra el uso de la propiedad text-decoration con cuatro valores: underline, overline, line-through y blink.

Por último, la propiedad text-transform se emplea para convertir en mayúsculas o minúsculas un texto.

Esta propiedad puede tomar los valores capitalize, uppercase, lowercase y none.

En este ejemplo se muestra el uso de la propiedad text-decoration con los valores capitalize, uppercase y lowercase.

El valor capitalize coloca en mayúsculas la primera letra de cada palabra, mientras que uppercase transforma a mayúsculas todo el texto y lowercase a minúsculas.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.