Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

 

 

 

  • ¡Registro!
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Herramientas HTML y CSS
    2. Herramientas JavaScript
    3. Rejillas
    4. Último clic
      1. Otras lecturas

    Los desarrolladores y diseñadores siguen lanzando herramientas y recursos útiles para que todos aprendamos sobre el desarrollo front-end. Sumérjase en este artículo para encontrar algunos recursos que le permitirán ahorrar tiempo y mejorar sus habilidades.

     

    El desarrollo front-end es una bestia complicada. No es difícil de aprender, pero sí bastante difícil de dominar. Hay demasiadas cosas que deben considerarse; demasiados ajustes que podrían ser necesarios aquí y allá; Demasiados detalles para que todo salga bien. Afortunadamente, los desarrolladores y diseñadores siguen lanzando herramientas y recursos útiles para que todos aprendamos, mejoremos nuestras habilidades y mejoremos en lo que hacemos.

    Estas herramientas son valiosas y útiles porque nos ahorran tiempo, automatizan tareas mundanas y, por tanto, nos ayudan a centrarnos en cosas más importantes.

    Aquí en Smashing Magazine, buscamos continuamente recursos HTML, CSS y JavaScript útiles y que ahorren tiempo para nuestros lectores, para facilitar la búsqueda de estas herramientas en constante crecimiento. Esperamos que estas herramientas le ayuden a mejorar sus habilidades y su flujo de trabajo profesional. Un sincero agradecimiento a todos los diseñadores y desarrolladores que aparecen en este resumen. Respetamos y apreciamos sus contribuciones a la comunidad de diseño.

    Herramientas HTML y CSS

    HTML Email Boilerplate
    Este sitio web y su código de muestra crean una especie de plantilla, sin diseño ni disposición, que le ayudará a evitar algunos de los principales problemas de representación con los clientes de correo electrónico más comunes que existen. También proporciona algunos ejemplos y fragmentos útiles que mantendrán el diseño de su correo electrónico lo más fiel posible.

    Initializr
    Esta herramienta crea una plantilla personalizable basada en HTML5 Boilerplate. Decida si desea contenido de muestra, elija entre JavaScript y jQuery y especifique sus necesidades de compatibilidad y configuración del servidor. Obtendrá una plantilla basada en las características clave de Boilerplate para comenzar su próximo proyecto.

     

    Estilos de capa
    Una herramienta sencilla y agradable para crear CSS de forma intuitiva, muy parecida a lo que haría con un editor de gráficos. La herramienta le permite agregar sombra paralela, sombra interior, fondo, borde y radio del borde y genera código CSS para varios navegadores.

    Mobile Boilerplate
    Una plantilla que crea aplicaciones web móviles ricas y de alto rendimiento. Puede obtener coherencia en todos los navegadores entre los teléfonos inteligentes de categoría A y soporte alternativo para Blackberry, Symbian e IE Mobile heredados.

    Kotatsu
    Un generador de tablas HTML simple que le ayuda a crear una tabla y agregar clases de filas y columnas de forma rápida y sencilla. Y si desea una herramienta rápida para generar listas, es posible que desee echar un vistazo a li maker .

    Vogue
    Esta herramienta recarga la hoja de estilo (no el HTML) de una página en todos los navegadores, e incluso se puede configurar para recargar una página automáticamente en varios navegadores al mismo tiempo. La herramienta no aloja su sitio web, sino que ejecuta el propio servidor local de su sitio web. Para usarlo, sólo necesitas instalar NodeJS y npm.

    LiveReload
    LiveReload aplica cambios CSS/JS a Safari o Chrome sin recargar la página y recarga la página automáticamente una vez que cambia el HTML. Alternativamente, eche un vistazo a Live.js , una biblioteca que garantiza que siempre esté viendo la última versión de la página en la que está trabajando, ya sea que esté escribiendo HTML, CSS o JavaScript.

    css-x-fire
    Esta herramienta permite editar propiedades CSS en el IDE desde el editor CSS Firebug y también permite al desarrollador concentrarse en el estilo CSS sin tener que actualizar el navegador.

    Ffffallback
    Un bookmarklet que le permite probar diferentes pilas de fuentes para encontrar el mejor resultado. Básicamente escanea el CSS de la página y crea una página clonada donde puedes probar y analizar diferentes fuentes alternativas.

    LESS.app para Mac OS X
    LESS amplía CSS con variables, reglas anidadas y operadores. Esta aplicación hace que sea muy sencillo usar {Less} al compilar automáticamente archivos .less en CSS estándar.

    Less-Repetitivo
    El CSS repetitivo está escrito en Less e incluye un restablecimiento de CSS, ayudas de CSS3, bloques de columnas centradas y mucho más.

    Needle v0.1a1
    Needle es una herramienta útil que puedes usar para probar si tu CSS se procesa correctamente tomando capturas de pantalla de partes de un sitio web y comparándolas con otras capturas de pantalla. También proporciona herramientas para probar los valores CSS calculados y la posición de los elementos HTML.

    inuit.css
    Un marco CSS que le proporciona los mejores consejos, trucos y prácticas de desarrollo en un archivo útil.

    Spritemapper
    Esta aplicación fusiona varias imágenes en una y genera posicionamiento CSS para los cortes correspondientes; Al reducir la cantidad de imágenes y utilizar mejor la conexión, el mapeo de sprites CSS puede reducir el tiempo de carga de su sitio web.

    Normalize.css
    Normalize.css adopta un enfoque ligeramente diferente para los restablecimientos de CSS. En lugar de eliminar todos los valores predeterminados del navegador, Jonathan Neal y Nicolas Gallagher se tomaron el tiempo para investigar cómo los diferentes navegadores manejan diferentes fragmentos de código y luego mantuvieron los valores predeterminados que son útiles. Le ahorra tiempo como diseñador y al mismo tiempo proporciona resultados consistentes.

     

    Zen Coding
    Zen Coding es un complemento de edición para codificación y edición de alta velocidad. El núcleo de este complemento es un potente motor de abreviaturas que le permite expandir expresiones (similares a los selectores CSS) en código HTML.

    Pruebas de estrés CSS y creación de perfiles de rendimiento
    Andy Edinborough comparte el código que utiliza para su llamada 'Prueba de estrés CSS' para casi todos los navegadores.

    CSS Crush
    Un preprocesador CSS que es familiar, conveniente, intuitivo y mucho más: todo lo que Pete Boere quiere que sea un preprocesador.

    PCSS
    Un preprocesador de CSS basado en PHP que le ayuda a liberar el poder de CSS3 con mucho menos código y características como anidamiento de clases, especificaciones del navegador del lado del servidor, unidades y variables predeterminadas. La herramienta requiere PHP5.

    Herramientas JavaScript

    Modernizr 2
    Modernizr es una biblioteca JavaScript de código abierto ampliamente utilizada que le ayuda a crear sitios web basados ​​en HTML5 y CSS3. Con la segunda versión de la herramienta, ahora puede combinar la detección de funciones con consultas de medios y carga condicional de recursos. Eso le brinda el poder y la flexibilidad para optimizar en cada circunstancia. Desarrollado por Paul Irish, Faruk Ateş y Alex Sexton. Pescados, mariscos, conservas y todo sobre el mar

    yepnope.js
    Un cargador condicional para tus polyfills que es muy rápido y te permite cargar sólo los scripts que tus usuarios realmente necesitan.

    FitText
    FitText es un complemento de jQuery para diseños fluidos y responsivos que cambia el tamaño del texto mostrado para que se ajuste al elemento principal. Una buena solución para crear titulares que se vean bien en todo, desde un pequeño dispositivo móvil hasta una pantalla de escritorio de 30 pulgadas.

    jQuery Waypoints
    Waypoints es un pequeño complemento de jQuery que facilita la ejecución de una función cada vez que se desplaza a un elemento.

    Plantilla estándar del complemento jQuery
    Esta plantilla implementa métodos públicos y privados, así como propiedades públicas y privadas, lo que facilita la creación de complementos jQuery tanto simples como complejos.

    ligature-js
    Este script Java le permite convertir patrones de texto en ligaduras tipográficas comunes revisando el texto en una página web e insertando ligaduras cuando corresponda.

    Complemento jQuery de marcador de posición/Polyfill
    Este complemento jQuery brinda soporte para el nuevo placeholder=“”atributo de formulario HTML5 en navegadores que no lo admiten de forma nativa (IE et al).

    StronglyTyped
    Una biblioteca JS que le permite especificar propiedades fuertemente tipadas de varios tipos (booleanas, numéricas, cadenas, etc.) y constantes (propiedades finales en Java). Utiliza captadores y definidores de ES5 y recurre a propiedades normales, escritas libremente en navegadores no compatibles.

     

    Kaffeine
    Un conjunto de extensiones a la sintaxis de JavaScript que intenta hacerla más agradable de usar. Se compila directamente en JavaScript que es muy similar, legible y línea por línea equivalente a la entrada.

    Crossroads.js
    Una biblioteca de enrutamiento JS inspirada en las utilidades de ruta/despacho de URL que están presentes en marcos como Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. Analiza una entrada de cadena y decide qué acción se debe ejecutar haciendo coincidir la cadena con varias patrones.

    Doctor JS
    Doctor JS analiza su código JavaScript y le proporciona un análisis completo en JSON, ya sea que se trate de polimorfismo, prototipos, excepciones o devoluciones de llamada. Cuéntale al Doctor JS:

    HEAD.js
    Un script que acelera, simplifica y moderniza su sitio: una solución concisa a problemas universales. Puede cargar scripts como imágenes y utilizar HTML5 y CSS3 de forma segura.

    Hivelogic
    Publicar su dirección de correo electrónico en un sitio web es una manera fácil de llenar su bandeja de entrada de spam. Este codificador de direcciones de correo electrónico antispam ayuda a proteger las direcciones de correo electrónico convirtiéndolas en código JavaScript cifrado para que sólo las vean personas reales que utilicen navegadores reales. Una solución alternativa y más sólida es Mollom .

    JavaScript Garden
    Un proyecto JS que ofrece consejos sobre cómo evitar errores comunes y errores sutiles, y establece problemas de rendimiento y malas prácticas con las que los programadores de JavaScript pueden encontrarse en su viaje hacia las profundidades del lenguaje.

    Bookmarkleter
    Esta herramienta crea bookmarklets a partir de código JavaScript. Elimina nuevas líneas, tabulaciones y espacios opcionales, codifica caracteres ASCII especiales en URL y coloca el código en una función contenedora (si aún no lo ha hecho).

    Bookmarklet Crunchinator
    Esta gran herramienta le ayuda a crear rápidamente un bookmarklet a partir de cualquier código JavaScript y se incluirá automáticamente en una función para hacerlo compatible con bookmarklet.

    Rejillas

    La cuadrícula de JavaScript
    Una cuadrícula superpuesta basada en JavaScript: simplemente arrastre los fragmentos a la barra de marcadores, abra su URL y haga clic en el marcador.

    Calculadora de cuadrícula
    Una calculadora que le ayuda a crear fácilmente su propia cuadrícula y descargarla para Adobe Illustrator o Photoshop.

    Patrón de cuadrícula modular
    Esta herramienta le permite crear una plantilla de cuadrícula para Photoshop y otras aplicaciones de edición de imágenes. Ingrese la línea de base, el ancho y alto del módulo, el ancho del canal y el número de módulos (columnas), y obtendrá un patrón personalizado para importar a Photoshop. También está disponible una extensión de Photoshop y también puede descargar un PNG o un mapa de transparencia.

    Marco Susy
    A Rails que le permite crear una cuadrícula completamente personalizada basada en sus marcas y diseños. No más compromisos porque el marco de grid con el que estás trabajando no es exactamente lo que necesitas, y no más pasar horas ajustando cosas para que queden bien y que el diseño funcione de la manera que deseas.

    Griddle.it
    Una forma limpia y sencilla de ayudarte a alinear tus diseños. Todo lo que necesita hacer es colocar sus dimensiones después de la URL proporcionada para obtener una imagen de guía de fondo con la que trabajar en su navegador. Las cuadrículas se crean sobre la marcha, por lo que cualquier combinación debería funcionar.

    Último clic

    Reglas de pronunciación ASCII para programadores
    La mayoría de los programadores reconocerían los caracteres ASCII en un sitio web y sabrían cómo utilizarlos en su propio trabajo. Pero ¿cuántos saben cómo llamar a todos esos personajes? Este artículo ofrece un resumen bastante completo de los nombres comunes y no tan comunes de los caracteres ASCII. Es una guía útil si alguna vez se siente perdido al escuchar a otro programador hablar sobre codificación.

    Weave Silk
    ¿Su escritorio, su motivación o incluso su trabajo de diseño necesitan algo nuevo, llamativo y extraordinario? ¡Solo teje un poco de seda! Yuri Vishnevsky creó este truco interactivo mágico y experimental. Puedes pasar minutos jugando con esta pequeña técnica, basada en HTML5 Canvas: no se utiliza Flash.

    Cinemagraph
    No, esto no tiene nada que ver con CSS, HTML o JavaScript, pero es simplemente extraordinario. En su blog de fotografía, Jamie Beck presenta escenas de todo el mundo, acontecimientos memorables, comida, personas y pequeños universos personales. Lo interesante es que sus fotos están animadas (de ahí el nombre); cobran vida utilizando los viejos GIF animados. Visita el artículo Colocar un gif animado sobre una imagen jpg . Su breve tutorial explica cómo ahorrar bytes al juntar GIF y JPEG, sin perder demasiada calidad.

    Otras lecturas

    Quizás también quieras echar un vistazo a nuestros artículos relacionados anteriores:

    • Nuevas y poderosas técnicas y herramientas CSS
    • Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    • CSS: técnicas innovadoras y soluciones prácticas
    • Recursos educativos y que ahorran tiempo para diseñadores web

    (vf, il, mrn)Explora más en

    • Codificación
    • Herramientas
    • CSS
    • javascript
    • Recursos
    • HTML





    Tal vez te puede interesar:

    1. 50 herramientas útiles de JavaScript
    2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
    3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    4. Herramientas, tutoriales y recursos útiles de Node.js

    Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    ¡Registro! Implemente rápidamente. Implementar inteligentemente Índice Herramientas HTML y CSS

    programar

    es

    https://aprendeprogramando.es/static/images/programar-herramientas-utiles-de-html-774-0.jpg

    2024-05-20

     

    Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo
    Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20