Categoría: CSS (y más)

Los tuits de la semana (51.2)

Seguimos con el bombardeo de tuits atrasados… Hoy, más cosas de diseño y desarrollo web…

Demos y ‘making of’

el iPod de primera generación, rehecho… en HTML, CSS y JavaScript o.O http://obm.as/SCu81s

iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> http://obm.as/S7msnB

los juegos HTML5 de Atari/Microsoft… se crearon con Flash y CreateJS http://j.mp/NOWCoV

Multidispositivos

The Current State Of Remote Debugging For Mobile Remote… http://obm.as/WkELpP

RT @martuishere If you still think responsive design is not ready for big sites, check the new http://microsoft.com, and think again ;)

RT @iheni Listen up mobilistas: top article by @dstorey on how the rest of the world view your site. iOS is not the only fruit http://tmblr.co/ZtkSywTI2QYZ

RT @softmodeling RT @jgfanjul: Standards for Web Applications on Mobile: current state and roadmap. http://www.w3.org/2012/08/mobile-web-app-state/

.@brucel on the publication of Editor’s draft of the <picture> element http://j.mp/Q3TGD2

RT @brucel HTML Responsive Images Extension http://bit.ly/SO4JkR (I’ve got a little tear welling up: http://bit.ly/uSVw0A) #html5

#javascript Remote Debugging on Firefox for Android http://j.mp/MZAtnv

*muy* bueno: Beyond Media Queries: Anatomy of an Adaptive Web Design (by @brad_frost) http://j.mp/OXxv0A

WordPress

Responsive Images With WordPress’ Featured Images (Smashing Mobile) http://obm.as/VekB1e

¿cómo no me habíais informado de la existencia de Debug Bar para WordPress? http://obm.as/UTeONn

Theme-Check. A simple and easy way to test your theme for all the latest standards and practices http://obm.as/TYOIGq

…y estándares

The Page Visibility API lets you know when a webpage is visible or in focus http://obm.as/SqfdsO

W3C Unveils Plan to Finish HTML5 in 2014 (Webmonkey) …y escindir un HTML 5.1… http://obm.as/Uu4wUG

Adobe’s CSS Shaders Now an Official Web Standard (Webmonkey) http://obm.as/TWl4lb

A List Apart: Learning to Love the Boring Bits of CSS (rems, vh, nuevas pseudoclases…) http://j.mp/PzmNxA

Mandatory reading: RT @brucel: My piece on @thepastrybox today is called «on sausages and standards»: http://bit.ly/QpwPCp

En fin. Suficiente por hoy. Mañana acabamos con los «tuits weberos»…

Los tuits de la semana (51.1)

Si creíais que os habíais librado de los tuits de la semana porque habían pasado tres meses desde la última edición… pues lo siento pero no. Como había que hacer un «decíamos ayer», me he pasado unas horas mirándome el ombligo releyendo tuits y preparando una batería de perlas (o no) que me parecían dignas de recuperar. Tres meses dan para bastante, o sea que lo partiremos en capítulos. Hoy tocan cosas de diseño y desarrollo web…

Webplatform.org

De lo que ha pasado en estos tres meses, claramente, lo que más ilusión me ha hecho ha sido el lanzamiento de WebPlatform.org. Dos tuits relacionados:

RT @WebPlatform http://WebPlatform.org Day 1 stats: * 86k visitors * 720k page views * 7K new users * 280 editors * 2,036 pages, 11K edits Thanks!

webmonkey: W3C Helps You Build a Better Web With ‘Web Platform Docs’ http://obm.as/R83JZ6

Typescript

Otro lanzamiento que se me antoja interesante es el de Typescript, un proyecto de código abierto de Microsoft que añade algunas características interesantes «en tiempo de compilación» a Javascript sin romper el estándard. Otros dos tuits de lo que se ha escrito sobre ello por ahí:

Thoughts on TypeScript http://obm.as/PY6bOE

Microsoft TypeScript: the JavaScript we need, or a solution looking for a problem? (Ars Technica) http://obm.as/VfC3E1

Adobe Edge

El tercer lanzamiento interesante de la temporada ha sido el de Adobe Edge. Primero, [algunos de] mis tuits del día de autos:

diez minutitos de sneak peek de adobe edge reflow http://obm.as/R0fluv

Adobe Edge Inspect no tiene mala pinta, para desarrollo web multidipositivo… http://obm.as/PBtXRp

la página de Adobe Edge Tools & Services ya está en línea http://j.mp/UrIijl

RT @cfjedimaster Adobe Edge Web Fonts, 500 free fonts. No wait, 500+. Oh, and its free. Boom. http://tinyurl.com/8unsbmb #createtheweb

Y la opinión de Bruce Lawson sobre el tema:

