Archivo

Posts Tagged ‘jQuery’

Buscando los Plugins Adecuados

21 de octubre de 2013 Deja un comentario

Screenshot of the WordPress Plugin OSM

No es difícil encontrar un “Top Ten” de listas de plug-ins en cualquier número de blogs por ahí. Ok, alguien probablemente está (yo mismo) escribiendo uno en estos momentos. Mientras que las listas pueden ser útiles, todos ellos pierden una cosa importante: que no saben nada acerca de sus necesidades y su sitio. Lo que puede ser bueno para un sitio podría paralizar otro. Entonces, ¿cómo saber cuáles son los adecuados para usted? Aquí hay algunas preguntas que debe hacer antes de hacer clic en el botón Instalar.

¿NECESITO UN PLUGIN PARA ESTO?

Analice cuidadosamente antes del repositorio o búsqueda en Google, en primer lugar es necesario determinar si se necesita un plugin para una tarea en particular. Un juego simple de los criterios deben cumplirse en primer lugar:

  • ¿Es necesario la funcionalidad para mi sitio?
  • ¿Mi tema actual (o el corazón de WordPress) ya maneja esto?
  • ¿Mejora la experiencia de los visitantes?

Ha habido un montón de veces en que hemos visto en un sitio del cliente plugins para cosas como comentarios o de paginación que ya están disponible en el núcleo de WordPress o en su tema. Esto puede deberse a haber instalado antes WP que tenía la funcionalidad, o tal vez simplemente no sabía que estaban allí. De cualquier manera, siempre debe mirar y ver si lo que necesita ya está ahí.

¿ESTO RESUELVE UN PROBLEMA O SOLO CUBRE UNO?

Un tema bien codificado debe manejar la mayor parte de la norma que necesita un sitio. Dicho esto, las necesidades cambian y evolucionan con el tiempo. Su contenido puede haber evolucionado. O tal vez tiene un enfoque diferente para el sitio ahora mismo. En cualquier caso, puede llegar un momento en el que hay que hacer algo diferente, pero no es necesario un nuevo diseño. Pero cuando se mira en un plugin, ¿cuál es el objetivo? Si está tratando de ‘arreglar’ algo que el tema debería estar haciendo, entonces la respuesta no es la adición de un plug-in que está arreglando el tema. Y si lo que está reemplazando es una función de un tema nativo, asegúrese de no recursos de doble-inmersión y cargando para la función del tema y también del nuevo plugin.

¿ESTÁ BIEN CON EL CÓDIGO?

Esto no siempre es fácil decir un sí o un no, especialmente para alguien que no es un desarrollador. Sin embargo, una buena regla general es comprobar el código fuente en la cabeza. ¿Es el complemento de carga de archivos CSS y JS adicionales en todo el sitio, cuando no son necesarios? Está el archivo CSS lleno. ¿Importantes reglas que obligan a su mirada en todo el sitio? Estas son señales que el desarrollador puede tener.

Otro signo bueno es mirar si era el último actualizado. Si su estado es de hace tiempo, o unas cuantas versiones de WordPress anteriores, entonces tenga cuidado. Cuando WordPress evoluciona, la mayor parte de los plugins deberían evolucionar con ello.

ASÍ QUE ME PARECIÓ UNA BUENA IDEA ¿Y AHORA QUÉ?

Digamos que ha hecho los deberes y encontró un complemento sólido, bien construido. ¿Cuáles son los próximos pasos? Bueno, si está en un host como motor de WP, tiene un sitio de ensayo en el que se instale y pruebe antes de salir vivo. Si no, entonces sigue la regla de oro: retroceda a su sitio antes de realizar los cambios, o incluso ofrezca pagar al desarrollador para instalarlo y configurarlo para usted, ya que nadie lo sabe mejor que él. Pero no establecerlo y olvidarlo. Asegúrese de que no hay problemas de visualización en el sitio. Revise las áreas del sitio donde no debería estar haciendo nada el plugin. Ver en los distintos navegadores. Véalo mientras no ha entrado al sistema. Eso ayudará a evitar cualquier potencial sorpresa desagradable en el camino.

PERO … TODAVÍA NO HE ENCONTRADO EL MÁS ADECUADDO.

No tema, no hay otra opción: un plugin personalizado. Nuestro siguiente artículo entrará con el por qué y de cómo desarrollo un plugin personalizado.

Artículos relacionados:

 

 

Los  Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y App

Anuncios
Categorías:plugins Etiquetas: , , , , ,

Artículos y Tutoriales para Empezar con jQuery

24 de septiembre de 2013 Deja un comentario

