Archivo de la categoría: Codigos

5 Nuevas técnicas que todo desarrollador web debe conocer

Las tecnologías web estás en constante cambio, y cada día está saliendo algo nuevo que posiblemente sea la revolución en el futuro, por lo cual todo desarrollador web tiene que estar siempre atento a estas nuevas tecnologías y a su modo de uso.

Hoy vamos a ver 5 nuevas técnicas que han aparecido con la introducción de CSS3 y HTML5, de manera que podamos estar a la moda.

1. CSS3 Media Queries

Con la web 2.0 y la aparición de los smartphones, tablets y las resoluciones en FullHD, se hace imperioso que nuestros diseños y desarrollos web sean flexibles y se adapten a las distintas resoluciones de cada uno de estos dispositivos para que el usuario pueda recibir de buena manera nuestra información. Es así como gracias a CSS3 podemos especificar distintas hojas de estilos para las distintas resoluciones y dispositivos que tengamos.

Por ejemplo, podríamos especificar un ancho para cuando la resolución del usuario es menor a 1024px.

@media screen and (max-width:1024px){
#contenedor{
		width:960px;
	}

	header h1#logo {
		width:300px;
		height:50px;
		background:url(fondno-header-chico.jpg) no-repeat 0 0;
	}

}
}

2. Tamaño de las fuentes con “rem”

CSS3 sigue introduciendo nuevas tecnologías, y ahora ha creado una nueva unidad de medida que nos permite definir tamaños para las fuentes en relación al elemento de origen (rem = “r”oot “em”) y no al elemento padre como lo hace em.

html { font-size: 10px; }
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

3. Guardar las páginas en el caché para usarlas Offline

HTML5 introduce una nueva característica, el Offline Caching, o guardar las páginas en el caché, y para qué? se preguntará usted, bueno, para permitirle al navegador del usuario guardar la página para así poder verlas más tarde incluso si se está desconectado de internet.

Para activar esta nueva característica hay que partir agregando la siguiente línea a su archivo .htaccess

AddType text/cache-manifest .manifest

Una vez listo, tenemos que crear un archivo llamado, por ejemplo, offline.manifest con las siguientes líneas:

CACHE MANIFEST

CACHE
index.html
style.css
image.jpg

Y finalmente linkear al archivo offline.manifest desde el archivo html

<html manifest="/offline.manifest">

Con estos pasos ya hemos activado ésta característica, la cual estará disponible si tu navegador, o el del usuario que visita tu sitio, soporta HTML5.

4. Múltiples imágenes de fondo

A diferencia del pasado, CSS3 nos permite aplicar múltiples fondos a un objeto determinado, de manera que se pueden obtener efectos visuales/gráficos que de otra manera podría resultar muy complicado de realizar.

