Etiqueta: webdev

Los tuits de la semana (56)

Llevaba tanto tiempo sin limpiar de enlaces mi cuenta de Twitter que la cosa se me ha acumulado bastante. Me quedo sólo con las cosas relacionadas con diseño y desarrollo web…

Una herramienta a probar:

John Nack on Adobe : Come download Reflow, Adobe’s new responsive-Web design tool http://obm.as/12TxPpo

HTML:

Introducing the New HTML5 <main> Element http://obm.as/X2rWPE

CSS:

RT @WPMigrations RT @devseo: http://is.gd/vCSogm – Roole – A Language that Compiles to CSS

CSS Explain (una especie de calculadora de especificidad) http://obm.as/YsJPgh

GitHub’s CSS Performance (via @lucascepeda) http://obm.as/V4Ctep

SMACSS: Scalable and Modular Architecture for CSS. A flexible guide to developing sites small and large. http://obm.as/UNqFi3

En algún momento me preguntaron por dónde empezaría si tuviese que ponerme a aprender HTML y CSS hoy. Mi respuesta en dos tuits:

yo recomiendo tomar el tiempo de seguir http://mosaic.uoc.edu/ac/le/es :-)

…pero probablemente comenzaría por http://learn.shayhowe.com/html-css/ si el inglés no es problema

Accesibilidad:

RT @EasyChirp Excellent! Accessible University 2.0, fictional pages to teach web accessibility http://www.washington.edu/accesscomputing/AU/ HT @webaxe @pauljadam #a11y

Accessible HTML5 Media Players and More http://obm.as/14FtzIo

RT @kazuhito Manual Accessibility Testing as Part of Your 360˚ Approach to Web Testing http://bit.ly/Vinaxc

JavaScript:

Introducing Collie: A high-performance animation library for JavaScript http://obm.as/YaLqAW

Numeric Javascript. cálculo numérico en javascript. #yalohevistotodo #cuandoyoerajovenestosehacíaenfortran77 http://obm.as/VQfx1c

#muyinteresante cgSceneGraph is a powerful cross-platform easy-to-use animation framework for <canvas> (via @juanfrasr) http://obm.as/UXfOVd

Mistakes is a tool for teaching Javascript to people, mostly on projectors. http://obm.as/127IeJf

emulador de 6502 en javascript o.O http://obm.as/126Deon

MathBox is a library for rendering presentation-quality math diagrams in a browser using WebGL http://obm.as/10DQ8tj

PolyCrypt: A WebCrypto API Polyfill In JavaScript Funded by the US Department of Homeland Security http://obm.as/TszIXe

Developing in HTML5 with JavaScript and CSS3 Jump Start – Microsoft Virtual Academy /via @rakelka http://obm.as/102D804

Audio5js is a library-agnostic, cross-browser Javascript API for HTML5 Audio, with a Flash fallback http://obm.as/V9qujj

Form Follows Function. preciosos experimentos ‘HTML5’ http://obm.as/W0Z0Iu

*muy* chulo, Flowtime.js, para hacer presentaciones con soporte web. de @marcolago, via @xeotico http://obm.as/UX3X6c

BLK, a voxel world tech demo. con el código abierto en github http://obm.as/ZaGGkX

WordPress:

de cero a WordPress corriendo sobre Amazon Web Services EC2 via @antonello http://obm.as/Wbehrg

RT @WPMigrations RT @FreelanceWP: FAQ My site was hacked « WordPress Codex http://su.pr/1TN3Z9

bastante buena pinta: >Generate WP provides tools for developers to create advanced systems built on WordPress. http://obm.as/Wx5EZn

#omg se cumplen DIEZ años (y un día) de la entrada de blog de la que saldría una pequeña herramienta llamada #WordPress http://obm.as/W4PtCR

.htaccess codes to secure your WordPress site (via @WPMigrations) http://obm.as/VWipMv

De interfaces:

interesante concepto en diseño de interfaces: Progressive Reduction http://obm.as/XRKOSZ

Sobre la muerte de Presto (protagonista de nuestra anterior entrada):

Bruce Lawson on Opera’s Move to WebKit http://obm.as/VVi5eo

