Buenas prácticas de desarollo web

El desarrollo de un front-end html parece sencillo, pero lograr un código limpio, semánticamente correcto y compatible con los distintos navegadores termina por ser un duro trabajo. A continuación os dejo un estracto de un post original de catwhocode en el que se hace un repaso a 10 buenas prácticas para el desarrollo web.

• Añade comentarios en el cierre de las etiquetas html para facilitar la comprensión del código de un solo vistazo
• Resetea los valores CSS por defecto del navegador antes de empezar con el diseño
• No uses @import para linkar hojas de estilos. Es mucho más lento que el método tradicional.
• Optimiza el tamaño de tus imágenes con aplicaciones online como smush it
• Procura no mezclar html y css mediante atributos style
• Procura no mezclar html y javascript. Linka siempre a ficheros externos .js y evita eventos inline como onClick
• Incluye las hojas de estilos especificas para IE6/7 mediante condicionales (<!–[if lte IE 6]>)
• Coloca los ficheros javascript al final del documento para mejorar la carga de la página
• Usa HTML semánticamente. Ajem: Agrupa elementos “hermanos” como los items de un menu en <ul> u otro tipo de etiquetas que los agrupe
• Comprueba la compatibilidad entre navegadores según vas programando, y no al final del diseño, para evitar futuros dolores de cabeza

Ley Sinde

Tal y como se puede leer en la noticia enviada por knox, el proyecto de ley de Economía Sostenible ha sido aprobado.

Seriesyonkis, una de las webs más visitadas de nuestro país, echo el cierre ayer como medida de protesta y aviso de lo que está por venir.

Poco queda por comentar que no se haya dicho ya. La ley será debatida ahora en el congreso y parlamento y si no hay sorpresas (tan solo IU, ERC y UPyD se oponen a ella) cientos de webs de intercambio de contenido echarán el cierre.

El Manifiesto en Defensa de los Derechos Fundamentales en Internet está siendo republicado como muestra de desacuerdo. He de reconocer que soy bastante pesimista y pienso que si no funciono la primera vez de lo hará ahora.

Toca asumir que los internautas hemos fallado al ser incapaces de movilizarnos más allá de las pantalla de nuestros ordenadores (¿50 personas en la manifestación de bilbao? ¿Cuantas en otras ciudades?)

Enlaces de interés: La pantomima de una democracia (blog de enrique dans)

Parseando HTML con PHP, ejemplo real

Los artículos sobre programación que escribo podrían dividirse en dos grupos:

1. Artículos sobre librerías que me gustan y uso habitualmente
2. Artículos sobre librerías que aún no he usado pero me gustaría probar en próximos proyectos que den pie a ello

Así pues, de cuando en cuando me convierto en un lector más del blog en busca de esos artículos sobre los que escribí tiempo atrás y necesito ahora. Esta vez se trataba de PHP Simple HTML DOM Parser.

Poniéndonos en contexto:
Una de las web que he iniciado recientemente trata sobre metal alternativo y myspace se ha convertido en un herramienta imprescindible a la hora de buscar noticias y fechas de conciertos. Para el tema de las noticias no había problema, el mismo myspace organiza bastante bien las noticias de los grupos de los que eres “amigo”.

Las fechas de giras en cambio eran un poco más sangrantes y no quedaba otra que visitar la ficha de los grupos una por una para dar con las nuevas fechas (esto cuando quieres cubrir más de 200 grupos puede ser un autentico infierno).

La solución:
Ya tenía la url al myspace de cada grupo en base de datos y la solución más obvia pasaba por crear un script que recogiera y parseara automáticamente el html de esta. El resultado: la tabla de conciertos del grupo mostrada directamente en el panel de administración mi página.

El código:
Como ya vimos en su día, el uso de simple HTML Dom Parser es sencillisimo (más aún si estamos familiarizados con jQuery) y bastaron unas pocas líneas para cumplir con el cometido:

$html = file_get_html($url);
$item = $html->find('div#profile_bandschedule', 0)->find("table[bgcolor=#ffffff]",0);

if($item != '')
	return '<table><tr><td>'.$item->xmltext().'</td></tr></table>';
else
	return '';

Nuevo artwork para Ubuntu

En ubuntu 9.10 ya se rumoreo sobre la posible inclusión de un nuevo theme que reemplazaría a human, rumor que no se materializo en aquella ocasión pero si ahora. Ya es oficial, Ubuntu 10.04 dejara atrás el clásico tema anaranjado para incorporar un nuevo artwork denominado Light.

Capturas de pantalla y arranque:

