EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            elementos estilos codigo composicion web
            Estilos, elementos y código para la composición de tu web
            02/11/2019
            formatos de archivos de video y optimizacion
            Formatos de archivos de vídeo y conversiones
            13/11/2019

            Herramientas útiles y referencias CSS

            recursos css

            Tabla de contenidos

            • Herramientas útiles, recursos y referencias
            • 1. Herramientas útiles
              • 1.1. CSS Validation Service, W3C
              • 1.2. Browserling
              • 1.3. Caniuse
              • 1.4. Extensión Autoprefixer para Visual Studio Code
              • 1.5. Generador de sombras online
              • 1.6. Generadores de gradientes
              • 1.7. Patrones de gradientes
            • 2. Referencias bibliográficas
            • 3. Referencias web
            • 4. Cursos recomendados

            Herramientas útiles, recursos y referencias

            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. Herramientas útiles

            1.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.

            1.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.

            1.3. Caniuse

            Puedes ver los navegadores que soportan una determinada propiedad CSS o un elemento HTML5 en la página web caniuse.com

            1.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.

            1.5. Generador de sombras online

            Para facilitarnos la tarea de la creación de sombras podemos utilizar un generador de sombras tanto para los textos como para las cajas o contenedores. Algunas herramientas online útiles son las siguientes:

            • Generador de sombras en textos: css3gen.com/text-shadow
            • Generador de sombras en cajas o contenedores: cssmatic.com/box-shadow

            1.6. Generadores de gradientes

            Para facilitarnos la tarea de la creación de gradientes podemos utilizar un generador de gradientes online que nos proporcione el código CSS necesario para nuestro diseño. Algunas herramientas online útiles son las siguientes:

            • cssgradient.io
            • css3gen.com/gradient-generator

            1.7. Patrones de gradientes

            Podemos aplicar diseños muy trabajados creando patrones sin necesidad de cargar imágenes con mucho peso. Existen diversos artistas dedicados a hacer este tipo de diseños. Algunos ejemplos de diseños de este tipo se pueden obtener en la siguiente plataforma:

            • leaverou.github.io/css3patterns

            2. 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

            3. Referencias web

            • lenguajecss.com
            • developer.mozilla.org/es/docs/Web/CSS
            • w3schools.com/css/default.asp
            • desarrolloweb.dlsi.ua.es/libros/html-css/ejercicios
            • w3c.es
            • desarrolloweb.dlsi.ua.es/libros/html-css/ejercicios
            • en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
            • escss.blogspot.com/2012/06/css-speech-module-css-hablado.html
            • websitesetup.org/wp-content/uploads/2019/11/wsu-css-cheat-sheet-gdocs.pdf

            4. Cursos recomendados

            • miriadax.net/web/html5mooc/inicio
            • es.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics
            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results