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

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.

CSS: definir el estilo del texto (1)

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 se define con CSS el estilo del texto.

En CSS existen muchas propiedades para definir el estilo del texto, en este vídeo vamos a ver el conjunto de propiedades que comienzan con el prefijo font-.

En la recomendación de CSS1, que se publicó en diciembre de 1996, se definían las propiedades font-family, font-style, font-variant, font-weight y font-size, que son las que vamos a ver en este vídeo.

La propiedad font es un resumen de las anteriores y permite modificar las anteriores con una sola regla.

CSS3 es muy complejo y se ha dividido en varios módulos.

Existe un módulo específico para el tipo de letra llamado “CSS Fonts Module Level 3”, que añade propiedades nuevas. La mayoría de los navegadores actuales no admiten estas propiedades. Además, estas propiedades son muy específicas y es muy improbable que las vayas a utilizar alguna vez.

Las nuevas propiedades de CSS3 permiten un ajuste tipográfico muy fino y tienen sentido en la actualidad porque la resolución de los dispositivos de visualización ha aumentado considerablemente.

Por ejemplo, compárese la resolución VGA de 640×480, tan común hace 15 años, con la resolución FullHD 1920×1080 que se ha convertido en el estándar actual.

Las propiedades que vamos a ver a continuación son font-family, font-size, font-weight, font-style y font-variant.

Font-family permite modificar la familia tipográfica, el tipo de letra.

Existen miles y miles de familias tipográficas. Como existen tantas familias tipográficas, se han propuesto varias clasificaciones para poder ordenarlas y compararlas.

Una de las más conocidas es la clasificación tipográfica de Francis Thibaudeau, que divide las familias tipográficas en tres grupos: con serifas, sin serifas y otras tipografías.

Las serifas son las terminaciones, las decoraciones o adornos que aparecen en los extremos de algunas letras, como en este ejemplo la letra s, la r, la i y la f.

Estas terminaciones proporcionan un aspecto más elegante y clásico y facilitan la lectura en los documentos impresos.

En los tipos de letra sin serifas estas terminaciones no aparecen. Los tipos de letra sin serifas también se conocen en español como de “palo seco”.

A la hora de especificar la familia tipográfica que se quiere emplear se puede indicar una lista de tipos de letra.

Por ejemplo, en este código, para el elemento h1, se ha indicado el tipo de letra Times New Roman y el tipo Georgia. Y para el elemento p, un párrafo, el tipo de letra Arial y el tipo Helvetica.

Un navegador web intentará emplear el primer tipo de letra definido. Si no puede utilizarlo, pasará al segundo tipo de letra, después al tercero y así sucesivamente hasta el final. Si ninguno de los tipos de letra definidos puede ser utilizado, el navegador utilizará un tipo de letra por defecto. Pero quizás el tipo de letra no se ajuste a nuestro diseño.

Para solventar este problema, se recomienda indicar siempre un tipo genérico al final de la lista de tipos de letra.

Las familias o tipos genéricos son serif y sans-serif para los tipos de letra con serifas y sin serifas.

cursive para tipografías que simulan la escritura a mano, como por ejemplo Lucida Handwriting.

fantasy para tipografías exageradas que se emplean en anuncios y pósteres.

Y monospace para las tipografías en las que cada carácter ocupa exactamente la misma cantidad de espacio horizontal.

Font-size especifica el tamaño de la letra, que se puede especificar de muchas formas.

Existen cuatro formas, de forma absoluta, relativa, mediante un tamaño especificado con distintas unidades de medida y mediante un porcentaje.

Font-weight permite seleccionar el peso del tipo de letra.

El peso es el grosor de los caracteres.

La propiedad font-weight puede tomar todos estos valores, pero normalmente sólo se emplean normal y bold.

La razón de ello es que, normalmente, una familia tipográfica no incluye todos los pesos existentes, sólo unos pocos. Por tanto, cuando se emplea una familia tipográfica conviene conocer sus características para saber lo que se puede usar.

Font-style permite seleccionar el estilo de la fuente, del tipo de letra.

La propiedad font-style puede tomar estos tres valores: normal, italic y oblique.

En esta imagen se representan dos letras con los tipos de letra Palatino y Baskerville.

El estilo oblicuo suele ser el estilo de letra normal que se ha inclinado, como si fuera una figura geométrica que ha sufrido una transformación.

Sin embargo, el estilo cursiva, italic, es un diseño específico de las letras con una inclinación y una forma distinta a la normal.

La última propiedad, font-variant, permite seleccionar variaciones del tipo de letra.

Esta propiedad puede tomar dos valores, normal y small-caps.

Small-caps en español es el tipo de letra versalita, letras mayúsculas cuyo tamaño es similar al de las minúsculas.

