Contenido

Congreso de WebMasters 2008

24 Nov

+ 10

Bueno, ya estamos de nuevo en Palma de Mallorca, ya dejamos atrás 3 días de Metro, nervios y carreras entre el hotel y palacio de congresos. Han sido unos días inolvidables en los que he conocido (o les he puesto cara) a la gente que leo y que comenta en la web.

Por culpa de lo frenético del viaje ha habido gente a la que no he podido dedicarle mucho tiempo, como por ejemo Alex Barros o Gafeman. En el próximo viaje una cenita ¿no?

photo

Por otro lado, por fín, conocí en persona a Daniel Mota, el creador de theme y amigo mio desde hace 4 años. Menos mal que coincidimos en Madrid ya que la siguiente opción era llevarlo al Diario de Patricia. Conocerlo solo me confirmó lo que yo sabía, es un p… crack y llegará muy lejos.

3055790824_4703035e23_b

Por fín, me encontré con Fernando Tellado, un crack tras la pantalla y en el escenario. Una persona muy humana y que transmite buen rollo y simpatía, ojalá hubiera tenido más tiempo para charlar detenidamente con él.

En fín, han sido unos días interesantes y me traigo de Madrid muy buenos recuerdos y amigos.

#frase

23 Nov

+ 16

«Siento no haber tenido Wifi para seguir posteando…. pero tranquilos, esta noche es larga»

Andrés Nieto (recogiendo el premio del Jurado del Congreso de WebMasters)(Comentarios)

jQuery.popeye un nuevo enfoque de lightbox

22 Nov

+ 5

jQuery.popeye es una vuelta de tuerca más a la idea de lightbox como sistema para mostrar imagenes en nuestras páginas web. Usando un sistema basado en listados remaquetados con CSS podemos mostrar galerías de imagenes fácilmente en nuestras aplicaciones.

    <div style="clear:both;">
        <div id="popeye1" class="popeye">
            <ul>
              <li><a href="....."><img src="....." alt="´...." /></a></li>
              <li><a href="....."><img src="....." alt="´...." /></a></li>
              .....
              </ul>
        </div>
// jQuery
$(document).ready(function() {
   $('.popeye').popeye();
});

Usando la class «popeye» hacemos que el listado de imagenes que se encuentre en su interior pasará a ser una galería que veremos ocupando un pequeño espacio de nuestra web.

jquerypopeye-inline

Haciendo click sobre la imagen, podemos visualizar la imagen a un tamaño mayor.

jquerypopeye-desplegado

Descargar / Demo

En el congreso de Webmasters I

21 Nov

+ 11

Ya estamos aqui!, después de una mañana un poco alocada entre el viaje, la llegada al hotel y la llegada al congreso ya, por fín estamos aqui sentados escuchando las ponencias que este año nos tienen preparados.

Inicialmente hemos sufrido unos problemas de acceso a internet, pero ahora parece que funciona perfectamente.

Web para dispositivos móviles

Roberto Martín Díez, nos ha estado contando los motivos por los que nos interesa adaptar nuestro contenido a dispositivos móviles y comienza mostrando gráficas y números que siempre gustan a los asistentes. Nos cuenta que de los 6.700.000.000 de seres humanos en el mundo más de 4.000.000.000 tienen dispositivo móvil y que de este número más de 550.000.000 acceden a contenido desde su terminal móvil. Se estima que esta cifra se triplique antes de llegar a 2012.

Estos número vienen engrosados por los países en vías de desarrollo en los que comprar un dispositivo de este tipo es mucho más sencillo que un equipo informático.

Nos cuenta una anécdota con la televisión americana, concretamente la ESPN en 24 horas de los play-offs. Al parecer la página de ESPN.com recibió la friolera de 4.500.000 visitas en 1 día y su versión análoga para dispositivos móviles sobrepasaron esta cifra con 4.900.000 visitas en el mismo periodo de tiempo. Quizás el dato más interesante a tener en cuenta es que más de 70% de los usuarios entraron más de 2 veces en la página.

