Linea de Codigo

Los grupos de conversación de Facebook sobre lenguajes de programación en español están lanzados y rodando a la perfección. Me alegra mucho ver que la gente está interactuando e intercambiando preguntas, ideas, cursos, manuales,... Qué es lo que perseguíamos. Espero que siga así durante mucho tiempo.

En breve asignaremos administradores a los grupos, para que se pueda diversificar más la actividad y el control de los grupos.

Pero echemos un vistazo a las últimas conversaciones...

HTML5 en Español
https://www.facebook.com/groups/html5.es/
75 miembros

• HTML5 Rocks, un catalogo que contiene mucha información sobre recursos en HTML5.
• HTML5 y Accesibilidad, un buen artículo de Olga Carreras.
• Una Infografía que compara HTML5 y Flash para el desarrollo de VideoJuegos.
• Una buena chuleta sobre las posibilidades del Canvas en HTML5.
• ¿Alguien se ha pegado con el atributo designMode de HTML5?
• ¿Alguien ha probado Adobe Edge?
• Información sobre el centro de recursos HTML5 por Sourceforge y Microsoft.
• Un vídeo sobre el framework PhoneGap para el desarrollo de aplicaciones móviles.
• Foro para HTML5
• ¿Alguien ha probado Aptana?
• Un libro para aprender sobre HTML5 y la accesibilidad.
• ¿Alguien fue al evento CodeMotion?
• Cómo crear un banner con HTML5.
• Un grupo para charlar sobre HTML5 en Madrid.
• Uso del Canvas por Microsoft.
• HTML5 BoilerPlate, buenas prácticas y librerías sobre HTML5.
• Niveles de soporte del HTML5 en dispositivos móviles.
• BlueGriffon, una herramienta de desarrollo en HTML5 sobre Firefox.
• Un juego creado por Mozilla para demostrar el uso de HTML5 con Canvas y Websockets.
• Alguien ayuda a Freddy Flores a cómo crear una aplicación para Android.
• Ulises Esquivel busca ideas para elaborar un foro.
• Capitulo 4 del Manual HTML5 y CSS3 por Jorge Vargas V.
• Nos presentaron la web Desarrollandola.com con un montón de videotutoriales.
• Ayudar a Disan García para empezar desde 0 con HTML5.
• Freddy Flores nos pregunta sobre cómo hacer una venta automática en un website.
• Ayuda a Ulises Esquivel a maquetar elementos DIV
• Un tutorial para aprender CSS desde cero.
• Edita y prueba ejemplos directamente con HTML5 Playground.
• Una web de mucha utilidad. When Can I Use?
• Información sobre Canvas y WebGL.
• Ayuda a Ulises Esquivel a ordenar los post de su página.
• Streaming de Adobe CS6 y Creative Cloud.

Java en Español
https://www.facebook.com/groups/java.es/
90 miembros

• Charla sobre Java ME en Madrid
• ¿Qué Manual Java recomendáis para empezar?
• Libro Java 2, la Biblia del Java.
• Ayudar a Marcos Daniel Monge con Tutoriales para empezar con Java.
• Revisión del libro Introducción a la programación orientada a objetos.
• Ayuda a Mava Vargas con ejemplos sobre NetBeans y PostgreSQL
• Daniel Andrada nos plantea una duda sobre el uso de tablas en NetBeans con Swing
• Lo que viene en Java 9 y Java 10
• Rellena nuestra encuesta sobre si es buena idea eliminar los tipos de datos primitivos en Java.
• Descubriendo la declaración de argumentos variables en Java.
• Emmanuel Ramos nos pide una recomendación sobre un libro del framework Spring y nos pregunta sobre los métodos de notificación en los midlets.
• Ayuda a José Andrés con un problema de textfield y un scrollbar.
• Ayuda a Jose Cota para combinar radiobutton y combobox y para explicar métodos de ordenación por mezcla.
• El curso de Java SE 7 por Oracle.

Javascript en Español
https://www.facebook.com/groups/javascript.es/
66 miembros

• El imprescindible MDN - Mozilla Developer Network
• Contesta nuestra encuesta sobre si hay que aprender solo Javascript y ser un experto o jQuery es un gran complemento.
• Libro jQuery: The Write Less, Do More, Javascript Library
• Artículo para saber qué evento se ha producido.
• Edder Rodriguez comparte unos artículos para saber que plugins de jQuery se utilizan en una web y para saber qué versión de framework se utiliza.
• Artículo de Opera sobre el manejo de eventos.
• 6 librerías para desarrolladores Javascript.
• Conferencia Internacional sobre Javascript en Madrid el 6 y 7 de Julio.
• Vídeo de las herramientas de Firefox para desarrolladores
• Jose Eduardo nos pregunta sobre cómo eliminar la barra horizontal del navegador y el responsive design.

jQuery en Español
https://www.facebook.com/groups/jquery.es/
82 miembros