Antes de terminar, te invito a que utilices este configurador de tipos de letra que puedes encontrar en el Mozilla Developer Network.

Por ejemplo, aquí he elegido como variante versalitas, small-caps.

El tamaño lo he fijado a 24 pixels.

Y la familia tipográfica seleccionada es serif.

Este es un ejemplo de texto con el tipo de letra seleccionado.

En este otro ejemplo, he elegido el estilo cursiva, italic.

El peso es negrita y el tamaño 24 pixels.

La familia tipográfica seleccionada es sans-serif.

Por último, este es un ejemplo de texto con el tipo de letra seleccionado.

Ahora te invito a que veas la segunda parte de este vídeo.

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.

Evolución de la Web: de la página web a la aplicación web

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 ha sido la evolución de las páginas web, desde el concepto de página web a aplicación web.

Cuando Tim Berners-Lee publicó la primera página web a finales de 1990 en el CERN, la Web era muy distinta a como la conocemos en la actualidad. Las páginas web sólo tenían texto.

En los 25 años de historia de la Web, HTML, el lenguaje de marcado o etiquetado que se emplea para crear las páginas web
ha evolucionado poco a poco y se han ido desarrollando sucesivas versiones.

A la versión inicial del lenguaje se añadieron nuevas características, como las imágenes, las tablas o los marcos, que permitían dividir las páginas web en varias partes.

Las páginas web fueron evolucionando y cada vez contenían más imágenes.

Los diseñadores gráficos se incorporaron al desarrollo de las páginas web y se desarrolló una nueva disciplina, el diseño web.

Además, los navegadores web cada vez eran más potentes y las conexiones a Internet más rápidas, así que las páginas web cada vez mostraban más información.

Si se toma una web concreta, por ejemplo la web de la Universidad de Alicante, se puede observar cómo ha sido su evolución desde la primera versión del año 1996 hasta la versión actual del año 2014.

Durante los primeros cinco años la Web sólo servía para leer, para consumir contenidos, no existía mucha interacción con las páginas web.

Sin embargo, cuando se añadieron los formularios, la Web comenzó a cambiar.

Los formularios permitían un mayor grado de interacción entre el usuario y las páginas web.

Además, el lenguaje HTML incorporó la posibilidad de añadir nuevos tipos de contenidos a las páginas web, como audio, vídeo o animaciones.

Y los navegadores web se volvieron más rápidos y más potentes.
Todo ello ayudó a que las páginas web se transformaran en aplicaciones web, en inglés web apps, que permiten realizar a través de una página web las mismas tareas que tradicionalmente se realizaban mediante un software instalado en un ordenador a partir de un cd-rom.

Hoy en día, a través de una página web podemos enviar correos electrónicos, podemos jugar a juegos, podemos editar fotografías, podemos ver vídeos o incluso podemos editar los vídeos, todo ello a través de una página web.

Una de las principales ventajas de las aplicaciones web es que no necesitan actualizarse por parte del usuario final.

Cada vez que un usuario visita una aplicación web como por ejemplo Gmail está haciendo uso de la última versión disponible.

Otra ventaja importante de las aplicaciones web es la independencia de dispositivo, que permite que las aplicaciones web puedan ser usadas desde cualquier dispositivo que disponga de un navegador web, como un ordenador, una tableta o un teléfono móvil.

Esto se logra con la adaptación de las aplicaciones web al dispositivo en el que se está ejecutando en cada momento.

Otra ventaja importante es la ubicuidad: a las aplicaciones web se puede acceder y trabajar con la misma información desde cualquier sitio, por ejemplo, desde el ordenador del trabajo, desde el ordenador de casa, o desde el teléfono móvil.

Esta ventaja de las aplicaciones web se resume en el concepto de computación en la nube o cloud computing, que va a hacer que el concepto de ordenador personal desaparezca en breve, porque cualquier ordenador o cualquier dispositivo se comportará como si fuera nuestro ordenador personal.

Las aplicaciones web son complejas de desarrollar ya que hace falta poseer conocimientos de programación y de manejo de bases de datos.

Ya por último, recientemente ha aparecido el concepto de mercado de aplicaciones web, un repositorio en el que se pueden publicar aplicaciones web para que sean usadas por otras personas.

Dos de los mercados más populares son el Google Chrome Web Store y el Firefox Marketplace.

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.

HTML5: de HTML4 a HTML5

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 emplear los nuevos elementos semánticos de HTML5 para transformar la estructura de una página web de las versiones antiguas de HTML a la última versión.

En las versiones anteriores de HTML existían dos enfermedades terribles, la spanmania y la divitis. Estas enfermedades pueden seguir existiendo en HTML5, así que presta mucha atención a este vídeo, ya que te voy a explicar cómo las puedes evitar.

