aNieto2K http://www.anieto2k.com Desarrollo web, Wordpress, y alguna cosilla más Fri, 21 Nov 2008 18:10:16 +0000 http://wordpress.org/?v=2.7-beta3 en hourly 1 En el congreso de Webmasters I http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/7Yx0QqEJT30/ http://www.anieto2k.com/2008/11/21/en-el-congreso-de-webmasters-i/#comments Fri, 21 Nov 2008 18:10:16 +0000 aNieto2k http://www.anieto2k.com/?p=6867 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 :D 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 :D

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/21/en-el-congreso-de-webmasters-i/feed/ http://www.anieto2k.com/2008/11/21/en-el-congreso-de-webmasters-i/ Digg Attack, el canvas convertido en Juego http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/1cwGTBOJyDo/ http://www.anieto2k.com/2008/11/21/digg-attack-el-canvas-convertido-en-juego/#comments Fri, 21 Nov 2008 15:27:22 +0000 aNieto2k http://www.anieto2k.com/?p=6864 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]

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/21/digg-attack-el-canvas-convertido-en-juego/feed/ http://www.anieto2k.com/2008/11/21/digg-attack-el-canvas-convertido-en-juego/ Increible canvas 3D http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/Twz5bBwP0jY/ http://www.anieto2k.com/2008/11/19/increible-canvas-3d/#comments Wed, 19 Nov 2008 16:45:47 +0000 aNieto2k http://www.anieto2k.com/2008/11/19/increible-canvas-3d/ este ejemplo de canvas 3D que he visto en Ajaxian. Simplemente impresionante [cuidado con el CPU]

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/increible-canvas-3d/feed/ http://www.anieto2k.com/2008/11/19/increible-canvas-3d/ 42 themes de Wordpress de temporada (invierno) http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/w_nYEWJFyz4/ http://www.anieto2k.com/2008/11/19/42-themes-de-wordpress-de-temporada-invierno/#comments Wed, 19 Nov 2008 13:40:19 +0000 aNieto2k http://www.anieto2k.com/?p=6854 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/42-themes-de-wordpress-de-temporada-invierno/feed/ http://www.anieto2k.com/2008/11/19/42-themes-de-wordpress-de-temporada-invierno/ Los nervios y el miedo se combaten con el calor de la gente http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/Yqhjyn6zjEc/ http://www.anieto2k.com/2008/11/19/los-nervios-y-el-miedo-se-combaten-con-el-calor-de-la-gente/#comments Wed, 19 Nov 2008 12:07:01 +0000 aNieto2k http://www.anieto2k.com/?p=6849 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/los-nervios-y-el-miedo-se-combaten-con-el-calor-de-la-gente/feed/ http://www.anieto2k.com/2008/11/19/los-nervios-y-el-miedo-se-combaten-con-el-calor-de-la-gente/ Útiles pautas para conseguir un CSS mantenible http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/vm5kkzOAR-k/ http://www.anieto2k.com/2008/11/19/utiles-pautas-para-conseguir-un-css-mantenible/#comments Wed, 19 Nov 2008 10:14:44 +0000 aNieto2k http://www.anieto2k.com/?p=6845 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.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/utiles-pautas-para-conseguir-un-css-mantenible/feed/ http://www.anieto2k.com/2008/11/19/utiles-pautas-para-conseguir-un-css-mantenible/ Crea tu propio iGoogle con jQuery http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/iklQzMVgLMI/ http://www.anieto2k.com/2008/11/19/crea-tu-propio-igoogle-con-jquery/#comments Wed, 19 Nov 2008 09:09:20 +0000 aNieto2k http://www.anieto2k.com/?p=6841 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"
});

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/crea-tu-propio-igoogle-con-jquery/feed/ http://www.anieto2k.com/2008/11/19/crea-tu-propio-igoogle-con-jquery/ Herramientas para ayudarnos con el día a día http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/sjv4T95iiOM/ http://www.anieto2k.com/2008/11/19/herramientas-para-ayudarnos-con-el-dia-a-dia/#comments Wed, 19 Nov 2008 08:09:59 +0000 aNieto2k http://www.anieto2k.com/?p=6838 Smashing Magazine ha confeccionado una lista de herramientas que nos ayudan cada día con nuestro código. Aunque la mayoría las conocíamos ya, siempre esta bien tener un listado como este para momentos de lapsus.
  1. Firebug (Oh Dios!) (FF)
  2. Web Developer Toolbar (FF)
  3. YSlow (FF)
  4. Internet Explorer Web Developer Toolbar (IE)
  5. Fiddler (IE)
  6. Debug Bar (IE)
  7. HttpWatch (IE/FF)
  8. Live Http Headers (FF)
  9. Web Accesibility Toolbar (IE/OP)
  10. Fangs (FF)
  11. Venkman Javascript Debuger (FF)
  12. ColorZilla (FF)
  13. Fireshot (FF)
  14. Web Inspector (WK)
  15. FireFTP (FF)
FF - Firefox, IE - Internet Explorer, OP - Opera, WK - WebKit

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/19/herramientas-para-ayudarnos-con-el-dia-a-dia/feed/ http://www.anieto2k.com/2008/11/19/herramientas-para-ayudarnos-con-el-dia-a-dia/ JS-909, haz música con Javascript http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/IaTfFGANVOE/ http://www.anieto2k.com/2008/11/17/js-909-haz-musica-con-javascript/#comments Mon, 17 Nov 2008 21:51:21 +0000 aNieto2k http://www.anieto2k.com/?p=6831 Man In Blue siempre nos ha delitado con maravillas desarrolladas en Javascript y hoy nos trae JS-909 . Una aplicación que nos permite crear música a base de sonidos.

js-909_javascript_drumb_machine

Si le echamos un vistazo al javascript, vemos que usa un sistema de data:URI para almacenar los sonidos de los que disponemos en la página. Sin duda una muestra más de que Javascript está cambiando su concepto que hasta ahora teníamos.

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/17/js-909-haz-musica-con-javascript/feed/ http://www.anieto2k.com/2008/11/17/js-909-haz-musica-con-javascript/ Decididos los iconos que veremos en el menú de Wordpress 2.7 http://feedproxy.google.com/~r/anieto2k/Xzqf/~3/QzE6Juo1AV8/ http://www.anieto2k.com/2008/11/17/decididos-los-iconos-que-veremos-en-el-menu-de-wordpress-27/#comments Mon, 17 Nov 2008 17:59:01 +0000 aNieto2k http://www.anieto2k.com/?p=6827 la encuesta para decidir cuales serían los iconos que formarán parte del menú lateral de Wordpress 2.7. El aspecto, que podemos ver en la imagen siguiente, ha sido el seleccionado con un 35% de los votos y es una creación de Ben Dunkle.

bd_menu

Artículos relacionados

aNieto2k

]]> http://www.anieto2k.com/2008/11/17/decididos-los-iconos-que-veremos-en-el-menu-de-wordpress-27/feed/ http://www.anieto2k.com/2008/11/17/decididos-los-iconos-que-veremos-en-el-menu-de-wordpress-27/