JQueryEl frontend (En ciencias de la computación, el frontend es responsable de reunir información en diversas formas de la transformación y del usuario, para que se ajusten a una especificación del backend que puede utilizar. El frontend tiene una interfaz entre el usuario y el back-end. Los extremos frontal y posterior se pueden distribuir entre uno o más sistemas ) de los desarrolladores web han pavimentado el camino para los estándares más claros. En el transcurso de los años se han hecho lentamente los navegadores web que se han acondicionado para hacer páginas web propias de esta manera. Y ahora, con el lanzamiento del HTML5 estándar, las cosas se están moviendo más rápido que nunca. Por lo tanto, no es ninguna sorpresa que jQuery ha dado un salto en el punto de mira como el principal para animaciones/biblioteca de efectos.

jQuery es una biblioteca JavaScript rápida, pequeña y rica en funciones. Hace las cosas como documento HTML recorrido y la manipulación, el control de eventos, animación y Ajax mucho más simple con un API fácil de usar que funciona a través de una multitud de navegadores. Con una combinación de flexibilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.

Ajax

Todos sabemos cuán poderoso el jQuery puede ser. La experiencia de usuario es siempre #1 en mi lista de verificación del diseño web y debería estar en el suyo. Es por eso que he reunido una colección de 22 tutoriales  impresionantes alrededor del jQuery UI. Si tiene preguntas o similares tutoriales, por favor, comparta sus comentarios en el área de discusión a continuación.

 

Tutoriales jQuery en español

 

Tutorial jQuery

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

 

Fundamentos jQuery

Los 51 Mejores Tutoriales y Ejemplos de jQuery

 

51 mejores tutoriales sobre jQuery

 

Hay cosas en toda la Web acerca de jQuery, pero la búsqueda de los mejores tutoriales para empezar puede ser difícil. Estos son ejemplos y tutoriales de maestros jQuery para mantenerte en el camino correcto.

Vamos a empezar con los maestros del jQuery y con algunos de sus mejores tutoriales, entonces vamos a pasar a los tutoriales más categorizados, hojas de trucos y hacks.

 

jQuery for Absolute Beginners Video Series

 

jQuery for absolute beginners

 

Así se mire por donde se mire, “jQuery va” y “jQuery que”. Para el último año, esta biblioteca ha sido la favorita de los Javascript. Pero ¿tiene la sensación de que no se puede parecer a aprender la cosa porqué… No sé por qué? ¿No le gusta cómo los cursos actuales suponen que saben mucho más de lo que hacen? Si esto suena a verdad, le pueden ayudar.

A partir de hoy, están iniciando una serie de vídeos que cada día le enseñará EXACTAMENTE cómo utilizar la biblioteca jQuery en sus propios proyectos. Vamos a empezar por descargar el marco, creando la primera función, examinando sintaxis, y mucho más. Cada día van a publicar unos cinco o diez minutos “régimen de entrenamiento” que se expande en lo que ya ha aprendido. Por lo que no hay razón alguna para luchar contra él. Aprender esta cosa del porqué… No sé por qué, y empezar a ganar más dinero en ThemeForest.net con sus nuevas habilidades.

 

Quick Tip: Learning jQuery 1.4 $.proxy

 

Quick Tip Learning jQuery 1.4′s $.proxy

 

Una de mis nuevas características favoritas de jQuery 1.4 es el nuevo método de $.proxy. Nos permite la posibilidad de un contexto particular de la fuerza cuando que llama a un método. En JavaScript, puede haber ocasiones cuando es difícil aguantar a esta palabra clave. Por ejemplo, cuando está unida a un controlador de eventos, esto ahora se refiere al objetivo del controlador, en lugar de su objeto deseado. Si esto suena un poco confuso, no se preocupe; El consejo rápido en un vídeo de cuatro minutos de hoy, que debe aclarar las cosas. 

 

Supersized 3.1 jQuery Plugin

 

Supersized 3.1 jQuery Plugin – Fullscreen Background Slideshow with Flickr Support

 

Supersized acaba de ser reescrito desde cero. Es más rápido, con más opciones, animaciones, y ha añadido soporte Flickr.

 

jQuery Cheat Sheet

 

La memorización de los cientos de métodos y los controladores de jQuery puede derretir tu cerebro. Considere el uso de esta hoja de trucos como referencia.

 

jquery12_colorcharge

Developing a Digg-Style Input Form With CSS3 and jQuery

 

Developing a Digg-Style Input Form With CSS3 and jQuery

 

