[Resuelto] -¿Algún programa para ir "pre-armando" tu estructura en HTML?

Avatar

Hola comunidad, ¿cómo inician la parte de HTML en sus proyectos? Pues como recién estoy iniciando yo lo hago desde 0, me toma tiempo, pero también voy aprendiendo más y más la sintaxis. Mi pregunta es la siguiente: ¿hay algún sitio web o programa que me permita construir visualmente la estructura de mi página web y luego me arroje el código HTML para yo irlo modificando? Estoy realmente aceleraría mi desarrollo. Muchas gracias a todos y muy bonita la nueva comunidad.

7respuestas
Diseño webDesarrollo web
Avatar

Hola, existen páginas que pueden hacer lo que necesitas, pero la verdad a mi no me gusta usarlas ya que el código que regresan suele estar sucio. Te comparto esta página que hace lo que requieres Sketch2Code. Otra opción podría ser usar Markdown, tienen un curso gratis aquí en EDteam, date una vuelta y revísalo. Espero sea de ayuda.

Avatar

Hola Deyvi, te comento, no es muy recomendable usar software o generadores de html como tal, puesto que tienden a generar código innecesario, llamado codigo basura. Lo que si existen son por ejemplo, pluggins que permiten acelerar el maquetado, uno de los mas conocidos y recomendados es Emmet , disponible en casi todos los editores de texto, tales como Visual Studio Code, Sublime Text, Atom, Brackets, etc. Además de ellos existen preprocesadores que ya es un nivel mas avanzando, por así decirlo , es para ya contar con toda una metodología de trabajo, una estructura y mayor facilidad de escritura, es cosa que explores esas opciones. En los cursos de EDTeam te enseñan a usarlos, dale una revisada a los cursos, sino en youtube también puedes buscar sobre Emmet por ejemplo y podrás entender mejor de que se trata. Espero haberte ayudado, saludos desde Piura-Peru! Feliz navidad!! 🎄🎄🎄

Avatar

yo en lo personal, primeramente hago la parte de UX del proyecto (descubrir elementos, seccionar, interacciones etc.. todo con wireframes de bajo nivel = sin diseño ), después saco la guia de estilos de los elementos, para estos 2 pasos uso adobeXD es gratis, ya teniendo todo... incorporo la guia de estilos a los wireframes en el mismo adobeXD y listo esta preparado para iniciar. cuando estoy maketando y quiero ver cuales son los estilos de algun elementos voy a adobeXD selecciono el elemento y en la ventana de propiedades veo los estilos que le designe. usar generadores de codigo te arrojan codigo basura por eso no son muy recomendables. espero que sea de tu ayuda.

Avatar

Me parece que webflow hace lo que buscas, aunque no lo he probado. Dale una mirada y nos cuentas. Aunque ojo, webflow es un programa para gente que domina el código. No pretende librarte de él.

Avatar

Como toda buena idea, se parte de un bosquejo que bien podés hacerlo con un simple lápiz y papel. Al igual que las otras respuestas, lo que opino es mejor hacerlo sin herramientas que te agregan código adicional que solamente engorda el proyecto, no obstante si estas iniciando es una buena forma de aprender para luego ir soltandote y haciendolo manualmente.

Buen código!

Avatar

Pues lo mejor para mi es que ya una ves tengas definidos tus prototipos, puedes agilizar la escritura de tu html con pug o emmet, igual podrias definir tus micro templates y reutilizarlos, no soy de la idea que algun sw te generé todo el código por que siempre van a ver cosas que cambien conforme vas maquetando la estructura del marckup

Avatar

Muchas gracias a todos, sus respuestas han sido de gran ayuda.

Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Bases de datos en PHP

Bases de datos en PHP

Aprende a administrar una base de datos con MySQL y PHP