jmocana - maquetador web

Notepad++, un buen editor web para maquetadores.

admin — Mon, 30 Apr 2012 11:30:30 +0000

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.

Instalando los plugins

Desde Plugin Manager es muy sencillo instalar los plugins que querramos, simplemente desde la pestaña “Available” marcaremos el plugin que nos interesa y seleccionamos “Install”. Una vez instalemos el plugin tendremos que reiniciar Notepad.

A continuación os pongo un listado de los plugins que tengo instalados y que a mi modo de ver son los más interesantes si te dedicas la maquetación web.

Plugins recomendados

Compare: Este plugin nos da la posibilidad de comparar dos archivos y ver las diferencias existentes entre ellos. Muy útil cuando alguien ha actualizado un código y necesitamos pasar solo la parte modificada a otro archivo distinto. Muy útil tanto para maquetadores como desarrolladores web.
HTML Tag: Nos permite por un lado encontrar el cierre de una etiqueta simplemente pinchando sobre la apertura y haciendo “Ctrl + T”, también podemos seleccionar la etiqueta de cierre y todo el contenido englobado pinchando sobre la etiqueta de apertura y haciendo “Ctrl + Shift + T”. Gracias a este plugin no es necesario ir dejando marcas mediante comentario cada vez que cerremos un div.
Otra de las posibilidades que nos da HTML Tag es codificar y decodificar entidades HTML. Al probar por primera vez esta opción, notepad++ me devolvió el siguiente error:
. No se me había instalado el fichero de entidades, así que tuve que buscarlo e instalarlo manualmente. El archivo problemático es HTMLTag-entities.ini y si que viene en el comprimido que se ofrece en la página http://sourceforge.net/projects/npp-plugins/files/HTMLTag/HTMLTag%20plugin%20v0.4.0/.
Una vez descargado el zip descomprimir el archivo y podréis ver que hay una carpeta llamada “Dat”, dentro de esta carpeta se encuentra el archivo en cuestión. Coparlo y pasarlo a la siguiente ubicación “C:\Archivos de programa\Notepad++\plugins”. Reiniciar Notepad++ y ya debería funcionar correctamente.
JSMin: Permite comprimir un archivo para reducir el peso del mismo. Muy útil sobre todo para los archivos JavaScript.
Light Explorer: Nos da la posibilidad de abrir y cerrar fácilmente, simplemente con pulsar “Alt + A” un explorador de windows en el lateral del editor, dandonos la posibilidad de gestionar facilmente los archivos de nuestro proyecto.
WebEdit: Este plugin nos permitirá crear un gestor de sniplets muy visual y fácil de utilizar. En principio WebEdit viene instalado con unos sniplets sencillos como un enlace, tablas, strong, etc. Estos sniplets no nos servirán de mucho ya que con Zen Coding podemos escribir este tipo de código bastante más rápido, pero si nos será de gran utilidad a la hora de configurarnos nuestros propios sniplets, consistentes en estructuras más complejas y que solemos utilizar con bastante frecuencia.
Una vez instalemos WebEdit veremos como se añaden una serie de botones a la parte derecha de la barra de herramientas. Cuando pinchemos sobre uno de los botones escribiremos el HTML asignado al mismo en nuestro documento. Como comentaba por defecto los botones vienen configurados con sentencias HTML simples, para poder configurar sentencias más complejas y que usemos con mayor asiduidad pincharemos en “Plugins”»”WebEdit”»”Edit config”. Automáticamente se abrirá el archivo WebEdit.ini. Este archivo de configuración se divide en tres partes:
- [Commands]
- [Tolbar]
- [Tags]
En [Commands] crearemos nuestros sniplets mediante la siguiente sintáxis y secuencias de escape:
```
;Sintáxis: =|
;Secuencias de escape: \\ \t \n \r
```
Al escribir el sniplet es importante situar el carácter | donde queramos que aparezca el cursor cuando insertemos el código. Si no lo hacemos el sniplet no funcionará.
todo el sniplet deberá ir en la misma línea y utilizaremos las secuencias de escape para dar formato al código. Las que más utilizaréis serán \n para hacer un salto de línea y \t para tabular. Un sniplet de ejemplo podría ser el siguiente:
```
&Nuevo documento=\n\n\n\t\n\t|\n\n\n
```
Desde [Toolbar] asignaremos a un sniplet situado en la posición n una determinada imagen en formato bmp. Las imágenes que utilicemos deben tener una dimensión de 16 x 16 px y encontrarse ubicadas en la siguiente ruta: “C:\Documents and Settings\usuario\Datos de programa\Notepad++\plugins\config”. No busquéis en “C:\Archivos de programa\Notepad++\plugins\Config” porque no encontraréis nada.
Desde [Tags] podremos crear una especie de zen coding, asignando a un determinado carácter un código que se ejecutará al escribir ese caracter y pulsar Alt + Enter;
Cuando hayamos terminado con la configuración reiniciamos Notepad y listo.
InsertLoremIpsum: Nos permite insertar el típico texto “Lorem ipsum…” con el número de palabras, frases, o párrafos que deseemos. Muy útil para maquetadores.

