Notepad++ puede parecer en un principio un editor web bastante sencillito, superado por otros editores como puede ser Sublimetext, sin embargo tenemos la posibilidad de instalar un buen número de plugins que harán que Notepad++ pase de ser un editor bueno a uno muy bueno. El sistema de gestión de plugins viene dado por otro plugin, el Plugin Manager que ya viene por defecto en la última versión de Notepad descargable. Plugin Manager es muy rápido y fácil de usar y en pocos minutos conseguiremos aumentar las funcionabilidades de nuestro editor. Para conseguir un editor web potente tan solo debemos seguir los siguientes pasos:
Paso 1: Descargando Notepad++
Descargaremos la última versión de Noepad++ desde la página de descargas de la página oficial
Paso2: Haciendo los primeros ajustes
Una de las principales funcionabilidades que se le pide a un editor web es el autocompletado, para activarlo en Notepad++ haremos lo siguiente: “Configuracion”»”Preferencias”»”Copias de seguridad/Autocompletar”. Desde este panel y en el fieldset de Autocompletar marcamos “Habilitar autocompletar en cada entrada”, “Completar entrada” y Pistas para los parámetros de la función.
Una de las cosas que ya viene integrada en las ultimas versiones de Notepad es Zen Coding, el cual nos permite crear todo tipo de estructuras HTML a partir de una simple sentencia. Si nunca habéis oído hablar de el os recomiendo echar un ojo a la wiki del plugin en la página de Google. Ver documentación de Zen Coding
También puede ser interesante dedicarle un rato a configurar los estilos de lenguaje del editor. Desde “Configuración”»”Configuración de estilo”» podemos dar la apariencia que queramos a nuestro código.
Gestión de plugins
Lo que verdaderamente hace muy interesante a Notepad++ son los plugins de los que disponemos y lo fácil que es gestionarlos con “Plugin Manager”. Desde la pestaña “Plugins”»”Plugin Manager”»”Show plugin manager” podemos visualizar una ventana desde la que podremos ver los plugins disponibles para nuestra versión de Notepad e instalar los que queramos, ver todas las actualizaciones disponibles y ver los plugins que tenemos instalados y eliminarlos si así lo queremos.
Leer el resto de esta entrada »
¿Que es Less?
Less es un lenguaje dinámico de hojas de estilo. Less extiende CSS con comportamientos dinámicos tales como uso de variables, mixins, operadores y funciones. Less funciona en lado cliente en Firefox, Safari y Google Chrome y en el lado servidor con Node.js y Rhino.
¿Como usar less?
A la hora de utilizar less tendremos dos opciones:
- La primera opción sería incluir en nuestro HTML un javaScript que se encargue de transformar los archivos .less a .css (Dscargar less.js (versión 1.3.0)). Esto no nos funcionará en IE8-.
Personalmente esta opción no me gusta mucho ya que en caso de tener deshabilitado el javaScript en el navegador la página se vería sin estilos por lo que en este caso la presentación estaría dependiendo de la funcionabilidad.
- Otra opción más accesible consistiría en descargar algún compilador que compile los archivos .less a .css en nuestra maquina subiendo finalmente al servidor únicamente el css resultante de nuestra compilación. Entre lo que me han comentado amigos y lo que he buscado por la red me he encontrado con tres compiladores que tienen buena pinta:
- less.app
- SimpleLess
- Crunch!
Leer el resto de esta entrada »
Las transiciones css nos permiten cambiar los valores de las propiedades de las hojas de estilo suavemente durante un intervalo de tiempo. Estas suaves animaciones peden ser provocadas por distintos eventos: click, hover, focus, active, o con cualquier cambio provocado sobre el elemento.
Actualmente para conseguir animar un botón cuando recibe uno de estos eventos necesitamos hacer uso de algún sprite o de código javaScript si el efecto que le queremos dar a la transición es más específico. Mediante las transiciones CSS, con tan solo unas pocas líneas de código conseguiremos animar nuestros botones en poco tiempo y con efectos muy conseguidos.
Sintaxis
Nos vamos a encontrar con tres partes de la transición en la declaración:
- transition-property: La propiedad sobre la que se va a realizar la transición
- transition-duration: Duración de la transición (ms-milisegundos, s-segundos)
- transition-timing-function: Como de rápido se da la transición. Puede tomar los siguientes valores:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
Retrasando la transición
Existe la posibilidad de retrasar la animación durante un intervalo de tiempo. Este efecto lo conseguiremos con el uso de transition-delay
Prefijos y metodo abreviado
Para que las transiciones funcionen correctamente en los navegadores que las soportan tendremos que utilizar los respectivos prefijos que utilizan cada una para hacer las declaraciones, así por ejemplo para el ejemplo que haré a continuación haré 4 declaraciones.
-webkit-transition: background-position 10s linear; /* safari */
-moz-transition: background-position 10s linear; /* mozilla firefox */
-o-transition: background-position 10s linear; /* opera */
transition: background-position 10s linear; /* llamada genérica */
En este caso he utilizado el método abreviado sin tener que hacer una declaración por cada una de las propiedades de la transición.
Leer el resto de esta entrada »
A modo de repaso dejo en este post un listado de entradas relaccionadas con el mundillo javaScript.
getAttribute
Devuelve un atributo determinado relativo a un elemento.
Ejemplo (Nos devolvería el identificador del elemento div):
document.getElementById("div").getAttribute("id");
Con jquery podríamos conseguir lo mismo gracias al método attr().
Ejemplo:
$("div").attr("id");
setAttribute
Fija un determinado valor en un elemento determinado.
Ejemplo: (Fijaríamos el valor 'mi_id' en el atributo id del elemento/s div)
document.getElementById("div").setAttribute("id", "mi_id");
Podríamos conseguir lo mismo con jquery de la siguiente forma:
$("div").attr("id", "mi_id");
textContent Vs innerText
Estos dos métodos nos permiten conseguir lo mismo, obtener el texto englobado por un elemento en concreto con la diferencia de que cada uno funcionará o no dependiendo del navegador en el que se ejecuten. Así por ejemplo textContent funcionará en Firefox pero no en IE. Por el contrario innerText trabajará correctamente en IE ero no en firefox. Una forma válida de conseguir nuestro propósito con éxito en todos los navegadores sería la siguiente:
var hasInnerText =
(document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
var elem = document.getElementById('id');
var elem2 = document.getElementById ('id2');
if(!hasInnerText){
elem.textContent = value;
elem2.textContent = value;
} else{
elem.innerText = value;
elem2.innerText = value;
}
innerHTML
Una forma más sencilla de obtener el texto de un elemento sin tener que recurrir a condicionales con los cuales diferenciar entre navegadores sería mediante el método innerHTML. Mediante este método recuperaremos tanto el texto como el etiquetado HTML englobado por un elemento en concreto.
Ejemplo: (Imaginemos que queremos fijar un texto en un contenedor cuyo id es "mi_id"):
document.getElementById('mi_id').innerHTML = "<p>Nuevo texto insertado en mi_id</p>";
Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:
Requisitos
- Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
- IE 5.5 +. (IE9 no lo soporta por ahora)
Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.
Uso
Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.
<head>
<script type="text/javascript" src="/public/path/jooscript.js"></script>
<script type="text/javascript" src="/public/path/fxcanvas.js"></script>
<!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
<comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>
Manuales de canvas
Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales
Ejemplo
A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)
Leer el resto de esta entrada »
Después de mucho tiempo sin escribir me he dignado por fin a quitar las enormes telarañas que rondaban por todo el blog y le he dado un nuevo lavado de diseño con la intención de empezar a utilizar tecnologías más modernas, así como de conseguir un diseño más sencillo que favorezca la experiencia de usuario y la accesibilidad.
Principalmente he integrado tres cambios en el blog:
- Cambio radical del diseño buscando unos contenidos mejor estructurados y usando unos colores pastel que le aporten sencillez y que permitan una fácil lectura de todos los contenidos del blog
- Uso de HTML5:
Código HTML5
<!DOCTYPE html>
<html lang="es">
- Por último he abierto cuentas en twitter, Linkedin y Bitacoras, con la intención de realizar un seguimiento de todos los artículos interesantes que vaya encontrando, mostrar mi perfil profesional y disponer de una zona donde se resuma toda mi acividad en el blog respectivamente. Las cuentas son las siguientes:
Sin más, os deseo a todos un feliz año 2011, haber si en este año que entra me lo curro un poquito más y os puedo ofrecer algún que otro post de interés 