Aprender más

Esta página contiene enlaces a sitios donde puedes aprender más sobre diseño de páginas web.

Aviso: Esta página está muy desorganizada.

Vistos en Frontend Focus (antes, HTML 5 Weekly)

364: Splicing HTML's DNA With CSS Attribute Selectors (23/10/2018)
297: You do not need a CSS Grid based Grid System
277: https://htmlreference.io/ A free guide to HTML
277: https://cssreference.io/ A free visual guide to CSS
277: https://webgradients.com/ Ejemplos de gradientes web
234: A Complete Guide to Grid (29/03/16)
233: Houdini (24/03/16) futura recomendación W3C para permitir polyfills de CSS
233: How to work with SVG icons (03/16)
233: PX, EM or REM Media Queries? (17/03/16)
Falta mirar el 231 y 232
230. Bixa Color, fuente de caracteres con varios colores
229. HTML 5.1 rewrite of the article element definition
229. Walmart Web Style Guide
228. Native form elements (copia en archive.org)
228. The Flexbox Reading List: Techniques And Tools
227. Presentando Google Design Resizer - Resizer
227. Old browsers CSS hacks
227. Cleaning House after Internet Explorer
227. Jank Free
226. TestMyCSS (parece que no admite CSS en UTF-8)
226. The `background-clip` Property and its Use Cases
226. CSS Variables: Why Should You Care?
225. HTML5 Elements: https://www.html5accessibility.com/html5elements/
225. origami.js: https://github.com/raphamorim/origami.js
224. Learn CSS Layout the pedantic way: http://book.mixu.net/css/index.html
224. Using Modern CSS to Build a Responsive Image Grid: https://www.sitepoint.com/using-modern-css-to-build-a-responsive-image-grid/
224. Responsive Image Breakpoints Generator: https://www.responsivebreakpoints.com/
Introducing the CSS coding style guide: https://18f.gsa.gov/2016/01/11/introducing-the-css-coding-style-guide/
Surprising CSS properties you can use today: https://12devsofxmas.co.uk/2016/01/day-7-surprising-css-properties-you-can-use-today/
22 Essential CSS Recipes: http://ipestov.com/22-essential-css-recipes/ [archive.org]
Markup Checklist: https://web.archive.org/web/20160507015114/http://ipestov.com/markup-checklist/
Tidy: http://www.html-tidy.org/
Designing A Product Page Layout with Flexbox: https://css-tricks.com/designing-a-product-page-layout-with-flexbox/
Optimising SVGs for Web Use — Part 1: https://medium.com/larsenwork-andreas-larsen/optimising-svgs-for-web-use-part-1-67e8f2d4035#.luf7ruei9
brand-colors: http://brand-colors.com/ - https://brandcolors.net/

Vistos en Web Development Reading List

165. 17/01/13. Open Color: esquema de colores

Vistos en Mobile Web Weekly

151. 17/03/29. Practical CSS Grid: Adding Grid to an Existing Design, Eric Meyer (23/03/17)

Por ordenar