RT @brucel Please don’t remove -o- vendor prefixes (very few: http://bit.ly/12xrQCi ) Presto browsers will still be in market for a while in TV, cars

RT @sideshowbarker Wondering whether browser-engine diversity really matters? It does: http://robert.ocallahan.org/2013/02/and-then-there-were-three.html Today’s news is a loss for the Web, not a win.

RT @jaffathecake You probably underestimated Presto – Some waffling about the Opera announcement https://plus.google.com/116237864387312784020/posts/iRRPVaaPQvo

Puñetitas personales:

con todo el respeto por A List Apart (o no), pero si usas <p class=»question»>, ¿para qué tienes RSS, si va a ser inusable?

De tipografía:

RT @aza Googling for «kerning» gives a funny hidden joke for typography geeks: https://www.google.com/search?q=kerning

(tentado de usar el polyfill *ya*) Adobe Proposes New Standard for Better Web Typography http://obm.as/X08NRE

Grid­lover. Scale & Rhythm for Your Web Type http://obm.as/VQicto

gran charla de Jason Santa Maria introduciendo el tema de la tipografía en la web http://obm.as/V3WWnz

Réquiem por Presto

La bomba ha explotado hoy, pero la liebre saltó hace casi un mes:

Sí. Opera, los noruegos del navegador que casi nadie conoce (en mi entorno: Chris Mills nos contaba en Mosaic, hace dos años largos, que en mercados como Rusia, Bielorrusia y Ucrania tenían un share nada desdeñable (una entrevista en la que yo halagaba la capacidad de desarrollo de los noruegos, por cierto)) pero que, entre otras cosas, dio a luz el elemento de interfaz sin el que no podríamos pensar en los navegadores (las pestañas) y una tecnología sin la que la web no habría podido llegar a donde ha llegado (CSS, nada más y nada menos)… se proponía lanzar un navegador sustituyendo su motor de rendering, Presto, por el que ‘anima’ a Chrome y Safari: Webkit. Hell. Freezes. Over.

Pero si aquello sonaba cataclismático, lo de hoy ha ido mucho más allá…

Opera va a abandonar Presto y Carakan, su excelente motor de JavaScript, por WebKit y V8, el motor JavaScript de Chrome y su hermano de código abierto, Chromium. Quizá no sea tan doloroso como el día que murió Netscape, pero dentro de nada vamos a pasar de tener cuatro grandes motores de rendering (Presto, Webkit, Gecko y Trident) a tres (y lo mismo pasará con los motores JavaScript). La biodiversidad del entorno se ha reducido en un 25%. Eso, en cualquier ecosistema, es, ya usaba la palabra antes, un cataclismo.

Como dice Bruce Lawson, Presto va a seguir vivo una buena temporada:

(buena parte del negocio de Opera se alimenta de los navegadores embebidos en teles y otros dispositivos)… pero si ese tuit no suena a entierro, so sé qué lo hará…

Si hay que buscar culpables, la lista va a ser inacabable:

Mientras para muchísimos desarrolladores sólo exista Webkit primero (en la forma de Chrome y Safari, principalmente), y Firefox y el inevitable Internet Explorer (que se mueve muy lento y es víctima de muchísimas inercias imparables, pero hoy en día es un navegador más que aceptable, en sus últimas versiones) después, y ni dios tenga en cuenta el resto, la vida de Opera dependiendo de respetar los estándares pasaba por decisiones tan controvertidas como las de ‘adoptar’ los prefijos -webkit- (y pensar que creímos que el ruido que oímos entonces era el del infierno congelándose…). Y eso, aceptémoslo, era insostenible.

Como sucede en todos los sepelios, ahora resulta que el muerto era un tipo fantástico:

Lo jodido (disculpad el vocabulario, pero es que todo esto me ha dolido bastante) es que el muerto de verdad era un tipo fantástico. Personalmente, durante mucho tiempo ignoré Opera tan absolutamente como cualquier otro. Pero un Mac con sólo 2 gigas de RAM y una época de versiones Firefox especialmente voraces me llevaron a adoptar al navegador noruego durante unos meses. Al final dos gigas de RAM más y una moderación del apetito de Firefox hicieron que volviese a los orígenes (la cabra tira al monte, y ahora se siente culpable), pero durante aquel periodo tuve la oportunidad de comprobar que Opera era, efectivamente, un software fantástico… maltratado hasta la saciedad por propios y extraños (con el coloso Google a la cabeza del pelotón) con prácticas como el sniffing de agentes de usuario implementado con el culo (se me vuelve a descontrolar el vocabulario, me temo que me vais a tener que aguantar). La rendición de Opera me duele como al que más, pero no queda más remedio que aceptar (hasta aplaudir, con dolor) la decisión…

Para los que no veáis la dureza del mazazo que se llevan hoy los estándares web (que se culmina hoy, quizá habría que decir mejor), el tuit que, creo, dice más en menos:

Apenas ha hecho ruido fuera de una comunidad de freaks, pero hoy ha sido un muy mal día para la web. Descansa en paz, Presto.

Una recopilación de artículos sobre el tema:

Los tuits de la semana (55)

(Última edición de 2012. Con lo de «semana» entre comillas, como casi siempre…)

Los de diseño y desarrollo web

Progressive jpegs: a new best practice (via @WPMigrations) http://obm.as/UvLduA

Interactive Guide to Blog Typography http://obm.as/YkkSD5

Better Web Typography with CSS Hyphens (webmonkey) http://obm.as/11eF1Jm

redondeos, responsive y floats relativos al contenedor. via @brucel http://obm.as/UOj7Zz

Firefox para Android comienza a soportar H.264 (Ars Technica) http://obm.as/Ydpxrq

Parallax Scrolling @ the BBC (interesenante aunque odies las páginas parallax) http://obm.as/111JBvx

RT @RobertoTbts Ya conocen #Animatable de @LeaVerou ? One property, two values, endless possiblities – http://goo.gl/bvVwp #CSS

RT @softmodeling RT @newsycombinator: 10 Easy Things All Web Developers Should Do For Accessibility http://j.mp/YoIfH6

Herramientas:

Moonbase es una herramienta visual para hacer pequeñas animaciones web… #apuntamaneras http://moonbase.com

Fontello – easy icon font composer (via @carlescv) http://obm.as/ZPmeWV

#cosasaprobar #noséyo… in5, un exportador de InDesign a HTML+CSS http://obm.as/TWw8iG

Demo: New CSS export from Photoshop CS6 (no sé yo si será buena idea…) http://obm.as/T7uUCq

Cosas que se pueden hacer con la web:

RT @nytgraphics Just published the full version — all six chapters — of Snow Fall: The Avalanche at Tunnel Creek http://nyti.ms/VcnGuQ

¿qué pasa si le añades un poco de física a una página web? :-D http://obm.as/UW2zRU

parece ser que se acerca WebRTC y la comunicación p2p entre navegadores http://obm.as/TDHbjp

Liviz.js (JSViz). visualización de grafos en vivo y en JavaScript http://obm.as/SwaR0m

De JavaScript y similares:

Ejecta is a fast, open source Canvas+Audio iOS implementation. Think of it as a browser that can only display a canvas http://obm.as/YCrUP8

The Best Way to Learn JavaScript (via @nahuelsotelo) http://obm.as/Yd7hcb

se me acaba de fundir el cerebro. estamos a uno o dos ciclos de moore de… http://scriptedamigaemulator.net

Para leer con calma

Designing for the social customer – confused of calcutta http://obm.as/WQsn4u

Ars Technica: The music industry dropped DRM years ago. So why does it persist on e-books? http://obm.as/Zv8stL

Why You Should Want to Pay for Software, Instagram Edition (Alexis C. Madrigal, The Atlantic, via @WPMigrations) http://obm.as/V4BgVs

Google’s Lost Social Network. The sad, surprising story of Google Reader. http://obm.as/Z93uBw

68 años de la muerte de Paul Otlet, uno de los visionarios que imaginó una web en los años 30 http://obm.as/RkNpX6

Any password-reset system that will be acceptable to a 65-year-old user will fall in seconds to a 14-year-old hacker. http://obm.as/YxPOzx

cuando el coche viene con una API. *muy* interesante (Ars Technica) http://obm.as/SnjQAP

El cacharrito

*muy* interesante, el prototipo de YotaPhone con su segunda pantalla de tinta electrónica hreflang=»en»

El navideño

vale, el año que viene si pongo árbol de Navidad en casa… http://obm.as/12MUeCk

Y el audiovisual de cierre

(Que esta vez nos ha salido un poco largo, aunque lo merece…)

RT ‏@rakelka La magia del montaje, un documental sobre la edición de cine http://vimeo.com/54383151

http://vimeo.com/54383151

Los tuits de la semana (54)

Llevábamos tres semanas sin…

De diseño y desarrollo web

Herramientas:

Tincr. Edit and save files from Chrome Developer tools. Live reload for Chrome. http://obm.as/RLz4AJ

…sobre todo para hacer wireframes:

RT @robertclariso RT @fcogama: Super simple way to wireframe http://wireframe.cc

Wirefy is a browser based responsive wireframe tool to create functional wireframes using standard elements. http://obm.as/Y5MMlT

Pencil Project. An open-source GUI prototyping tool that’s available for ALL platforms. http://obm.as/QumNmh

…y algunas en forma de HTML, CSS y JavaScript:

Shower. A cross-browser presentation template. (via @brucel) http://obm.as/VO8oOc

Seriously.js is a real-time, node-based video compositor for the web http://obm.as/WdFHzc

Y bastantes lecturas de interés:

en el Windows Phone Developer Blog explican qué trae IE10 para windows phone 8 http://obm.as/WP8wTy

RT @kazuhito The CSS physical unit problem – QuirksBlog http://bit.ly/VQiFti

A Brief History of Gestural Interfaces http://obm.as/UvO6xA

Sharp Suits – stupid feedback from clients, transformed into posters (via @brucel) http://obm.as/SHJ6k9

el NY Times criticando las interfaces de ventanas… en 1984 ¿se anticiparon 30 años? http://obm.as/S5dDd4

RT @martuishere ‘In defense of descendant selectors and id elements’, it was about time that someone like @zeldman said this: http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/

#lecturaobligatoria Code smells in CSS, by @csswizardry http://obm.as/UItJY8

me parece mal que IE10 no salga para Vista (ni XP, claro)… pero es que Firefox 17 no soporta OS X 10.5 :-S http://obm.as/Wurde8

Oh, IE6, how we loved you, by @brucel. aka «estamos repitiendo los errores del pasado» http://obm.as/UnhLZC

Un momento de respetuoso silencio

RT @softmodeling RT @mkapor: IBM retires Lotus brand I created in 1982. http://techland.time.com/2012/11/20/lotus-farewell-to-a-once-great-tech-brand/

Lecturas alrededor de la web

Clay Shirky: How the Internet will (one day) transform government http://obm.as/Xt54x3

RT @ignasi Nous límits als límits #prou RT @bufetalmeida Leer artículo 31, la nueva LPI ataca frontalmente el P2P: http://pirata.cat/public/1207_borradorRDLey_EEGG_julio_2012.pdf #StopLPI

Nostalgia y cacharritos

RT @robertclariso RT @domingogallardo: Emulador de tarjetas perforadas: http://www.kloth.net/services/cardpunch.php #historiadelainformatica

para amantes de los videojuegos vintage: una réplica de la Atari 2600 http://obm.as/XEyLg3

RT @GammaCounter Check out the clattering and flashing of «The Witch,» the oldest working digital computer, unveiled at Bletchley Park. http://bbc.in/QVtYDW

El juguete musical

escuchar una remezcla aleatoria de media hora del Blue Monday… el Infinite Jukebox este engancha http://obm.as/TdNzex

Y el postre visual

¿Cabe todo el cine de ciencia ficción en seis minutos? http://obm.as/SgnUmv

Los tuits de la semana (52)

Vamos a ver si somos capaces de retomar el ritmo habitual…

De diseño y desarrollo web

Unos cuantos «enlaces diversos». Finalmente ha llegado Windows 8 y, con él, Internet Explorer 10:

How to Get IE 10 Playing Nice With Responsive Websites (Webmonkey (love the article’s URL)) http://obm.as/QEeeSi

Una pequeña lección de diseño:

RT @martuishere Amazing example of editorial design on the web: http://pitchfork.com/features/cover-story/reader/bat-for-lashes/

Una herramienta «analógica»:

molan, los Responsive Sketchsheets de zurb http://obm.as/PIDjOU

…y una digital:

Specificity Calculator http://obm.as/TylayN

Algo que tenía que llegar:

Apple removes Java from all OS X Web browsers (Ars Technica) http://obm.as/TyjQvX

Una pataleta absolutamente justificada:

RT @mrdoob Browser schizophrenia – http://zehfernando.com/2012/browser-schizophrenia/ What would break if Chrome, Firefox, etc used navigator.appName and navigator.appVersion?

Y una lección:

A classless class—on using more classes in your HTML — CSS Wizardry http://obm.as/OHcr08

Ha sido la quincena del vídeo. Por una parte, Spectrum se hacía eco de la inminente llegada de WebRTC y del vídeo peer-to-peer:

Video and Audio Enabler WebRTC Near Release (IEEE Spectrum) http://obm.as/Pve9TY

Pero, sobre todo, llega Popcorn:

RT @mozilla Popcorn Maker Beta Testers needed. Try the beta version here: http://ow.ly/eHOG7 Get involved in QA here: http://ow.ly/eHOr3 #webmaker

Si queréis ver un ejemplo de su potencia,

How Popcorn Maker adds a new layer of information to a TEDTalk http://obm.as/TDQhbX

Y si os lo queréis hacer «a mano»…

positivamente sorprendido por la documentación de Popcorn.js http://obm.as/VyyoT5

La única parte que no me gusta es que para que llegue el vídeo HTML5 tiene que ganar un estándar. Y parece que va a ganar el que no debería:

¿la guerra ha acabado y ha ganado H.264? http://obm.as/SecJM1

Y para cerrar sección con un vídeo:

Broken promises of HTML5 (by @codepo8)

Lecturas alrededor de la red

How a Google Headhunter’s E-Mail Unraveled a Massive Net Security Hole (http://Wired.com Threat Level) http://obm.as/SDyjYz

RT @antonello Cierre de cuenta de Amazon «y la peor versión del DRM» http://bit.ly/RpMZKB al final la recuperará pero dan ganas de «liberar» cada compra

la datacéntrica campaña digital de obama (Mother Jones) http://obm.as/Vrj1f9

el mundo sería un sitio mejor si todos leyésemos (y aplicásemos) The Elegant Email, de @rands http://obm.as/TXx0I3

De cacharritos y cacharrotes

Mare Nostrum 3, un nuevo superordenador para Barcelona (La Vanguardia) http://obm.as/VuG6Ie

What’s the difference between a Core i5 and a Core i7? Well, the answer isn’t simple… (Ars Technica) http://obm.as/Y3jd1V

All code on Raspberry Pi’s ARM chip now open source (Ars Technica) http://obm.as/RWxKIj

Ceefax, the world’s first Teletext service, will deliver its last page to the UK on October 24th (The Verge) http://obm.as/RR1fv4

TurtleBot. A small open source robot with really big heart http://obm.as/T6AOkb

Where Does the Internet Live? (no, el enlace NO apunta a las dichosas fotos de los datacenters de google) http://obm.as/PhLzW8

RT @Kedume Un teléfono android con pantalla de tinta electrónica, un mes de autonomía y 70 gr de peso http://bit.ly/RKnBBS

¿sabéis qué cumple 56 años hoy? un lenguaje de programación llamado fortran http://obm.as/OBimE2

un poquito de matemáticas

RT @softmodeling RT @yokofakun: Math + Paper Craft: Computer Scientist Creates 3D Origami http://weburbanist.com/2012/10/25/math-paper-craft-computer-scientist-creates-3d-origami/

RT @newsycombinator An Intuitive Guide to Linear Algebra http://j.mp/PUiZo0

¿por qué estudiábamos teoría de grupos a finales del siglo XIX? para mejorar los datacenters del XXI http://obm.as/Py91hI

La recomendación

RT @antonello Un proyecto crowdfunding a seguir de cerca Teleport http://bit.ly/S7qvAV compartir archivos con nuestros amigos usando P2P (y es español)

Y el vídeo para cerrar

PhD Comics explains Open Access

La semana que viene, más.