jmocana - maquetador web

Recargar HTML5 después de una petición Ajax

admin — Tue, 02 Aug 2011 12:04:47 +0000

Actuálmente me encuentro maquetando una web en HTML5 y una de las funciones que debemos incorporar a la misma es la carga de módulos de HTML5 vía Ajax con jQuery. Una vez incorporada la he probado como siempre en primer lugar en Firefox y todo perfecto. Como siempre después de firefox viene Internet Exploer y es en este punto donde empiezan los malos rollos . Al pinchar sobre uno de los enlaces del menú de navegación y realizarse la carga, los nuevos contenidos cargados han aparecido sin los estilos aplicados. El problema es que la librera Modernizr que utilizo para generar las nuevas etiquetas HTML5 solo se ejecuta la primera vez que cargamos la página por lo que todo el código que carguemos a posteriori vía Ajax no será reconocido por el navegador y por tanto saldrá sin los estilos asignados en la CSS.

Buscando un poco por Mr. Google he encontrado la librería innerShiv de tan solo 1kb aproximadamente que permite reconocer las nuevas etiquetas HTML5 añadidas al DOM ya sea vía JavaScript o Jquery.

Lo único que hay que hacer para que funcione es insertar la función innerShiv() dentro de la función que vayamos a utilizar para añadir el código ya sea de javascript o Jquery, con la única diferencia de que si utilizamos jquery tendremos que pasar un segundo parámetro a la función innerShiv, más concretamente una variable booleana false.

Os pongo dos ejemplos de como se utilizaría la función con javaScript y con jQuery

Ejemplo javaScript


s.appendChild(innerShiv("Happy section loves CSS. (:"));

Ejemplo jquery


$(this).html(innerShiv(html, false))

Podéis encontrar toda la información sobre la librería creada por joe bartlett en http://jdbartlett.com/innershiv/

CSS3 Transiciones

admin — Thu, 28 Jul 2011 11:11:20 +0000

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.

VER EJEMPLO

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.

Soporte en los navegadores

Las transiciones son soportadas por los siguientes navegadores – ver soporte

Ejemplo

Necesitaréis un navegador con soporte de transiciones para poder visualizar el ejemplo correctamente. En el apartado superior tenéis un enlace a la tabla de soportes. La transición se lanza con el evento hover, para poder verla en funcionamiento tendréis que colocar el ratón sobre el fondo azul.

A continuación os dejo el código que he utilizado



  Transciciones

CSS3 Multiple Backgrounds

admin — Wed, 27 Jul 2011 11:29:38 +0000

Una de las ventajas más esperadas de CSS3 es la posibilidad de insertar varios fondos en un mismo elemento, esto nos permitirá que nuestro HTML sea mucho más simple y evitaremos problemas de divitis.

Como siempre voy a realizar un ejemplo muy sencillo y vamos viendo como utilizarlo. Me he descargado una serie de imágenes que representan distintos estados meteorológicos (nubes, sol y nubes, lluvia y un arco iris) y vamos a intentar plasmarlas todas ellas sobre un mismo contenedor.

VER EJEMPLO

Creo el contenedor sobre al que vamos a asignar las imágenes

Sintaxis Multiple backgrounds

A continuación asignamos tantos fondos a nuestro contenedor como queramos

Como podéis ver hemos creado un solo contenedor sin tener que recurrir a una estructura del tipo:

Cuanto antes declaremos un fondo menor z-index tendrá este. Según he colocado yo mis fondos el arco iris será el elemento que tendrá más profundidad, a continuación las nubes, seguido de la lluvia y por último el sol.

Finalmente nuestro ejemplo quedaría tal que así

Podéis echar un vistazo a la especificación de la W3C aquí: CSS Backgrounds and Borders Module Level 3

Soporte en los navegadores

Los navegadores que soportan está propiedad son: Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ y IE9 Beta. Una buena costumbre sería asignar un background-color al final de los multiples background como estilo alternativo para los navegadores que no soportan esta propiedad (IE8-), como podéis ver en este caso le he añadido un background-color: #87CEFA; al final del todo para simular el cielo.

Nuevas llamadas en HTML5