PD: Entre las novedades también encontramos soporte nativo para los iPhone e iPod touch de Apple

Instalar kde sc 4.4 en Kubuntu

El progreso que ha tenido kde 4 desde sus primeras versiones es surrealista. Solo le han hecho falta pocos más de un año para pasar de ser un escritorio poco usable y peleón a ser , bajo mi punto de vista, el escritorio más puntero disponible en linux hoy por hoy.

Para muestra un botón:

Si sois de esos usuarios que no pueden esperar a que su distro favorita incluya la última versión de este escritorio, podéis seguir lo siguientes pasos para instalarlo en k/ubuntu 9.10.

Read more

Útiles sentencias SQL para wordpress

Si bien el panel de administración de wordpress es muy completo y permite la gestión de casi todo lo que podamos necesitar, en ocasiones puede ser necesario realizar algún arreglo rápido directamente en base de datos.

A continuación os dejo algunas sentencias sql interesantes:

Cambio de contraseña

UPDATE 'wp_users'  SET 'user_pass'  = MD5('PASSWORD') WHERE 'user_login' ='admin' LIMIT 1;

Eliminar revisiones de un artículo y metadatos asociados

DELETE a,b,c FROM wp_posts a WHERE a.post_type = 'revision' LEFT  JOIN wp_term_relationships b ON (a.ID = b.object_id) LEFT JOIN wp_postmeta c ON (a.ID = c.post_id);

Eliminar todos los comentarios no aprobados

DELETE from  wp_comments WHERE  comment_approved = '0';

Desactivar comentarios en posts antiguos

UPDATE wp_posts SET comment_status = 'closed' WHERE  post_date < '2009-01-01'  AND post_status = 'publish';

Fuente y más sentencias sql en catswhocode

Cargar datos JSON con jQuery

Hace ya unos años que xml dejo su lugar como formato omnipresente en el intercambio de información asíncrona entre navegador y servidor. Json, la alternativa integrada en el corazón los interpretes javascript, se perfilo como una opción más simple y rápida.

Jquery cuenta con al menos tres métodos para simplificar más aun la lectura de este formato.

$.getJSON()

Esta función carga y parsea ficheros json

$.getJSON('/json/somedata.json', function(data) {
    // do something with the data here
});

$.parseJSON()

En caso de tener los datos lleven string, podemos convertirlos a json con este método:

data = $.parseJSON(string);

$.ajax()

también podemos indicarle a jQuery que los datos que recibiremos en una petición ajax están formateados en json:

$.ajax({
    dataType: 'json',
    success: function(data) {
        // do something
    },
    url: '/json/somedata.json'
});

vía electrictoolbox

Presentación de HipHop PHP

Los rumores se han confirmado y finalmente facebook ha hecho publico el vídeo de presentación de este compilador para PHP.

La compañía lleva cerca de 6 meses usando el proyecto en sus servidores de producción con cerca de el 90% de su contenido corriendo con HipHop.

Para facilitar su uso en proyectos de terceros, futuras versiones incluirán compatibilidad con PHP 5.3 (actualmente solo 5.2) y una extensión para ser ejecuto sobre apache además del server propio sobre el que corre actualmente.

Los resultados hablan por si solos:

• Web: 50% menos en consumo de CPU con el mismo tráfico
• API: 30% menos de consumo de CPU con el doble de tráfico

Las mas de 300.000 líneas de código del proyecto serán publicadas proximamente en el canal de Facebook en Github

Reproductor de vídeo HTML5

Sublime Video es un reproductor HTML5 con un diseño muy cuidado (estilo mac) y permite la reproducción de vídeos sin recurrir a flash.

Aún se encuentra en desarrollo pero ya cuenta con las siguientes funcionalidades:

• No requiere plugins
• Permite pulsar en cualquier punto del timeline y comenzar a guardar el buffer a partir de ahí
• Animación zoom in/out a pasar a pantalla completa
• Capaz de readaptar el tamaño del vídeo a pantalla completa si cambia el tamaño de la ventana
• Acceso rápido a play/pause con la barra espaciadora

Por ahora solo es compatible con Safari, Chrome e Internet Explorer con Chrome frame instalado, pero ya están trabajando en la compatibilidad con firefox. Otras de las funcionalidades programadas son la inclusión de un control de volumen y la compatibilidad con IE (reemplazando el reproductor por uno flash).

El reproductor será lanzado pronto de manera gratuita (al menos para usos no comerciales).

vía webappers

Funcionalidades HTML5/CSS3 en IE