• Descargarnos la librería jQuery
• Artículo para crear un slider con jQuery
• jQuery TextExt Plugin, Fernando Sebastian nos comenta un plugin para los campos input.
• Joan Fuste comparte un artículo sobre formularios tabulados con animación.
• Como adaptar jQuery Mobile a los proyectos en Rails.
• Pablo Ruiz comparte la revisión del libro Aprende jQuery 1.3

CSS en Español
https://www.facebook.com/groups/css.es/
60 miembros

• El Test CSS3 y algunos de los resultados de nuestros miembros (1, 2, 3,...). Puedes añadir tus pruebas en el documento Soporte CSS3 por los navegadores.
• Artículo para poner varios fondos en CSS3.
• Publicados documentos de trabajo de la W3C sobre CSS Transforms y CSS Fragmentation Module 3.
• Se ha actualizado el documento de trabajo de CSS3 para la definición de los valores de las propiedades, así como del tipo de unidades que se pueden utilizar.
• ¿Cómo modifica el fondo la web Conversege? Impresionante!!!
• CSS Reset para HTML5
• Minix en LESS para CSS3

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
63 miembros

• Liberado PHP 5.4.0
• RelampagoPHP y sus videoconferencias sobre Responsive Design y HTML5.

XML en Español
https://www.facebook.com/groups/xml.es/
32 miembros

• Artículo sobre como construir tu primer XSLT.

SVG en Español
https://www.facebook.com/groups/svg.es/
21 miembros

• Artículo que explica como hacer un Hola Mundo en SVG
• ¿Alguna aplicación para hacer animaciones en SVG? Al estilo de Radi.

Dentro de CSS3 tenemos la capacidad de embeber nuestras propias fuentes dentro de nuestra página web. Abriendonos a un gran abanico de tipografías y evitando las restricciones de las propias fuentes que vienen definidas en el estándar de CSS.

Esto nos dará una gran potencia, ya que simplemente tendremos que generar texto y aplicarles la nueva tipografía gracias a la capacidad de embeber nuestras propias fuentes y no tendremos que recurrir a soluciones como la integración de tipografías con imágenes. Tendremos una página web más ligera.

Lo primero que tenemos que hacer es tener una tipografía. Las extensiones soportadas son TrueType (.ttf), OpenType (.otf) y Scalable Vector Grapgichs (.svg).

Así, nuestra fuente elegida para el ejemplo de embeber fuentes en CSS3 es NisePico.ttf.

La regla que tenemos que meter en CSS3 para embeber nuestra fuente es @font-face. Esta regla lo que hace es definir el nombre de nuestra fuente e indicar de dónde se descarga dicha fuente. Así el código será el siguiente:

@font-face {
     font-family: 'NisePico';
     src: url('NisePico.ttf');
}

Ya simplemente podremos utilizar la fuente NisePico dentro de cualquier uso del font en nuestras CSS. Así, por ejemplo, podemos definirnos el siguiente estilo.

.fuente1 {
     font: 40px 'NisePico', Arial, sans-serif;;
     color:red;
     letter-spacing: 0;
     text-align:center;
     text-shadow: 3px 3px 7px #111;
}

Que asignaremos a la clase de cualquier elemento:

<span class="fuente1">EstO es una fuente NisePicO</span>

Aunque embeber fuentes en CSS3 es muy potente, tenemos que tener cuidado en comprobar que los navegadores sobre los que despleguemos nuestro desarrollo, tienen capacidad de interpretar el @font-face.

El soporte lo podemos encontrar desde Internet Explorer 9, Firefox 6, Chrome 13, Safari 3.2 y Opera 11 en adelante.

Modernizr es una librería Javascript que nos va a ayudar con la detección del soporte de capacidades HTML5 y CSS3 de un navegador. Si vamos a utilizar HTML5 o CSS3 en nuestra página web, Modernizr nos va a indicar cuales de los elementos o funcionalidades de estos lenguajes están disponibles en el navegador web que está cargando nuestra página.

Lo primero que tenemos que hacer es ir a la web de Modernizr y descargarnos la librería. Hay que indicar que tenemos una versión para desarrollo y una versión para producción la cual es parametrizable. Para las pruebas puedes utilizar la primera, ya que es la que trae todas las funcionalidades de Modernizr.

Una vez tenemos la librería, tenemos que incluirla en nuestra página, mediante una carga normal de un script:

<script type="text/javascript" src="modernizr.js"></script>

Ahora ya pasamos a preguntar por capacidades HTML5 y CSS3. Por ejemplo, si queremos saber si el navegador tiene soporte para el elemento Canvas pondremos lo siguiente:

if (Modernizr.canvas)
	document.write("SI que existe soporte de canvas<br/>");
else
	document.write("NO existe soporte de canvas<br/>");

Vemos que la variable Modernizr.canvas es la que nos devuelve un true o un false dependiendo de si hay soporte en el navegador o no.