admin — Tue, 26 Jul 2011 09:17:55 +0000

DTD

XHTML 1.1
HTML5:

Codificación

XHTML 1.1
HTML5:

LINK / SCRIPT

XHTML 1.1:
HTML5:

Repaso Javascript

admin — Fri, 22 Jul 2011 10:14:25 +0000

A modo de repaso dejo en este post un listado de entradas relaccionadas con el mundillo javaScript.

JavaScript & Ajax

admin — Wed, 20 Jul 2011 09:51:30 +0000

Esta vez voy a intentar explicar como realizaríamos una carga ajax de un archivo xml el cual contiene cierta información que queremos mostrar en nuestra web, para ello realizaré un ejemplo y os iré describiendo detalladamente todos los pasos que voy siguiendo. En nuestro ejemplo tendremos un listado con tres películas, al pinchar sobre cada una de ellas conectaremos con un archivo xml que es donde gurdamos toda la información relativa a las tres pelis, buscaremos la información relativa a la película sobre la que se a clicado y la imprimiremos por pantalla en un formato HTML específico. A continuación os pongo el ejemplo en funcionamiento:

Ver código js completo

Paso 1: Añadir los eventos

El primer paso que daremos será asignar el evento correspondiente a cada uno de los enlaces disponibles en el listado, en nuestro caso son tres.

function addLoadEvent(func) {
			var oldonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			}
			else {
				window.onload = function() {
					oldonload();
					func();
				}
			}
		}
function anadeEvento(elemento,evento,funcion) {
		 if(document.addEventListener){
			 elemento.addEventListener(evento, funcion, false);  // Resto navegadores
		 }
		 else{
			 elemento.attachEvent("on"+evento,  funcion ); // IE8-
		 }
	  }

