Diseño Web

Comparativa de CSS3 vs CSS

Logo de CSS

Smashing Magazine, que es en mi opinión el sitio con el mejor contenido de diseño de páginas de Internet, acaba de publicar un artículo que compara principalmente el performance y agilidad de crear un sitio web usando las nuevas cualidades de CSS3 como gradientes, esquinas redondeadas, etc., en contraste con crear el mismo diseño pero utilizando las típicas técnicas para lograr estos efectos que la versión actual de CSS no permite.

El artículo está en la siguiente liga: CSS3 vs CSS : A Speed Benchmark

Como resultado del análisis del artículo se determinó que el sitio que utiliza CSS3 se puede crear 33% más rápido, es 9.5% menor en tamaño físico (KBs) y realiza 45% menos peticiones (viajes) al servidor. Y considerando que, al menos en Google, el tiempo de carga es ahora un factor que influye en el posicionamiento de los sitios en los resultados de búsqueda, definitivamente les recomiendo leer este artículo.

Espero les sirva.

Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments

Habrá veces que queremos desplegar una imagen en un correo o en una página web sin utilizar una etiqueta (tag) de <img>. O también que en una hoja de estilos (CSS) queramos especificar literalmente el contenido de la imagen en lugar de hacer referencia a ella en algún path.

Utilizando Data URI Schemes, podemos especificar el “string” de Base64 que equivale a una imagen gráfica. Es decir, estamos especificando “in-line” la imagen, en formato de datos, en lugar de utilizar una etiqueta img que implica la localización de la imagen como un recurso externo.

Es decir..es lo mismo poner esto:

<img src="images/dotnet.gif alt="dotnet" />

que esto:


<img alt="dotnet" src="data:image/gif;base64,R0lGODlhdQBvAPf/AGVlZbKysvH5/Ao2fKqqqvX19SIiIujo6RJqojWhyfz9/Y+51gpJm7jh7QiUwUhISC2jyQo7g0iIt4bS5IfM4BOjyUuZxPn5+QKLuwdfngdbmwxDd9Pt9On2+VWkyXa61hFimzw8PA1Cg83V5Nvx9gpCjOvu9gpIjOT0+TSHuMzr81xcXLHc6wdRk8vLy2bF3Kzb6gVjooSEhJTM4dvt9CqaxJzT5Q5Sh6Kiotra2kS41FRUVCSKvTxlqqHc6n3E3BYWFhhyqwZ0rSJ8tHFxcQ1RkeHh4Y7V5sPDwzKUwru7u0OqzSOaxAKQv9fX13p6eo+Pj+7u7iySwTilygZ8svHx8Vq01N3d3QAAABNmn1Gx0hV0rvr8/DGZxBJdoi6KvQ5cmuzs7KPW5w9dkhdzrRt7s0mu0ByaxG3C2rrc65ubm5OTk5rZ6ESiyoLI3hBVkNLS0iOCtTFmmy9zq4zL4AODtYqKiiSEuA1qpE2qzR51sDiTwleszhF6sg5KicXl8GS41hSRvhNdmYLE3RFyqODx9zAwMBR1sAoKChBPjXzN4cTp8nXA2hGWwkukyx2BtCJtp2DC2qnL4hlqqxdwqTV+sxdtqObm5j2ozW692ByFuguAtAs6bE+61u33+gmNvBuTwSOVwnqx0rzm8ByOvWe82BBupmKawzqYxWSsy2+51l2y0AZnpCmFuYnC3GrI3gdWl7/i7q3g7V282Gu01RCCs5fI4CmSvsrn8RWFuB15rwtlor3T5RONvVq51gSHuuvw9xV1qgGItH+nzAhMjyyAtg1LgBKZxD+dyCRdkTGex6jT5hBYlnjK3xd6rnHJ3jm00S2fxzSOwBhtpgpvqAuIuBNWnxF0rh1wphxnofb7/B1WkwZuqDCqzDxrrhNzrhdkqAhAhqTX6JLQ4jKjySiOvghGiggxdyKIuZTX53KzztLf6ziexySgyF+v0hxwr+/2+qnY6TOxz5rX6Bd/tlO/2Nfp8kOgxz+RvrHX52a20BxfnnPF2abF3H7A1////yH5BAEAAP8ALAAAAAB1AG8AAAj/AP8JHEiwoMGDAgUUsleogwABniJ2mEiRYiEa69Yd4CJQAcKPIA9q4xDvh5UlpMqoXLnSgr0OEiN6DElzoIIGjByhG5LCQqoZYmyMo0NnnFEKblJJmCNn2zZvEhbQ0PaQY82r/7TZsMLkzJlA1Q6JHUvWFgcUHVCoFYA1pAIWZnJxY0WXVYwYwSzQcfODAoVxjCRsE3GuMCc/XqxZmyMpLVqrbRGyWOL1TKNqwvqQ3Wwhlgq1hQqhmBnZIIlSpKjVXW03RopM/Cj4E3xuwABOuHGL8MLbmigSwEmwLU1QwI/KTAIJq1Mn2Oaxumx5Di6cuMEGS3Kxtsv9boY4szwk/ysc4Xbu3H7Aqffym4N7bdazljrDJFo75cIyb3l+6JsHFvlwQIJ7hZBmnQI2QKBJd63d5WAMrGQAyQYDRBDBBpxsoOGGGb4xySTgTGLWIouoYCBWCrhRHwTR4IdBHfz1N4Qty7DgngocDBefNm5Eg84uDwb5YBkpJGNMOBduqKSSWbxjySTFsLDIKKOQQBwM5JAzxRRMYOAlBpvs95x/y9jSgAoqLELCiZFxQUE05QApZAYxZGDnd5HwI0cyIrRgzAZ/BgrooDe8844e76TSwKINdBAZClokgAkm5HzypTCHiLnZEK7YMgOJJepInAJ0kJOEKXR6V+eddmoQxzMTKP8iQTbUZKCBMbjmqiuuWQyhhx662CDLsItEZsMUSyR7xpdN9LHFs9A++40FtrhiA5VVxieQGFN0oYudq7LaqgYpKDLBuark0ssuGdzg7rvw3mDMG0PUO4QHsvigr6NXCaCFGWbkgcknTWDQRDXfkBGttEN84Io/8WALGXHYsdOKuK3aaisslbhxxBET+MCBMqHQs8su8aZ8AzZ3xBFHKxT4wAYbo2AFlxY4M9HEzs0qvPAWZFjgygeDyDKKLIVoq4IW7OyBhwYZQ63B1BrAMscHR6RzhA9s+cNEKIQgAMIbZJdt9g0g3NFKK3GswobWbHhSkwI/aGGFFVo0YvDBP0P/OwQtH9BCx7CjsImVAJlggoouVDfeOCzYqOPG2z6gIJA40SijCSWmjPHGGKCHLvoQX/DwBSqKgDxBsTSddjcgS/Dcc9/T0mL7PMNafuA4ZqDyha2OTw1L1Vmk4g8d+ur+DwdLJNCFM7ogIPr0oGNzixTllINGrIr4MDFCDVgByPjk8FxN30APwYc77qiib83xNaAFMntQMjzVw+cPCxgefJCJvlYaiDZKMSl0lMEZIEigAhcIgixIQQpJkEIeFNGMZihCeQhBECAykQlAHINnfQgCGUY4QqCRAR984IMHYuYDuVmnEKUwwx5aUTX9weKGOMSHPvTxA1mowCAUABg7/+KADko08IhZQGLalNGFLrDjFc94xgvg95EO/CATjGCEFXi2CRJ6kQxBKIMjPOAIPqQjHawbFR2sgIo9ZAGHcMRhCyqxijqOw0TXMcO/svcIBPjxj4DchS4SoIxC+uIFL4jEEQw3EA5gkRE/wMTOMGDCL4LxC21oAzLQkA6uxScWpcjDHuLQgjjesAWoxAYftMCHVYwCPgYpxCw60Ql23OIWwTCFLnfJy2B0IQHANEMkhhkJFyKkJD8YxHF21gdLklAXSUAFKtpAgSP80DodaAYg9iANEJQSFqgEJypbAIY25OGcjBAVQRTwilnMwgxS6AI6TEGIetrTnqYoxxSAOf+FevizE2k0CBf2MggKZMIBB3PmCClxhyQ4dBUhY2RN4pEJUepinOIcJyq/kKxkpQEk84jEC2axzxoE454oNcUjgAlMHdBSB0f4CA2IQocZmGFnhxChJYOgh3I4FBXNmEAAiUMCRmTCd2DQ6DiJ0QJi6AITW5qCFtRZkFEg8gVmUMYUHkFPlNozGMoAJjvkoQMdQCMSjIxFTWcwAwg0YRNBiKtc40oGSsThgVLQQjNgIFGa2OAHotQDU5eKSmIQAwTKIAcwyTGOkBQCka/oRFhv4VWU3oKlU4AGNMg6VIJoIx4zGMdf9QbGucqVEmQoxwOTgAZF8Is4KnADI5A6WMP/NtW2PGBRNKKxBA6ERACKQGQk9pkAZ1TWno8gbgK6wdxuwOAghbCBdMUAiGZRwrSnHQL2ypEHNDQgPlywgRvcIQ3BGva85z1BMNrBhPZGAw0YPIgC2ABZTABznsclhDPCuthuQKAbFDgIB2ywDDGIARObsAQlFszgBvMge1LwBQVgSRwOuMENFvgCM9Br2BMQwxwaqIxXMBFgmlj1Ba+IlPPyW8/LAlMZEIixL9SpgFiIIR4wsEEvKDENS/j4xz6ehi6yx4M2lMK3BxIDBRghDWx4mBgejrI5iFGLYzTiytEww3NpwoFXCJel9OiqV02BDkIWsgbRqEECaFAQAQCI/wUsyETYpoEAOtu5ztO4Aw94kAQz2KCvIeFAUTzQCmaY4wSITvQJwoEHBzTCAQ44xhTMkDSaCKAZxLTvFMoh5pQ6owbKiEYXakDqGnyUIDRgQRrSEAsLZCEbWYi1rGVNhj2jow2AeG1pFACDoewBEoc+gTmGTWxi7G1n7SBHKbAyDnfGUKtdCAYeeEntW6Q5GlK43i1cURBcNCAWf3AFNhr46ljDOgv7yEIceKCJJOThu/GJrhhUkYIiEPve5giHEL70i0ZAoB02wEoDfOGLWah4qwjAgx8VnnA/PqLUoXhwOTxAGm38IRa4YEErGKjAfSSQEujQBA/u8QNAg6TG0v/1ALCHXYJ85zscsKjDL5jzCya0ox1IrgkK7oa3fZJDCrMOehZMUQMm1CDie5YGPAaCgj/gAhdLoIYgpk71qgviEZpoNx8qbR1P3HgG0ihCOFw+9nCEowTcqAMV1t6LdhzDChSmiQIYgTMtLAECiSUEGHaRQL6DwO/oaG8o0BGHO9zh1AogAS7sAYg6gIAZVqc6M6aR9ZHnQ1v/UIE4YDCIbJzd7KA3OyyEQAUhCGETXnGAGyKzjHPmYQnRiDE6wED72ts+GF8bfL3isACBaIMGhaAABoTAjOIb//iCKEPW9/CB77WJBTBggQf8EPrqs0II3MB+L6x8BnhjxR55cIT/+MnRDgjUAAHMsD3t0w8CUoQCFDspwxAs4BF4oMAGn/hFFsjGjDf0//9vgACaQA9fYAFc90JwBgNzEAHVhyQRAAtzMRdU0AjH4ACYYExXoQ0fkEltwA7lBwFl4H/HZ3xF4AxnAAqk8CvvUAn28A/wkAag8CJkUwRmYzZlQA93gA+nFh8KkHENYAvUx4BCaCHhkAFywgqfcGUOgAbEsQzI8ITIcHPsBQZFQINW+AZV2H6gAAqIYiiS8A9/AAq/gAF4kAhmeIZoiAD08AitsAAm91ux0AB/cAoVYiF2aCHEADwaIASQBmmxQByF4AjShArKIIXOQAxVmIiJ6Ad9EAig/0APHzIJw0ADCTCGdcAMfpAImaiJZugHzNAH9FAMp0BVpVEIcggD2VCHd2ghcJQBnwBpTbAEzncVrrAHtpgE7VAB7XAGgnACfkAMmpiJUMYMgRAIuaAe4DAHUoABYygEfvCM0BiNpkAPQyABbIZ5med0VnACFdKN5TEA5tACDCCOfAiL8RAf9iAN6igNNZCL7VALwaZowuYH1xAIvWAJ4GANDLBvv/ALYCACfgCQAhmQINAHelAJvICNWfEHKgADtRAOtvGNtjEADHACDFACGkAwCLUEpIgVrvAFIPkFZ1ABFXAGWSACImAOKbmS4VAE1RAIfWANJVACsOAlQiCQKP+ZkyJQBNcQBJDQDwr5DyiACxwwC9wwkUhZITM5k3y4M43wh9oCDBawNq1QDiVZAY2QCBGAkuEgAl2JJCDwCbuwlCVABRhQBDqpk36AB5aQDb0XlDTAATDQCBlQG0mpihHQArJDBwqZBndQDC4DCiRZAbWwiqsIC2RZAhBiISKwlReylbuQBYLwlgoQBVVQBVbxhp5FAySgBU3QAnZpG7WxilTAM4wQlP+wAPYyBI0wmIUZkd5YAheZmCIAmxYyACKwP/vwlv9QAGsAAEpABFVwAMLZFp5wf3oTDrWxnANwDhFQAhbCDQjVBG6gmTXBBQtQBr+iCw4wmJsQAaEpmwz/MJ5keZG2wQnnmZew4A0JSRBwQAQFYAA4gAMhcABt0QGFEDvC0Jz8OZp2GAM7AwEsgJoEIQkpYCiHkAvHQJJNQAwDIJ7jGaEzGaEQOZFTtg+nUAUGcQUy8A87QAQPIAOXgCKeYAM7QwXMuZzlsY8OsATj0JEKCQ+ucAoSIAEpsAf4UAne0AM94A0++qM8yqNAKgdyABXDsA4IYQR28A92YAdQgAMjehUKgALkAGnUAJu2UQLWUAzuMA64AKMEqgDA0AHAAAwmcKZnWqZqWqZpqqYmYJkmcAEgcQFh8A9hUAAXEAWz+BECgAsqgAvrMAKCOqiFwAXWSaCImqiKuqiM/9qojvqokBqpkjqplFqplnqpmJqpmrqp6+QWpOEEBFAAnPoPVwAAIbAClUoAhvAARoAQSGAIISCqBWAIWBAAnOoEBoAFBhAClWoHWIAFa4AQD/CronoBTxACcMCpRIAFHWqfvqkGhxofUPCrBiCqBYEEv4oI1tqbo7oDWJADA5EDWPAANrEGK7ACAbCn0ooIuUoABcEFK4AFQIAF28omUXAFrdoRcvoPB7Ct/HoFdWoQVXAF9lkQBYCvE3MB3uoCCtCwLoAFO3ABcooDRAAAREAEtkqgdoAIT4AIvOqeiLCq9PoPCiADD1Cw/2AERGAIBmAAK9CqdvAALrCyACCnSP+wAixrCCvgAgNxATIQAgZgCAAwEGFwrC37AGogEEoQAvMaAiEABTgrr07rAjIQAE8AAAGwBvsalL6qBN6KBATxBFhAAMMqqgowrFcgEC6QqwawA4YABGAbr7QKBOQaAL+6qnMLtv+wrAbwACwrEJcQArr6AMOKBUTwDwQABIggr0BwrPOKCEAABEpgBwRABDvgBFCwtQo5rUqArSswEwcABIZwAGVLst7aqgUguB0qEE7QqgAgr2B7sJCrBAPhq4Ygp+yar8n6D68LANYKB7lKu/8Qr04wEE6ABagqEDiwAwHwszyrsVhAu4aACODKpFiAA/8guGZ7uv9gtztwEK//u7r/IANY8AQEwQWCy7OQW7wDYQQhGwUEoQZYMLQeigW7+w9wALEDwQUBAAVrILzQa6s4UL69CQQGcAAKoL2miwWtuqxJaxDxqrf1C8ACsazYG69AoAb5arf0a7zjKhDeer/5+70EgaeK6qu2GgYGAAQKIL+Hm7ojqwDca8HgiwXPW78SLBC+uqRRQASLawC2SgAETBBX8MH1K8L6C6koLBDkCwXDiroKLMMMvLdY8MAF8bo3HK8ZOxCv666s+7pAkANKML8F8bDkesQDMcKRusT/kAOKCwTJC8PbO8VCvANsEq83vAbISxBRYADUWxBaXAXsmrYDIbarG8JpvMdK/1yrXPyrzyvHC4y6tAoAI3oAa1C8WDwQB5CrT6ChVxCvQ+uzaVsFgku7y/oA7EsAkBuliCwQRWwIUVAAKLuobPwPx/sAMwHJUpyva4sFkIsIiBC3NkwQSJCr7PqrO6ChXADMiguxcloA3sq48grArUyywwq5W7yoLmAHhCwQanDDF0AAdrCvzauhAnEAMrADp4oDoqoEIloQRvAE6rwDBAAZajDPULBOOLACIbADTxClAtG8AXvOIAoA7Duqc4oVmtupCLHQCP3QEB3REl0aF1AAFm3R0SoQF10AhlPRG/3RII3RNhHSJF3SJkygawDMKp28bREFKo0IXnzFLz3TNP/NzBIMB4pb0zqt0x0clNP6q0Ad01cRBUA9tgcRr0Wd1Ertyzc9r0v91E/d05ur1Afc0kUt1AOB1FC91De9uFv91b/K0j691ERgnVVw1UcN1Ozasmzd1mxtCDfsBCzr1mzt1NRK12xtvgT600pNwSFB1EGd1ndrBDlQ2IZ92Ia9rRdwBYht2FewrEDtAo1d2E4wy1O91IbgryBx1oENwUD9sajpq0Ct2Y3K131b1HpNE4D9q1gtEFoN2kFJvkANv5HK14agBHaNCDe82Wjt2b8K2wop27860I9q2r5Z1CFgcqtt1L6NBcCNjcKNBbQNqaZdp4IL1MEaEpzN2oLt3Ij/Gt3E7aimbZ9I4NXyer8IsdytPbyf/d1FPd3FDdRVPb5FHbG83dmA3N4ECt6SOt4CEQW0it8Hod7d/dyYF93wLd7yjbJjvOAfsd3Mnd+/7d5AHd6l7eCFXNRSzce9LeHevd/v3d8Y/t+5mq3ZTBAQvt6v3bAs3uIt3hb8XdsjHtBFDcsD3uEEodWMG7k83uMGnK81geAiTq2WzbuofRAp3t1g7cvVG+RFbeGM6t8FcQklztQGQeDNveRhjBVCLuNEfhBC/NmaneRZDtZA0M00EePUPeM9G82/ms8cLuBZDdSGEAB2fud4fuek/RFdvuZffhBGkNtN/g9k7uEGri1q/x7ff34QegzUdjwQWG7oFP6rCX7hi24QF1C4v2rFhZ7j+o2aia7gl24QOC3f+Rrpnj7hID7bQ66rRV4Q0Z28nT7nqg7qT97q8/0RF3Ddv2qrqE7rH27rrO7lrk4TLmDesHwBOA7shx4foW7pxU4TYgvUT3AB5q3inx7bIU7suQ4Ss6rWAXDtBT7pWADliyrlNFHedC7uzd3s1tHnChnOMrDe6E4TkJ2tcu7a2R7ctx6U0Ozo31PvIXEAAZ7U2H63OeAECr/wDM/w6koQ8I55dlvUJy7wITHxBq/kS/6rAA0Szx4fog3US0oQFh8Sr5vxZb7xr24QEa8tGM/dBBHyQGHQ8TVhBFUO8wXh5hvP8U5e4agZBW6+AppNAE7bz+YOEkRf9Ld9EDIAq0X/9FAP9UdPEDjg9CFgzkFZBQTwBAFA2gUQBmCP9ZERBWQfBWHg0L0ZBmW/9mzf9m+Yp2VPoAEBADs=" />

Ahora, cómo saber el Base64 string de una imagen? Podemos utilizar la herramienta online llamada “Image to Base64 converter“, hecha por Mads Kristensen, un excelente desarrollador de .NET. Mads trabaja en ZYB.

Chris Coyier, de CSS Tricks, también escribió recientemente sobre Data URIs y los comentarios en su blog post son interesantes. Chris también hace referencia a otra herramienta, similar a la de Mads, llamada Image to Data URI convertor.

Esto es sólamente una técnica, una manera más de lograr las cosas, que podría ser la más correcta o no, dependiendo de los escenarios. Los Data URIs también tienen algunas limitantes:

  • En Internet Explorer, solo funcionan en la version 8 en adelante.
  • En IE8, los Data URIs estan limitados a 32k, por lo que solo podrían servir para imagenes meramente decorativas, no fotos de alta resolución, etc.
  • Las imágenes no son cacheadas por separado, así que si el HTML o CSS se vuelve a descargar, las imágenes obviamente también.

Evalúen sus opciones, y espero les sirva.

MIX10 – excelentes conferencias y recursos de desarrollo

MIX10

Del pasado 15 al 17 de Marzo se llevó a cabo la conferencia MIX10, que es una serie de conferencias de diseño y desarrollo web organizada por Microsoft, con platicas impartidas por la gente que está causando más impacto en la comunidad de desarrollo online (las sesiones son escogidas en base a votos, durante meses anteriores al evento).

Las platicas de este año se ve que estuvieron muy interesantes…así que aquí les dejo las ligas a los videos de las pláticas y también a una muy buena sección de recursos que armaron en el site de MIX10, con ligas a guías de desarrollo para Windows 7 Phone Series, Silverlight 4, WCF RIA y otros tantos temas que son lo relevante de hoy en día.

Algunas de las pláticas fueron:

  • Overview of the Windows Phone 7 Series Application Platform
  • 10 Ways to Attack a Design Problem and Come Out Winning
  • Stepping Outside the Browser with Microsoft Silverlight 4
  • Total Experience Design
  • Understanding the Model-View-ViewModel Pattern
  • Beyond File | New Company: From Cheesy Sample to Social Platform
  • The Microsoft Silverlight Analytics Framework

Ligas:

MIX10 – The Next Web Now

MIX10 – Resources Page (Windows 7 Phone Series, Silverlight 4, etc)

Iconfinder – un buen buscador de iconos

Iconfinder Logo

Iconfinder Logo

Post rapido para recomendar Iconfinder.net, un muy buen buscador de íconos, y con una interfase al estilo Google, que creo que a la mayoría nos gusta.

Por el momento, dicen tener en su base de datos 122,683 iconos y/o 296 sets de iconos disponibles. La interfase de búsqueda es muy buena, les pongo aqui un screenshot de la pagina de resultados al teclear “Facebook” en la caja de búsqueda. Los resultados fueron muy variados y definitivamente hay iconos muy buenos ahi.

Resultados Iconfinder.net

Resultados Iconfinder.net

Espero les sirva.

1 2  Scroll to top