Otra de las variables nos permite conocer si hay soporte del elemento vídeo. En este caso es la variable Modernizr.video. Y el código a utilizar, similar al anterior:

var video = (Modernizr.video)?true:false;
if (video) document.write("Si se soporta el elemento vídeo");
 

Lo mismo pasa con las capacidades de CSS3. Por ejemplo, si queremos saber si el navegador soporta las animaciones de CSS3, podemos preguntar por el atributo Modernizr.cssanimations.

var cssanimations = (Modernizr.cssanimations)?true:false;
if (cssanimations)
  document.write("SI se soporta las animaciones CSS3<br/>");
else
  document.write("NO se soporta animaciones CSS3<br/>");

Así ya tendremos nuestra librería Modernizr cargada y lista para utilizar detectando las capacidades HTML5 y CSS3.

Una de las mejoras menos conocidas en CSS3 es la capacidad de especificar múltiples fondos con la propiedad background. De esta forma los diferentes fondos se irán montando en cascada.

Pero primero revisemos la propiedad background.

background: [color] [image] [repeat] [attachment] [position];

De esta forma, poner una imagen de forma sencilla podría hacerse de la siguiente forma:

background:url(logo.png) no-repeat 50px 700px;

Para poner múltiples fondos con CSS simplemente tendremos que concatenarlos con comas. Así, si queremos tener dos imágenes de fondo lo haremos de la siguiente forma:

background:url(logo.png) no-repeat 50px 700px,
                url(bg.gif) repeat 0 0;

Como el soporte de múltiples fondos no está en todos los navegadores tendremos que utilizar un pequeño truco, y este será especificar varios fondos. Uno de ellos será definido de la forma tradicional:

background:url(bg.gif) repeat 0 0;
background:url(logo.png) no-repeat 50px 700px,
                url(bg.gif) repeat 0 0;  

Así el navegador que no soporte los múltiples fondos, cargará un único fondo, de la forma tradicional.

Las versiones de los navegadores a partir de las cuales se soportan los múltiples fondos con CSS son:

• Chrome 4.0
• Safari 4.0
• Opera 10.10
• Firefox 3.6
• Internet Explorer 9

Gracias a CSS3 podemos redondear los bordes de los elementos. Y es que para redondear los bordes con CSS utilizaremos la propiedad border-radius.

La sintaxis general de border-radius es la siguiente:

border-radius: [tamaño|porcentaje];

De esta forma podemos indicar el tamaño o porcentaje en el que se redondeará cada una de las esquinas de la capa. El valor corresponde con el radio de la circunferencia trazada en la esquina.

Así, si utilizamos:

border-radius: 15px;

Veremos el siguiente resultado:

Podemos especificar un radio para cada una de las esquinas. En este caso se aplicará el orden de las agujas del reloj, empezado por la esquina superior izquierda, siguiendo por la esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.

border-radius: 5px 30px 45px 60px;

Si bien tenemos la capacidad de indicar el tamaño de cada de las esquinas por separado mediante:

border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Cuando identificamos los radios de las esquinas por separado podemos indicar de forma diferente los dos radios que conforman la esquina. Por ejemplo, podríamos modificar la esquina superior izquierda de la siguiente forma:

border-top-left-radius: 400px 200px;

Y obtendremos el siguiente resultado:

Si queremos modificar los dos radios de todas las esquinas podemos utilizar la versión reducida de border-radius:

border-radius: [tamaño|porcentaje] {1,4} [tamaño|porcentaje] {1,4};

Por último tenemos que ser conscientes del soporte de la propiedad border-radius de CSS3. Ya que no todos los navegadores van a poder ejecutarla. En esos casos, los bordes que hayamos redondeado no se verán.

La implementación de border-radius que hemos visto es la de la W3C. Hay implementaciones propietarias en los motores de renderizado de los browsers. Este es el caso de mozilla. Dónde las propiedades para redondear los borders con CSS están especificadas como:

-moz-border-radius: [tamaño|porcentaje];
-moz-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

En el caso de Webkit (sería, por ejemplo, para versiones antiguas de Safari) se soportaba mediante el prefijo -webkit:

-webkit-border-radius: [tamaño|porcentaje];
-webkit-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Por lo cual, si queremos buscar compatibilidad con nuestros ejemplos anteriores podemos poner lo siguiente:

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

border-radius: 5px 30px 45px 60px;
-moz-border-radius: 5px 30px 45px 60px;
-webkit-border-radius: 15px;

border-top-left-radius: 400px 200px;
-moz-border-top-left-radius: 400px 200px;
-webkit-border-radius: 15px;

Los navegadores a partir de los cuales se empezó a dar soporte a border-radius son:

• Chrome 0.2 (con -webkit) y Chrome 4.0 (con el estándar)
• Opera 10.5
• Safari 3.0 (con -webkit) y Safari 5.0 (con el estándar)
• Firefox 1.0 (con -moz) y Firefox 4.0 (con el estándar)
• Internet Explorer 9