div.prueba { background: url(imagen1.png), url(imagen2.png), url(imagen3.png) #000; }

5. Animaciones con CSS3

CSS3 simplifica muchas cosas que hasta ahora solo era posible realizarlas con javascript frameworks como jQuery, como por ejemplo animaciones de color, de forma o posición de los objetos. Ahora, con la ayuda de CSS3 es posible realizar animaciones y transiciones de manera fácil y rápida.
Por ejemplo, para realizar un cambio de color suave para todos los enlaces con la clase prueba, el código sería algo más o menos así:

<a href="#" alt="Prueba" class="prueba">Enlace de prueba</a>
a.prueba {
color:#AAA;
-moz-transition-property: color;/* FF4+ */
-moz-transition-duration:1s;
-webkit-transition-property: color;/* Saf3.2+, Chrome */
-webkit-transition-duration:1s;
-o-transition-property: color;/* Opera 10.5+ */
-o-transition-duration:1s;
-ms-transition-property: color;/* IE10? */
-ms-transition-duration:1s;
transition-property: color;/* Standard */
transition-duration:1s;
}

a.prueba:hover {
color:#F00;
}

Checkbox como Radio Button con jQuery

El siguiente es un pegueño código que inventé para solucionar un problema que tuve, y fue como hacer que los checkbox se comporten como radio buttons. Seguramente usted se preguntará ¿porqué necesitaría hacer checkbox como radio si para eso es que existen los radio buttons? bueno, la respuesta simplemente es porque en el formulario se veían feos los radio buttons  (redondos) donde todas las demás opciones disponibles eran con checkbox (cuadrados).

Aquí dejo el pedazo de código:

EL HTML

<input type="checkbox" name="comoradio" value="Item 1">Item 1<br />
<input type="checkbox" name="comoradio" value="Item 2">Item 2<br />
<input type="checkbox" name="comoradio" value="Item 3">Item 3<br />
<input type="checkbox" name="comoradio" value="Item 4">Item 4<br />

Su jQuery

$("input[type=checkbox]").click(function() {
checkclic = $(this);
categoria = $(this).attr("name");
if (categoria == "comoradio") {
total = $("input[type=checkbox][name='comoradio']");
i = 1;
total.each(function(){
actual = $(this);
es = $(this).is(":checked");
if (es == true) {
i++;
if (i > 1) {
$(this).attr('checked', false);
$(checkclic).attr('checked', true);
}
}
});
}
});

La Explicación

En el HTML lo que se debe considerar es que el atributo “name” de los input que queramos que funcionen como radio sea el mismo, en éste caso es “comoradio”. Ahora, en el js es donde entra la magia para hacer que cuando se haga clic en un elemento input, del tipo checkbox se realice tal acción, en éste caso, comprobar que si el elemento actual no está checado lo chequee y le quite el check al input previamente seleccionado, ¿ se entendió? … ojalá que sí, pues creo no expliqué muy bien.

Luego de la magnifica explicación, ya podemos tener funcionando nuestros checkboxes como radio buttons.

Seguramente ésto se puede hacer con un código mucho más corto, simple, bonito, etc, etc., pero de momento es lo que me salió y funcionó.

Saludos!! PM.

Y asi funciona serialize() en jQuery

La verdad es que el método .serialize() de jQuery es un salvavidas a la hora de procesar los datos que son introducidos en un formulario, el cual devuelve una cadena de texto preformateada lista para ser trabajada por algún sistema que preparemos para lo que queramos.

La idea de utilizar serialize es para ahorrarnos el trabajo de extraer los 50 o más valores que tengan 50 o más campos de texto que hayamos hecho para enviar mediante el parámetro data en ajax… pero……… la idea es hacerlo bien, y no pasarse una hora intentando encontrar el error del javascript, cuando solo faltaba escribir el atributo name a cada input…

Sigue leyendo

Mostrar una hoja de estilos dependiendo de la version de IE

Internet Explorer es realmente un mundo aparte, y cuando se trata de maquetear un sitio no podemos dejar de pensar en aquellos usuarios que aún usan este navegador, pues si usamos transparencias o distintos efectos especiales en nuestras hojas de estilos IE no lo interpreta bien, y normalmente se suceden errores, en los cuales el sitio web se desarma.

Para solucionar estos problemas, la solución consiste en agregar al html unas líneas de codigo condicionales, que permiten indicarle al navegador según su version, que muestre la hoja de estilos definida.

Este es el codigo que permite identificar Internet Explorer 6, 7 y 8.

<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="css/estilosie6.css">
<![endif]-->

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="css/estilosie7.css">
<![endif]-->

<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="css/estilosie8.css">
<![endif]-->
Hola del Planeta en Youtube

Como crear un interruptor al estilo youtube’s hora del planeta

Hola del Planeta en Youtube

La hora del planeta se vive, y variados sitios han realizado campañas, videos, spots publicitarios, etc. haciendo referencia a la hora de la Tierra, así mismo he visto que los de  youtube no quisieron quedarse fuera y pusieron una ampolleta e interruptor junto a su logo, ¿cuál es la idea? “apagar” youtube, volverlo negro y acabar con todos esos pixeles blancos que electricidad consumen.

La idea es que en este post logremos realizar un efecto similar con nuestros propios sitios webs, de manera que para los próximos años/días de la hora de la tierra estemos preparados y podamos apagar nuestra web y aportar con un voltio de descanso al mundo.

Sigue leyendo