SheepIt! - Form Cloning Jquery Plugin - Inicio Clonación dinámica de formularios con Jquery ¿Qué es SheepIt? SheepIt es un plugin para Jquery que permite clonar elementos de formulario dinámicamente. Es muy útil para desarrollar formularios avanzados que requieran cargar un mismo tipo de dato múltiples veces. Por ejemplo, si se tiene un formulario como el siguiente: con el cual se cargan los datos de una persona (Nombre, Apellido y Teléfono), sheepIt es capaz transformar el campo teléfono en un multiformulario dinámico y asi habilitar al usuario a cargar más de un teléfono por persona. Además, para facilitar su uso, sheepIt agrega controles avanzados que le permiten al usuario modificar el formulario agregando o quitando clones dinámicamente. Características Opciones de configuraciónLimitar la cantidad de formularios, Controles de formulario customizables, cantidad de formularios iniciales, confirmación de borrado etc. Requerimientos Jquery V1.4+ Descargar Ejemplo básico Incluir archivos necesarios Código javascript Plantilla HTML Resultado
Controlando nuestra WebCam con HTML5 Un sencillo ejemplo en el que accedemos a nuestra WebCam lo que nos permitirá convertir nuestro navegador web en una cámara de fotos utilizando únicamente HTML5, JavaScript y Canvas. Esto es posible gracias al desarrollo de la API getUserMedia, la cual aún no es soportada en todos los navegadores. Gracias a getUserMedia podremos acceder no solo al control de nuestra cámara sino también al del microfóno, aunque debemos tener en cuenta que la especificación todavía se encuentra en fase de desarrollo (la última actualización del borrador se dio el 12 de diciembre). Podéis encontrar toda la documentación oficial en la página de W3C. El mayor inconveniente es el lento soporte que está recibiendo esta API, lo que siginifica que esta aplicación ni siquiera es compatible con muchos de los navegadores modernos. Respecto a Firefox, a día de hoy la gente de Mozilla aún no ha desarrollado la interfaz de usuario para la solicitud de activación de la cámara/micrófono.
Snippet :: jQuery Syntax Highlighter 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. Features Natively supports 15 popular languages: C C++ C# CSS Flex HTML Java JavaScript JavaScript with DOM Perl PHP Python Ruby SQL XML Can be extended to support: Bison ChangeLog Desktop Files Diff GLSL Haxe Java prop files LaTex LDAP files Log files LSM files M4 Makefile Objective Caml Oracle SQL Pascal Prolog RPM spec files S-Lang Scala Shell Standard ML Tcl Xorg config files Integration with ZeroClipboard for copy functionality Plain text, pop-up, and expand/collapse options Group or individual line selection 39 unique color schemes <h1>Snippet style selector</h1><div class="instructions"> <p>Choose your style below. <h1>Snippet style selector</h1><div class="instructions"><p>Choose your style below. Current style: vim-dark PrevNext Download Only need styles? Usage 1.) 2.) 3.) 4.) 5.)
Capturing Audio & Video in HTML5 Many browsers now have the ability to access video and audio input from the user. However, depending on the browser it might be a full dynamic and inline experience, or it could be delegated to another app on the user's device. On top of that, not every device even has a camera. So how can you create an experience that uses a user generated image that works well everywhere? Start simple and progressively If you want to progressively enhance your experience, you need to start with something that works everywhere. Ask for a URL This is the best supported but least satisfying option. Though, if you want to manipulate the image in any way, things are a bit more complicated. File input You can also use a simple file input element, including an accept filter that indicates you only want image files. This method works on all platforms. <input type="file" accept="image/*" id="file-input"><script> const fileInput = document.getElementById('file-input'); Drag and drop Paste from clipboard if (file ! Tips
Signature Pad · Lab · Thomas J Bradley Download ZIP—GitHub Introduction The Signature Pad jQuery plugin will transform an HTML form into a signature pad. The drawn signature is written out to a hidden input field as a JSON array using JSON.stringify(). Obviously, Signature Pad has a couple extra dependencies: Douglas Crockford’s json2.js and FlashCanvas 1.5. Signature Pad tries to maintain a certain level of progressive enhancement, while still giving developers enough control. Signature Pad works with both mouse and touch devices. Get the source code on GitHub: Demos Demo of accepting a signature—this demo showcases an HTML form and the Signature Pad ready to accept a new signature. Demo of requiring a drawn signature—this demo showcases an HTML form where the user is required to draw their signature before submission. Demo of regenerating a signature—this demo showcases regeneration of a signature from a stored JSON array. How to Use the Plugin $('.sigPad').signaturePad(options); and
Acceder a webcam y micrófono con HTML5 En este artículo te expondré una de las características de HTML5 más potentes: la capacidad de acceder a dispositivos como webcam y micrófono. El ejemplo que usaré es uno de los que expuse en uno de mis seminarios y que forma parte de los ejemplos de HTML5 y CSS3 para descargar aunque explicado en detalle. Ver ejemplo completo Funciona 100% en Chrome El ejemplo pretende que recojamos el audio y vídeo de nuestro dispositivo y los mostremos en un elemento video de HTML5. <! Acceso a dispositivos con HTML5 HTML5 nos permite acceder, siempre que el navegador lo permita, a dispositivos como webcam y micrófono a través del método getUserMedia. Como ves comprobamos que cada motor (webkit, microsoft, gecko) puede tener su propio método getUserMedia. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; Perfecto, ahora pedimos acceso al dispositivo: Rating: 8.3/10 (9 votes cast) Te puede interesar:
jNotify - display animated notice boxes, success boxes, error boxes with jQuery in just one line fo code jNotify can display information boxes in just one line of code. Three kind of boxes are allowed : information, success and failure. The whole box is entirely skinnable with css. Implementation: 1. 2. Options: autoHide Boolean Default : true - jNotify closed after TimeShown ms or by clicking on it clickOverlay Default : false - If false, disables closing jNotify by clicking on the background overlay. MinWidth Integer Default : 200 - In pixel, the min-width css property of the boxes. TimeShown Default : 1500 - In ms, time of the boxes appearances. ShowTimeEffect Default : 200 - In ms, duration of the Show effect HideTimeEffect Default : 200 - In ms, duration of the Hide effect LongTrip Default : 15 - Length of the move effect ('top' and 'bottom' verticals positions only) HorizontalPosition String Default : right - Horizontal position. VerticalPosition Default : top - Vertical position. ShowOverlay Default : true - If true, a background overlay appears behind the jNotify boxes ColorOverlay OpacityOverlay Methods:
Real-time synchronous multiplayer 3D gaming with HTML5 - The Artillery Blog by Ian Langworth 14 May 2012 Six weeks ago we set out to see if we could build a real-time, “twitch” 3D game in the browser using HTML5. We built a few games and were pleasantly surprised with what we achieved. You can test one of our creations here: Air Hockey Graphics WebGL has pretty good browser support at the moment, and three.js is an essential library because of the WebGL boilerplate it handles for you. Many of the examples make use of stats.js and dat.GUI for monitoring the frame rate and adjusting settings, which are good tools to include when developing your game. dat.GUI was especially helpful in fine-tuning our latency compensation algorithm and tweaking the game’s appearance, such as light strength and other material properties. We bought the air hockey, mallet and puck models from TurboSquid, and getting them into the browser was easy thanks to three.js’s Blender exporter plugin, which exports Blender scenes as JSON. Networking Of course, latency complicates this process.
jQuery color plugin xcolor - Website and Application Intelligence The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. Overview This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. Basic Usage The jQuery color plugin can be used to simply transform colors like Microsoft's million dollar color: <script src=" var color = $.xcolor.greyfilter("#0044cc"); console.log(color.getHex()); </script> getHex() is just an example, see below for the other Color methods jQuery extension $(node).isReadable() Performs a readability test on the first selected element. // Example:var bReadable = $("#tag").isReadable(); $(node).css() It's possible to use the xcolor library quite naturally via jQuerys css() method. $(node).colorize(from, to, method) The colorize() function is a nice toy to colorize texts. Another example simple changes every character between a random color and the famous burnt sienna. $(node).animate()
Building HTML5 Metro Games For Windows 8 About two months ago I did one of my HTML5 game development workshops at Microsoft’s NYC office. It was a huge success with over 100 registered attendees. One of the highlights of my workshop was showing people just how easy it is to build an HTML5 game for Win8 in just a few minutes. By leveraging the Impact game framework, it is easy and fun to build a Metro game with very little modification to the core source code. Metro HTML5 Apps One of the most exciting aspects of development for Windows 8 is the ability to build a native app using nothing but HTML and JS. As you can see, there are now three pillars for building Win8 apps: C++/XAML, C#/XAML and JS/HTML. In addition to the power of running HTML5 games natively on Win8, Visual Studio 11 also got a huge update to help support building JS applications. Getting Up And Running One of the advantages I had over starting from scratch when it came to making an HTML5 Metro game was the Impact game framework. Optimization MS-Specific Hacks and