aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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"
});

The 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.

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.

Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.

// HTML
<ul id="clock">
   	<li id="sec"></li>
   	<li id="hour"></li>
	<li id="min"></li>
</ul>
// JS
$(document).ready(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css("-webkit-transform", srotate );

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css("-webkit-transform", hrotate );

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css("-webkit-transform", mrotate );

      }, 1000 );

});

Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate(); a los elementos que componen las manillas del reloj.

Jx, es una interfaz gráfica desarrollada por y para MooTools que nos pone a nuestra disposición una serie de herramientas para desarrollar interfaces en un menor espacio de tiempo. 

Elementos como paneles informativos, menús, grids,… se convierten en pocas líneas en las que definiremos el contenido y evitaremos perder demasiado tiempo en crear dichos elementos.

new Jx.Panel({
        image: 'images/page_white_world.png',
        label: 'Basic Panel 2',
        contentURL: 'panel_content.html',
        menu: true,
        height: 200
    }).addTo('panelBasic');

Los acabados obtenidos son realmente agradables a la vista, muy acorde con las aplicaciones web que se hacen en la actualidad. Pero al estar desarrollados usando CSS para el diseño, nos permitirá cambiar su apariencia fácilmente sin tener que meter mano en el código fuente.

Además, dispone de una API bastante extensa en la que podemos encontrar todas las opciones disponibles y en que elementos usarlos. Los ejemplos que nos encontramos en la página nos muestran algunas de las posibilidades de esta librería.

¿Te gustaría conocer el framework que usan en esa aplicación tan molona que siempre visitas? Pues, puedes hacerlo revisando el código fuente o usando herramientas como Firebug para ver las entrañas y descubrilo, pero si eso puede suponer un problema, ya que te roba algo de tiempo, puedes usar WTFramework.

WTFramework es un bookmark que podemos guardar en nuestros marcadores y que al accionarlo sobre una aplicación nos muestra en la esquina superior derecha la información referente al framework JS que se está usando en ella.

Actualmente la lista de detectados es esta:

• MooTools
• jQuery
• Prototype
• Script.aculo.us
• YUI
• Base2
• Mochikit
• Dojo

[Bookmark]

Durante la evolución de un proyecto tendemos, sin darnos cuenta, a ensuciar nuestro código. Ya sea aplicando parches a los fallos encontrados o añadiendo nuevas funcionalidades no pensadas previamente. Por ese motivo conocer algunos principios básicos nos pueden ayudar a crear un código que se mantenga en el tiempo igual que el primer día.

1) Doctype STRICT

Si ya tienes algo de soltura deberías apostar por STRICT para definir en el doctype de tu web. De esta forma estarás asegurándote un poco más de tiempo con un doctype válido.

2) Cuidado con el carácter & (&amp;) y demás carácteres especiales

Los carácteres especiales en el texto deben ir siempre codificados según el estandard, así conseguimos que nuestro código sea limpio y evitamos producir errores innecesarios y fáciles de solventar en el validador de la W3C.

3) Indentación, Indentación … indentación

Por encima de la eficiencia del código, la mayoría de proyectos deben ser claros y fáciles de interpretar por cualquiera. Piensa que no sabes si dentro de 3 meses o 5 años, vas a tener que volver a tocar el código. Así que dedícate un tiempo para indentar el código y dejarlo claro.

4) Separa el contenido de la funcionalidad y el diseño

No me cansaré de decir que la separación de capas es algo primordial, al igual que la identación ayuda a la comprensión del código, la separación de las diferentes capas ayuda a conocer donde está ubicada cada parte de la web. Sin contar que conseguir idependizarlas, lo que nos permite modificar cualquiera de ellas afectando a las demás sin necesidad de modificar las demás.

5) Usa los tags correctamente

Conocer las propiedades de los tags HTML permitirá que hagamos un código más semántico y sobretodo estandar. Es importante usar los tags correctamente ya que aunque el navegador permita mostrar el contenido como nosotros queremos mostrarlo, la estructura correcta nos ayudaría en terminos de SEO…

6) Elimina elementos innecesarios

Por desgracia al pasar del diseño en tablas al diseño con divs, podemos caer en una etapa de “divitis” que nos hace usar div’s para todo. No debemos usar elementos innecesarios para conseguir lo mismo que conseguiríamos con menos elementos. Este punto hace refecia directa al punto 5.

7) Piensa bien los nombres que usas

En muchos casos tendemos a usar nombres poco descriptivos a demasiado descriptivos. Este ejemplo muestra ua muestra clara de lo que quiero decir:

8 ) Deja la tipografía a los CSS

Debemos pensar que el diseño lo controla el CSS, y por ello todo lo relacionado con él debe ir reflejado en los ficheros CSS. Por ejemplo, el texto en mayusculas podemos solventarlo con text-transform: uppercase;

9) Class/ID en el <body />

Una forma de conseguir mayor flexibilidad en nuestros CSS es usar id/class en nuestros elementos <body />. De esta forma podemos variar el diseño de ciertos elementos dependiendo dle tipo de body que especifiquemos.

10) Validación

La validación de nuestro código es más que poner un icono en la parte inferior. La validación nos ayuda a completar unos aspectos básicos que los diseños web deben cumplir. No implica que un desarrollo esté mejor o peor hecho, sinó que nos ayuda a conguir un mínimo imprescindible para diferenciarnos del código generado por un programa (Frontpage,…).

11) Aplícale lógica a la estructura

Hemos de pensar que el código se ha de leer de arriba hacia abajo y que siguiendo esta premisa debemos generar una estructura colocando elementos seguidos unos a otros de una forma lógica. Hemos de pensar 2 veces si colocamos un elemento en esa posición o lo ponemos en otra.

12) Haz lo que puedas

El esfuerzo se nota y aunque no sea a la primera, ni a la segunda, llega un momento en el que ese esfuerzo se acaba recompensando. Simplemente hemos de ser pacientes y esperar a que ese momento llegue.

La nueva Wordpress 2.7 integra la posibilidad de escribir posts rápidos directamente desde el panel de administrador, pero me he fijado que no usa las categorías, lo que hace que el sistema para montar mini posts que desarrollamos no sirva de mucho.

Por suerte, podemos modificar este formulario para añadirle la categoría del mini posts y así darle partido a los asides o miniposts que montamos.

Solo hemos de modificar la categoría a la que ha de asociar directamente el post. Para ello, podemos hacerlo con javascript o editando el fichero dashboard.php a la altura de la línea 310 para insertar el <input /> con el ID de la categoría para los asides.

En javascript:

jQuery("#quick-post-title").after('<input type="hidden" name="post_category[]" value="ID_CATEGORIA" />');

fichero dashboard.php línea 310

//Añadimos esto
<input type="hidden" name="post_category[]" value="ID_CATEGORIA" />

La opción de editar el fichero dashboard.php tiene una serie de problemas como:

• Tener que modificarlo cada actualización de Wordpress ya que se borraría.
• Todo los posts escritos desde el QuickPress serían Asides.

Así que cada uno use el que crea más conveniente.