Home-theater-designers
Cada sitio web que utiliza se basa en HTML. Si bien los desarrolladores web necesitan habilidades en JavaScript, Python, CSS y secuencias de comandos del lado del servidor, HTML lo mantiene todo junto.
Sin HTML, no hay web, por lo que necesita saber cómo crearlo y editarlo. En lugar de configurar un sistema de prueba de código HTML en su computadora, es más sencillo probar el código en un navegador.
Ya sea jugando con pequeños fragmentos de HTML o proyectos completos de sitios web, un editor HTML en línea es ideal.
Por qué debería utilizar un editor HTML en línea
El uso de un editor HTML basado en navegador tiene sentido en lugar de algo como Notepad ++ por las siguientes razones:
- Los editores HTML en línea se ejecutan directamente en su navegador web
- Pruebe su código HTML en línea --- vea si el código se ejecuta como se esperaba
- Ver vistas previas web en tiempo real --- las actualizaciones de la vista previa a medida que edita
- Optimice su flujo de trabajo: no más guardar, cargar en el navegador, volver al editor y repetir
- Independiente de la plataforma: se ejecutan en cualquier dispositivo con conexión web.
Este último punto es muy importante. Significa que es posible desarrollar una página web tan fácilmente en una PC como una Chromebook. Incluso puede usar una tableta Android o una computadora de $ 50 como la Raspberry Pi.
La codificación HTML es una puerta de entrada sencilla y accesible para comprender la programación y el desarrollo. Necesita probar constantemente su código HTML, ¿qué mejor que los resultados en vivo en la ventana de su navegador?
Veamos algunos de los mejores editores HTML en línea disponibles actualmente.
1. CodePen
CodePen es un 'entorno de desarrollo social' para desarrolladores web, lo que básicamente significa que es un editor en línea con funciones de colaboración. Ofrece un diseño sencillo. Encontrará un panel para HTML, un panel para CSS y un panel para JavaScript, además de uno para la vista previa en tiempo real. Todos los tamaños de panel se pueden ajustar arrastrando los bordes alrededor.
Puede crear 'Bolígrafos', que son como áreas de juego individuales para modificar el código web. Se pueden agrupar varios bolígrafos en colecciones.
Si bien el registro para uso básico es gratuito, las colecciones y bolígrafos privados requieren un Cuenta Pro . Esto comienza en $ 8 / mes e incluye alojamiento de activos, temas integrables, colaboración en tiempo real y acceso al IDE de desarrollo web completo de CodePen.
Mucha gente considera que CodePen es el mejor editor HTML en línea. Pruébelo para ver si se adapta a sus necesidades.
2. JSFiddle
JSFiddle es más o menos lo que parece: una caja de arena donde puedes jugar con JavaScript. Probablemente sepa que JavaScript va de la mano con HTML y CSS. Esto significa que con JSFiddle, puede editar los tres a la vez con la interfaz de edición de JSFiddle.
Si lo desea, puede omitir JavaScript por completo.
Lo bueno de JSFiddle es que puede agregar solicitudes externas en la barra lateral. Esto le permite incluir archivos JavaScript y CSS fuera del sitio para mejorar su HTML. También es útil el botón Tidy, que limpia automáticamente la sangría de su código, mientras que hacer clic en Collaborate permite la colaboración en línea en tiempo real.
El único inconveniente es que debe hacer clic en el botón Ejecutar para actualizar el panel de vista previa.
3. JSBin
Considere JSBin como una alternativa más simple y limpia a JSFiddle. Puede editar cualquier combinación de HTML, CSS y JavaScript simplemente alternando los paneles con la barra de herramientas superior. Para una máxima flexibilidad, también puede alternar el panel de vista previa y un panel de consola según sea necesario.
cómo crear textura en photoshop
Pero mientras que JSFiddle le permite vincular recursos externos de CSS y JavaScript, JSBin lo limita a bibliotecas de JavaScript predefinidas. Sin embargo, la selección es buena, desde jQuery hasta React, Angular y más.
Si bien JSBin es gratuito y no requiere una cuenta, necesitará una Cuenta Pro para funciones avanzadas. Estos incluyen contenedores privados, incrustaciones personalizadas, alojamiento de activos, sincronización de Dropbox y URL personalizadas para páginas publicadas a través de JSBin.
4. Liveweave
Liveweave es visualmente similar a los editores anteriores, con una interfaz de usuario agradable. Al igual que JSFiddle, Liveweave permite la colaboración en tiempo real y, al igual que JSBin, le permite vincular recursos de terceros predefinidos como jQuery.
Pero también tiene algunas características únicas. Lorem Ipsum Generator crea texto de marcador de posición en la posición actual del cursor. El Explorador de CSS proporciona una herramienta WYSIWYG para crear estilos CSS y el Explorador de color le ayuda a seleccionar colores perfectos. Mientras tanto, el Editor de vectores le permite crear gráficos vectoriales para su sitio.
mejores líneas de recogida de yesca 2018
5. HTMLhouse
HTMLhouse es una buena opción si solo te importa HTML (es decir, sin CSS o JavaScript). Limpio y minimalista, está dividido verticalmente con edición a la izquierda y vista previa en tiempo real a la derecha.
Es útil la capacidad de publicar su HTML y compartirlo de forma privada (a través de una URL privada) o públicamente (agregado a Página de navegación de HTMLhouse ). Es simple pero efectivo, que es exactamente donde un editor HTML en línea entra en juego y sobresale.
Tenga en cuenta que HTMLhouse fue creado y mantenido por la gente de Write.as , una herramienta de escritura en línea sin distracciones. Tenga esto en cuenta si planea escribir el contenido de su propio sitio.
6. HTMLG
Otra opción HTMLG sigue el mismo patrón de uso de código y paneles de vista previa para HTML. Sin embargo, esta herramienta no incluye CSS y JavaScript dentro del mismo proyecto unificado. Por el contrario, si desea editarlos, deberá abrir una nueva pestaña y editarlos como proyectos separados.
Esto lo hace ideal para ajustes de HTML puro y código de prueba en su navegador; menos si desea incorporar ediciones CSS.
Tenga en cuenta que hay un límite de 300 palabras si está probando páginas web completas con HTMLG. Para aumentar esto, puede registrarse en la versión premium sin publicidad, a partir de tan solo $ 5.80 al mes.
7. Incursionar
Ofreciendo una versión ligeramente diferente de los editores HTML en línea, Dabblet divide la pantalla en dos, en lugar de tres o cuatro paneles. Por lo tanto, tiene una vista para HTML y resultado, y una vista separada (pero vinculada) para CSS y resultado.
Esto ofrece más espacio, dando una vista más clara del código y la vista previa. Además, el validador de HTML y CSS de w3.org incorporado destaca cualquier problema.
Si necesita un espacio libre en el escritorio para probar el código de su sitio, este podría ser el mejor editor de HTML para usted.
Utilice los mejores editores de HTML en línea para mejorar sus habilidades
Si su única exposición al HTML es lo que aprendió hace una década, ahora es el momento de ponerse al día. HTML5 se lanzó en 2014 e introdujo un puñado de nuevos estándares y características. ¿No estás seguro por dónde empezar? Eche un vistazo a estos nuevos elementos esenciales de HTML5.
¿Quiere aprender buenas prácticas en diseño y desarrollo web HTML5? Mira estos sitios web con ejemplos de codificación HTML de calidad . También debería echar un vistazo a estas otras herramientas para mejorar sus habilidades de desarrollo web.
Cuota Cuota Pío Correo electrónico 15 comandos del símbolo del sistema de Windows (CMD) que debe conocerEl símbolo del sistema sigue siendo una poderosa herramienta de Windows. Estos son los comandos CMD más útiles que todo usuario de Windows debe conocer.
Leer siguiente Temas relacionados- Programación
- Editor de texto
- Desarrollo web
- Editores WYSIWYG
- HTML5
- Scripting
Editor adjunto de seguridad, Linux, bricolaje, programación y explicación técnica, y productor de podcasts realmente útil, con amplia experiencia en soporte de escritorio y software. Un colaborador de la revista Linux Format, Christian es un manipulador de Raspberry Pi, amante de Lego y fanático de los juegos retro.
Más de Christian CawleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse