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..