En la Web se pueden encontrar varios artículos que explican los síntomas de estas dos enfermedades y sus posibles curas.

Incluso en la Wikipedia se puede encontrar un artículo dedicado a las etiquetas span y div en el que se comenta el abuso en el uso de estas dos etiquetas.

Respecto el abuso en el uso de la etiqueta span, la spanmania, es muy común encontrar situaciones como esta.

O incluso a veces he visto barbaridades como esta otra, en la que se emplea un span para envolver todo el contenido de una página web.

Estos dos errores se arreglan fácilmente, ya que se pueden emplear las etiquetas que ya existen en el código y en muchas casos no hace falta añadir la etiqueta span.

Respecto a la etiqueta div, la divitis, es muy común encontrar situaciones como esta, en la que se anida un div dentro de otro div, y de otro div, y así varias veces.

Hay páginas web en las que se pueden encontrar verdaderas barbaridades, como la página principal de un famoso diario deportivo que tiene más de mil etiquetas div.

En HTML5 se han añadido etiquetas nuevas que ayudan a evitar el abuso de las etiquetas span y div.

Vamos a ver a continuación cómo se tienen que usar estas etiquetas para estructurar correctamente una página web con HTML5.

Esta imagen muestra la estructura típica de una página web escrita con las versiones anteriores de HTML. Esta página contiene:

Una cabecera.
Una barra o menú de navegación.
Un panel con información adicional, como por ejemplo noticias.
La zona de contenido principal formada por
dos entradas o artículos.
Una imagen en una de las entradas.
Y un pie de página.

Con HTML5, todas estas etiquetas <div> se sustituyen por nuevas etiquetas específicas para definir regiones especiales que tienen las páginas web.

La cabecera se etiqueta con header.
La barra o menú de navegación con nav.
Un panel con información adicional con aside.
La zona de contenido principal con main.
Las entradas o artículos con article.
Una imagen con figure.
Y el pie de página con footer.

En algún caso puede ser difícil decidir cuál es la etiqueta más adecuada para una región de una página web.

Esta imagen extraída de HTML5Doctor es un diagrama de flujo que, mediante varias preguntas, ayuda a decidir cuál es la etiqueta más adecuada según la función que realiza la región que se quiere etiquetar dentro de la página web.

A continuación vamos a ver parte por parte cómo se transforma una página web de una versión antigua de HTML a HTML5.

En primer lugar vamos a ver el código HTML de la cabecera.

Este es el típico código de una cabecera de una página web: un div y un h1.

En realidad, en muchos casos, simplemente es necesario el h1. Pero si por alguna razón, es necesario utilizar un div para definir algunas características de la presentación del encabezado, es mejor utilizar la nueva etiqueta header.

Ahora la barra o menú de navegación del sitio web.

Una barra o menú de navegación es un conjunto de enlaces. Por tanto, se debe etiquetar como una lista, ordenada o no ordenada. La etiqueta div que envuelve a la lista se debe cambiar por la etiqueta nav en HTML5.

Un panel con información adicional, contiene información que complementa a la información principal y que no es esencial. Por ejemplo, un panel de este tipo puede ser una región con noticias o anuncios.

Para este tipo de contenido se debe emplear la etiqueta aside en HTML5.

Vamos a ver a continuación cómo etiquetar la zona de contenido principal que está formada por una serie de entradas o artículos.

La zona de contenido principal que agrupa todas las entradas se puede etiquetar con main, y cada una de las entradas o artículos con la etiqueta article.

Respecto a las imágenes, esta es la forma tradicional de etiquetar una imagen. No existe ninguna relación entre una imagen y su título. Sin embargo, en HTML5 esto está resuelto, ya que existe la etiqueta figure y la etiqueta figcaption que permite definir el título de una figura.

Muy importante, la etiqueta figure no sólo se emplea para etiquetar una imagen. También puede etiquetar otras cosas, como un fragmento de código, o una cita.

Por último, el pie de página.

En el pie de una página web suele aparecer el correo de contacto, el aviso legal, la información de copyright o información similar.

En HTML5 se debe emplear la etiqueta footer para etiquetar este contenido.

Como ves, transformar una página web de HTML antiguo a HTML5 es muy sencillo, simplemente hay que aprender a utilizar la etiqueta adecuada para cada región de una 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.

HTML5: introducció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 ayudar con tus primeros pasos con el lenguaje de etiquetado HTML5.

En el vídeo “Historia de HTML”, te expliqué la evolución del lenguaje de marcado o etiquetado HTML, el lenguaje con el que se crean las páginas web desde que Tim Berners-Lee creó la primera página web a finales de 1990 en el CERN.

