HTML5 y CSS3: ¿Presenta o Futuro de la Web?

Quizás a estas alturas sea una frase que te has topado en un sin fin de cursos, conferencias y debates, la discusión en torno a estas 2 tecnologías hoy es tema de conversación en el mundo del diseño y Desarrollo Web. Las opiniones en contra o a favor están divididas, para muchos HTML5 y CSS3 son el presente de la Web para otros son el futuro, y para otras tantos son tan solo una moda con futuro incierto.Sea dual sea tu postura no podemos negar que hoy HTML5 y CSS3 forman parte de la web que estamos construyendo, esto toma más fuerza cuando vemos a las grandes empresas como Apple, Microsoft, recientemente Flash por mencionar algunas, mostrando todo su apoyo en el desarrollo de estas tecnologías.La pregunta sería ¿Entendemos estas tecnologías?, ¿Las estamos utilizando correctamente?. Hoy leí un articulo escrito por Jef Vlamings en el cual plantea la problemática actual de estas dos tecnologías, y como estamos mal entendiendo o mal usando estas dos tecnologías.Para eso el autor se basa en resolver un problema, el cual es crear el diseño de unas etiquetas para categorías, pudiendolas crear de 4 maneras diferentes:- Photoshop.- CSS3.- HTML5 Canvas.- CSS (Background-img).No voy a desglosar lo explicado por el autor en cada una de las técnicas para resolver el problema, para eso mejor leer el articulo original, pero si de manera rápida platicar sus experiencias del autor.Es una de las formas tradicionales y quizás la favorita de las diseñadores, ya que tienen el control total de las formas y demás efectos que ellos están buscando, el problema de esta técnica es que en coacciones los diseñadores no comprenden que hay diseños que no se pueden trasladar a la web (tendencia que en los últimos años gracias a CSS ha ido desapareciendo).CSS3 ha venido a tratar de dar un paso adelante en la estilización de los diferentes elementos que conformar una Pagina Web, Bordes redondeados, Sombras, Opacidad, vamos hasta hay algunos proyectos en la web como Layerstyles que simula un panel típico de Photoshop en el cual podemos aplicar varios efectos como lo haríamos en Photoshop. El problema de esta técnica, es que CSS3 tiene muchas limitantes, en lo que respecta a este ejemplo que es la creación del diseño de una etiqueta, el autor se encuentra con que no es posible editar o crear la forma de una manera “natural”, es decir para lograr el efecto deseado se tiene que aplicar algunos trucos o hacks en el CSS para llegar al resultado final que dicho sea de paso, no termina de ser lo que se busca, esto gracias a sus propias limitantes.HTML5 CanvasEl uso de Canvas en HTML5 nos permite diseñar un sin fin de formas, diseños y estilos, a diferencia de CSS3, aquí podemos hacer “todo” o casi todo lo que se quiera resolver, el problema esta cuando uno ve el código que esto conlleva, basta ver el código siguiente para darse cuenta todo lo que se tiene que escribir para lograr el objetivo final.[css]window.addEventListener(‘load’, function () {// Get the canvas element.var can1 = document.getElementById(‘canvas1');var context = can1.getContext(’2d’);// Define how the shape should be filledvar lingrad = context.createLinearGradient(0,0,0,25); //create variable with linear gradient from top to bottomlingrad.addColorStop(0, ‘#c9e5f5'); //set top colorlingrad.addColorStop(1, ‘#aed8f0'); //set bottom colorcontext.fillStyle = lingrad; // set fillstyle to variable “lingrad”// Define how stroke should look likecontext.strokeStyle = ‘#86bedf’; //stroke colorcontext.lineWidth = 1; //stroke width// Create tag shapecontext.beginPath(); // Let’s start drawing our shape.context.moveTo(0.5, 12); // Where to start drawing.context.lineTo(8.5, 0.5); // Draw top diagonal side of arrowcontext.lineTo(161.5, 0.5); // Draw top side of shapecontext.quadraticCurveTo(164.5, 0.5, 164.5, 3.5); // Draw the top right rounded cornercontext.lineTo(164.5, 20.5); // Draw right side of shapecontext.quadraticCurveTo(164.5, 23.5, 161.5, 23.5); // Draw the bottom right rounded cornercontext.lineTo(8.5, 23.5); // Draw the bottom side of the shapecontext.lineTo(0.5, 12); // Draw the bottom diagonal side of arrowcontext.closePath();// Stop drawing that tag shapecontext.fill(); // Fill the shape as defined abovecontext.stroke(); // Add a stroke to the shape as defined above// Add little white hole in tagcontext.fillStyle = “white”; // Set filling color to whitecontext.beginPath(); // Start drawing circle shapecontext.arc(12,12,3,0,Math.PI*2,true); // Circle with 3px radiuscontext.closePath();// Stop drawing that tag shapecontext.fill(); // Fill the hole as defined abovecontext.stroke(); // Add a stroke to the hole as defined above}, false);[/css]Propiedad CSS que ya lleva unos años con nosotros, y que permite establecer como su nombre lo indica, una imagen de fondo a un elemento de nuestra pagina, simple sencilla y que solo ocupa unas cuantas lineas de código, funciona en la mayoría de los navegadores y no requiere de trucos ni hacks en el CSS.El ejemplo no puede ser más practico, y nos demuestra como estamos ante dos tecnologías que aun están en proceso de formación y no sabemos como será cuando ya tengan madures, a su vez nos muestra el error de muchas personas que usan una tecnología solo por que hoy estan de moda pudiendo hacer lo mismo de una manera estándar y que funcionan con cosas probadas, no siempre lo viejo resulta ser obsoleto.Ciertamente son tecnologías que tarde o temprano llegaran a tener madurez y para cuando eso suceda nosotros como diseñadores o desarrolladores tenemos que aprender a crecer con ellas, sin embargo debemos aprender cuando y como utilizarlas en nuestro presente, queda demostrado en el articulo original que habrá momentos en que utilizar una propiedad CSS del “pasado” es mejor que utilizar una propiedad nueva de CSS3 o HTML5 del “futuro”.Tags: CSS3, Desarrollo Web, Diseño Web, HTML5 Apasionado de las nuevas tecnologías que surgen día a día en Internet, Me encanta todo aquello que tiene que ver con el Diseño, la creación de interfaces web, redes sociales, y emprendimiento. Hobies: Videojuegos, Cine,Música,Escribir etc. Sueño Que mi trabajo sirva de inspiración para los demás. via applendamos

Read More..

HTML5 Admin: Template para Backend en HTML5

Poco a poco HTML5 va agarrando terreno en el mundo de la web, más allá de las discusiones con respecto a que tecnología es mejor para la web, no se puede negar que el movimiento HTML5 esta con mucha fuerza en el sector, los usos de HTML5 en el desarrollo lo podemos encontrar en varios aspectos de la web, uno de esos podría ser el diseño y desarrollo del backend de un servicio web.

HTML5 Admin es un completo templare que nos servirá de base para comenzar en el diseño y desarrollo de un Backend, completamente listo en HTML5 y acompañado de algunas librerías interesantes como Modernizr, Jquery, Jquery UI. A demás podemos encontrar diversos elementos básicos para este tipo de diseños: Formularios, Menus, Calendarios, Sliders, etc etc.

Sin duda alguna una gran recurso a probar para comenzar con el desarrollo de un producto o servicio web que necesite un Backend.

Tags: CSS3, Desarrollo Web, HTML5, Jquery

via applendamos

Read More..

15 Experimentos de HTML5 inspirador (más)

Error in deserializing body of reply message for operation 'Translate'. The maximum string content length quota (8192) has been exceeded while reading XML data. This quota may be increased by changing the MaxStringContentLength property on the XmlDictionaryReaderQuotas object used when creating the XML reader. Line 1, position 8877.

Unless you have been living under a rock you will have heard about HTML5. It’s just everywhere now, thanks to the promotion of the Apple CEO ex-CEO Steve Jobs and certain developers who believe that HTML5 can take over Flash.

Well, in fact we don’t see this situation happened yet, but HTML5 is really magical in reference to its video capabilities, canvas illustration and animation which work really well and smooth. The fact is that it’s so promising that projects are popping up all over the places that have been made as a way of testing the boundaries of HTML5.

Believe its power or not, we will be showcasing you 15 enlightening experiments which make the best use of HTML5, and guess what, you can experience gravity, music-based animation, and rendering of creatures that just works like creatures! Have a fun time with them and oops, they’re best served with the latest version of Mozilla Firefox and Google Chrome.

Just in case you’re not satisfied with these HTML5 fun, we have more for you!

A collaborative effort between artist Mark Ferrari and coder Joseph Huckaby, this is a gorgeous collection of moving nature scenes such as forests in winter, seascapes and stormy mountains. They are relaxing to look at and really stunning, with sounds attached to the pictures. If you want a little time to relax from work you can go through these pictures and feel your tension just melt away.

Another one by the amazing Mr Doob, this one is less interactive than the first but still cool. It gives a basic copy of Google’s main search page. But when you point your cursor the whole page begins to ‘fall’ until all of them crash at the bottom. The Google logo works as an active link that refreshes the page. A good game for those great companies which hates Google, may be.

Made by Kenneth Jorgenson, this might be the only place you can see the phrase ‘Refresh for more delicious trees :)’. It is exactly what it says: you click on the website and it takes you to a white background. A black ink drawing of a tree will begin to ‘grow’ while counting on how many branches are in progress. You can refresh to see as many times as you wish.

This is another fun and addictive one for you to enjoy. You basically start out with a couple of ‘magnets’ that can be dragged around the screen. Particles of light orbit around them and if you shift positions you can change the shapes they make. If you want more magnets and particles you just double click and drag them to where you want them. Yes, it’s all about magnets and physics!

Want to see a visual representation of how much television celebrities earn per episode? This is a cool little graph that shows stacks of color bars which represents how much a specific celebrity makes per taping of a television show (or made, in cases like Charlie Sheen). It was made as one of many projects and experiments by Daniel Rapp.

Paul Truong made this interesting application that allows you to paint using a constantly moving, multi-colored ribbon across the screen. It makes shapes and designs, and the effect is quite pretty. All you have to do is to drag it across the screen, talking about simplicity eh.

Here comes a cool demo using the revolutionizing WebGL (Web-based Graphics Library), which is best served with Google Chrome. With the demo, you can draw on the water to make ripples, or drag the sphere to move it around and press some keyboard keys to set the light direction and toggle gravity, all for witness how the moved object interacts lively with the environment, scarily realistic.

Yet another stunning demo applying the magic of WebGL, which you can see a group of extremely beautiful and most importantly, lively jellyfish moving in the water, irradiated by the ray of dreamlike sunlight. Witness the period that HTML5 and WebGL brings web to life, best viewed with Google Chrome.

Voxel rain means multi-colored 3D boxes descends to form a rotating big block. It’s like showcasing the possibilities of computer in 1990s, and now it comes to web browser by utilizing the power of HTML5, the brightest era of internet is not more far.

Often we web designer wonder how much possibilities HTML5 can really helps us to breakthrough in web typography, and this demo gives you the answer, more than ever! You can choose to witness stereoscopic effect, neon effect, or even moving neon effect, the future of web typography is in the hand of HTML5.

I just can’t hold the glory of HTML5, it’s spinning, it’s rotating… it’s cool.

Bored of HTML5-based 2D sketching service? Check this out. Simply draw a line, and press Space then drag left or right, and you will see your drawing rotating in 3D perspective. 3D sketching is not more complicated with HTML5.

Mta.me Conductor inspires you by spawning points that will move continually to form lines, and when the lines “collide” to each other they will triggered some interaction. All to prove that HTML5 is not just about code but interaction, and that’s what web users really care for.

An interesting shooter type game but the hero is Gmail, free it from the evils! Just like the classic shooter game, you got the life, score, and the almighty laser beam. Probably one of the potential demos to showcase the capabilities of HTML5 doing as a game. Watch out, Flash.

This is such an addictive game that it should be illegal. Seriously, once you sign into one of their servers you will want to play for hours. You are basically flying around shooting things while avoiding getting shot by other players. It is simple and so fun to play, and the fact that it allows for a multiplayer experience is a serious plus that puts it above Flash games that are so popular right now.

Enjoy the article so far? Recommend it to your friends and peers.

Be the first to our articles and get latest updates on freebies.

Ver Articulo Original

Read More..