En los tiempos que corren es fundamental que sepamos desarrollar para alguno de los sistemas móviles más populares. Uno de esos sistemas es Android y para aprender a desarrollar bajo dicha plataforma, os dejo un tutorial publicado en la web de sgoliver.
Dicho tutorial (o más bien curso) empieza desde lo más básico, hasta niveles avanzados y está en constante actualización.
Además si dejas un donativo superior a 1,50€ recibirás el curso en PDF.
La capacidad de añadir fuentes personalizadas a la web no es realmente de CSS3, @font-face fue propuesto para CSS2 e implementado por Microsoft en Internet Explorer desde la version 5 con algunas diferencias. Hubo un desacuerdo con el formato de fuente a usar y finalmente fue retirada para CSS2.1. Pero ahora ha vuelto y parece que para quedarse.
Para añadir una fuente a nuestra web, lo primero que debemos hacer es declararla como se muestra en el ejemplo:
@font-face {
font-family: miFuente; /* required */
src: url('directorio/fuente.ttf'); /* required */
}
Dentro de @font-face asignamos el nombre que queremos darle a nuestra fuente con font-family y después indicamos donde se encuentra la fuente con src.
Una vez hecho esto, ya podemos usar nuestra fuente de manera normal.
h1 {
font-family: miFuente, sans-serif;
}
Para ver que navegadores lo soportan y como os dejo este enlace: @font-face browser support
Antiguamente, si un desarrollador quería incluir vídeo en una página web, tenía que hacer uso del elemento <object>, que es un contenedor genérico de “objetos extraños”. Debido a incompatibilidades con algunos navegadores, también tenía que utilizar al elemento <embed> y duplicar muchos de los parámetros usados en <object>. Esto daba lugar a aberraciones como esta:
<object width="425" height="344" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://enlace.a/video.mp4" /> <param name="allowfullscreen" value="true" /> <embed width="425" height="344" type="application/x-shockwave-flash" src="http://enlace.a/video.mp4" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /> </object>
Este código es feo y desordenado. Pero lo peor es el hecho de tener que depender de un plugin; esperando que el usuario tenga la versión correcta de ese plugin o los permisos suficientes para descargarlo e instalarlo, o el conocimiento de cómo hacerlo.
Los plugins también pueden ser una importante causa de inestabilidad en el navegador y puede crear confusión o miedo en los usuarios menos técnicos, cuando se les pide que descarguen e instalen las versiones más recientes.
A los problemas ya mencionados hay que añadir algún que otro problema visual, como por ejemplo el hecho de que, por defecto, estos elementos se colocan por encima de todos los elementos de toda nuestra web. HTML5 proporciona una forma estandarizada para ver el vídeo directamente en el navegador, sin necesidad de ningún plugin.
Una de las principales ventajas del elemento <vídeo> de HTML5 es que, finalmente, el video es un ciudadano de pleno derecho en la Web. Ya no tenemos que deportarlo a <object> y <embed>.
Esta es la forma más simple de incluir un video con HTML5:
<video src=video.ogv></video>
La extensión. Ogv se refiere a un vídeo Ogg Theora.
Podemos hacer fallback (degradación elegante) añadiendo el código correspondiente entre las etiquetas <video>, para los navegadores más antiguos que no soportan vídeo nativo. Al menos se debería proporcionar un enlace al vídeo para que los usuarios puedan descargarlo y verlo. Ejemplo:
<h1>Video y fallback para navegadores antiguos</h1> <video src=video.ogv> Descarga el <a href=video.ogv>video</a> </video>
Sin embargo, este ejemplo realmente no va a hacer nada. Todo lo que puedes ver con esto es el primer fotograma del vídeo. Eso es porque no hemos indicado al vídeo que se reproduzca, y no le hemos dicho al navegador que proporcione los controles del reproductor.
Se le puede indicar al navegador que el vídeo o audio empiece a reproducirse de forma automática, aunque no es una buena práctica, ya que muchos usuarios (especialmente los que utilizan tecnología de asistencia, tales como lectores de pantalla) lo verán como algo intrusivo. De la misma manera, lo usuarios de dispositivos móviles probablemente no querrán gastar su ancho de banda si realmente no quieren ver el vídeo. Pero bueno la forma de hacerlo es la siguiente:
<video src=video.ogv autoplay> </video>
Proporcionar los controles del vídeo creo que, a diferencia del autoplay, es algo fundamental. Usando algo de javascript podemos crearnos nuestro propio reproductor (veremos eso en otro momento) pero también puede indicar al navegador que nos lo proporcione de forma automática:
<video src=video.ogv controls> </video>
Tenga en cuenta que los controles aparecen cuando el usuario pasa el cursor sobre el vídeo o cuando accede a el desde el teclado (con el tabulador). También es posible desplazarse por los distintos controles del video, ya que el reproductor es, a diferencia de lo que hacíamos con los plugins, accesible desde teclado de manera nativa.
Si es el elemento <audio> el que tiene el atributo controls, podrás verlo en la web. Sin el atributo, no se representa visualmente, pero se encuentra en el DOM y por ello es totalmente accesible desde javascript y las nuevas APIs.
El atributo poster proporciona una imagen que el navegador usará para colocar en el vídeo mientras este carga o antes de que el usuario pulse play (esto no es aplicable a <audio>). Esto elimina la necesidad de usar triquiñuelas como mostrar una imagen primero y después borrarla con javascript al empezar el vídeo.
Si no usas este atributo, el navegador mostrará la primera frame del vídeo, la cual no sea la imagen más apropiada para mostrar.
Estos atributos le dicen al navegador el tamaño del vídeo en pixels (no son aplicables a <audio>). Si no los especificamos, el navegador usa el ancho intrínseco de la fuente del vídeo, si está disponible. De lo contrario, es el ancho intrínseco del poster, si ha sido especificado. Si no está disponible ninguno de los atributos anteriores, el ancho será de 300 pixeles.
Si tan solo especificamos uno de los dos valores, el navegador ajustará automáticamente el tamaño de la dimensión no especificada para preservar la proporción del vídeo.
<video src=video.ogv controls width="400"> </video>
Si establecemos el ancho y alto a una proporción diferente a la del video, este no se ajustará a dicha proporción, si no que se ajustará a la altura o ancho (según la proporción del video) y conservará su proporción para que no quede “cutre” (letter-boxing).
El atributo loop es otro atributo booleano (es decir, si se añade permanece activo, si no permanece inactivo). Como imaginarás, hace que el vídeo se reproduzca de nuevo al terminar.
<video src=video.ogv controls loop> </video>
Puede que estés bastante seguro de que el usuario quiere ver/escuchar el contenido multimedía de tu web (porque es la única razón para estar en la página por ejemplo), pero no quieres usar autoplay. Si es así, puedes hacer que el navegador cargue previamente el vídeo/audio para que comience el almacenamiento en búfer cuando la página se carga mientras espera a que el usuario active los controles.
<video src=video.ogv controls preload> </video>
Hay tres estados definidos para el atributo preload. Si lo usamos como un valor booleano (es decir, tan solo nombrándolo), el navegador decidirá automáticamente que hacer. Un navegador móvil puede, por ejemplo, no precargar hasta que sea especificado por el usuario.
Los estados para preload son:
preload=auto (o solo preload) preload=none preload=meta
El primer caso, auto o solo preload, hace lo anteriormente dicho, lo deja en manos del navegador. El segundo, none, indica al navegador que no debe precargar el video. Y por último, meta, indica al navegador que precargue tan solo la meta data (dimensiones, primera frame, duración, entre otros), pero no descargará nada hasta que el usuario así lo indique.
Los primeros borradores de la especificación de HTML5 ordenaban que todos los navegadores que al menos deberían incorporar soporte para estos dos codecs: Ogg Vorbis para el audio y Ogg Theora para las películas. Vorbis es un códec utilizado por servicios como Spotify, entre otros, y para las muestras de audio en juegos, que a menudo se utiliza con Theora para los vídeos y se combinan en un contenedor Ogg.
Sin embargo, estos codecs fueron retirados de la especificación HTML5 tras la oposición de Apple y Nokia, por lo que la especificación no hace ninguna recomendación acerca de los codecs en absoluto. Esto nos deja con una situación de caos absoluto. Opera y Firefox dan apoyo Theora y Vorbis. Safari prefiere ofrecer soporte nativo para el códec de vídeo H.264 y audio MP3. Microsoft ha anunciado que IE9 también prestará apoyo a H.264, que también es compatible con iPhone y Android. Google Chrome soporta video Theora y H.264 y audio Vorbis y MP3. ¿Confundido?
Pués como eramos pocos tuvo que parir la abuela, y llegó Google anunciando su codec WebM. Este es una conbinación de un codec de vídeo de muy alta calidad llamado VP8 y Vorbis en un contenedor basado en el formato Matroska.
Opera, Firefox y Chrome anunciaron que le darán soporte. IE9 lo hará, si el codec se instala por separado. VP8 será incluido en Adobe Flash Player y todos los videos de YouTube estarán en formato WebM.
Lo mejor para evitar que los usuarios se queden sin ver el contenido multimedia de tu web es que los proporciones en todos los formatos posibles.
Para ello, es necesario codificar tus archivos multimedia en dos veces: primero como Theora y H.264 para el vídeo vídeo y en Vorbis y MP3 para el audio.
A continuación, tenemos que vincular las distintas versiones al elemento <video>. En lugar de usar el atributo src, usaremos el elemento <source> para cada codificación con atributos de tipo, dentro del elemento <audio> o <video> y dejar que el navegador utilice el formato que pueda mostrar.
Ten en cuenta que en este caso, no proporcionamos un atributo src en el elemento <video>:
<video controls>
<source src=video.ogv type=’video/ogg; codecs="theora, vorbis"'>
<source src=video.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40">
<p>Tu navegador no soporta el video.
Por favor, descarga el video en <a href=leverage-a-synergy.ogv>Ogg</a> o <a href=leverage-a-synergy.mp4>mp4</a>.</p>
</video>
Poco a poco iré publicando, entre otras cosas, artículos acerca de las novedades de CSS3. En este primer artículo nos centraremos en la propiedad border-radius.
La propiedad border-radius permite a los desarrolladores poner los bordes redondeados de manera muy simple, sin tener que depender de imágenes para las esquinas. Un ejemplo básico:
#ejemplo{
border-radius: 10px;
}
Los bordes redondeados pueden ser creados independientemente usando las propiedades individuales border-*-*radius (border-bottom-left-radius por ejemplo) o las cuatro esquinas en conjunto usando border-radius.
Antes de ver como funciona border-radius, probaremos con las propiedades individuales:
La propiedad border-*-*-radius acepta uno o dos valores, expresados como medida o como porcentaje (respecto al contenedor padre).
Sintaxis:
border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?
Ejemplos:
border-top-left-radius: 10px 5px; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px;
Cuando hay dos valores seguidos, estos se utilizan para definir, en orden, el radio horizontal y vertical de un cuarto de elipse que determina la curvatura de la esquina del borde.
Cuando solo hay un valor, este define ambos radios, horizontal y vertical, por igual.
El siguiente diagrama muestra algunos ejemplos de como debería mostrarse una esquina en diferentes casos:
Sin todos los valores son ’0′, la esquina será cuadrada, no redonda.
La propiedad acortada border-radius puede ser usada para definir todas las esquinas simultaneamente. La propiedad acepta uno o dos conjuntos de valores, cada uno compuesto de uno a cuatro longitudes o porcentajes.
Sintaxis:
[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Ejemplos:
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px; border-radius: 5px; border-radius: 5px 10px / 10px;
El primer conjunto de (1-4) valores definen los radios horizontal para las cuatro esquinas. El segundo conjunto es opcional y va precedid0 por una ’/', define el radio vertical de las cuatro esquinas. Si sólo se inserta un conjunto de valores, estos se utilizan para determinar el radio tanto vertical como horizontal.
Para cada conjunto de valores se aplica lo siguiente:
Si se insertan los cuatro valores, estos corresponden a la parte superior izquierda, superior derecha, inferior derecha e inferior izquierda respectivamente. Si la parte inferior izquierda se omite, es la misma que la parte superior derecha, si la parte inferior derecha se omite, es la misma que la parte superior izquierda y si sólo se inserta un valor, este define todos los radios.
Para más información, puedes ver la especificación de la W3C sobre fondos y bordes: Backgrounds and Borders Specification.
En este artículo voy a describir las novedades más básicas, y a mi parecer importantes, de HTML5
En XHTML teníamos que escribir esta parrafada:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ahora solo necesitamos esto:
<!DOCTYPE html>
En XHTML teniamos que poner esto:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Con HTML5 tan solo esto:
<meta charset="utf-8" />
En Html5 ya no es necesario definir el atributo “type” para los elementos <script> y <link>.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
<header>
El elemento <header> contiene información introductoria de una sección o página.
<nav>
El elemento <nav> está reservado para una sección de un documento que contiene enlaces a otras páginas o enlaces a las secciones de la misma página. No todos los grupos de enlace deben estar contenidos dentro del elemento <nav>, tan solo el principal de navegación.
<section>
El elemento <section> representa un documento genérico o de la sección de aplicaciones. Actúa de la misma manera que un <div>.
<article>
El elemento <article> representa una porción de una página que puede estar sola, como por ejemplo una entrada de un blog.
<aside>
<aside> representa el contenido relacionado con el área principal del documento. Esto se expresa generalmente en las barras laterales que contienen elementos como artículos de blogs relacionados, las nubes de etiquetas, etc.
<footer>
El elemento <footer> es para marcar el pie de página, no sólo en la estructura principal de la misma, si no que también es válida para cada sección que figura en ella. Por lo tanto, es muy probable utilizar el elemento <footer> varias veces en una sola página.
<figure>
Antes, cuando queríamos insertar una imagen con una descripción al pie, no había forma de anclar esta a la imagen sin depender de un <div>:
<div> <img src="/images/dir" alt="Sobre la imagen..." /> <span>Descripción de la imagen</span> </div>
HTML5:
<figure>
<img src="path/to/image" alt="Sobre la imagen..." />
<figcaption>
<p>Descripción de la imagen</p>
</figcaption>
</figure>
Con todos estos nuevos elementos para organizar nuestras webs, los días del fiel <div> están contados, ¿verdad? NO. De hecho, el <div> todavía sigue siendo importante. Debe usarse cuando no hay otro elemento más adecuado para agrupar un área de contenido, y eso suele pasar cuando se usa con la finalidad de agrupar contenido únicamente para aplicar estilos o efectos visuales. Por ejemplo el div que colocamos alrededor de todo el contenido para poder usar CSS y así centrar el contenido en el navegador entre otras cosas:
<div id="wrapper"></div>
#wrapper {
background-color: #ffffff;
width: 800px;
margin: 0 auto;
}