RT @brucel My thoughts on Adobe Edge http://www.brucelawson.co.uk/2012/thoughts-on-adobe-edge/ (prompted by @paulrobertlloyd)

Herramientas, bibliotecas y frameworks

Johnny-Five, a JavaScript Arduino programming framework http://obm.as/TqqKmw

BonsaiJS – A lightweight graphics library with an intuitive graphics API and an SVG renderer. http://obm.as/RiDWdO

riffwave.js is a tiny library that can be used to play synthesized sounds (Chome 9+, FF 3.6+, Opera 11+) http://obm.as/VndMdG

¿podría ser WebMatrix 2 ¡de microsoft! un buen editor gratuito de HTML, CSS (less y sass), PHP, node.js y más? http://obm.as/S6dGHw

jQuery Builder lets you easily build a custom version of jQuery v1.8.1 that just includes the modules you need http://obm.as/S5Xx3A

#canvas HTML5 Scratch Pad http://obm.as/NsyCXc

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. http://obm.as/Q9pvee

Toast is a simple CSS framework that includes a reset, a responsive grid, and type styles. Nothing more, nothing less http://obm.as/RoZ544

Mobify.js is an open source client-side web [node.js] framework that helps you adapt any website to support any device. http://j.mp/QhXwse

RT @kazuhito MediaElement.js – HTML5 video player and audio player with Flash and Silverlight shims http://bit.ly/voD2pK

Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable http://j.mp/RtQwJP

Illustrator to HTML5 Canvas Plug-In Updated for CS6 http://j.mp/ORNfnZ

Y una iniciativa interesante

Primero descubrimos «la versión original»…

cHTeMeLe – le jeu de plateau certifié HTML5 (via @htmlboy, habría que traducirlo, esto, ¿no? :-)) #webdev http://obm.as/PcGIFt

…y luego la «doblada» :-):

RT @UluleES @chechar @htmlboy ¡Hecho! :) http://es.ulule.com/chtemele/

Paro por hoy. Mañana, más.

Comprueba el estado de tu privacidad online con Privacyfix

A través de este artículo de Ars Technica me entero de la existencia de Privacyfix, una extensión para Firefox y/o Chrome que analiza tu historial de navegador y las cookies que tienes y te hace un informe de cómo está tu privacidad en la red…

El informe comienza con los dos grandes «cocos» de la red, Facebook…

Captura de pantalla de la información de privacidad de Facebook que obtiene Privacyfix. Afirma que Facebook recibe información del 90% de páginas que visito y que mi valor estimado para Facebook es de 42 céntimos de dólar
Ese 90% da bastante miedo, pero si todos los usuarios de Facebook tuviesen la misma valoración que yo, me da a mí que no habrian llegado a donde están

…y Google…

Captura de pantalla de la información sobre Google que obtenemos de Privacyfix. Según Privacyfix Google obtiene información del 46% de páginas que visito, y valgo para ellos casi 190 dólares anuales
Me siguen mucho menos, pero valgo muchísimo más para ellos. Será (es) que no paso mucho tiempo en Facebook…

Cada cual es, desde luego, libre de hacer caso de las advertencias y sugerencias que te hace la aplicación (en mi caso, se van a quedar así, entre otros motivos porque, puestos a ver anuncios, prefiero que tengan algo que ver con mis intereses). Las estimaciones del valor que tienes tanto para Google como para Facebook deberían consumirse con unas gotas de sano escepticismo. La cosa, eso sí, no se detiene ahí. El siguiente paso es un informe de los sitios que han recopilado algún tipo de información sobre ti:

Captura de pantalla de los sitios web que me están monitorizando
No son pocos, los sitios que tienen algún tipo de información sobre mí…

Pasando por encima de cada «favicon» Privacyfix nos informa de cuáles son las políticas de cada sitio:

Captura de pantalla en la que se muestra cuáles son las políticas de un sitio en concreto
Como podéis ver, siendo estrictos casi nadie está absolutamente libre de pecado (aunque si de alguien te puedes fiar en la web es de Mozilla, la verdad)

Finalmente, Privacyfix te hace un listado de las compañías que acumulan la información recogida por los sitios web que visitas:

Listado de las empresas citadas en el texto
Apenas una docena (larga) de docenas…

De nuevo, pasando sobre cada «favicon» obtenemos información adicional:

Información específica de uno de los recolectores de información
Google tiene, como anunciante, la nota máxima en cuanto al tratamiento de la privacidad… algo que no puede decirse de la mayoría de compañías que saben algo de mí.

Resumiendo, Privacyfix es una de esas herramientas que, por un lado, uno debería instalarse para ser consciente de cómo está la cosa y, por otro, copncienciar a amigos y conocidos de lo mismo, a poder ser sin caer en alarmismos innecesarios (que con lo que realmente hay ya basta).