Una vez instalados todos estos plugins dispondremos de un editor web muy potente y que nos hará ganar mucho tiempo a la hora de maquetar nuestros proyectos.

Genera tus CSS con Less

admin — Wed, 11 Apr 2012 11:39:27 +0000

¿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!
less.app
De este no os puedo hablar mucho ya que es solo valido para Mac, pero me han comentado que está muy bien, y echando un vistazo a la docu y al vídeo de presentación que ponen en la web creo que se trata de un compilador recomendable. Os dejo un enlace a la web oficial para los que tenéis Mac: http://incident57.com/less/
SimpLESS
SimpLESS es un compilador para Windows el cual tiene su punto fuerte o débil depende de como se mire en su sencillez. En este compilador simplemente arrastraremos un proyecto a simpLESS, editaremos desde nuestro editor web el archivo (necesitaremos crearnos un nuevo estilo de lenguaje para colorear el código), salvaremos y compilaremos.
Crunch!
Para mi el mejor compilador de less que conozco. También es para windows y a diferencia de simpLESS dispone de un potente editor desde el cual trabajar con los archivos less y CSS. Evidentemente no es tan potente como lo puede ser un Notepad++ o sublimeText pero para mi es suficiente. Por ponerle alguna pega, respecto a las funcionabilidades que tiene como editor le falta una bastante básica como el reemplazo de texto o por lo menos yo no la he encontrado en la versión actual. He detectado algunos fallos a la hora de compilar como por ejemplo hace invisibles en el CSS comentarios del tipo /* */ cuando no debería ser así. Crunch! es un software del 2011 por lo que es un programa bastante joven, así que habrá que darle algo de tiempo para ver si van metiendo algunas mejoras. para mi por ahora es la mejor opción

¿Que podemos conseguir con less?

Less nos da la posibilidad de obtener un CSS en mucho menos tiempo de lo que tardaríamos trabajando directamente con los archivos CSS, además de permitir un más fácil y rápido mantenimiento si hemos hecho un buen trabajo con las variables y los mixins (ahora hablo un poco de ellos). Por lo que he visto en la documentación de la web oficial (http://lesscss.org/) me quedo con las siguientes características de less aunque no sean las únicas.

Variables: Las definimos en el archivo less tal que así:

@main-color: #FFF;
@main-font: Trebuchet MS, Tahoma, Arial; 
@second-font: Oswald;

y las utilizamos de la siguiente manera:

li.marcado{color: @main-color;}

Mixins: Nos permite agrupar una serie de propiedades en una clase y además podremos pasar parametros a esta clase. Muy útili para trabajos repetitivos como añadir bordes redondeados a una caja.
```
.rounded(@value) { 
   -webkit-border-radius: @value; 
   -moz-border-radius: @value; 
    border-radius: @value; 
}
```
```
#box{.rounded(9px);}
```
Anidación: Para no estar repitiendo una y otra vez nombres de contenedores podemos anidarlos optimizando el código
```
#inicio{
  .inner{padding: 0; }
   p{margin-bottom: 18px;}    
}
```
Importar: Es posible importar tanto css como otros archivos less, esto nos da la posibilidad de ordenar nuestros archivos les por principal, variables y mixins. Tendremos por un lado los archivos valiables.less y mixins.less donde tendremos variables y mixins respectivamente y un main.less donde haremos las llamadas a nuestros archivos less y reset.css para resetear los estilos quedando el main.less tal que así:
```
@import "mixins.less"; 
@import "variables.less"; 
@import "/proyecto/css/reset.css";
```

Less nos ofrece muchas más posibilidades que se pueden consultar desde su página: http://lesscss.org/

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:

jmocana - maquetador web

Notepad++, un buen editor web para maquetadores.

Paso 1: Descargando Notepad++

Paso2: Haciendo los primeros ajustes

Gestión de plugins

Instalando los plugins

Plugins recomendados

Genera tus CSS con Less

¿Que es Less?

¿Como usar less?

less.app

SimpLESS

Crunch!

¿Que podemos conseguir con less?

Recargar HTML5 después de una petición Ajax

Ejemplo javaScript

Ejemplo jquery

CSS3 Transiciones

VER EJEMPLO

Sintaxis

Retrasando la transición

Prefijos y metodo abreviado

Soporte en los navegadores

Ejemplo

CSS3 Multiple Backgrounds

VER EJEMPLO

Sintaxis Multiple backgrounds

Soporte en los navegadores

Nuevas llamadas en HTML5

DTD

Codificación

LINK / SCRIPT

Repaso Javascript

JavaScript & Ajax

VER EJEMPLO

Paso 1: Añadir los eventos

Cargar el xml

Encontrar posición de la información dentro del XML

Imprimir información por pantalla

" + titulo + "

getAttribute, setAttribute, textContent, innerText y innerHTML

getAttribute

setAttribute

textContent Vs innerText

innerHTML

Detectar navegador con javaScript