Recuerda que después de HTML4, el W3C, el organismo que desarrolla los estándares de la Web inició el desarrollo de XHTML. Sin embargo, unos años después, el W3C canceló el desarrolló de XHTML y se unió a un grupo independiente de desarrolladores web con el objetivo de desarrollar HTML5.

Mucha gente tiene una gran confusión con HTML5, se piensa que es algo totalmente distinto a HTML4 y XHTML. Y no es así.

Fijémonos en este gráfico: cada rectángulo representa una etiqueta de HTML 4.

En HTML5, algunas de las etiquetas han desaparecido porque se han quedado viejas y ya no se deben emplear.

Otras etiquetas han variado un poco su funcionamiento o incluyen atributos nuevos.

Y por último, se han añadido etiquetas y atributos nuevos. Pero como podemos ver, la mayor parte de HTML5 sigue siendo lo mismo que ya existía en HTML4.

Por ejemplo, si consultamos una referencia de las etiquetas de HTML5, como ésta que existe en W3Schools, veremos que hay etiquetas como frame, frameset o noframes que aparecen marcadas como “no soportadas en HTML5”, ya no se deben emplear.

También hay etiquetas como header, keygen, main, mark, menuitem, meter y nav que aparecen marcadas como etiquetas nuevas de HTML5.

En el momento de grabar este vídeo, HTML5 todavía sigue en desarrollo.

La última versión publicada tiene fecha del 16 de septiembre de 2014 y posee el estado de “recomendación propuesta”, lo que significa que es ya casi la versión final.

¿Cuándo se espera que esté terminado HTML5?

El W3C tiene publicado un plan u hoja de ruta en el que se explica el proceso de estandarización de HTML5. Según este plan, se espera que HTML5 adopte el estado de recomendación durante el último cuatrimestre del año 2014.

El W3C no para, y aunque no esté finalizado HTML5, ya está trabajando en la próxima versión, la versión 5.1.

HTML 5.0 será una especificación oficial a finales del año 2014, y la versión 5.1 a finales del año 2016.

Aunque todavía no esté terminada su especificación, ya puedes empezar a usar HTML5, aunque con mucho cuidado.

¿Por qué con cuidado?

Porque no todos los navegadores admiten las nuevas características de HTML5.

Existen varios sitios web en los que se puede comprobar la compatibilidad de los navegadores con HTML5.

Por ejemplo, en HTML5Test, el test indica que la versión 37 de Google Chrome, la última versión en el momento de grabar este vídeo, obtiene 512 puntos de compatibilidad de un máximo de 555 puntos, lo cual está muy bien.

Sin embargo, Internet Explorer 11 obtiene un pobre resultado, sólo 365 puntos del máximo de 555, un resultado muy muy muy malo.

En HTML5Test también es posible encontrar una comparativa de distintos navegadores.

También existe el sitio web Can I use?, en el que se puede consultar la compatibilidad de las novedades de HTML5 y CSS3 con los distintos navegadores.

Por ejemplo, el nuevo control input type date tiene como propósito visualizar un calendario para que el usuario pueda seleccionar una fecha.

Según Can I use?, este control sólo se puede emplear en Google Chrome y Opera, pero no funciona en Internet Explorer, Firefox y Safari. Me estoy refiriendo a las versiones de estos navegadores de escritorio, de ordenador.

¿Lo podemos verificar?

Sí, por ejemplo en el sitio web “The Current State of HTML5 Forms” podemos verificar el funcionamiento de los nuevos controles de los formularios.

Efectivamente, el control de tipo date se visualiza correctamente en Google Chrome, pero en Mozilla Firefox se visualiza simplemente como un cuadro de texto, igual que en Internet Explorer.

Para empezar a aprender HTML5 puedes consultar documentación sobre HTML5 o sobre las versiones anteriores de HTML 4 o XHTML 1. Te conviene conocerlas todas, y las diferencias que hay entre unas y otras, porque ahí fuera, en Internet, te vas a encontrar de todo. Para ser un buen profesional del desarrollo web necesitas conocer las tres versiones.

De todo ello te hablo en el vídeo “¿Cuál es el mejor: HTML, XHTML, HTML5?”.

Una vez que ya conozcas las versiones anteriores de HTML, ya puedes pasar a aprender HTML5. Existen muy buenos recursos para ello.

El primero que te recomiendo es “Dive into HTML5”, de Mark Pilgrim. Este sitio web se comenzó a desarrollar en el año 2009 y no se actualiza desde el 2011, pero en HTML5Doctor existe una copia que sí que se intenta actualizar con las últimas novedades del lenguaje.

También te recomiendo que consultes el sitio web W3Schools, que contiene tanto un tutorial como una referencia de todas las etiquetas de HTML5.

Y por supuesto, también puedes consultar el resto de vídeos del curso iDESWEB.

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.