Comando a ejecutrar para tener todo instalado, mas informacion ver el link de abajo donde se documenta cada tack dentro de gulpfile.js
Claro que se tomo que tiene instalado nodejs en su PC
Comandos para el Terminal:
npm install -g gulp-cli
npm init
npm install --save-dev gulp #admin de tareas wordflow
npm install --save-dev gulp-sass #scss a css
npm install --save-dev browser-sync #servidor web de desarrollo
npm install --save-dev gulp-useref #Combinar multiples <script src="..." o <link rel="..."
npm install --save-dev gulp-uglify #Compactar JS en ...min.js
npm install --save-dev gulp-cssnano #Compactar CSS en ...min.css
npm install --save-dev gulp-if #Se utiliza junto a gulp-uglify o gulp-cssnano
npm install --save-dev gulp-imagemin #Optimiza imagenes
npm install --save-dev gulp-cache #Cache lo de gulp-imagemin para evitar generar el proceso si no cambia la imagen
npm install --save-dev del #Para limpiar la carpeta ./dist/* o ./builder/*
npm install --save-dev run-sequence #Para ejecutar en orden despues que finaliza cada tarea por mas que alguna tarde menos y modifique la secuencia
Mas info en Ingles:
https://css-tricks.com/gulp-for-beginners/
Mostrando entradas con la etiqueta Plugins. Mostrar todas las entradas
Mostrando entradas con la etiqueta Plugins. Mostrar todas las entradas
2015-07-14
Diferencia entre las carpetas "/Plugins" vs "/app/Plugin" en CakePHP
La diferencia que hay entre las carpetas "/Plugins" vs "/app/Plugin" son.
/Plugins: Se utilizar para guarda de manera central todos los plugins que utilizan todo los sitios que están utilizando esa versión de CakePHP. Ya que dentro de un sitio podemos tenes una versión de CakePHP para muchos sitio con ejemplo /app, /app2 /app3 /etc.. y todos esto utilizarían este Plugin.
/app/Plugin:
Pero si queremos tener un Plugin puntual para nuestro /app, podemos sobre escribir la carga poniendo un versión distinta dentro de la carpeta "/app/Plugin" ya que CakePHP primero busca si existe dentro de "/app/Plugin" y si no existe sube al nivel superior y lo busca en "/Plugins" si tampoco lo encuentra en este lugar, da error ya que no se puede cargar el plugin.
/Plugins: Se utilizar para guarda de manera central todos los plugins que utilizan todo los sitios que están utilizando esa versión de CakePHP. Ya que dentro de un sitio podemos tenes una versión de CakePHP para muchos sitio con ejemplo /app, /app2 /app3 /etc.. y todos esto utilizarían este Plugin.
/app/Plugin:
Pero si queremos tener un Plugin puntual para nuestro /app, podemos sobre escribir la carga poniendo un versión distinta dentro de la carpeta "/app/Plugin" ya que CakePHP primero busca si existe dentro de "/app/Plugin" y si no existe sube al nivel superior y lo busca en "/Plugins" si tampoco lo encuentra en este lugar, da error ya que no se puede cargar el plugin.
Conclusión para sitio complejo, que esta dividido en múltiples módulos "/app, /app2, /app3, etc.." lo recomendable es ponerlo en un "/Plugins" si solo tenes un sitio donde no vas a tener múltiples modulos "app", lo podes poner donde mas te gustes, no hay diferencia.
2012-06-28
RedactorJs una alternativa a CKEditor y TinyMCE que solo pesa 40Kb
Navegando por internet me encontre con este editor WYSIWYG, llamado Redactor que esta escrito en jQuery y el cual tiene las opciones mas utilizada de un editor y hasta permite subir fotos y que las agregue a nuestro contenido.
Es compatible con IE8+, Opera, Chorme, Firefox, Safari, Ipad, Iphone, Android 4
Link: redactorjs.com
2012-05-12
VideoTutorial sobre Zen Coding: La manera mas veloz de escribir código HTML
Zen Coding es un plugin que esta disponible para muchos entornos y IDEs de desarrollos. Como Notepad++, NetBeans, Eclipse, TextMate, Aptana, Zend Studio, Dreamweaver, Sublime Text 2, UltraEdit, etc..
El cual con solo escribir esto:
div#page>div.logo+ul#navigation>li*5>aOptenes un código como este:
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></div>Para en este vídeo tutorial hay mas detalles y otras combinaciones
Sitio Oficial de Zed Coding
2012-05-05
Masonry Plugin Jquery - Te permite tener el mismo efecto de google plus en la galeria de fotos
Con Masonry podes tener el mismo efecto de google plus en la galeria de fotos, donde las fotos se redimencionan para no dejar espacios en blanco como se muestra en la imagen de arriba.
Link: masonry.desandro.com
Demo: Demo Imagenes
2011-10-31
Reveal es un Plugin para jQuery para crear ventanas emergentes con un buen diseño y lindo efecto.
Reveal es un plugin para jQuery para crear ventanas modales, con un diseño y efecto muy agradable para nuestro proyecto.
2011-09-12
jQuery UI MultiSelect Widget, Estupendo elemento para tener a manos cuando creamos paneles web.
jQuery UI MultiSelect Widget es un estupendo elemento que reutiliza la estructura de jquery UI y nos permite poder complementar dentro de nuestros paneles web, generando una interfaz de administración mas amigable con el usuario; siempre y cuando tengamos la necesidad de tener un select compacto pero que permita ser multiselect a la vez, como se muestra en la imagen.
Link al demo
2011-09-10
Linkselect jQuery plugin: Convierte SELECT en una combinación de una etiqueta de ancla asociada con un menú desplegable.
Linkselect jQuery plug-in v1.2.09
Es un plugin para poder tener un comboBox o select dentro de un link con solo hacer click te lo muestra y una ves seleccionado el link tomo el nombre del item. Es util para algunas situaciones dentro de nuestros desarrollos web.
Lo primero que tenemos que hacer es cargar las bibliotecas requiere JavaScript y la hoja de estilos CSS utilizadas por el widget:
<script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./lib/jquery.linkselect.js"></script>
<!---// load the Linkselect CSS stylesheet //--->
<link type="text/css" href="./css/jquery.linkselect.css" rel="stylesheet" media="all" />
Antes de que pueda invocar una instancia del widget Linkselect, debe tener uno o más <select /> elementos en su página. Los principales atributos de la etiqueta select (id, título, tabindex) son apoyados por el Linkselect plug-in.
<select id="category" title="Select a category" class="linkselect">
<option value="">[none]</option>
<option value="help_desk">Help Desk</option>
<option value="customer_service">Customer Service</option>
<option value="knowledge_manager">Knowledge Manager</option>
<option value="change_manager">Change Manager</option>
<option value="service_desk">Service Desk</option>
<option value="asset_manager">Asset Manager</option>
<option value="software_manager">Software Manager</option>
</select>
El siguiente paso es crear realmente una instancia del widget Linkselect. Usted quiere asegurarse de inicializar el widget después de todos los elementos necesarios DOM están disponibles, lo que hace que el evento document.ready un gran lugar para iniciar el flash.
<script type="text/javascript">
$(document).ready(function (){
$("#category").linkselect();
}); </script>
Link al sitio oficialLink al demo2011-09-07
Plugin jQuery: Raty - A Star Rating Muy bueno para implementar votaciones.
Con el plugin Raty 1.4.3 para jQuery podrás obtener un sistema de votación por estrellas o personalizado con otro forma como caritas, medallas, etc..
Implementando via Ajax, Post o Get de manera muy elegante y simple.
Estos son algunos de los ejemplos posible con Raty:
Link al sitio oficial: Jquery Raty - A Star Rating
Repositorio GitHud
2011-08-16
Plugin Jquery: Wijmo componentes para tu interfaz web con componentes de calidad
Wijmo completo está diseñado para personas o empresas que deseen comprar un kit completo de widgets de interfaz de usuario. Incluye todo lo que en Wijmo abierto, además de los widgets más complejos y potentes. Wijmo completa de una licencia por desarrollador bajo la Licencia Comercial Wijmo . Para obtener una licencia, debe adquirir Wijmo completa .
El Wijmo Gráfico de barras flash (wijbarchart) permite al usuario mostrar gráficos personalizados bar. Un gráfico de barras de cada serie se basa en un bar o una columna de datos. 
Gráficos - Gráfico de barras
El Wijmo Gráfico de barras flash (wijbarchart) permite al usuario mostrar gráficos personalizados bar. Un gráfico de barras de cada serie se basa en un bar o una columna de datos. Gráficos - Gráfico de líneas
El Wijmo Gráfico de líneas widget (wijlinechart) permite al usuario personalizar para mostrar gráficos lineales. Un gráfico de líneas se basa cada serie de puntos conectados de datos.
Gráficos - gráfico circular
El gráfico de sectores Wijmo flash (wijpiechart) permite al usuario mostrar gráficos personalizados pastel. Un gráfico circular se basa cada serie como un trozo de datos.
Combobox
Muestra un cuadro de texto editable puede cambiar el tamaño y / lista desplegable en la página HTML con esta herramienta fácil de usar flash de cuadro combinado. El widget wijcombobox emula populares auto-completar la interfaz de usuario.
Red
La Red Wijmo flash (wijgrid) es una cuadrícula de datos tabular que permite a los usuarios seleccionar de forma interactiva, editar, ordenar, desplazarse a través de, filtrar y agrupar los datos. La red es altamente personalizable y se puede utilizar para comprender mejor y visualizar los datos de manera más eficaz.
Entrada
El Wijmo Expander flash (wijexpander) le permite mostrar u ocultar el contenido integrado o externo en un panel de expansión con varios efectos de animación. El contenido de la expansión se puede mostrar u ocultar pulsando sobre la cabecera de expansión.
Buscapersonas
El Wijmo Pager flash permite a los usuarios finales para escanear a través de elementos o las páginas haciendo clic en un elemento visible. El widget wijpager le permite utilizar varios modos, por ejemplo, usted puede configurarlo para que utilice un sistema de envío de mensajes numéricos o un sistema de siguiente / anterior.
Árbol
El widget árbol Wijmo presenta los elementos de una estructura de árbol. El control de flash wijtree apoya expandir / colapsar funcionalidad animaciones, temas con estilo, y de arrastrar y soltar.
Mago
El Asistente para Wijmo flash (wijwizard) se utiliza para mostrar las secciones de contenido en páginas separadas navegable, lo que puede ahorrar espacio en pantalla o simplificar las tareas de entrada mediante la creación de una serie de formas. Para facilitar la navegación, se puede utilizar integrado wijwizard de botones de navegación o su función de reproducción automática. Y si quieres añadir un toque extra a la wijwizard, se puede combinar con el widget de wijpager para la navegación paginada.
Wijmo abierta es un kit de widgets basado en jQuery UI y puesto en libertad a la comunidad. Wijmo abierto es de código abierto y es libre de utilizar en cualquiera de los MIT o GPL licencias.
El widget de acordeón Wijmo (wijaccordion) es una interfaz de usuario menú compuesto por una serie de paneles de contenido para mostrar su información de un panel a la vez. Los usuarios simplemente seleccionan un panel para ampliar y ver la información especificada, mientras que los otros paneles se contraen automáticamente la organización de la interfaz de usuario y la optimización del espacio en pantalla. 
Con el widget Wijmo Calendario (wijcalendar), puede mostrar un solo mes o una tabla de meses con estilos personalizables y elementos de navegación. 
Acordeón
El widget de acordeón Wijmo (wijaccordion) es una interfaz de usuario menú compuesto por una serie de paneles de contenido para mostrar su información de un panel a la vez. Los usuarios simplemente seleccionan un panel para ampliar y ver la información especificada, mientras que los otros paneles se contraen automáticamente la organización de la interfaz de usuario y la optimización del espacio en pantalla. Calendario
Con el widget Wijmo Calendario (wijcalendar), puede mostrar un solo mes o una tabla de meses con estilos personalizables y elementos de navegación. Diálogo
El widget de diálogo Wijmo (wijdialog) se extiende de diálogo jQuery UI (jquery.ui.dialog) y añade maximizar, minimizar, el contenido de alternar y la fijación de las características jquery.ui.dialog.
Expander
El Wijmo Expander flash (wijexpander) le permite mostrar u ocultar el contenido integrado o externo en un panel de expansión con varios efectos de animación. El contenido de la expansión se puede mostrar u ocultar pulsando sobre la cabecera de expansión.
Decorador de forma
Los widgets de forma Wijmo Decorador (wijradio, wijcheckbox, wijdropdown, wijtextbox) se utilizan para decorar una serie de elementos estándar de formularios HTML. Los widgets Decorador Formulario permitir que cualquier elemento de la forma de ser de estilo común en cualquier navegador con ThemeRoller.
Lista
Wijlist es un widget de interfaz de usuario que permite a los usuarios seleccionar uno o más elementos de una lista.
Menú
El menú Wijmo flash (wijmenu) se utiliza para crear menús multinivel con efectos de animación, imagen y ver elementos de cuadro, el desplazamiento elemento interactivo, y mucho más. Usted puede incluso crear un menú pop-up de ayuda contextual de la aplicación.
Progressbar
Deje que los usuarios finales conocer el progreso de una operación con el widget wijprogressbar. Usted puede personalizar el aspecto del indicador con animaciones, estilos, etiquetas, y mucho más.
Control deslizante
El Wijmo Silder flash (wijslider) simplifica la entrada del usuario, proporcionando una rica representación visual de los cambios numéricos. El wijslider es un selector deslizante que proporciona una manera simple y familiar para los usuarios finales para elegir un valor o un rango de valores en un rango predefinido en tiempo de ejecución.
Splitter
Crear un sitio web profesional y pulido con la ayuda del widget wijsplitter. wijsplitter es un widget contenedor con una barra móvil y plegable, que divide la zona de un contenedor de la pantalla en dos paneles de tamaño variable. Los divisores se pueden anidar indefinidamente, que le proporciona infinitas posibilidades en el diseño de la interfaz de usuario.
Súper Grupo
El widget wijsuperpanel es una alternativa a la barra de scroll HTML que le permite desplazarse con facilidad elementos se desbordó. Añadir desplazamiento personalizado, cambiar el tamaño, esquinas redondeadas y sombras a cualquier panel de la página.
Aquí
El Asistente para Wijmo flash (wijwizard) se utiliza para mostrar las secciones de contenido en páginas separadas navegable, lo que puede ahorrar espacio en pantalla o simplificar las tareas de entrada mediante la creación de una serie de formas. Para facilitar la navegación, se puede utilizar integrado wijwizard de botones de navegación o su función de reproducción automática. Y si quieres añadir un toque extra a la wijwizard, se puede combinar con el widget de wijpager para la navegación paginada.
Tooltip
El widget wijtooltip le permite mostrar un texto de ayuda emergente o una plantilla que proporciona información sobre un elemento de destino en una llamada o una caja pequeña. Insertar el código HTML, imágenes y texto para crear una descripción totalmente personalizado.
2011-08-14
Plugin Jquery : Con "lazyload" Cargar Imagenes a medida que haces Scroll hacia abajo.
lazyload es un plugin de JQuery que nos carga las imagenes a medida que el usuario va bajando el scrolll en nuestra pagina, hoy les explicare como usar este efecto en nuestro sitio web y agregarlo en nuestro tema de wordpress.
Lo primero que debemos hacer es agregar en nuestro HEAD el script.
Luego agregamos la ejecución del script
Documentacion y Ejemplos
Otro Demo sobre un sitio real
NOTA: Recuerden que es un plugin de JQuery, por tal motivo es necesario tener cargado Jquery en nuestro sitio web.
Lo primero que debemos hacer es agregar en nuestro HEAD el script.
<script type="text/javascript"
src="http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js"></script>Luego agregamos la ejecución del script
<script> (function($) {
$(document).ready(function() {
jQuery("img").lazyload({
effect:"fadeIn"
}); }); })(jQuery); </script>
Otro Demo sobre un sitio real
NOTA: Recuerden que es un plugin de JQuery, por tal motivo es necesario tener cargado Jquery en nuestro sitio web.
2011-08-12
50 plugins jQuery del 2011 y muy utiles para nuestros proyectos web
1. jbar
jbar is a jQuery plugin that transforms an unordered list
<ul> into a toolbar with dropdown menus.2. e24TabMenu
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands and collapses smoothly.
3. Simple jQuery Fluid Thumbnail Menu Bar
The idea of a fluid thumbnail bar is simple: create a list of thumbnails within a space where the overflow can be flipped through page by page.
4. Accordion Multilevel Menu
The plugin has a boolean initialization option accordion. If you set this value to “true” the menu behaves as an accordion menu. The irrelevant menu items are closed while the relevant slides open.
5. DropKick
Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making the menu look good.
6. jQuery Resize And Crop
jQuery Resize And Crop (jrac) is a jQuery plugin that build a viewport around a given image permitting a person to visually resize an image and place a crop. Then it is
possible to use the coordinates data for any purpose.
possible to use the coordinates data for any purpose.
7. Cloud Zoom
Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatibility across browsers.
8. Simple jQuery Image Hover Effect
This is a simple technique to animate an image when hovering using jQuery’s animate() effect.
9. Easy Image Zoom
Easy Image Zoom gives you the opportunity to see large details of the product while moving the cursor over a medium sized image.
10. ImageLens
Use this jQuery plug-in to add lens style zooming effect to an image,
11. ImageSelect
ImageSelect is a jQuery plugin that allows the user to select an image by means of a nice looking dropdown.
12. jQuery Mapz
With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.
13. jQuery Image Gallery
Image Gallery with Lightbox effect and slideshow functionality for jQuery UI.
14. JbhSlider
JbhSlider is a fully customizable slider. You can add/remove navigation or pagination. You can set the effect, the duration and the functions after/before.
15. jQuery.slideBanjo
jQuery.slideBanjo is a plugin, that shows pretty slides on your site. Supports background loading of pictures, simple to customize, full documentation. Compatible with IE7 and higher.
16. Slides
Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.
17. jShowOff
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.
18. Tiny Carousel
Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.
19. gSlider
gSlider is an interactive image slider built on jQuery. It is versatile, lightweight and easy to implement in any website or web applications.
20. Craftyslide
Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.
21. JQuery Wysiwym
JQuery-Wysiwym is a wysiwym (What You See Is What You Mean) editor. It is not meant to be used to output HTML, it simply helps with the desired markup syntax. Currently supported are Markdown, MediaWiki, and BBCode.
22. leanModal
A super simple modal window plugin that works with your CSS. Perfect for hidden page content. Uber light at just 780 bytes (minified). Flexible width & height, image free, supports multiple instances on one page. Great for login, sign up & alert panels, etc.
23. jQuery-preloader
This jQuery plugin preloads CSS, JS, HTML and images with visual loader, fast and very small (~2Kb).
24. Zebra_Dialog
Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery, meant to replace JavaScript’s alert and confirmation dialog boxes and built using the jQuery Plugin Boilerplate.
25. Double Vision
A jQuery 1.6.1 plugin used for moving text from input’s to textarea.
26. Textarea Code Editor
This plugin transforms textareas into code editors with the following advantages: indentation with the Tab key, intelligent home key, auto indent on enter.
27. Easy Paginate
This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects.
28. Activity Indicator
Activity Indicator is a resolution independent indicator that works in any browser.
29. jQuery File Upload
jQuery File Upload is a jQuery based lightweight file uploader with multiple file upload and drag&drop support.
30. Color Animation
With jQuery’s animate function, you can animate all kinds of css-properties. What’s really missing from jQuery is animating colors. This plugin will add this feature.
31. jQuery Formwizard
The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps.
32. jQuery Spinner Control
Converts the text input to a spinner control. This plugin works fine with ASP.net for the post backs.
33. jEscape
This extension captures all the keydown events faster and less time writing code, you’ll profit.
34. jPaginator
A plugin for animated pagination, with auto-acceleration, a slider, and highly customizable.
35. Snippet
Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.
36. HTML5 jQuery Music Player
A HTML5 music player that uses an awesome design created by Orman Clark and jPlayer.
37. jQuery Link Preview
jLinkPreview is a plug-in for jQuery Library which simply allows you to see a link’s preview image before you visit them by just hovering on it. Link preview will appear by your cursor when you hover.
38. My QR Code
This plugin generate QR code for mobile devices using Google Chart API with jQuery. By default, the plugin will generate the QR code for the URL of the page. You can also specify the text, encoding and size of the QR code.
39. jQuery TagBox
This is a jQuery plugin to help add tags like input in your forms.
40. jRumble
jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.
41. MobilyMap
MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.
42. Grid Navigation
jQuery plugin for achieving some neat grid navigation effects.
43. Simple Overlay
A jQuery Plugin for easily adding lightweight, flexible overlays to your projects.
44. diagonalFade
diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away.
45. Smart Spin
Smart spin is a jQuery spin button plugin that mimics the very common windows spin button control. Smart spin allows you to select a value between minimum and maximum values using either mouse or keyboard. You can also enter a value via keyboard.
46. jQuery Credit Card Validation
Smart Validate is a jQuery credit card validation plugin, that makes credit card format validation a simple task. It ensures that user has entered valid credit card number before making actual transaction.
47. Ajax PayPal Cart
AJAX PayPal Cart is a easy to use JQuery plugin for web developer to add a full function shopping cart in their website. The AJAX cart can included a cart widget which allow display of cart information easily. Support PayPal Website Payment Standard.
48. jQuery.folderPreview
jQuery.folderPreview is a jQuery plugin that takes a series of images and positions them so that they appear within a folder graphic. This enhances the attractiveness of a browsing UI system, allowing the user to visualize the contents of the folder.
49. jQuery Lifestream
Show a stream of your online activity with jQuery
50. QuoVolver
Suscribirse a:
Entradas (Atom)