requestAnimationFrame for smart animating If you’ve never written code to animate inside the browser, you can stop reading :) What is requestAnimationFrame? In your animation work, you’ve used a timer loop to make changes every few milliseconds. Good for us: browser vendors have decided, “hey, why don’t we just give you an API for that, because we can probably optimize some things for you.” So it’s basic API for use with animation, whether that be DOM-based styling changes, canvas or WebGL. Why should I use it? The browser can optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. OMG I can brag about having a site with battery-friendly animations? Yeah bro. How should I use this? Note: I am using ‘requestAnimFrame` here because since the spec is still in flux, I don’t want to make a straight polyfill, yet. 2012.01.07: The spec has gotten some fixes and settled down. A robust polyfill I have this polyfill available as a gist as well. Let’s see that in action Is it ready?
HTML5 Full-Screen Demonstration Oh look – a squirrel. Click to view full-screen… This demonstration illustrates how to use the HTML5 full-screen API which has been implemented in Firefox, Chrome and Safari. For further information, please refer to the article How to Use the HTML5 Full-Screen API… This example code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com. Please view the source and use this code as you wish. 10 Rendering — HTML5 User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience intended by the documents' authors. So as to avoid confusion regarding the normativity of this section, RFC2119 terms have not been used. Instead, the term "expected" is used to indicate behavior that will lead to this experience. 10.1 Introduction In general, user agents are expected to support CSS, and many of the suggestions in this section are expressed in CSS terms. In the absence of style-layer rules to the contrary (e.g. author style sheets), user agents are expected to render an element so that it conveys to the user the meaning that the element represents, as described by this specification. An element is being rendered if it has any associated CSS layout boxes, SVG layout boxes, or some equivalent in other styling languages.
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!! | Blog de Diseño Web 24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!! El diseño webestá en constante evolución. La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web. Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que “todo es posible“. Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad. A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3, que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.
Optimize browser rendering - Make the Web Faster Once resources have been downloaded to the client, the browser still needs to load, interpret, and render HTML, CSS, and JavaScript code. By simply formatting your code and pages in ways that exploit the characteristics of current browsers, you can enhance performance on the client side. Use efficient CSS selectors Overview Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering. Details As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. According to this system, the fewer rules the engine has to evaluate the better. The following categories of rules are considered to be inefficient: Rules with descendant selectors For example: Rules with the universal selector as the key body * {...}.hide-scrollbars * {...} Rules with a tag selector as the key ul li a {...} Rules with child or adjacent selectors body > * {...}.hide-scrollbars > * {...} ul > li > a {...} Rules with overly qualified selectors
Tipos de fuentes en css « Don Estándares Holas :) en css se plantea mucho sobre las fuentes, lo ideal… es usarle las propiedades del css para que se vea bonito al usuario, y para nosotros fácil de manejar. El css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarlas, no todas :p por que son demasiadas pero si las mas importantes. Recuerda algo, por el momento no se pueden usar fuentes que el visitante no tenga instaladas, por ejemplo este tipo de letra, es muy bonita y hasta agradable, pero el problema es que si nosotros la instalamos en nuestra pc y trabajamos con css o en html con ese tipo de letra y la subimos a un servidor, esta en NUESTRA PC se va a ver muy bien, el problema es cuando nuestros usuarios abran nuestro sitio web, ellos no verán correctamente por que en la pc del usuario no esta instalada esta fuente. principalmente las fuentes default son: Arial, Helvetica, sans-serif Y que pasa si en el sistema operativo (Mi preferido :P Linux! .fuente_titulos{ } Me gusta:
Adding ScrollTo in the jQuery UI Accordion script JavaScriptMVC Pancake Payments | Simple, Easy, Awesome!! Top 10 Best HTML5 Websites of 2012 Here are our editor's picks for the Top 10 Best HTML5 Websites of 2016 based on visual artistry, integrated sound, ease of use, and uniqueness. 1 | The Wilderness Downtown The Wilderness Downtown is an interactive music video for Arcade Fire's song ''We Used to Wait''. Visitors are asked to input the address of the home they grew up in and then the site uses Google Earth and HTML5 to create a personalized music video that takes the user on a journey back home. 2 | Heart of The Artic Heart of The Arctic takes users on an Arctic expedition/scavenger hunt through four distinct environments designed to show users the steps that would be needed to restore climate balance to the arctic region. 3 | Three Dreams of Black 3 Dreams of Black uses HTML5 to promote Danger Mouse and Daniele Luppi's album Rome. 4 | Enjoy Your Privacy The website was created to warn consumers about the dangers of not using password protection on their mobile devices.
iPhone Telephone Hyperlinks | Greg's Head Enough with the iPhone news. Let’s talk about a little detail that no one else is talking about. The interesting thing for me is how the web is joining our good friend the telephone. A while back I talked about Callto links and how these could be tied into Vonage using a little tool I wrote. So I was pretty interested to see how the iPhone would allow a web-page to connect to a telephone number. i was expecting either callto: links or perhaps a telephone microformat or perhaps a proprietary solution. Surprisingly it turns out that it’s none of the above. The format allows you to create an anchor link and use a tel: URI to point to a telephone number. The link format is fairly straight forward: <a href="tel:+1-800-275-2273"> Call Apple Customer Support at 1-800-275-2273 </a>. If more sites start using this for their contact information other providers for the tel: URI may begin supporting the format (Vonage, Verizon, Skype, etc.)
JavaScript JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for...in and Object utilities), and source-code recovery (JavaScript functions store their source text and can be retrieved through toString()). This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. Looking to become a front-end web developer? Get started
demos... | CSS Hacks View full post about browser-specific CSS Hacks here. Red if * html matches in this browser Red if *:first-child+html matches in this browser Red if html>body matches in this browser Red if html>/**/body matches in this browser Red if html:first-child matches in this browser Red if html[xmlns*=""] body:last-child matches in this browser Red if body:nth-of-type(1) matches in this browser Red if div:nth-of-type(1n) matches in this browser Red if body:first-of-type matches in this browser Red if @media screen and (-webkit-min-device-pixel-ratio:0) matches in this browser Red if html[xmlns*=""]:root matches in this browser Red if *|html[xmlns*=""] matches in this browser Red if :root *> matches in this browser Red if *+html matches in this browser Red if * > matches in this browser Red if html:only-child matches in this browser Red if @media all and (min-width: 0px) matches in this browser Red if html:lang(en)>body matches in this browser Red if x:-moz-any-link matches in this browser