HTML5 Video Player | Video.js Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video. What's HTML5 Video? HTML is the markup language that makes up every page on the web. Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, and Silverlight. What's an HTML5 Video Player? An HTML5 Video Player is a JavaScript library that builds a custom set of controls over top of the HTML5 video element to provide a consistent look between HTML5 browsers. Get started with Video.js
Browser Statistics The Definitive Guide to CSS Transitions Back in the golden days of the web, we had a little thing called Flash to help us make the web a dynamic, fun, interactive place. But, Flash is being used less and less. Of course, in certain environments it can still be put to amazing use, but in today’s web environment you need CSS to get the job done. One of the easiest ways to give your site a near-instant facelift is to bring CSS3 transitions to the table (pun intended). As users interact with various elements on your page, transitions allow for a delayed response that is far more natural and engaging than a jarring, instant response. Drop this into an HTML document and check it out: Yeah, I know gray boxes aren’t all that exciting, but the point is that the transitions on the box to the right are more interesting and give the design a more polished feel. Pseudo-Classes for CSS Transitions The key to making CSS transitions work is through the use of pseudo-classes. Introducing CSS Transitions Properties of the CSS Transition
paración de Javascript Frameworks ~ Introducción. | Blog | PabloImpallari | Diseño Web Argentina. Desarrollo y Programación en Php. Argentina. España. Rosario Hasta hace poco tiempo atrás, javascript solo se utilizaba para cosas accesorias o de poca importancia. Para validar algún formulario, para algún efecto visual, y poca cosa más que esas. Javascript era visto casi como algo que se podía ignorar y de ser posible, era mejor evitarlo. Pero en este último tiempo, todo esto ha cambiado radicalmente y Javascript hoy en día es un pieza fundamental en el desarrollo de aplicaciones web. En gran parte, gracias a la aparición de librerías como Prototype, Mootools y Jquery. Básicamente, todas estas librerías nos ofrecen una forma simple de hacer lo que antes era imposible: Manipular y modificar una página web sin tener que recargarla. En esta serie de post vamos a analizar lo más completamente posible las diferentes librerías, porque si bien son todas parecidas y sirven todas para lo mismo, lo difícil es decidirse por cual usar. Hay muchos aspectos que hay que tener en cuenta: El peso de los archivos. ¿Cuanto pesa cada librería? Saludos Pablo.
Thinking Outside the Grid Flying into my home city of Tucson, Arizona late one night in November, I was impressed by how rigid a grid the city’s layout is. Tucson is one of America’s planned cities, and from the sky, it’s easy to see that Tucson’s designers succeeded in creating a city in which everything is laid out according to a precise plan (figure 1). I was returning home from London, which in contrast is far from a rigid grid. London is spirals, circles, tangets, and is often seemingly spontaneous in its design (figure 2). Figure 2 Because I’d been thinking about this article for some time, the aerial view of these cities struck me as an apt metaphor for grid design on the web. Sense and the city#section1 If we extend the urban-planning metaphor to web design, there are very interesting parallels. On the plus side, Tucson certainly is easy to get around in; you needn’t have much more than a basic sense of direction or a street map. London, unlike Tucson, is a maze. Coding the grid fantastic#section2 Figure 7
Troubleshooting CSS Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions. On the bright side, this is what makes CSS fun (or kinda)! Photo credits Anyway, I’m not here to talk about my convictions but about CSS. Among others, I picked some really common yet annoying issues: Float clearing, an old battle I think this has to be the most common wat? Basically, when an element only contains floated elements, it collapses on itself. There are a number of ways to fix this. Then Nicolas Gallagher came with a new way to clear floats from the parent without touching the markup at all. How to fight inline-block spacing? Why?
Underscore.js Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders. Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on. The project is hosted on GitHub. Collection Functions (Arrays or Objects) _.each(list, iteratee, [context]) Alias: forEach Iterates over a list of elements, yielding each in turn to an iteratee function. Note: Collection functions work on arrays, objects, and array-like objects such as arguments, NodeList and similar. _.some([null, 0, 'yes', false]); => true Array Functions Chaining
Five simple steps to designing grid systems – Part 1 – July 4th, 2005 – The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice. Ratios are at the core of any well designed grid system. Sometimes those ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). This first part is about how to combine those ratios to create simple, balanced grids which in turn will help you create harmonious compositions. Starting with a blank canvas It’s always easier in these kinds of tutorials to put the example in context, in some kind of real world scenario. Subdividing ratios The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. This is one of the easiest ways to create a balanced grid. Diagrams kindly updated by Michael Spence Getting creative Many have said grid systems can stifle creativity, but I disagree. So, we have our grid. Short but sweet
Flexible CSS cover images I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Demo: Flexible CSS cover images Known support: Chrome, Firefox, Safari, Opera, IE 9+ Features The way that the cover image scales, and changes aspect ratio, is illustrated in the following diagram. The cover image component must: render at a fixed aspect ratio, unless specific maximum dimensions are exceeded;support different aspect ratios;support max-height and max-width;support different background images;display the image to either fill, or be contained within the component;center the image. Aspect ratio The aspect ratio of an empty, block-level element can be controlled by setting a percentage value for its padding-bottom or padding-top. Changing that padding value will change the aspect ratio. Maximum dimensions Background image Final result
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library Media Queries WTF, HTML and CSS? tubalmartin/riloadr