Desarrollo de páginas web incluído HTML, CSS y JScript online - JSFiddle
El entorno jsFiddle.
Ponerse en marcha con jsFiddle es tan rápido como escribir su dirección en su navegador. Una vez que se carga el sitio, se le presenta una página dividida en varias secciones. La parte izquierda de la página es el área de menú donde configura el entorno jsFiddle. La sección principal del sitio (a la derecha) se divide en cuatro áreas:- CSS: ingrese CSS que se aplicará al HTML utilizado en sus pruebas. Se coloca entre los elementos <style> en la parte del encabezado de la página.
- HTML: esta área le permite ingresar HTML para ser utilizado en sus pruebas. De forma predeterminada, aparecerá entre los elementos <body> en la página a menos que las opciones del panel izquierdo lo anulen. Funciona directamente con el CSS y JavaScript ingresados en sus respectivas áreas. JavaScript ingresado dentro de los elementos <script> también se puede ingresar aquí.
- JavaScript: la fuente de JavaScript está ingresada en esta área. Aparece dentro de las etiquetas <script type = "JavaScript"> en la parte del encabezado de la página. Las opciones de la izquierda le permiten elegir qué bibliotecas / marcos se utilizan, por lo que el código en esta sección no tiene que incluirlos.
- Resultado: los resultados de la ejecución de CSS, HTML y JavaScript ingresados en las secciones de la página.
Con la posibilidad de elegir cualquiera de los marcos más populares y agregar complementos y CSS desde otro lugar, es una herramienta increíble para :
- probando una hipótesis.
- visualizando un plugin de jQuery.
- depuración de fragmentos de código.
- Dando una demostración de una respuesta - pública o no.
Cuando carga jsFiddle.net, obtiene una vista similar a esta: las tres áreas de entrada y la única área de salida estarán vacías y faltan algunos botones. Aparecerán si se ha registrado y ha iniciado sesión, pero está listo.
- Elija la ubicación del código: si el código que desea ejecutar debe ejecutarse onload o simplemente vivir en la cabeza del contenido generado.
Si incluye elementos como window.onload o $ (document) .ready ... su código va en la cabeza. - Elija el marco que desea ejecutar: es un poco de desplazamiento para ir a Sin biblioteca (pure JS) si no desea utilizar ninguno de los marcos incluidos.
- Pegue o escriba su html, JavaScript y / o CSS en las áreas designadas: una sugerencia al pegar, use el mouse en lugar de ctrl-v para pegar y si pega desde otro sitio como EE, desvíe un poco al editor de texto simple o es probable que vea el formato del código sin saltos de línea
- Presione [> Ejecutar] o ctrl-return para ver el código ejecutado, o abra la consola si el código no produce ninguna salida visible: console.log () es más fácil para el ojo y el mouse que para la alerta ...
Trabajando con la interfaz jsFiddle
Poner en uso jsFiddle es tan simple como cargar el sitio e ingresar el código en las áreas apropiadas de la página. La interfaz jsFiddle proporciona muchas características para ayudarlo en su desarrollo. La parte superior de la página incluye una línea de botones para usar algunas de estas funciones. Estos botones incluyen:- Ejecutar: ejecuta el código ingresado en las áreas de la página y muestra los resultados en el área de salida.
- Bifurcación: crea un nuevo ejemplo utilizando el código actual como base.
- Restablecer: borra todas las áreas de la interfaz jsFiddle.
- TidyUp: limpia el código de JavaScript mediante sangría de bloques de código.
- JSLint: utiliza la herramienta JSLint para realizar un análisis de código estático del código en el área de JavaScript de la página.
- Compartir:le permite compartir el código de la página jsFiddle con otros usuarios. Las opciones incluyen Facebook y Twitter, y proporciona un enlace y el código para integrarlo en un sitio web (por ejemplo, en un blog).
- Ubicación de JavaScript: el primer menú desplegable define dónde se coloca y ejecuta el código JavaScript. El valor predeterminado es onLoad, lo que significa que se ejecuta a través del evento onLoad de la página web. Otras opciones incluyen colocarlo en el encabezado o cuerpo de la página.
- Biblioteca de JavaScript: el segundo menú desplegable le permite utilizar uno de los diversos marcos de JavaScript, que incluyen MooTools, jQuery, Prototype, YUI y mucho más. Además, admite las diversas versiones de estas herramientas, por lo que las opciones de prueba son infinitas. Esta es una gran característica porque puede jugar con estas bibliotecas sin descargar y configurar su propio entorno.
- Paneles: La interfaz jsFiddle incluye las tres áreas de código, pero hay opciones para las áreas de CSS y JavaScript. Puede elegir utilizar SCSS en lugar de CSS y usar CoffeeScript en lugar de JavaScript.
- Información: ingrese un título y una descripción que sean importantes al guardar / compartir. Además, puede especificar la etiqueta del cuerpo y el DTD utilizado.
- Ejemplos: Esta selección hace que sea fácil comenzar a utilizar la herramienta para que pueda conocer sus características y cómo se puede usar.
Zona de juegos web
El sitio jsFiddle lo califica como un área de juegos web, y no puedo pensar en un mejor eslogan porque:- permite a los desarrolladores jugar con los tres elementos centrales del desarrollo web (CSS, JavaScript y HTML);
- Abarca el elemento social de la Web al hacer que sea fácil de compartir; y
- Parece un lugar perfecto para responder a esas molestas preguntas de desarrollo y compartir rápidamente los resultados, no es necesario crear proyectos o archivos de chatarra.
Consulte jsFiddle hoy mismo y verá rápidamente su poder para realizar prototipos y pruebas rápidamente.
Consejos
- Regístrese e inicie sesión: le dará la posibilidad de guardar sus problemas como público y le dará un panel de control para el resto para que pueda encontrarlos nuevamente.
- Darle un título al violín en el acordeón de información lo hará público (suponiendo que hayas iniciado sesión)
- Puede agregar cualquier CSS externo y JavaScript a su violín usando el acordeón Agregar recursos - muy útil para complementos
- Existe compatibilidad con Ajax. Sin embargo, aún no he encontrado un archivo que pueda cargar sin usar las llamadas Ajax extendidas en lugar de .load () y .get ()
Si te ayudo esta informacion, compartela y reacciona!!