2020/01/16: Google kills product (Ars Technica series)
2019/11/13: Web Almanac 2019, informe de HTTP Archive
2019/11/13: HTTP Archive, estadísticas sobre la composición de la web
2019/02/20: CSS Remedy
2018/10/28: The History of the Web, en un timeline
2018/08/24: Google HTML/CSS Style Guide
2018/07/21: 9 Biggest Mistakes with CSS Grid, de Jen Simmons (18/07/18)
2018/06/26: The new (and old) CSS units you've never heard about, de Massimo Artizzu
2018/05/26: Layout Land (canal YouTube) sobre diseño CSS con grid y flexbox
2018/05/26: Web Push Notifications, de MS Edge demos
2018/05/26: Getting Started With CSS Layout, de Rachel Andrew (25/05/18)
2018/05/19: US Congress mulls extending copyright yet again – to 144 years
2018/05/09: New CSS Features That Are Changing Web Design, de Zell Liew (07/05/2018)
2018/05/01: (Now More Than Ever) You Might Not Need jQuery, de Ollie Williams (12/07/2017)
2018/05/01: Directiva (UE) 2016/2102 del Parlamento Europeo y del Consejo, de 26 de octubre de 2016, sobre la accesibilidad de los sitios web y aplicaciones para dispositivos móviles de los organismos del sector público (debería estar traspuesta el 23 de septiembre de 2018). Visto en el blog de The Paciello group.
2018/04/29: The HLC Colour Atlas, se puede descargar en freieFarbe downloads. El código de color hcl() está incluido en CSS Color Level 4.
2018/01/28: Fundamentals of Responsive Images, de Marc Drummond
2018/01/28: A crisis, the causes and a solution, de Leonardo Chiariglione (chairman del MPEG group) [visto en lwn.net]
2018/01/28: Técnicas para mejorar el rendimiento del sitio., de Google.
2018/01/28: Purgecss removes unused selectors from your css, resulting in smaller css files
2018/01/12: The Strange History of One of the Internet's First Viral Videos, de Joe Veix.
2018/01/19: Daniel Glazman anuncia su propuesta WebBook
2018/01/19: XBL Graphs, gráficas que muestran cómo van eliminando XBL del código fuente de Firefox
2018/01/18: CSS Cheat Sheet
2018/01/16: How Big Is That Box? Understanding Sizing In CSS Layout, de Rachel Andrew
2018/01/15: Is Copyright Term Extension Finally Done?, de Timothy Vollmer
2017/10/18: Modern JavaScript Explained For Dinosaurs, de Peter Jang
2015/11/13: Continuous Learning, de Stefan Koopmanschap
2017/19/10: The Story of CSS Grid, from Its Creators, de Aaron Gustafson
2017/11/21: WebAssembly Will Finally Let You Run High-Performance Applications in Your Browser, de Luke Wagner
2018/01/11: The Brutal Lifecycle of JavaScript Frameworks
2018/01/11: npm trends: angular vs react vs vue vs @angular/core
2018/01/10: A Closer Look at Color Lightness
2018/01/10: What does the publishing industry bring to the Web?
2018/01/04: The League of Movable Type + Repositorio de fuentes en GitHub. Fuentes libres
2018/01/04: OpenType Variable Fonts
2017/12/13: Guía de optimización en buscadores (SEO) para principiantes, de Google
2017/12/13: The H.E.A.T. Exchange Blog muy crítico con el trabajo del W3C en los últimos años (y todavía más con el WHATWG).
2017/12/08: No boundaries: Exfiltration of personal data by session-replay scripts
2017/03/23: Practical CSS Grid: Adding Grid to an Existing Design, de Eric Meyer
2017/06/05: Fun with Viewport Units
2017/05/25: How to learn Flexbox in 10 minutes
2017/05/25: The State of CSS
2017/05/22: The Ultimate Web Code Generator (visto en wwwhat's new)
2017/03/21: A new CSS Grid demo on mozilla.org
2017/03/21: CSS Stats Analiza css de sitios web
2017/03/12: You, Me And The Emoji: Character Sets, Encoding And Emoji
2017/03/03: The Story of Firefox OS
2017/02/02: AdNauseam, extensión para sabotear los anuncios haciendo clic en todos ellos
2017/01/29: La increíble historia de Firefox y el certificado raíz de la FNMT [29/01/16]. Firefox 51 incluye el certificado de la FNMT
2017/01/26: Uso de propiedades CSS según Microsoft [archive.org]
2017/01/20: HTML5 Cheat Sheet
2017/01/17: Accesibilidad en la web
2017/01/17: Diez lectores de pantalla gratuitos
2017/01/10. Sacado de Github trending: Awesome listas de recursos - List of Free Learning Resources - You Don't Know JS (book series) - javascript30.com
2017/01/10: URL encoding
2017/01/10: clean-code-javascript
2017/01/10: freeCodeCamp propone problemas de programación, enmarcados en un plan de estudios para desarrollador web
2017/01/05: <head> Cheat Sheet (en github)
2017/01/05: Favicon. All About Favicons (And Touch Icons) (21/04/15)
2017/01/05: Public APIs A collective list of JSON APIs for use in web development.
2016/12/20: Pixel Perfect: extensión de Firefox para comparar dos páginas web, pero que no funciona en Firefox a partir de Firefox 57. Existe otra extensión parecida que sí funciona en Firefox posteriores: Pixel Perfect Pro
2016/11/28: cssreference.io/: A free visual guide to CSS
2016/03/26: Houdini
2016/11/13: Is SVG 2 really on life support?
2016/11/13: L20N [archive.org] Framework de Mozilla para traducción de webs
2016/11/04: Apple, Google y sus modas de diseño están volviendo la web ilegible
2016/11/01: 10k Apart: Concurso de diseño web en páginas de menos 10KB
Consejos: Content and Strategy - Markup for Accessibility, Clarity, and Affordance - Designing for Optimization and Performance - CSS Structure and Sandboxing - Svelte JavaScript Enhancements - Compilation, Optimization, and Compression
The third browser war is over and it's a bloodshed, conferencia en francés de Daniel Glazman en WEB2DAY 2016 (Nantes, junio 2016)
Perfect responsive images: HTML5 <picture> and Bootstrap 4
New Device Mode in Google Chrome 49
PX, EM or REM Media Queries?
CSS Layout Weekly News
6 Reasons to Start Using Flexbox
Autoprefixer. Añade propiedades particulares de los navegadores si son necesarias. Existe una extensión para Brackets: Brackets Autoprefixer
Bugs de Servo: http://paulrouget.com/bhtml-servo-issues/
Google material icons: https://fonts.google.com/icons?icon.set=Material+Icons
Cómo optimizar imágenes SVG: https://jaydenseric.com/blog/how-to-optimize-svg
Propiedades -webkit admitidas por Firefox: https://mxr.mozilla.org/mozilla-central/source/layout/style/nsCSSPropAliasList.h
Ricardo Galli deja menéame: https://blog.meneame.net/2016/02/01/una-nueva-etapa-para-meneame/
Tuenti cerrará su red social: sus 20 millones de usuarios no son rentables: https://www.elconfidencial.com/tecnologia/2016-02-01/tuenti-cerrara-su-red-social-sus-20-millones-de-usuarios-no-son-rentables_1141970/
Ubuntu Design blog Reading list: Enero 2016 - Diciembre 2015 - Noviembre 2015
Responsive Images in Practice (04/11/14): https://alistapart.com/article/responsive-images-in-practice/
Prueba de optimización para móviles de Google: https://support.google.com/webmasters/answer/9063469?hl=es
Prueba de velocidad de Google: https://pagespeed.web.dev/
YouTube Google webmasters: https://www.youtube.com/user/GoogleWebmasterHelp/featured
Colección de iconos svg: https://www.toicon.com/
Recopilación de recursos web de wwwhatsnew.com
- 2015: Febrero
HTML5 Weekly: https://frontendfoc.us/issues
Mobile Week Weekly: https://mobiledevweekly.com/issues
Offline First: https://offlinefirst.org/

Dash, visto en https://wwwhatsnew.com/2013/10/15/dash-un-nuevo-sitio-para-aprender-html-css-y-javascript/ (15/10/13)
2013-07-05: ¿Qué lenguaje de programación debo aprender y dónde puedo hacerlo gratis?/
TogetherJS: https://togetherjs.com/ (copia en archive.org)
JSFiddle: https://jsfiddle.net/ (visto en https://lwn.net/Articles/572905/)

CSS 3: https://www.css3.info/
CSS 3: https://css3test.com/ (de Lea Verou)
CSS tricks: https://css-tricks.com/
Normalize CSS: http://necolas.github.io/normalize.css/
KsesoCss (blog dedicado a CSS): https://escss.blogspot.com/

Tabla de los elementos HTML5 (por Robert Mening): https://websitesetup.org/html5-periodical-table/
Guía "How to make a website" (por Robert Mening): https://websitesetup.org/
Web RTC: https://webrtc.org/
Are we playing yet?: http://www.areweplayingyet.org/
HTML5 security: http://html5security.org/ [archive.org]
Google mobile first FAQ: https://webmasters.googleblog.com/2015/04/faqs-april-21st-mobile-friendly.html

HTML5 Test: http://html5test.com/
Ringmark test (de Facebook): https://rng.io/
Juegos clásicos de Atari: https://www.theverge.com/2012/8/30/3277157/microsoft-atari-arcade-games-internet-explorer-html5
RoboHornet (JavaScript benchmark): https://www.theregister.com/2012/09/25/robohornet_browser_benchmark_battle/

Opus códec de vídeo, aprobado por IETF: https://lwn.net/Articles/515670/

Do not track en Chrome: https://www.theregister.com/2012/02/24/google_chrome_do_not_track/
Do Not Track (octubre 2012): https://lwn.net/Articles/520047/
(noviembre 2013): https://www.theregister.com/2013/11/05/do_not_track_w3c_ads_privacy/?page=1
Boot to Gecko: https://hacks.mozilla.org/2012/02/mozillas-boot-to-gecko-the-web-is-the-platform/
Mozilla Lightbeam: Extensión desarrollada por Mozilla entre 2013 y 2019 [ref]. Su funcionalidad está incluida en Firefox Enhanced Tracking Protection in Firefox for desktop
Mozilla Thimble: Editor web online creado por Mozilla en 2013 y cerrado en 2019, Mozilla recomendó entonces pasarse a Glitch (comercial con versión gratuita) - repositorio archivado en GitHub
Open badges: https://openbadges.org/
Firefox: Are we fast yet?: https://arewefastyet.com/
Chrome https://www.chromestatus.com/features
Incluye una estadística del uso de propiedades CSS

CoffeeScript: https://coffeescript.org/
WebP formato imágenes de mapa de bits (con o sin compresión): https://developers.google.com/speed/webp/
AngularJS (Google): https://angularjs.org/
Editor Atom (de GitHub): https://atom.io/

Mejoras en IE 10: https://learn.microsoft.com/es-es/archive/blogs/ie/moving-the-stable-web-forward-in-ie10-release-preview
modern.ie: https://developer.microsoft.com/en-us/microsoft-edge/ - visto en https://www.theregister.com/2013/01/31/microsoft_modern_ie_web_tools/
Firefox console: https://hacks.mozilla.org/2013/08/the-browser-console/
MathML Acid Test: http://fred-wang.github.io/AcidTestsMathML/acid1/ - http://fred-wang.github.io/AcidTestsMathML/acid2/ - http://fred-wang.github.io/AcidTestsMathML/acid3/

Diseños: https://webdesignledger.com/creative-techniques-for-single-page-websites/
Bootstrap (framework web): https://getbootstrap.com/
HTML5 Boilerplate (framework web): https://html5boilerplate.com/
emaze, presentaciones en HTML5: https://www.emaze.com/
Google Web Designer Beta (30/09/13): https://webdesigner.withgoogle.com/
Manifiesto UTF-8 everywhere (05/10/13): visto en https://www.theregister.com/2013/10/04/verity_stob_unicode/
para crear en HTML 5 sin saber programar (07/10/13): https://wwwhatsnew.com/2013/10/07/para-crear-en-html5-sin-saber-programar/
W3C: DRM en HTML5 (07/10/13): https://www.theregister.com/2013/10/07/drm_html_5_point_1/
Web design references: https://www.d.umn.edu/itss/training/online/webdesign/css.html
CSS Lint: http://csslint.net/
Dive into HTML5: http://diveintohtml5.net/
Editor en JavaScript: https://codemirror.net/
Sitepoint: https://www.sitepoint.com/
Codio: https://www.codio.com/
Sass: Syntactically Awesome Style Sheets: https://sass-lang.com/
HTML5shiv: https://github.com/aFarkas/html5shiv Biblioteca Javascript para que IE 6/7/8 reconozcan las etiquetas HTML5.
historia: https://www.huffingtonpost.es/2013/03/19/internet-vintage_n_2907694.html
La Justicia europea distingue al fin entre los 'links piratas' y los 'legales' (13/02/14)
Webydo: https://www.webydo.com/ - visto en whatsnew (19/02/14)
Estadísticas de uso: https://w3techs.com/technologies
https://iamvdo.me/blog/ce-que-vous-avez-toujours-voulu-savoir-sur-css
https://wwwhatsnew.com/2014/03/18/google-presenta-su-nueva-escuela-para-webmasters-principiantes/
Free online tools for web developers: http://cubicle-h.blogspot.com/2019/01/free-online-utility-tools.html
Microformatos 2: http://tantek.com/2014/171/b1/microformats-org-turns-nine
WebIDE, editor web en Mozilla: https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
Blog de Google para webmasters: https://webmaster-es.googleblog.com/2014/06/como-crear-la-pagina-de-inicio-adecuada.html
Regiones CSS: https://modernweb.com/css-regions-matter/
Elemento <picture>: https://arstechnica.com/information-technology/2014/09/how-a-new-html-element-will-make-the-web-faster/
Extensiones Chrome para desarrollo web: https://wwwhatsnew.com/2014/09/14/extensiones-chrome-para-disenadores-web/
Autoprefixer (genera propiedades CSS con prefijos de navegadores): https://css-tricks.com/autoprefixer/
Generador CSS3: https://enjoycss.com/
Top ten web attack techniques of 2013: https://lwn.net/Articles/614349/
960 grid CSS framework: https://960.gs/
Google material Design: https://m2.material.io/design/introduction/#principles
Responsive images: http://responsiveimages.org/
Estadísticas de Akamai: https://web.archive.org/web/20211017131426/https://www.akamai.com/es/visualizations/internet-observatory [archive.org]
Web Devout: http://www.webdevout.net/
especialmente: http://www.webdevout.net/articles/beware-of-xhtml
The Extensible Web Manifesto: https://extensiblewebmanifesto.org/
- Mozilla: http://x-tag.github.io/
- Chrome: https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview
Idiomatic CSS: https://github.com/necolas/idiomatic-css/tree/master/translations/es-ES
World Usability Day (13 de noviembre): https://worldusabilityday.org/
CSSdig (extensión para Chrome que analiza CSS): https://www.cssdig.com/
FontAwesome: https://fontawesome.com/
Google developers: eeb.dev - Web Starter Kit [archive.org] (se dejó de desarrollar en 2017) - Polymer - Chrome Dev Summit 2014
HTML5 rocks: https://www.html5rocks.com/es/
Lista actualizada de todas las propiedades CSS: https://meiert.com/en/indices/css-properties/
Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
a11y.css (CSS que evalúa la accesibilidad): https://ffoodd.github.io/a11y.css/index.html
Webs de antes y de ahora: https://wwwhatsnew.com/2015/03/06/una-infografia-muestra-el-aspecto-de-famosos-sitios-web-hace-muchos-anos/
Usabilidad con colores: https://boldorange.com/news/category/bold-insights/ - https://unbounce.com/design/6-landing-page-design-posts/
Artículo Responsive Web Design original: https://alistapart.com/article/responsive-web-design/
https://www.enriquedans.com/2015/07/debemos-realmente-preocuparnos-por-la-libertad-de-panorama.html
https://www.consortiuminfo.org/blog/unicode-80-song-praise-unsung-heroes
Explicación del W3C sobre <b> e <i>: https://www.w3.org/International/questions/qa-b-and-i-tags
(diciembre 2013) What's wrong with in-browser cryptography?
datos estructurados: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=es
asistente de Google: https://www.google.com/webmasters/markup-helper/u/0/?&hl=es
Microdatos: https://schema.org/

Documentación oficial

W3C (World Wide Web Consortium): https://www.w3.org/
El W3C es el organismo responsable de la elaboración de la especificación del lenguaje HTML y del creciente número de derivaciones (CSS, SVG, MathML, XML, etc.). El W3C llama recomendaciones a los estándares que definen los diferentes lenguajes que publica. La versión oficial de cualquier recomendación se publica en inglés, aunque existen versiones no oficiales en español.
Mozilla Developer Network: https://developer.mozilla.org/en-US/
En marzo de 2005 se puso en marcha el Mozilla Developer Center, que contiene información técnica sobre Mozilla Firefox, pero también artículos y ejemplos sobre HTML, CSS, JavaScript, etc. Esta web se basó parcialmente en el contenido del antiguo Netscape DevEgde, la web de información para desarrolladores de Netscape que fue eliminada en octubre de 2004.

CSS

En la web del W3C se puede consultar un listado detallado de las recomendaciones CSS vigentes y en elaboración.
Microsoft mantiene una web con información sobre todas las propiedades CSS 2.1 y CSS 3 y con información de la versión de Internet Explorer que admite cada propiedad: https://web.archive.org/web/20170306133238/https://msdn.microsoft.com/library/ms531209(v=vs.85).aspx [archive.org]
La Fundación Mozilla mantiene una web sobre todas las propiedades CSS 2.1 y CSS 3 con información de las versiones de cada navegador que admite: https://developer.mozilla.org/en-US/docs/Web/CSS

Documentación no oficial

Quirksmode: https://www.quirksmode.org/
Compatibilidad entre navegadores, tanto de escritorio como móviles
Can I use: https://caniuse.com/

Diseños

css Zen Garden: http://www.csszengarden.com/
La idea del Jardín Zen CSS es simple: mostrar distintos diseños (es decir, distintas hojas de estilo CSS) sobre la misma página web (es decir, con el mismo código XHTML). El sitio está abierto a la participación de cualquiera. Naturalmente, las hojas de estilo están disponibles para su estudio, por lo que es un lugar muy interesante para buscar ideas, aprender o exponer el propio trabajo.
Normal Nielsen Group: https://www.nngroup.com/
Jakob Nielsen, famoso experto de usabilidad, ofrece consejos sobre diseño. Por ejemplo:
- Top 10 Mistakes in Web Design (enero 2011)
- Top 10 Web Design Mistakes of 2005 (octubre 2005)
- Usability 101: Introduction to Usability (enero 2012)
W3C Sites: https://w3csites.com/
Índice de sitios webs con diseños atractivos y que siguen las recomendaciones del W3C.

Herramientas

Microsoft webhint: https://webhint.io/
Herramienta de análisis (accesibilidad, velocidad, seguridad, etc.) de un sitio web de Microsoft
Kraken.io: https://kraken.io/
Optimizador de imágenes. Comercial, con versión gratuita manual.
Tinyjpg /tinypng: https://tinyjpg.com/ - https://tinypng.com/
Optimizador de imágenes gratuito

Restos antiguos

HowToCreate: http://www.howtocreate.co.uk/
Contiene artículos sobre desarrollo web.
Listamatic: https://css.maxdesign.com.au/
Dedicado a las listas, pero también hay tutoriales sobre selectores y posicionamiento.