Contenido

La mejora manera de cargar javascript

31 jul

+ 26

Hace unos meses vimos algunas técnicas para cargar Javascript asincronamente y así evitar el bloqueo del navegador mientras se carga el fichero Javascript. El mayor problema que nos encontramos al cargar Javascript es que el navegador deja de renderizar la página mientras carga el fichero Javascript.

En cambio, si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página.

Nicholas C. Zakas, ha estado pensando sobre el tema y ha sacado 3 puntos imprescindibles a tener en cuenta para mejorar la carga del javascript de nuestras páginas.

  1. Crear dos ficheros Javascript. En el primero poner lo necesario para cargar dinámicamente otro ficheros javascript y el segundo con el código necesario para nuestra aplicación.
  2. Incluye el primer Javascript el final de la página, justo encima de </body>.
  3. Justo debajo creamos un segundo tag <script> en donde llamaremos al/los fichero/s necesarios.

Nuestro HTML quedaría más o menos así:

<script type="text/javascript" src="http://your.cdn.com/first.js"></script>
<script type="text/javascript">
loadScript("http://your.cdn.com/second.js", function(){
 //initialization code
});
</script>

loadScript()

loadScript() es la función encargada de cargar el fichero Javascript de forma dinámica y encargada de ejecutar el código que indiquemos como segundo parámetro en cuando este esté cargado correctamente.

function loadScript(url, callback){

 var script = document.createElement("script")
 script.type = "text/javascript";

 if (script.readyState){  //IE
    script.onreadystatechange = function(){
     if (script.readyState == "loaded" ||
         script.readyState == "complete"){
           script.onreadystatechange = null;
           callback();
        }
     };
 } else {  //Others
   script.onload = function(){
     callback();
   };
 }

 script.src = url;
 document.getElementsByTagName("head")[0].appendChild(script);
}

Está claro que estas optimizaciones mejoran el resultado, aunque estamos hablando de milisegundos (o pocos segundos en el peor de los casos). Pero es bueno conocer formas de mejorar nuestros scripts y así pulirlos perfectamente.

Rotando texto con CSS

31 jul

+ 8

Jonathan Snook, publica un intersante artículo en el que nos muestra como rotar texto mediante CSS.

text-rotation
(Ver Imagen)

El código está claro que no es estandar y solo funciona en Safari/WebKit, Firefox e Internet Explorer.

//HTML
<div class="example-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>