HTML5 y CSS3 toma cada día mas fuerza pero aún esta muy limitado en cuanto a soporte por parte de los browsers. Como no podía ser de otra forma, Internet Explorer se lleva la palma aunque algunos desarrolladores parecen negarse a esperar un nuevo navegador de MS compatible con los últimos estándares.

A continuación os dejo algunas técnicas con las que añadir/simular funcionalidades propias de los browsers más punteros en el navegador de microsoft (Extraído de un estupendo post de catswhocode).

Compatibilidad con los nuevos tags HTML5

El siguiente script debe ser incluido dentro del head del documento para que IE sea capaz de interpretar los elementos antes de renderizar la página.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->

Text-shadow

p.shadowed {
  text-shadow: #0000ff 0px 0px 3px; /* Navegadores modernos */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

box-shadow

.shadowed{
    box-shadow: 10px 10px 5px #888;
}

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

Rounded corners

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Para IE:

<script type="text/javascript" src="DD_roundies.js">
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

Opacity

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Soporte RGBa

 .color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */
}
/*IE*/
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}

Ver más

A vueltas con el iPad

Las expectativas eran enormes, el hype desmedido y cualquier rumor se convertía en noticia con el fin de saciar el apetito de aquellos que esperaban ansiosos el lanzamiento del gadget del que Steve Jobs aseguro sería lo mejor que ha hecho.

Llego el esperado día. Jobs reaparecía en público tras una prolongada baja por enfermedad y el iPad (bautizado en la red como el ipod gigante) se mostraba al mundo en una conferencia cuidada hasta el último detalle.

Y los aplausos no llegaron… De hecho, las expectativas eran tan altas que buena parte del hype se ha vuelto en contra de un producto de apple por primera vez en mucho tiempo. Apenas han hecho falta un par de días para que empiecen a circular vídeos en la red tan simpáticos como el siguiente

Portales como xataka empezaban a hacerse eco de alternativas al tablet de apple, destacando el ExoPC: Un dispositivo con pantalla multitáctil de 8.9 pulgadas a 1024×600, Windows 7 (flash y multitarea incluidos).

Me sumo a la gente que ve el ipad bastante flojo. El diseño no convence, sigue sin ser multitarea (nada de realizar descargas en safari), no incorpora finder, flash no llega (ni llegará), etc. El iphoneOS no cumple con las expectativas de aquellos que esperaban un mac OS X adaptado.

De todas formas, tampoco pienso que OSX, Win7 o Linux sean mejores sistemas operativos para este tipo de dispositivos. Me resulta difícil imaginarme navegando entre los distintos menus de una aplicación (firefox, openoffice, etc) en una tablet sin stylus. Y es ahí donde radica el grandeza del iphoneOS, esta concebido para ser manejado única y exclusivamente mediante una pantalla multitouch. Este lanzamiento ha sido un gran FAIL pero a futuro veo en iPad bastante potencial si se animan a incorporarle un SO menos limitado.

P.D: No se si a raíz de esto, pero Steve anda bastante calentado y ha lanzado algunas declaraciones bastante ácidas a google y adobe:

• Adobe is lazy
• Google’s ‘Don’t Be Evil’ Mantra is Bullshit

P.D.2: Circula por internet un vídeo que muestra como editar la apariencia de un iTouch/iPhone para que luzca estilo ipad (Queda bastante bien, probablemente me anime a cambiar el dock del mio). Requiere jailbreak.

Instalar firefox 3.6 en ubuntu

Serán muchos los usuarios de linux que deseen actualizar a la última versión de mozilla firefox sin esperar una nueva release de su distro favorita. A continuación os dejo las instrucciones para añadir el repositorio que contiene la versión 3.6 del navegador (estable, no daily-build) en ubuntu.

Karmix (9.10) / Lucid (10.4) ejecutar en terminal

sudo add-apt-repository ppa:mozillateam/firefox-stable

Jaunty, Intrepid o Hardy (Asegurarse de reemplazar “VERSION_DE_UBUNTU” por la versión de vuestra distro)

sudo bash -c "echo 'deb http://ppa.launchpad.net/mozillateam/firefox-stable/ubuntu VERSION_DE_UBUNTU main' >> /etc/apt/sources.list"
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys CE49EC21

Y ya solo queda actualizar los repos e instalar el programa:

sudo apt-get update && sudo apt-get install firefox-3.6

Si lo preferís también es posible optar por Swiftfox 3.6, una versión optimizada del navegador para distintos procesadores (disponibles paquetes .deb optimizados para AMD64, AMD anteriores, Intel Prescott y anteriores).

Vía webupd8