Bufa Webmaster

Vamos a obtener las coordenadas actuales (X/Y) de cualquier elemento situado dentro de nuestra página web utilizando jQuery. Para ello utilizaremos el método .position().

El método .position() nos permite recuperar la posición actual de un elemento dentro del DOM.

var elemento = $(".midiv");
var posicion = elemento.position();
alert( "left: " + posicion.left + ", top: " + posicion.top );

Vamos a almacenar los diferentes valores/atributos de un determinado archivo XMl en variables javascript con jQuery.

A continuación un ejemplo de XML:

<?xml version="1.0" ?>
<lenguaje>
    <item>
        <id>1</id>
        <title>PHP</title>
        <description>PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas</description>
    </item>
    <item>
        <id>2</id>
        <title>JAVASCRIPT</title>
        <description>JavaScript es un lenguaje de scripting basado en objetos, utilizado para acceder a objetos en aplicaciones</description>
    </item>
</lenguaje>

De esta manera podremos manejar un archivo XML, usando jQuery, sin problemas para obtener lo datos del XML.

$.get('miarchivo.xml',{},function(data){
    $('item',data).each(function(){
        var $this = $(this);
        var id = $this.find('id').text();
        var title = $this.find('title').text();
        var description = $this.find('description').text();
        // etc...
    });
});

Si queremos obtener de forma rápìda nuestra dirección IP con jQuery podemos utilizar la función getJSON que hace una petición de datos al servidor considerando que retorna la información con notación JSON.

Función para mostar ip con jQuery:

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
    alert( "Mi ip: " + data.ip);
});

Crear un botón con un estilo bonito y elegante simplemente usando CSS3 (sin utilizar ningún programa de edicción grafica: photoshop, fireworks, photopaint, etc…) es realmente sencillo.

Destacando principalmente la propiedad text-shadow para generar una pequeña sombra en el texto del botón, border-radius para redondear los bordes del botón y box-shadow para generar una sombra al objeto.

EJEMPLO

Botón

Código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* Botón */
 
.boton {
	display: inline-block;
	zoom: 2; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 12px Arial;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.boton:hover { text-decoration: none; }
 
/* Redondez */
 
.redondo {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
 
/* Color */
 
.negro {
	color: #d7d7d7;
	border: solid 1px #333;
	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.negro:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}

Código HMTL:

1

<a href="#" class="boton negro redondo">Botón</a>

Hay páginas web con tantos archivos CSS pueden llegar a utilizar una gran cantidad de ancho de banda del servidor, relentizanzo la carga de nuestra web. CSScompresor es una herramienta online con la que podemos reducir el tamaño de cualquier archivo CSS mediante la eliminación de los comentarios, sangría y mucho más.

Y lo mejor es que el nivel de compresión puede ser configurado a nuestro gusto manualmente.

http://www.csscompressor.com/

Mee Templates es una compañía especializada en el desarrollo de entornos web para dispositivos móviles. Mee desarrolla desde hace más de 10 años proyectos multimedia, aplicaciones web, plugins para wordpress, joomla, Prestashop y Magento.

Características de las plantillas para móvil de MeeTemplates:

• Válidas para móviles: IPHONE, ANDROID, WINDOWS MOBILE, ETC
• Instalación sencilla en menos de 5 minutos
• No requiere base de datos
• CMS incluido
• Podrás agregar, editar o quitar secciones facilmente
• Fácil personalización de diseño
• Multi-idioma
• Incluyen los PSD, HTML y CSS

  http://www.meetemplates.com

Actualmente los desarrolladores web utilizamos gran cantidad de código javascript en nuestros proyectos. Insertamos primero la libreria jQuery, Prototype, Mootools… y después insertamos los plugins o scripts necesarios… acumulando varios archivos JS en el documento. Todo este código no hace más que incrementar el peso de nuestra web.

Es muy importante optimizar al máximo el tamaño de estos scripts para reducir el proceso de descarga y ejecución de los mismos.

1º. Debemos intentar siempre usar los mínimos archivos javascript en el documento. Lo ideal sería poder usar 1-2 javascript. Por ejemplo cargariamos el jquery, y luego en otro archivo JS incluiriamos todos los plugins que necesitemos o nuestros scripts.

2º. Eliminar los caracteres innecesarios (espacios, saltos de linea y tabulaciones) del código para reducir su tamaño y de esta forma mejorar los tiempos de carga de la página.

3º. Comprimir los archivos javascript utilizando alguna herramienta como os comento más adelante. Con esta técnica se reduce el tiempo de respuesta en aproximadamente un 70%.

—

Existe una herramienta de Google, Closure Compiler que nos permite minimizar el código Javascript, así como analizar y eliminar el código no utilizado, reescribirlo y, por último, minimizarlo. Con esta herramienta podemos reducir el peso de nuestro JS en un 70%.

http://code.google.com/intl/es/closure/compiler/

Podemos insertar nuestros swf flash en nuestras páginas web de múltiples formas, pero no todas cumplen con los estándares según la declaración de Doctype del documento.

Vamos a ver un ejemplo de como insertar una película flash para que sea validada correctamente en xhtml.

1
2
3
4

<object type="application/x-shockwave-flash" data="bufa.swf" width="500" height="100">
<param name="movie" value="bufa.swf" />
<img src="pelicula.gif" width="500" height="100" alt="banner" />
</object>

Para rotar un elemento (texto, imágen, div, etc…) un determinado número de grados con CSS3, utilizamos la propiedad transform que contiene varios posibles parámetros (none, matrix, matrix3d, translate3d, translateX, translateY, translateZ, scale, scale3d, scaleX, scaleY, scaleZ, rotate, rotate3d, rotateX, rotateY, rotateZ, skew, skewX, skewY, perspective) del que seleccionamos rotateZ.

Con el parámetro rotateZ() podemos girar a derecha o izquierda el elemento según el ángulo equivalente al número de DEG (Degrees = grados sexagesimales) que insertemos.

EJEMPLO

Código CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.caja {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -125px;
	width: 250px;
	height: 100px;
	background: #326895;
	border: 1px solid #275274;
	color: #BFD7EA;
}
.caja h2 {
	margin-top: 38px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
}
 
 
.css3{
	-webkit-transform: rotateZ(-20deg);
	-moz-transform: rotateZ(-20deg);
	-o-transform: rotateZ(-20deg);
}

Código HMTL:

1
2
3

<div class="caja css3"> 
<h2>BUFA</h2> 
</div>

Recordar que aún la mayoria de navegadores no aceptan esta propiedad de css. Para visualizarla actualmente podeis usar Chrome, Safari), sino disponemos de estos navegadores este efecto lo podríamos realizar, pero usando javascript.

Una muy buena solución cuando queremos buscar si existe una determinada palabra o cadena de texto dentro en nuestra página web. Para ello podemos utilizar el selector :contains() de jQuery.

En ejemplo de uso, vamos a buscar la palabra “León” en todos los div de la página, y si encuentra resultados resaltaremos en negrita “León”:

$("div:contains('León')").css("font-weight", "bold");