//Asignamos eventos
      addLoadEvent(function() { 

	     var listado_pelicula = document.getElementById("listado-peliculas");
    	 var enlaces_pelicula = listado_pelicula.getElementsByTagName("a");
				 
	     for(var i=0; i



Para evitar el uso de javascript intrusivo hacemos uso de las funciones addLoadEvent y anadeEvento (ya hable de estas funciones en este post)

Una vez se haya cargado la página capturamos los tres enlaces del listado y los recorremos uno por uno pasándolos como parámetro a la función anadeEvento, junto con el evento que deseamos, en este caso el evento click y junto a la función que queremos que se ejecute al hacer clic sobre uno de nuestros enlaces.

Mucho cuidado con llamar a la función que queremos ejecutar directamente, porque no nos funcionará. Por ejemplo:


for(var i=0; i


Cargar el xml
Una vez tenemos asignados nuestros eventos lo que tendremos que hacer es realizar la carga de el xml donde se guarda toda la información relativa a las películas, para ello hacemos uso de la función cargadorPeliculas


//Cargamos el XML 
		function cargadorPeliculas(id_pelicula) {


		  var xml_http; 
		  var url_xml = "http://www.jmocana.eu/wp-content/themes/jmocana/xml/peliculas.xml?x=0";
		  
		  try {  xml_http = new ActiveXObject('Msxml2.XMLHTTP'); }
		  
		  catch (e) 
		  {
			  try {   xml_http = new ActiveXObject('Microsoft.XMLHTTP'); } // código para IE6
			  catch (e2) 
			  {
				try {  xml_http = new XMLHttpRequest(); } // código para IE7+, Firefox, Chrome, Opera y Safari
				catch (e3) {  xml_http = false;   }
			  }
		   }
  
		  xml_http.onreadystatechange  = function() { 
			  
			   if(xml_http.readyState  == 4)
			   {
					if(xml_http.status  == 200) 
						{	
						
						 //ok, se ha cargado el XML correctamente						
						 var xml_doc = xml_http.responseXML										
					
						 getInfoPelicula(xml_doc, id_pelicula)
						}
					else 
					  {
						  // error cargando el XML
						  document.getElementById(en_que_div).innerHTML = "Error "+xml_http.status+" cargando XML";				
					  }
			   }
		  }
		  
		  
		 xml_http.open("GET",url_xml,  false); 
		 xml_http.send(null); 	
  }


La función cargadorPelicula recibirá el parámetro id_pelicula con el identificador de la película que hemos seleccionado
Lo primero que hacemos en esta función es asignar la ruta del xml a una variable.
para poder intercambiar datos con el servidor sin necesidad de recargar la página haremos uso del objeto XMLHttpRequest
para los navegadores modernos, mientras que para IE6- se hace uso del objeto ActiveXObject
Para enviar una petición al servidor utilizamos el método open: open(method,url,async)

method: Tipo de petición: GET, POST
url: Localización del fichero
async: true (asíncrono), false(síncrono)

onreadystatechange Almacena una función que será llamada automáticamente cada vez que la propiedad readyState cambia.
En nuestro ejemplo creamos el objeto xml_http la propiedad readystate puede tomar los siguientes valores

0: La petición no ha sido inicializada
1: La conexión está establecida
2: La petición ha sido recibida
3: procesando petición
4: La petición ha finalizado y la respuesta esta lista
 

Por otro lado la propiedad status puede tomar los siguientes valores

200: OK
400: Página no encontrada

En nuestro ejemplo comprobamos que la petición a finalizado y la respuesta está lista (readystate = 4) y además status = 200 (OK)
Para obtener la respuesta del servidor usamos la propiedad responseText (devuelve una cadena) o la propiedad responseXML (devuelve un XML)

Una vez tenemos toda la información guardada en la variable xml_doc la pasamos a la función getInfoPelicula junto con la variable id_pelicula y nos disponemos entonces a encontrar la posición dentro del XML en la que se encuentra la información solicitada
Encontrar posición de la información dentro del XML

//Buscamos la posición de la película en el XML
		function getInfoPelicula(xml_doc, id_pelicula){
	 
			var peliculas = xml_doc.getElementsByTagName("pelicula");
	   
			for(var i=0; i
En esta sencilla función lo único que hacemos es recorrer todas las peliculas de nuestro xml hasta hacer coincidir el id del enlace seleccionado y el id de la etiqueta pelicula que está siendo evaluada. Una vez coincidan los dis ids llamaremos a la función pintarInfoPelicula pasandola como parametros xml_doc y la variable i que contiene la posición en la que se encuentra la película solicitada dentro del XML.
Imprimir información por pantalla

//Imprimimos datos
		function pintarInfoPelicula(xml_doc, pos){
			
			
			
		  //Si existe el contenedor "cont_detalles" lo eliminamos
		  if(!(document.getElementById("cont_detalles") == undefined)){
			  var contenedor = document.getElementById("cont_detalles");
			  contenedor.parentNode.removeChild(contenedor);
		  }	  
	
		  //recogemos la información relativa a la pelicula seleccionada	
		  var titulo = xml_doc.getElementsByTagName("titulo")[pos].childNodes[0].nodeValue;
		  var anyo = xml_doc.getElementsByTagName("anyo")[pos].childNodes[0].nodeValue;
		  var distribuidora = xml_doc.getElementsByTagName("distribuidora")[pos].childNodes[0].nodeValue;
		  var duracion = xml_doc.getElementsByTagName("duracion")[pos].childNodes[0].nodeValue;
		  var foto = xml_doc.getElementsByTagName("foto")[pos].childNodes[0].nodeValue;
		  var sinopsis = xml_doc.getElementsByTagName("sinopsis")[pos].childNodes[0].nodeValue;
		  
		  //creamos la cadena de salida		  
		  var txt = "" + titulo + "";
		  txt += "";
		  txt += "Año:";
		  txt += ""+ anyo +"";
		  txt += "Distribuidora:";
		  txt += ""+ distribuidora +"";
		  txt += "Duración:";
		  txt += ""+ duracion +"";
		  txt += "Sinopsis:";
		  txt += ""+ sinopsis +"";
		  txt += "";
		  
		  //Creamos elementos y asignamos cadena
		  var ejemplo = document.getElementById("ej11");
		  var contenedor = document.createElement("div");
		  ejemplo.appendChild(contenedor)
		  contenedor.setAttribute("id", "cont_detalles");
    	  contenedor.innerHTML=txt;
		  	return false;

}


En esta función seguiremos los siguientes pasos:

Comprobamos si existe el contenedor cont_detalles. Si existe lo eliminamos para que no se anide la información dentro de la página
Almacenamos los datos en variables ej: var titulo = xml_doc.getElementsByTagName("titulo")[pos].childNodes[0].nodeValue;
Creamos la cadena de salida y la almacenamos en la variable txt
Finalmente creamos un contenedor y lo añadimos al DOM junto con la salida almacenada en la variable txt



getAttribute, setAttribute, textContent, innerText y innerHTML
admin — Mon, 04 Jul 2011 11:50:58 +0000
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 = "Nuevo texto insertado en mi_id
";



Detectar navegador con javaScript
admin — Thu, 09 Jun 2011 16:35:31 +0000

Debido al distinto comportamiento de los navegadores web muchas veces se hace imprescindible detectar el nombre del mismo así como la versión que se está utilizando para realizar una programación determinada.
Gracias al objeto navigator de javaScript podemos detectar tanto el nombre como la versión de navegador que se está utilizando.
El objeto navigator tiene varias propiedades aunque quizás la más interesante sea userAgent. Mediante el uso de expresiones regulares aplicadas sobre esta propiedad podremos detectar la información que necesitamos.
Tenéis información detallada sobre el objeto navigator en la siguiente dirección:
Ver información detallada en javascriptkit.com
Estos son algunos de los valores de las propiedades del objeto navigator relativo a tu navegador:

    appCodeName: 
    appName: 
    appVersion: 
    userAgent: 





Javascript: Algunas funciones interesantes
admin — Thu, 02 Jun 2011 10:09:24 +0000
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.



    Hola mundo
    toogle


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



insertAfter
Creada por Jeremy Keith, nos permite insertar un nodo después de otro elemento padre.
function insertAfter(parent, node, referenceNode) {
	parent.insertBefore(node, referenceNode.nextSibling);
}

inArray()
Busca un valor dentro de una array.
Array.prototype.inArray = function (value) {
	var i;
	for (i=0; i < this.length; i++) {
		if (this[i] === value) {
			return true;
		}
	}
	return false;
};





Manipulación del DOM con javaScript
admin — Wed, 01 Jun 2011 15:32:28 +0000
A la hora de manipular el DOM tenemos el siguiente listado de expresiones

   document.getElementById(id_elemento);: Permite acceder al primer elemento con id “id_elemento”
   document.getElementsByTagName(elemento): Devuelve una lista de nodos con todos los elementos con el nombre “elemento”.
 En caso de querer hacer referencia a un elemento específico, por ejemplo el primero, podríamos hacer uso de la expresión: document.getElementsByTagName(elemento)[0]
   document.createElement(elemento);: Crea un nuevo elemento en el DOM
   document.createTextNode(“texto”);: Genera un nuevo nodo de texto.
   appendChild: Añade un nodo hijo a un padre concreto. Por ejemplo:

  var nuevoEnlace = document.createElement("a");
var nodoTexto = document.createTextNode("Esto es un enlace");
nuevoEnlace.appendChild(nodoTexto);

   elementoPadre.insertBefore(nuevoElemento, elementoReferenciado);: Inserta un elemento justo antes de otro que le especifiquemos.
   innerHTML: Permite introducir HTML dentro de una etiqueta. 
   parentNode: Selecciona el nodo padre de un nodo en concreto.
   removeChild: Elimina un nodo hijo
   getAttribute(propiedad);: Devuelve el valor de una propiedad que le pasamos por parametro
   ancla.style.display: Devuelve un estilo concreto de un elemento
   document.getElementsByClassName(names);: Retorna un conjunto de elementos los cuales poseen la clase “names”.


getElementsByClassName pertenece a la nueva especificación de HTML5 y tan solo algunos navegadores lo soportan, por ejemplo Internet Explorer en todas sus versiones inferiores a la 9.

Hasta que todos los navegadores soporten getElementsByClassName podremos hacer uso de la siguiente función:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}
Podemos encontrar información mas detallada en la siguiente página: Introducción a la manipulación del DOM mediante Javascript (Maestros del web)