Digg es una de las cadenas de noticias sociales más populares hasta la fecha. Ellos cosechan un público masivo de millones de miembros. Recientemente, la compañía se ha forjado una nueva dirección con el lanzamiento de Digg v4. Todo el sistema ha sido sustituido por las nuevas estadísticas y seguidores / que sigue en las redes.

 

How to Load In and Animate Content with jQuery

 

How to Load In and Animate Content with jQuery

 

En este tutorial van a tomar su sitio web promedio todos los días y mejorar con jQuery. Irán añadiendo funcionalidad Ajax para que el contenido se cargue en el contenedor pertinente en lugar de que el usuario tenga que desplazarse a otra página. También estarán integrando algunos efectos impresionantes de animaciones.

 

Simple jQuery 3-Tier Dropdown Menu

 

Simple jQuery 3-Tier Dropdown Menu

Reading & Editing HTML Attributes in jQuery

 

Quick Tip – Reading & Editing HTML Attributes in jQuery

 

Los Atributos jQuery permiten cierta edición interesante para pasar una vez una página que ya ha cargado. Los Atributos HTML que tuvieron que permanecer estáticos en una hora se pueden ajustar con sólo unas pocas líneas de código. Este tutorial se centrará en uno en particular – attr.

 

Building a jQuery Powered Tag Cloud

 

Building a jQuery Powered Tag Cloud

 

Un tag-cloud o nube de etiquetas es una gran manera de mostrar a los visitantes de su blog los principales temas de interés que están disponibles. También hay información adicional contenida en una etiqueta de nube. Aparte de los vínculos, que es lo que da una idea de los temas que abarca su sitio web, también pueden mostrar como los distintos temas populares. Otra gran cosa sobre las nubes de etiquetas es que pueden ser utilizadas para describir la frecuencia de nada, se puede vincular a los artículos, las entradas de blog, las imágenes, el vídeo, o cualquier otra cosa que tenga en abundancia en su sitio.

 

s3Slider jQuery Plugin

 

s3Slider jQuery Plugin

 

Boban creó un maravilloso plugin  jQuery de “contenido destacado”. Ha visto este efecto muchas, muchas veces. Ahora puede implementar fácilmente la funcionalidad en sus propias aplicaciones web.

 

An Introduction to jQuery Templating

 

An Introduction to jQuery Templating

 

JavaScript Templating es una idea ingeniosa: le permite convertir fácilmente JSON a HTML sin tener que analizar. En la conferencia Microsoft MIX10, anunciaron que están empezando a contribuir al equipo jQuery. Uno de sus esfuerzos es el de proporcionar un plugin. En esta sugerencia, aquí se muestra cómo utilizar.

 

Integrating PHP and jQuery: New Premium Tutorial

 

Integrating PHP and jQuery New Premium Tutorial

 

Para que pueda trabajar con PHP, y tener un conocimiento básico de jQuery, pero aún no ha descubierto la manera de combinar los dos en sus proyectos? Si es así, tenemos todo lo que necesitas hoy mismo! En este tutorial, Además, aprenderá a aprovechar las ventajas de PHP y MySQL de declaraciones preparadas para consulta en una base de datos, cómo pedir que devuelve los datos con jQuery, y, a continuación, cómo filtrar a través de los artículos devueltos y los muestra en la página, añadiendo un toque de animaciones. Si esto suena interesante, dar de nuevo a Nettuts , y convertirse en un miembro Premium para ver este útil tutorial en vídeo.

 

Create Portfolio Website With CSS/jQuery

 

Create Portfolio Website With CSS jQuery

 

Desde hace algunas semanas he empezado el aprendizaje jQuery, y hoy pensé ¿por qué no recibir un tutorial de jQuery y css?. Así que vengo con este increíble tutorial (increíble para mí al menos), que sólo utiliza puro CSS y jQuery para diseñar un sitio web de portafolio adecuado para cualquier alojamiento compartido, sin photoshop o cualquier otro programa de diseño requerido. Aquí vamos …

 

Create an Apple Style Menu and Improve it via jQuery

 

CREATE AN APPLE STYLE MENU AND IMPROVE IT VIA JQUERY

 

Desde que escribieron su último tutorial sobre cómo crear un menú desplegable sólo con multinivel CSS, tienen una gran cantidad de visitantes que querían saber cómo crearon la navegación principal de kriesi.at. (Un menú llamado kwicks). El interés en los menús extraordinarios parece ser alto en la actualidad, por lo que hoy le van a enseñar cómo se hace esto.

 

Animated Skills Diagram with Raphaël

 

ANIMATED SKILLS DIAGRAM WITH RAPHAËL

 

