background preloader

Libro gratuito de jQuery en español - Fundamentos de jQuery

Libro gratuito de jQuery en español - Fundamentos de jQuery

Recursos interactivos para aprender a programar Enumerar la totalidad de herramientas en la red disponibles para iniciarse en la programación resulta bastante complejo. Sin embargo, unas cuentan con un excelente material y un trabajo interactivo relevantes gracias a que se enfocan más en el fortalecimiento del pensamiento algorítmico, básico en este campo y útil en la realidad, más que a la enseñanza de líneas y líneas de código. Aquí están varios ejemplos. Code Academy Es una aplicación web que según sus creadores nace debido a lo frustrante que es en ocasiones el entrar al mundo de la programación, por lo que ofrecen una manera muy sencilla de aprender interactivamente a través de un entorno completamente guiado. Rails for Zombies Otro ejemplo de las posibilidades de enseñar a través del juego, o al menos a través de algo llamativo. Google Code Kid’s Corner Para lo más chicos de la casa que desean imprimir todo su potencial en la creación de Software y juegos deslumbrantes. LearntoProgram.tv Alice

jQuery Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. Photos by Andrew Schmidt via publicdomainpictures.net How to Use Link to the script after jQuery. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows(example has the default config values assigned) Parameters are: thumbImages: path to the thumbnails smallImages: path to the small size images largeImages: path to the large size images count: number of images/thumbnails thumbImageType: file extension for thumbnail images (all should be the same) imageType: file extension for gallery images (all should be the same) breakpoint: width at which the small and large image sizes are swapped shadowStrength: strength of the shadow on the non-selected thumbs (0-1) Download Plugin: zip tar Other stuff by me: johnpolacek.github.com

Tutorial de Java - DECLARACIÓN DE INTENCIONES - Wikilearning - Waterfox Antes de nada, vamos con una //Declaración de Intenciones// y un poco de explicación del porqué este Tutorial de Java está aquí. Este tutorial va dirigido a todos aquellos que intentan entrar en el mundo Java, que han oído o leído cosas, pero no saben a ciencia cierta que es eso de Java. Procuraremos ser lo más claros posible, aunque no podremos evitar la influencia de los gustos personales, pero intentaremos que el contenido se adapte lo mejor posible a la mayor parte de la audiencia. Java es una palabra que actualmente está en boca de todos y ha creado una auténtica revolución. La creación de este tutorial ha partido de la necesidad de aprendizaje del lenguaje Java para implantarlo en aplicaciones críticas. En toda esta historia nos hemos dado cuenta de que falta literatura en castellano; como siempre, vamos a remolque. Todas las sugerencias que alguien pueda ofrecer, será bienvenida. ==== //Aclaraciones// ====

Item Blur Effect with CSS3 and jQuery Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. View demo Download source Today we want to show you how to create a simple blur effect for text-based items. We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since we will be using transitions, this effect will only work properly in browsers that support them. So let’s start! The Markup The structure will be a section with some articles in i. Let’s look at the style. The CSS The main container will be of fixed width and centered: Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements: Now, let’s style the article items. For Webkit browsers we’ll also add -webkit-backface-visibility: hidden to avoid a short flicker. Let’s style the text elements and create some nice typography.

Como crear una galería de imágenes con Shadowbox y jQuery | Referente Web A continuación realizare un tutorial de como crear una galería con esta ventana modal, que para mi gusto es adaptable a casi cualquier proyecto web. Primero detallare las características que posee este plugin: Plugin nativo de javascript.Permite utilizar un adaptador para los frameworks más populares: jQuery, Prototype, Dojo, Mootols, Yahoo toolkit.Permite crear galerías de: imágenes, videos flash, videos swf, quicktime, window media player y contenido externo via iframes o inline.Posee soporte para una gran variedad de idiomas (incluye español obviamente).Tiene una API bastante potente, por lo que puedes realizar casi cualquier cosa con este plugin.Y el punto más importante por el cual lo utilizo bastante, es que se escala a cualquier tipo de pantalla, por lo que si lo ves en resoluciones más pequeñas no tendrás ningún problema. Bueno seguimos con las instrucciones para la implementación: Paso 1: Descargar la librería desde el siguiente enlace y seleccionamos las siguientes preferencias:

SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:

Galería de Imágenes con Shadowbox Mostrar una Imagen con Shadowbox La forma más sencilla de mostrar imágenes con Shadowbox es de una en una, es decir, con un enlace en la miniatura de la imagen en la página web. Cuando el usuario hace clic sobre la miniatura de la imagen, Shadowbox se abrirá para mostrar una versión más grande de la imagen. Ejemplo de una imagen en Shadowbox Galería de Imágenes con Shadowbox Cuando lo que queremos es que todas la imágenes estén agrupadas formando una galería, se utiliza el shadowbox con el nombre de la galería entre corchetes dentro del atributo ′rel′ de la etiqueta html ′a′ : rel=shadowbox[nbGaleria] Vemos un ejemplo de código html con Shadowbox de la galería de imágenes: Ejemplo de galería de imágenes con Shadowbox En este ejemplo de galería de imágenes, utilizamos la propiedad de Shadowbox counterType. Propiedades para imágenes de Shadowbox content - El contenido real del objeto (por ejemplo, dirección, código HTML, etc.) title - El título que del objeto (opcional)

10 Useful jQuery Popup Plugins Modal dialog boxes are a great way to show quick information to your users. It also helps to alert them of errors, warnings, prompts for information and more. Here is a list of 10 jQuery Popup Modal Dialog Plugins.

Related: