JavaScript
Estás viendo los artículos de ZonaMasters – Recursos para webmasters correspondientes a la categoría JavaScript.
A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy…
Como usar el plugin:
Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
También debemos incluir el fichero CSS:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />
Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
Y por último incluimos el siguiente javascript que es el que activará el lightBox:
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>
Visita lightBox plugin
Ver una Demo
Escrito por Niko | 
10 de Julio de 2009 | 
0 comentarios
CSS y Diseño Web y JavaScript.
Si quieres una implementación elegante para realizar un scroll en una capa div, puedes hacerlo con la librerÃa desarrollada en DYN-WEB, que te permite desplazamiento onmouseover, onmousedown, onmousewheel, o deslizamiento onclick, desplazamiento vertical u horizontalmente , las barras de desplazamiento pueden ser creadas usando los gráficos que elijas y muchas más opciones.
Descargar div con scroll
Escrito por Niko | 28 de Junio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.
Si deseas cargar este framework de Javascript desde el servidor de Google y asà no consumir ancho de banda, puedes hacerlo desde hace tiempo con la sección que abrieron los de Google para API de bibliotecas de AJAX, sin duda te recomiendo que la visites, porque encontrarás otras librerias de javascript que podrás cargar desde su servidor como son:
- jQuery
- jQuery UI
- Prototype
- script.aculo.us
- MooTools
- Dojo
- SWFObject
- Yahoo! Biblioteca de interfaz de usuario (YUI)
Para cargar jQuery pon:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
Escrito por Niko | 28 de Junio de 2009 | 2 comentarios
AJAX y JavaScript.
Pues desde hace unos dÃas estamos iniciando un foro de webmasters en:
http://foro.zonamasters.com/
Espero que sirva de ayuda y para informaros de las últimas novedades del mundillo del webmaster. Ahora mismo está en BETA, por lo que los registros están dehabilitados pero esperamos en breve poder abrirlo, mientras tanto os dejo una recopilación de temas bastantes interesantes:
Veamos que tal sale el experimento y que todo el mundo pueda participar 
Escrito por Niko | 30 de Octubre de 2008 | 1 comentario
AJAX y CSS y General y Herramientas Webmasters y JavaScript y Posicionamiento Web.
Una forma de darle un aspecto más dinámico a nuestra página, serÃa mediante el uso de código JavaScript para generar, por ejemplo, cabeceras dinámicas. Cada vez que un visitante entre a nuestra página le aparecerá una imágen distinta y para ello debemos insertar el siguiente código dentro de la etiqueta “head” del código HTML o dentro de una etiqueta “style” para que se elija la cabecera aleatoria:
<script type=";text/javascript">
img = new Array(6)
img[0] = "http://URL_imagen1.jpg";
img[1] = "http://URL_imagen2.jpg";
img[2] = "http://URL_imagen3.jpg";
img[3] = "http://URL_imagen4.jpg";
img[4] = "http://URL_imagen5.jpg";
img[5] = "http://URL_imagen6.jpg";
aleat = Math.random() * (img.length);
aleat = Math.floor(aleat)document.write('');
document.write('#header { background-image: url(' + img[aleat] + ') !important }');
document.write('');
</script>
El uso del código JavaScript es bien sencillo. Primero se declara el array (importante indicar el tamaño) que contendrá todas las imágenes que queremos utilizar para la cabecera, después mediante una función matemática se genera una posición aleatoria del array y por último el código JavaScript escribirá el código CSS pertinente con el que se obtendrá la imagen que haya sido seleccionada.
Escrito por julio.soler | 30 de Junio de 2007 | 2 comentarios
Diseño Web y Herramientas Webmasters y JavaScript y Recursos Webmasters.
Muchas veces hablamos de ajax pero en realidad no sabemos como funciona, cual es la diferencia y cuales son sus beneficios.
Es por eso que decidà poner una breve explicación de todo esto.
Comencemos por saber que significa AJAX.- AJAX, acrónimo de Asynchronous JavaScript And XML (en inglés JavaScript y XML asÃncronos).
AJAX es una técnica que se usa para el desarrollo de webs, sirviendonos para crear aplicaciones más interactivas, lo mejor de esto es que no necesita recargar completamente la web ya que utiliza:
- HTML con hojas de estilos (CSS) para mostrar la web.
- Document Object Model (DOM) y JavaScript interactuando más dinámicamente con los datos
- XML y XSLT sirviendo para intercambiar y manipular los datos
No es considerado un lenguaje de programación, puesto que reune diversos lenguajes para poder obtener una nueva tecnologÃa que nos sirve para el desarrollo de aplicaciones web.
VENTAJAS
- No se necesita recargar las páginas en el envio de información´
- Permite la reconfiguracion de la página, mostrando los datos instantáneamente.
DESVENTAJAS
- Código oculto tras JavaScript, impidiendo a buscadores la indexación de los contenidosÂ
- Se necesitará un mapa de sitio para que no pase lo de el anterior punto.
- Los usuarios pueden no estar acostumbrados a que la página no recargue, pensando que su solicitud no ha sido enviado o que no funcione.
- Requiere de muchas librerÃas Javascript, haciendo lento la carga.
Un link más sobre AJAX
Escrito por AlmiuX | 27 de Junio de 2007 | 2 comentarios
AJAX y JavaScript y Programacion Web.
Me encontre con esta buena nota, en la cual nos dicen 9 fallos que pudieramos tener, para que google no nos indexe, checalos y procura no hacerlos:
- Javascript: los buscadores no siguen los enlaces javascript.
- Enlaces de imagenes. Cuando contienen javascript y no están desarrollados por CSS.
- Pop-ups: desarrollados mediante Javascript.
- Combos, los menus realizados por combos, select.
- Enlaces en etiquetas NOSCRIPT: debido al abuso de esta etiqueta por parte de spammers, los buscadores no le hacen caso.
- Frames: Google ha penalizado su uso.
- Java: no puede acceder a su contenido ni ejecutarlos.
- Flash: los motores de búsqueda no los tratan.
- Mapas de imagenes.
Al parecer lo que más no indexan los buscadores es el Javascript
Visto en: Sentidoweb
Escrito por AlmiuX | 16 de Mayo de 2007 | 1 comentario
General y JavaScript y Posicionamiento Web.
La conocida librería JavaScript script.aculo.us cuenta con una nueva versión 1.7, la cual podemos disfrutar desde ayer que fue lanzado el beta 1 en su blog oficial.
La nueva funcionalidad añadida es Morph, que permite estilos basados en CSS, disponen de una web con 3 ejemplos con un elemento, un efecto y una trasformación empleado las nuevas posibilidades de script.aculo.us.
Visto en Ajaxian
Escrito por rankhispano | 22 de Noviembre de 2006 | 0 comentarios
AJAX y JavaScript.
El uso de Javascript para realzar el estilo de nuestro blog o web, cada vez se hace más necesario. Es el caso de los formularios. ¿A quien no le llama la atención rellenar un formulario bien hecho y atractivo a la vista?. Pues desde Java Script Examples nos traen algunos ejemplos de como darles vida a los checkboxes, hacer checklist desplazables mediante un scroll, utilizar JotForm, etc.
Enlace: JavaScript Examples forms with JavaScript
Vía: aNieto2k
Escrito por rankhispano | 21 de Noviembre de 2006 | 0 comentarios
AJAX y JavaScript.
En la web mikeomatic.net podemos ver un simple ejemplo de las transiciones de un texto a otro gracias a la mezcla de la tecnologia Javascript con CSS, ver ejemplo.
Via | Fundidos con CSS y Javascript – Crossfading
Escrito por rankhispano | 25 de Septiembre de 2006 | 0 comentarios
CSS y JavaScript.