Nos cuenta la situación actual en España y arroja la cifra de 5.000.000 de usuarios móviles que actualmente navegan sobre los portales de las principales compañías telefónicas (Movistar E-moción, Vodafone Live!, Orange World).

Nos muestra in iPhone de 3 metros, sería para una aplicación de Twister 😀

El iPhone significa un antes y un después en el desarrollo de aplicaciones web para móviles, pero únicamente significa un 5% del acceso total desde estos dispositivos.

Para nosotros, los desarrolladores web, nos cuenta alguno de los problemas con los que nos encontramos al intentar adaptar nuestras aplicaciones web a estos dispositivos:

  • Multitud de dispositivos diferentes, lo que implica una distribución de teclas diferentes, menús accesos directos, pantallas,…
  • Multitud de navegadores web, lo que implica diferentes implementeciones de los estándares y visualización diferentes.
  • La carga de ficheros de estilos mediante etiquetas <style /> frente a las <link />, carga principal de contenido y después los estilos.

En cuanto a la estructura de la página nos aconsejan una navegación, sencilla, clara y con las secciones necesarias, ni más ni menos.

  • Limitar el número de categorías mostradas a 5
  • Limitar el número de enlaces a 10
  • No usar más de 5 niveles de profundidad
  • Ajustar el contenido a la pantalla
  • Enfocar el contenido a una lectura rápida
  • Priorizar enlaces por actividad
  • Usar listas ordenadas
  • Usar GIF/JPG ya que muchos dispositivos no detectan las imágenes PNG
  • NO USAR TABLAS (YUHU!!)
  • Detectar automáticamente el dispositivo y reenviar a la versión móvil.

Bueno, presto atención a la siguiente ponencia 😀

Digg Attack, el canvas convertido en Juego

21 Nov

+ 2

Jacob Seidelin nos vuelve a deleitar con una de sus maravillas en Javascript. Esta vez, hace uso de <canvas /> para crear un juego que podría pasar por flash si no fuera posible ver el código fuente de la aplicación.[Demo]

Increible canvas 3D

19 Nov

+ 7

No tengo otras palabras que describa este ejemplo de canvas 3D que he visto en Ajaxian. Simplemente impresionante [cuidado con el CPU]

42 themes de WordPress de temporada (invierno)

19 Nov

+ 4

Colección de 42 themes inspirados en el invierno. Si eres de los que les gusta estar a la moda en cada una de las estaciones no dudes en echarle un vistazo a esta colección de themes para tu WordPress.

Los nervios y el miedo se combaten con el calor de la gente

19 Nov

+ 7

Ayer por la tarde tuve la suerte de probarme delante de un público cara a cara. Fué en el lugar en el que me formé y pese a empezar con muchos nervios, creo que la cosa terminó más o menos bien. Sin lugar a dudas fue una experiencia interesante y enriquecedora, por que no es lo mismo escribir detrás de una pantalla meditando tus palabras que delante de un grupo de personas con los ojos clavados en ti. Una forma de probarte y comprobar lo dificil que és y el mérito que tienen los que lo hacen diariamente.

Útiles pautas para conseguir un CSS mantenible

19 Nov

+ 18

La gente de Woork ha escrito un interesante artículo en el que nos cuentan unas pautas con las que conseguir un CSS más fácil de mantener. A simple vista son unas pautas lógicas y que con un poco de experiencia consigues aplicarlas y optimizas sustancialmente el tiempo de mantenimiento de tu código.

Intentaré hacer una pequeña traducción de las mias, aportando mi visión del tema.

1) ¿Uno o multiples ficheros?

Muchos son los desarrolladores que usan multiples ficheros CSS para tener el código separado y quizas así consigan un poco más de control sobre el código, por otro lado he visto larguísimos ficheros CSS con miles y miles de líneas para evitar esto, lo que supone otro problema.

