Tabla de contenidos
Herramientas útiles y tests de verificación CSS
Utilizar los recursos más apropiados es imprescindible para desarrollar con el mayor éxito cualquier página web. A continuación se describen varias herramientas útiles que conviene tener en cuenta a la hora de detectar errores en los desarrollos, mejorar la productividad y conseguir los mejores diseños.
1. CSS Validation Service, W3C
Tal y como se comentó en el primer punto de la presente unidad, el W3C es el encargado de estandarizar los estilos CSS y en su plataforma nos ofrece varias herramientas e información muy valiosa para la elaboración de nuestros desarrollos. Entre las herramientas destacadas se encuentra el validador CSS que nos permite encontrar errores en nuestros ficheros.
2. Browserling
Browserling una página que nos permite probar cualquier web en los diferentes navegadores: Internet Explorer, Firefox, Chrome, Opera y Safari, en distintas versiones y resoluciones de pantalla.
3. Caniuse
Puedes ver los navegadores que soportan una determinada propiedad CSS o un elemento HTML5 en la página web caniuse.com
4. Extensión Autoprefixer para Visual Studio Code
Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión “Autoprefixer” en Visual Studio Code.
5. Repositorio de fuentes de Google Fonts
En la página de Google Fonts tenemos a nuestra disposición un amplio repositorio de tipografías que podemos utilizar en nuestros desarrollos.
6. Repositorio de iconos de Font Awesome
Al igual que con las fuentes, podemos utilizar repositorios de iconos para representar cualquier parte de nuestra interfaz. Un ejemplo de este tipo de repositorios es Font Awesome.
7. Convertidores de fuentes online
| Nombre | URL |
| Font Squirrel converter | fontsquirrel.com/tools/webfont-generator |
| Online Font Converter | onlinefontconverter.com |
| Files conversion | files-conversion.com/font-converter.php |
| Font converter | fontconverter.org |
8. Fuentes web online
| Nombre | URL |
| Font Squirrel | fontsquirrel.com |
| Da Font | dafont.com |
| Google Fonts | google.com/fonts |
Referencias
1. Referencias bibliográficas
- Libro: Curso de Desarrollo Web: HTML, CSS y JavaScript. Edición 2018: amzn.to/2NcLp5u
- Libro: SEO Avanzado. Casi todo lo que sé de posicionamiento web (Social Media) – Maciá Domene, Fernando: amzn.to/2Nbm4sE
2. Referencias web
- lenguajecss.com
- developer.mozilla.org/es/docs/Web/CSS
- w3schools.com/css/default.asp
- w3c.es
- desarrolloweb.dlsi.ua.es/libros/html-css/ejercicios
- en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
3. Cursos recomendados
- miriadax.net/web/html5mooc/inicio
- es.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics
4. Herramientas útiles
- Validador CSS: validator.w3.org
- Test en navegadores: browserling.com
- Comprobar si una propiedad es soportada en cada navegador: caniuse.com
- Agregar los prefijos de las propiedades CSS automáticamente: extensión “Autoprefixer” de Visual Studio Code.
- Repositorio de fuentes de Google: fonts.google.com
- Repositorio de fuentes e iconos Font Awesome: fontawesome.com
- Convertidores de fuentes online:
- fontsquirrel.com/tools/webfont-generator
- onlinefontconverter.com
- fontconverter.org
- Fuentes web online:
- fontsquirrel.com
- dafont.com