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 »
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>";
Navegando un poco por la red me he topado con algunas funciones de javaScript bastante interesantes y que considero necesario tenerlas bien a mano por lo que las guardo en este post por si hay que rescatarlas.
toggle()
Ocultará o mostrara elementos dependiendo del estado anterior.
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
Os dejo un ejemplo sencillo.
El código al completo del ejemplo sería:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(function() {
function anadeEvento(elemento,evento,funcion) {
if(document.addEventListener){
elemento.addEventListener(evento, funcion, false); // Resto navegadores
}
else{
elemento.attachEvent("on"+evento, funcion ); // IE8-
}
}
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
var enlace = document.getElementById("enlace_toggle");
obj = "parrafo1";
anadeEvento(enlace, "click", function(){toggle(obj)})
});
Leer el resto de esta entrada »
Después de una temporadita haciendo uso de la librería jQuery he olvidado algunos conceptos básicos de javaScript por lo que empezaré una serie de posts tratando alguno de estos conceptos a modo de recordatorio personal, si además le sirve a alguien más pues mejor que mejor.
Como refleja el título del post empezaré abordando el manejo de los eventos. Es importante a la hora de asignar los eventos separar el código js del HTML por motivos de accesibilidad.
<a href="javascript:window.open()">Abrete sésamo</a> <!-- javaScript intrusivo -->
Para evitar tener javaScript intrusivo en nuestra página empezaremos por apoyarnos en la función de Simon Willison addLoadEvent. Esta función nos permitirá cargar varias funciones una vez la página se haya cargado, además funcionará correctamente en el caso de que el evento onload haya sido asignado previamente.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(function() {
//funcionabilidad
});
Por otro lado haremos uso de dos funciones para añadir y borrar los eventos que queramos: “anadeEvento” y “borrarEvento”. Pasaremos como parámetros de las funciones el elemento al que queremos asignar el evento, el evento y la función que queremos ejecutar.
function anadeEvento(elemento,evento,funcion) {
if(document.addEventListener){
elemento.addEventListener(evento, funcion, false); // Resto navegadores
}
else{
elemento.attachEvent("on"+evento, funcion ); // IE8-
}
}
function borrarEvento(elemento,evento,funcion) {
if(document.removeEventListener){
elemento.removeEventListener(evento, funcion, false); // Resto navegadores
}
else{
elemento.detachEvent("on"+evento, funcion ); // IE8-
}
}
Como podéis ver en el código hay que realizar funcionabilidades distintas dependiendo del navegador. Para Internet Explorer 8 o inferior hacemos uso del método attachEvent mientras que para el resto de navegadores usamos addEventListener. A la hora de borrar eventos IE hace uso de detachEvent y el resto utiliza removeEventListener
Voy a realizar un ejemplo sencillo a modo de prueba en el que tendremos un botón con el típico alert “hola mundo” y otro botón que será el encargado de anular el evento que hace saltar el mensaje.
hola mundo!
borrar
A continuación os dejo el código al completo:
Leer el resto de esta entrada »
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 »
Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.
Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage
sessionStorage
La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.
localStorage
Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.
Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:
Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com
Leer el resto de esta entrada »