@import "file1.css";
@import "file2.css";
@import "file3.css";

Mi opinión? Pues depende mucho del proyecto, la complejidad del mismo y de la optimización que deseemos aplicar a cada una de las páginas. Si estamos desarrollando un theme para WordPress quizas la opción más apropiada se la de usar un solo CSS ya que este no va a crecer exageradamente, pero si por contra estamos desarrollando una página con una cantidad considerable de secciones/opciones sería conveniente dividir y pensar en optimizar la carga de cada una de las secciones/opciones.

2) Tabla de contenidos, ¿Sirven para algo?

Hace poco más de un año debatimos sobre el tema de los comentarios en el CSS, y la opinión general sobre el tema fué que había que encontrar un término médio y no crear una página CSS con más comentarios que código CSS.

En Woork explican que en alguna ocasión las han usado para los casos en los que se ha usado un único fichero CSS y de esa forma consiguen un poco de claridad del código insertado despues. Por contra en el caso de múltiples ficheros te ves obligado a ir actualizando varios ficheros cada vez que realizas un cambio en la estructura. 

/**
* @style       Standard Layout
* @media       screen
* @version     1.0
* @author      Franky
* @copyright   Franky’s pwn comp-a-ni
* @licensor    da customa
* @layout      in pixels:
*              |            788            |
*              | 10  |      768       | 10 |
*              | 10  | 27 |    741    | 10 |
*/

Mi opinión? El documentar es bueno, hay que documentar nuestro código en medida que sea fácilmente comprensible por una persona ajena a lo que estás haciendo pero nada más. Osea hay que decir lo justo, ni más ni menos, pero hay que decir algo. Usando un sistema jerarquico lógico bastaría para clarificar nuestro código.

3) Crear secciones para agrupar atributos similares

Una técnica que tambien te encuentras mucho por Internet es la de separar en secciones el CSS. Estas separaciones tienen un sentido y es el de agrupar atributos similares. Por ejemplo los que definen el tamaño, posición y aspecto.

#content {
	height:200px;
	width:760px;
	margin:0 auto;

	background-color:red;
	color:#000;
}

Mi opinión? Implica un reciclaje para los que no lo hacen, pero ayuda. El ver a simple vista todos los atributos que hacen un elemento esté en esa posición o tenga ese tamaño es un ahorro de tiempo considerable para futuras actualizaciones del código.

4) Tabular el código

Una técnica que da una calidad estética a los ficheros CSS es el tabular los valores de los atributos frente a los atributos. Esto muestra muy claramente el código de nuestro fichero.

#content {
	height:		    200px;
	width:		    760px;
	margin:		    0 auto;

	background-color:   red;
	color:		    #000;
}

Mi opinión? Pese a no hacerlo nunca, reconozco que más que una mejora visual es una ayuda a la comprensión del código para alguien ajeno a él.

Crea tu propio iGoogle con jQuery

19 Nov

+ 13

Como nos tienen acostumbrados, los chicos de NETTUTS nos enseñan a montar desde 0 nuestra propio iGoogle. Podemos ver el resultado y descargar el código fuente para probarlo y usarlo en nuestras aplicaciones web.

Actualización

He estado haciendo alguna prueba y he montado una pequeña función en jQuery para crear widgets dinámicamente desde nuestras aplicaciones.

function insertWidget(where, opt) {
    var selectorOld = iNettuts.settings.widgetSelector;
    iNettuts.settings.widgetSelector = '.new';
    salida = '<li class="new widget color-'+opt.color+'"><div class="widget-head"><h3>'+opt.title+'</h3></div><div class="widget-content"><p>'+opt.content+'</p></div></li>';
    $(where).append(salida);
    iNettuts.addWidgetControls();
    iNettuts.makeSortable();
    iNettuts.settings.widgetSelector = selectorOld;
}
//Ejemplo 
insertWidget("#column1", {
    color: "blue",
    title: "Prueba",
    content: "ESTO ES UNA PRUEBA"
});