Hola a todos! Vengo a compartirles una herramienta que les será de mucha ayuda a todos los principiantes en Html5 y Bootstrap. La herramienta en cuestión sirve para diseñar visualmente sitios en Html5 con bootstrap completamente responsivo o responsive si escribir una sola linea de código, con resultados espectaculares y sin conocimientos en html, css u otro lenguaje ¿Excelente no?
Los invito a que hagamos un sitio desde 0 con este editor llamado: "Pingendo"
Para comenzar deben ingresar en la pagina oficial de Pingendo y descargar la última versión.
En este caso voy a utilizar la versión Beta que utiliza Bootstrap 4 que funciona perfecto e incluye muchas novedades.
La aplicación es multiplataforma (Linux / Windows / Mac), es portable (no requiere instalación) y lo mejor de todo:
Abriré la aplicación y seleccionaré una nueva página en blanco (la primera opción, el resto son templates a los cuales podrán editar si desean...)
vamos a explorar la interfaz de la aplicación para conocer en donde se encuentra cada cosa y para que sirven...
Descripciones:
- Menú Secciones y Componentes: Este panel se divide en dos pestañas, la pestaña "Secciones" contendrá los diferentes tipos de secciones a las cuales le podrán agregar a su sitio, por ejemplo el menú superior, Footer, una sección con 2, 3 o 4 columnas, una seccion para incluir sus redes sociales etc...) En tanto que la pestaña "Componentes" contendrá por ejemplo el carrusel de imágenes, grupo de botones, Cabeceras < h1>, párrafos, paginadores entre otros...
- Propiedades del sitio: Al igual que el panel de la izquierda este se divide en dos pestañas: Pagina (Page) en donde le agregarás el titulo a tu pagina, los tags (palabras claves), descripción, tipo de fuente, etc. Y en la otra pestaña cada vez que selecciones una columna, botón, imagen o video te mostrará todas las propiedades de la misma para que puedas editarlas a tu gusto.
- Ver código html y agregar estilos Para poder visualizar el código html que se generó a medida que vas agregando secciones y componentes debes desplegar esta pestaña, a su lado, podrás agregar o modificar (si tienes los conocimientos necesario) los estilos visuales del sitio.
Los How-To básicos...
- Para poder agregar componentes o secciones en el sitio nuevo, basta con arrastrarlos y soltarlos dentro de la pagina
- Para editar un texto solo le hacen un doble click y escriben el nuevo contenido
- Para agregar cualquier imagen, selecciona el thumbnail y luego desde el menú derecho selecciona la imagen que deseas que se vea.
- El efecto Paralax se logra dándole el atributo fixed a un background
- Para agregar un video de fondo, selecciona la sección y actívalo en el apartado " Video " del menú derecho, por ultimo selecciona el video que quieres que se reproduzca.
- Para eliminar algo que no les guste, lo seleccionan y apretan la tecla Supr
Les dejo un video con una demostración LvL5 de como se utiliza esta gran aplicación, espero que les haya gustado y espero sus comentarios...