En este tutorial le muestran cómo crear un diagrama usando Raphaël – una pequeña biblioteca JavaScript que es ideal para trabajar con gráficos vectoriales. La idea es muy simple: se basa en algunos arcos utilizando funciones matemáticas y nos va mostrando un porcentaje de habilidad en un círculo principal […]

 

Better Check Boxes with jQuery and CSS

 

Better Check Boxes with jQuery and CSS

 

En este breve tutorial, vamos a crear un reemplazo para las casillas del navegador por defecto en la forma de un simple plugin de jQuery. Se mejorará progresivamente sus formas, pero, al mismo tiempo recurriremos a los controles por defecto si no se dispone de JavaScript.

 

Converting jQuery Code to a Plugin

 

Converting jQuery Code to a Plugin

 

Cuando se trata de la organización de manera eficiente del código de jQuery, una de las mejores opciones está en convirtir ciertas partes del mismo en un plugin. Hay muchas ventajas en esto – el código se vuelve más fácil de modificar y seguir, y las tareas repetitivas se manejan de forma natural. Esto también mejora la velocidad con que se desarrolla, como la organización de programas que promueve la reutilización de código.

Por esta razón hoy vamos a demostrar el proceso de conversión de código a un plugin. Vamos a tomar el código de este tutorial de CSS3 seleccionando el reemplazo de jQuery y convertirlo en un preparado plugin para uso jQuery.

 

Tutorial rápido de jQuery

 

jQuery

 

El primer paso a la hora de trabajar con jQuery es seleccionar los elementos del árbol de documento sobre los que queremos trabajar. Para ello se utiliza la función jQuery, pasando como argumento a la función una cadena con un selector, la mayoría de los cuales utilizan una sintaxis similar a la de CSS 3 (ver Tutorial rápido de CSS). El engine que utiliza jQuery para seleccionar elementos se llama Sizzle, y puede descargarse y utilizarse de forma aislada.

 

jQuery Tutorial de w3schools

 

jQuery tutorial

 

En W3Schools encontrará una referencia completa de todos los objetos y métodos de jQuery.

 

Artículos relacionados:

 

+25 Plugins Asombrosos de Resbalador jQuery Responsive

La verdad detrás de diseño Web Responsive: ¿Es la próxima gran esperanza o todo es un bombo?

15 Memorables Plugins jQuery Timeline: Introduzca Líneas de Tiempo en su Página Web

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

+60 Útiles Deslizadores o Sliders de Imagen jQuery Responsive

+ 30 Herramientas útiles de Diseño Web Responsive

 

 

Los Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y Apps

+25 Plugins Asombrosos de Resbalador jQuery Responsive

20 de septiembre de 2013 3 comentarios

JQueryCon casi todos los aspectos de la Internet móvil, más y más desarrolladores web que nunca son contratados principalmente para asegurar que los sitios web adquieran capacidades de respuesta. En efecto, como la informática móvil continúa calentándose, la demanda para las plantillas Responsive para WordPress, los temas y los plugins HTML, están también en aumento. Entre los elementos web que necesitan para ir Responsive para mantenerse al día con los tiempos, son los mecanismos de escaparate de imágenes en los sitios web.

Nos referimos a los deslizadores, carruseles, galerías, acordeones y otros nombres que son características comunes de los sitios web, y que se ven muy bien en la mayoría de los sitios que utilizan uno para mostrar contenido y las imágenes clave. Estas cosas tienen que ir receptivas para así lograr el 100% de respuesta de un sitio determinado. Los Sliders con un diseño Responsive escalan las imágenes y la tipografía para adaptarse al tamaño de la pantalla. Esto es importante ya que todos queremos deslizadores para captar la atención del usuario, un regulador de tamaño fijo en un dispositivo móvil puede conseguir que los visitantes se muevan muy rápidamente.

Para hacer las cosas más fácil, puede hacer uso de algunos recursos increíbles en la Web que implica los plugins jQuery slider. jQuery como la conocemos, es la biblioteca de JavaScript ligera que hace que sea posible para nosotros atravesar documentos HTML, manejar eventos, ejecutar animaciones y añadir AJAX, y hacer maravillas en los deslizadores, etc
Para colmo de males, estamos mostrando algunos de los plugins jQuery slider que no sólo están muy bien en su propio derecho, sino que sobre todo son de diseño Responsive, es decir, accesibles desde cualquier tamaño de navegador. Vamos a ver estos plugins jQuery slider Responsive y una serie de opciones en función de sus necesidades. Puede encontrar soluciones de alta calidad y de código abierto, así que puedes disfrutar de las maravillas de jQuery, incluso sin tener que gastar.