//CSS
.year {
	/* WebKit, Safari */
	-webkit-transform: rotate(-90deg); 

	/* Firefox 3.5+*/
	-moz-transform: rotate(-90deg);	

	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Una alternativa más estándar, aunque más laboriosa nos la proponen los chicos de CSS-Tricks.

In the Clouds, lleva twitter hasta en tu WordPress

31 jul

+ 1

@nnatali, me envia un mail informándome de que se ha iniciado en el apasionante mundo de la creación de themes para WordPress y lo ha hecho aprovechando el rediseño de Twitter para crear un theme que se asemeja a la página inicial de esta red social y que nos permite conseguir un aspecto muy fresco y conocido.

clouds_portada-580x494
(Ver Imagen)

El theme se visualiza perfectamente en resoluciones desde 800×600. Además permite conectarlo fácilmente con Twitter para mostrar el último tweet en el header del theme. Podeis ver un ejemplo aquí.

Soporte de audio en HTML5 para los diferentes navegadores

31 jul

+ 2

La guerra de los estándares múltimedia nos va a dar más de un dolor de cabeza, y es que como no se acaba de poner de acuerdo cada navegador está haciendo la guerra por su parte y se implementan codecs para unos y no para otros de ahí que no todos los navegadores permitan reproducir una tipos de audio y otros si.

En html5Doctor hacen una tabla, muy útil, de los navegadores y los estándares soportados por cada uno de ellos:

audiosupport
(Ver Imagen)

Como podemos ver, excepto Opera 10 (beta) todos los demás navegadores están ofreciendo 2 alternativas en las que podemos ver como se van posicionando cada navegador.

Si miramos por estándar usado (para seleccionar el más adoptado) nos encontramos que ambos están soportados en almenos 3 navegadores, así que más o menos estamos en el mismo punto que antes de empezar a leer el artículo.

source

Una posibilidad para solventar el problema podría ser usar el tag <source /> para definir una serie de alternativas y el navegador usará una u otra.

<audio controls autobuffer>
 <source src="elvis.ogg" />
 <source src="elvis.mp3" />
 <!-- insertamos alternativa en Flash -->
</audio>

canPlayType

Una de las propiedades del elemento <audio /> (que yo no conocía) es canPlayType, un método que nos devolverá no/maybe/probably (WTF!) dependiendo de la disponibilidad de un tipo determinado. Para ello, en html5doctor, nos proponen un pequeño JS.

if (myAudio.canPlayType) {
 canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
 canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}

Podemos usar este código para añadir un método a los elementos HTMLAudioElement que nos permita pasar 3 parámetros y dependiendo de la disponibilidad de uno u otro use el apropiado.

if (typeof HTMLAudioElement != 'undefined') {
 HTMLAudioElement.prototype.playSong = function(ogg, mp3, wav) {
 if (!myAudio.canPlayType) return false;
 if ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"))
 this.src = ogg;
 else if ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"))
 this.src = mp3;
 else
 this.src = wav;
 }
}
// Ejemplo
document.getElementsByTagName("audio")[0].playSong("http://.../nombre.ogg", "http://.../nombre.mp3", "http://.../nombre.wav");

Es un ejemplo, habría que filtrar los parámetros y poco más, pero es funcional.

Crea miniaturas con la propiedad clip de CSS

31 jul

+ 11

Hoy me he encontrado con este artículo (que creo es un poco antiguo) en el que nos muestran como crear miniaturas con CSS, concretamente usando la propiedad clip del mismo.

clip_css
(Ver Imagen)

Básicamente lo que hacemos es un crop (recorte) de la imagen indicando las coordenadas de corte que deseamos realizar para crear nuestra miniatura.

// HTML
<div class="clipwrapper">
 <div class="clip">
 <img src="castle.jpg" />
 </div>
</div>

// CSS
.clipwrapper{
 position:relative;
 height:225px;
}
.clip{
 position:absolute;
 clip:rect(50px 218px 155px 82px);
}

El resultado es una imagen recortada de un tamaño inferior al original que encaja perfectamente en nuestra aplicación.

WP-Basics, ahora tambien en HTML5

30 jul

+ 4

WP-Basics es un theme para WordPress que propone una estructura básica de ficheros y de ficheros para generar themes más facilmente intentado conseguir una estandarización en la creación de themes.

Existe un proyecto en Google Code en el que se puede descargar el código para echarle un vistazo.  Basicamente se trata de un theme completo que podemos personalizar fácilmente mediante CSS, sin llegar a ser un framework de themes.

Aprovechando este proyecto, Frank de WP-Engineer.com ha creado un proyecto paralelo en el que está adaptando el theme al nuevo estandar HTML5. Simplemente está añadiendo los tags <article />, <section /> y demás atributos integrados en el estandar.

[...]
<?php while ( have_posts() ) : the_post(); ?>
  <article <?php if ( function_exists('post_class') ) { post_class(); } else { _e( 'class="post"'); } ?> id="post-<?php the_ID(); ?>">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  <section class="story">
  <?php if ( is_archive() || is_search() ) { ?>
     <?php the_excerpt() ?>
     <p class="textright"><a href="<?php the_permalink() ?>" rel="bookmark"><?php _e( '... weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ); ?></a></p>
     <section class="info">
       <p><?php _e( 'Aktualisiert am', FB_BASIS_TEXTDOMAIN ); ?> <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date(); ?></time> <?php edit_post_link( __( 'Editieren', FB_BASIS_TEXTDOMAIN ),' &middot; ', ''); ?></p>
     </section>
     <?php } else { ?>
     <?php the_content( the_title( '', '', false ) . ' ' . __( 'weiterlesen &raquo;', FB_BASIS_TEXTDOMAIN ) ); ?>
     <section>
        <?php wp_link_pages(); ?>
     </section>
  <?php } ?>
  </section>
</article>
<?php endwhile; else: ?>
[...]

Basta con echarle un pequeño vistazo al código para ver la mejoría semántica con respecto a lo que estabamos usando hasta ahora. Y eso, teniendo en cuenta que es de lo primero que sale al respecto, ya que aún se podrá mejorar más.

<?php while ( have_posts() ) : the_post(); ?>
<article <?php if ( function_exists(‘post_class’) ) { post_class(); } else { _e( ‘class=”post”‘); } ?> id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>

<section class=”story”>
<?php if ( is_archive() || is_search() ) { ?>
<?php the_excerpt() ?>

<p class=”textright”><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php _e( ‘… weiterlesen &raquo;’, FB_BASIS_TEXTDOMAIN ); ?></a></p>
<section class=”info”>
<p><?php _e( ‘Aktualisiert am’, FB_BASIS_TEXTDOMAIN ); ?> <time datetime=”<?php the_modified_date(‘Y-m-d’); ?>”><?php the_modified_date(); ?></time> <?php edit_post_link( __( ‘Editieren’, FB_BASIS_TEXTDOMAIN ),’ &middot; ‘, ”); ?></p>
</section>
<?php } else { ?>
<?php the_content( the_title( ”, ”, false ) . ‘ ‘ . __( ‘weiterlesen &raquo;’, FB_BASIS_TEXTDOMAIN ) ); ?>
<section>
<?php wp_link_pages(); ?>
</section>
<?php } ?>
</section>

</article>

<?php endwhile; else: ?>

16 ejemplo de Javascript que intenta acabar con Flash

29 jul

+ 12

Si pensamos en el uso de Flash para darle movimiento a elementos de nuestras páginas web, estos ejemplos están pensados para que puedas sustituirlo sin vacilar. Entre esto y el tag HTML5 <video />, le veo un futuro muy negro (a medio largo plazo).

IE6ify, sientete como en casa con cualquier navegador

29 jul

+ 13

¿Eres un amante devoto de Internet Explorer 6.0? ¿Es el único navegador que muestras las páginas como quieres verlas? ¿Los demás navegadores muestran las páginas demasiado bien? Pues acaba con ello, con IE6ify podrás destrozar cualquier web y sentir que estás de nuevo con tu amado IE6 :D

IE6ify
(Ver Imagen)

Este script, encargado de colocar aleatoriamente todos los elementos de la página, simula a la perfección el algoritmo encargado de interpretar el HTML de Internet Explorer 6. Y nos ayudará mostrar cualquier página con ese toque único que solo un gran navegador puede darnos.

IE6 adictos venir a mi!!!

CSS Reset para HTML5

27 jul

+ 4

html5doctor, publica una CSS Reset específica para HTML5. Se trata de una adaptación de la famosa CSS Reset de Eric Meyers, a la que se le han añadido los nuevo elementos de esta nueva versión y se han eliminado los elementos que para HTML5 han sido desaprobados.

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
body {
 line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
 display:block;
}

nav ul {
 list-style:none;
}

blockquote, q {
 quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}

a {
 margin:0;
 padding:0;
 border:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}

ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
}

mark {
 background-color:#ff9;
 color:#000;
 font-style:italic;
 font-weight:bold;
}

del {
 text-decoration: line-through;
}

abbr[title], dfn[title] {
 border-bottom:1px dotted #000;
 cursor:help;
}

table {
 border-collapse:collapse;
 border-spacing:0;
}

hr {
 display:block;
 height:1px;
 border:0;
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}

input, select {
 vertical-align:middle;
}

Puedes descargarla directamente desde el proyecto alojado en Google Code.

WordPress Theme Frameworks, SandBox fué solo el principio

27 jul

+ 15

Hace ya tiempo vimos que se había desarrollado una serie de themes que permiten ser personalizados usando una misma base. A estos themes los llaman WordPress Theme Frameworks y es que con ellos podrás crear themes nuevos de una forma sencilla.

Sandbox, fué el primero y el que ofreció esta idea que muchos más han desarrollado y extendido. Aquí tienes una lista de 20 de estos frameworks que puedes usar para desarrollar tus propios themes.

  1. ThemeHybrid
  2. Carrington
  3. Thematic
  4. Imagination
  5. WP Framework
  6. Buffet
  7. Whiteboard
  8. WordPress Starter Theme
  9. Ashford
  10. Sandbox
  11. OnePress
  12. Blank WordPress Themes
  13. WordPress Naked
  14. Starkers
  15. Vanilla
  16. WordPress Basis
  17. WordPreciousss
  18. WP Constructor
  19. Brave New World
  20. Thesis (Comercial)