A vueltas con Internet Explorer…

La cantinela constante de que “Internet Explorer X es el nuevo Internet Explorer 6″ cansa. Mucho. Microsoft ha hecho mucho para intentar corregir sus transgresiones pasadas, y parece que todavía queda mucha gente que no está dispuesta a olvidar viejos rencores. Siempre habrá un navegador que va por detrás de los demás. Primero fue Mosaic el que se quedó atrás con respecto a Netscape. Después fue Netscape con Internet Explorer. Y después Internet Explorer con Firefox. La gente ya comienza a quejarse del navegador de Android 2.x.

Lo maravilloso de la web es precisamente que hay una multitud de navegadores y, si construyes las cosas correctamente, tus sitios y aplicaciones corren en todos ellos. Puede que no funcionen exactamente igual en todos, pero debería ser capaces de funcionar. No hay absolutamente nada que te impida usar características nuevas en tus aplicaciones web, de eso va la mejora progresiva (progressive enhancement). Nadie dice que no puedas usar RGBA. Nadie te apunta con una pistola para que no uses animaciones CSS. Como ingeniero en la web puedes tomar decisiones cada día.

Lo dice Nicholas Zakas en It’s Time To Stop Blaming Internet Explorer, un artículo en Smashing Magazine. No dice Zakas que maquetar para Internet Explorer 6 no sea una tortura china (ni Microsoft lo dice). Ni que IE7 no sea doloroso. Ni siquiera dice que IE9 esté a la altura del resto de navegadores. Más que nada, porque no es cierto. Dice, eso sí, que los esfuerzos dedicados a quejarse de las actitudes de Microsoft son cansinos y nada productivos. Y lo suscribo. Al 100%. Y recomiendo que os leáis el texto original, desde luego.

Los tuits de la semana (50)

Edición 50 de los tuits de la semana. Como lo de «la semana» lo llevamos con rigor «político», ya han pasado 60 semanas, desde la primera edición, pero aún así…

Los de diseño y desarrollo web

el montaje de vídeo interactivo de la BBC para los juegos parece alucinante… http://j.mp/Lm3ELZ

muy interesante charla de ayer del #io12: The Web Can Do That!? http://j.mp/L4Tmoc

RT @JuanjoBernabeu La evolución de la Web – http://kcy.me/9han vía @mahemoff

Symbolset, genial idea de tipografía para iconos (hint: it’s the ligatures, stupid) http://j.mp/MxE0H3

Interesante alternativa a los «captcha»:

RT @brucel Works with server-side script, client-side markup, a CMS, an O/S *and* some hardware! http://areyouahuman.com/

RT @koalillo en el blog, un itinerario vital para el aspirante a desarrollador web http://alex.corcoles.net/2012/06/desarrollo-web-como-dios-manda/

La semántica es muy importante. Pero a veces, si sabemos lo que hacemos, saltárnosla puede (en sitios muy complejos) ahorrarnos quebraderos de cabeza:

#css #especificidad Our Best Practices Are Killing Us http://j.mp/LlOPNQ

RT @christianp I’ve written a jQuery plugin that gives you an instant @mathjax preview of any LaTeX you write in input boxes: http://christianp.github.com/writemaths/

El W3C. Y sin embargo, se mueve:

RT @csswg Media Queries are now a W3C Recommendation ! http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ ^DG

RT @SergiMMX Habrá que probar algunos que no conocía… «15 Free WordPress Theme Frameworks» http://bit.ly/MpgD16 #wordpress

RT @softmodeling RT @avandeursen RT @PaulKlint Most amazing video of a (Lego) Turing machine you’ll ever see: http://ow.ly/bE3Qy

Para culturizarse un poco

al 3alacarta, Trencant els codis, un documental sobre la vida d’Alan Turing http://j.mp/NzJaCB

Y los temas audiovisuales

(Más audio que visuales, esta semana.) De salida, dos que demuestran que sí, hay gente con orejas de perro, pero que son una minoría:

The Great MP3 Bitrate Experiment (via @lifehacker) http://j.mp/MQ2JFF

Concluding the Great MP3 Bitrate Experiment http://j.mp/NRmrC7

Una buena noticia:

RT @WFMU Legendary BBC Radiophonic Workshop will reopen on digital platform in 2012: http://bit.ly/LE62ym via @freemusicarchiv

Y un poco de música…

RT @drgonzoisnotadj Arranca una semana calurosa, refréscala con una buena selección musical: DANCE TO THE RESCUE NIGHT! http://bit.ly/MIHAx4

Si en vez del resumen semanal quereís la versión integral y en directo… @chechar.