Nota: Tenga en cuenta que algunos de los enlaces de abajo son enlaces de afiliados y voy a ganar una comisión si compra a través de esos enlaces (sin costo adicional para usted). Le recomiendo que haga su propia investigación independiente antes de comprar cualquier producto o servicio. Este artículo no es una guía, una recomendación o endoso de productos específicos.

Leer más…

Usando Twitter Bootstrap con Dojo

7 de mayo de 2013 2 comentarios

He estado usando Twitter Bootstrap*** últimamente debido a su aspecto y a la simplicidad en la creación de páginas básicas y Dojodiseños complejos. Quería el uso de Dojo* para desarrollar un proyecto reciente, pero sentí que Dijit** sería demasiado para mis necesidades, así que decidí usar Bootstrap de nuevo. El problema aquí es que Bootstrap utiliza jQuery para sus componentes Javascript y yo no quería cargar Dojo, jQuery y el plugin Bootstrap.

Mi solución: crear una aplicación de Twitter Bootstrap utilizando el kit de herramientas Dojo. Dojo Bootstrap  es un puerto de los plugins Twitter Bootstrap. Se utiliza el 100% del código Dojo y tiene soporte para AMD.

Una reproducción de la página en JavaScript con Twitter Bootstrap usando los módulos Dojo Bootstrap se puede encontrar aquí.

Actualizar

Mire un nuevo sitio web dedicado al proyecto Dojo Bootstrap.

*Dojo es un framework que contiene APIs y widgets (controles) para facilitar el desarrollo de aplicaciones Web que utilicen tecnología AJAX. Contiene un sistema de empaquetado inteligente, los efectos de UI, drag and drop APIs, widget APIs, abstracción de eventos, almacenamiento de APIs en el cliente, e interacción de APIs con AJAX.

Resuelve asuntos de usabilidad comunes como pueden ser la navegación y detección del navegador, soportar cambios de URL en la barra de URLs para luego regresar a ellas (bookmarking), y la habilidad de degradar cuando AJAX/JavaScript no es completamente soportado en el cliente. Es conocido como “la navaja suiza del ejército de las bibliotecas Javascript“. Proporciona una gama más amplia de opciones en una sola biblioteca JavaScript y es compatible con navegadores antiguos.

**Dijit (Dojo Widget) es una biblioteca de widgets para crear interfaces gráficos. Está construida directamente sobre Dojo Core y en ocasiones no requiere de código JavaScript para ser utilizada. Los widgets son altamente portables y se pueden compartir fácilmente en cualquier servidor o incluso funcionar localmente sin servidor web mediante el protocolo file//.

***Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, así como extensiones opcionales de JavaScript. Es el proyecto mas popular en GitHub y es usado por la NASA y la MSNBC junto a demás organizaciones.

Hoy Bootstrap es muy popular en toda la web. Sigue creciendo como una forma rápida para los desarrolladores para obtener un sitio eficiente en funcionamiento en un corto período de tiempo. Es un buen punto para empezar, pero Twitter Bootstrap a menudo se deja completamente sin medida, y su popularidad se ha marchado del diseño distinto del marco que ve bastante plana. Pero en un mundo en atractivos diseños son de gran importancia, Twitter Bootstrap ha ocupado su lugar como uno de los mejores marcos en el mercado.

Si busca en Google la palabra Bootstrap, obtendrá más de 16.000.000 de resultados. Esa es una muy gran cantidad de menciones incluyendo los resultados en los medios sociales, los blogs, los comentarios, los tutoriales, las herramientas, etc. Al buscar algunas herramientas que se pueden encontrar en algunas redadas dispersas … Comprendiendo la importancia de esta tendencia, los chicos de TemplateMonster han puesto juntos los tutoriales más útiles sobre Bootstrap, las guías, las extensiones, los plugins y otras golosinas y crearon un impresionante infografía sobre Bootstrap. Por otra parte, hicieron la infografía interactiva para que no se aburran en conseguir lo más profundo de Twitter Bootstrap. Sin embargo, hay una versión estática de la infografía que se puede ver a continuación. Esperamos que no sólo será útil para los fans de Bootstrap, sino para cualquier persona que mantiene un ojo en los últimos marcos de front-end para el desarrollo web eficaz.

 

Infographics-about-Bootstrap

 

Artículos relacionados:

 

 

Los  Mercados Online de Envato: ebooks, tutoriales, vídeos, cursos, temas para WordPress y App

A %d blogueros les gusta esto: