background preloader

Lungo - HTML5 Cross-Device Framework

Lungo - HTML5 Cross-Device Framework

Tutorial de HTML 5 de Armando Sosa Un video tutorial de HTML 5 desde cero, para principiantes, si quieres aprender lo nuevo de HTML5 sin el dolor de la migración, míralo entero. Es un poco largo, pero vale la pena. El creador es un diseñador que admiro, Armando Sosa. ¿Sabes SQL? Fullscreen Layout with Page Transitions A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items. View demo Download source Today we’d like to share an experimental responsive layout with you. All effects are done with CSS transitions and controled by applying classes with JavaScript. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor. Let’s take a look at some screenshots: The initial screen has the four flexible boxes. When clicking on a box, it get’s expanded to fullscreen. The view of a box that is expanded. In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The navigation through the items has the same page transition. We hope you like this little experiment and find it inspiring!

Enlaces en html. Direcciones absolutas y relativas. Etiqueta <a>. mailto. target. anclas. Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. <a href=“enlace”>Pincha aquí para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta. Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. <a href=" de enlaces html</a> Protocolos Mailto

Build an App With WordPress - The compulsory todo list Matt Mullenweg’s State Of The Word was very insightful into what was to come of WordPress in 2012. One thing he mentioned would be big, is be WordPress powering apps. With that in mind, there aren’t many posts around that teach you how to make an app. I thought I’d start with the compulsory “How to make a to-do list app using WordPress!” It even works across all platforms- that’s right. There is a Demo page (username: user, password: notes) where you can see and play with what we’ll be creating. A bit of Theory Many web app frameworks these days use MVC or MVVM structure. WordPress is a good starting point because it provides a plethora of APIs for us to leverage. The approach we’re going to take is simple. To bring you up to speed The focus of this tutorial isn’t to show you how to design an app, but to build it with AJAX. The starter theme I’ve put together for you is just a skeleton without any functionality. Data flow in a single page web app Let’s examine the diagram from just above.

Tutoriales de HTML5 Aquí tenemos ahora varios enlaces que pueden ayudar a quienes desean empezar a trabajar con HTML5. Seguramente falta mucho para que Adobe Flash sea reemplazado, si es que sucede, pero mientras tanto nada mejor que aprender del HTML5 y su futuro poderío. No importa el nivel de conocimientos, exceptuando las cosillas de CSS3 y otros fundamentos con los que se debería contar, hay opciones para todos los gustos: 1. HTML5 Boilerplate 3.0 Para no iniciar desde cero, HTML5 Boilerplate ofrece una excelente herramienta de aprendizaje en forma de plantilla, con montones de posibilidades y la documentación suficiente para realizarlas. 2. En Chrome Experiments se albergan muchos de los mejores experimentos (tests) para navegadores, con la peculiaridad de que han sido desarrollados esencialmente mediante HTML5, Canvas, SVG y WebGL. 3. Casi lo mismo, sólo que cambiando Google por Mozilla, y Chrome por Firefox. 4. 5. 6. 7. 8.

Create Google Maps With gmaps.js How To Use GMaps.js GMaps is a javascript plugin that makes it really easy to use Google Maps to display a map to your user. There are multiple options that make it easy to add pointers to the map, directions, information boxes and lots more. This plugin is massive there is loads of options to go through, in this tutorial I'm not going to go through all of them. I'm just going to go through the options which will be the ones you are most likely going to use. If you want to see all the options for this plugin you can view the documentation on the Github Repository. Documentation To start using GMap.js you need to download the latest version from Github. Download GMap Once you have the latest now include the Javascript file and jQuery on your page inside your head tag. When adding the gmap.js to the page it will create a Javascript object called GMaps which you will use to create your maps. Basic Map In this example it's just going to be a basic map inside a div. Basic Map Demo Mouse Events Demo

CSS 2.1: Posiciones En el siguiente ejemplo podemos ver como actúa este atributo, explicándose los detalles en cada caso. Se expone sólo el código para el último caso, pues los demás se configuran en tal como se detalla en el texto. Veáse como el elemento está posicionado de forma absoluta con respecto al elemento de bloque exterior, cuyo posicionamiento es relativo para que las posiciones absolutas interiores se hagan con respecto a él. Resultado: Sin recorte: En este primer ejemplo tenemos un elemento sin recorte alguno. Recorte vacío: Ahora aplicamos clip:rect(0, 104px, 29px, 0) al elemento span de forma que se recorta 0px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda, en definitiva no se recorta nada. Recorte superior: Ahora aplicamos clip:rect(5px, 104px, 29px, 0) al elemento tal que se recorta 5px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda.

Surviving the Zombie Apocalypse with HTML5 & SVG The SVG spec has been around for a while now. Under development since 1999, the spec, or more accurately a family of specs, describes an XML-based file format for vector graphics. An SVG block defines the individual components of a vector image, such as paths, shapes, fills, strokes and other features. This provides a lightweight option for certain types of graphics that might otherwise have been created in Adobe Illustrator or Inkscape and then exported to a raster format. With widespread adoption of HTML5 standards, browsers are taking SVG in new directions, such as emphasizing the <svg> tag for inline SVG, using CSS for styling, and opening up the DOM so that SVG images can be created or manipulated on the client side with JavaScript. To demonstrate, this series of walkthroughs will aim to benefit humankind in two ways. Step One: Prepare Step Two: Create the SVG Element To start, create a 600×400 root element called “cityBox”: <! Voila. Step Three: Add Text Figure 1: SVG Element with

Centrar un DIV vertical y horizontalmente | luigix.com Para los que usamos HTML a menudo y queremos hacer las cosas bien según marca la W3C, sabemos que no siempre las cosas son tan fáciles como pueden parecer, y algo tan simple como centrar una caja, recuadro o contenido en medio del navegador puede parecer fácil, sin embargo si se quiere hacer mediante un DIV no es tan sencillo como parece. En muchas ocasiones he estado tentado de usar el viejo método de poner una tabla que ocupe 100% de alto y 100% de ancho y poner el contenido de la celda todo a “center” (align y valign), pero pese a que a veces cueste… hay que hacer las cosas bien y usar un DIV para poder centrarlo mediante un par de técnicas que he encontrado en un genial artículo de la web ProgramacionWeb.net, dónde se explica de forma muy fácil y sencilla como centrar contenido mediante un DIV y CSS. A continuación os dejo una adaptación mía del artículo antes mencionado, dónde he extraído la parte puramente técnica para hacer lo que nos interesa, centrar un DIV.

Related: