Iniciándome en HTML5, herramientas

Recién que estoy ahora con un cursito de HTML5 (en mis tiempos no estaba apenas definido el), nos han puesto por ahora algunas cosas no muy complejas pero si que puede dar problemas a algunos la verdad así que pasara a comentar algunos pasos que di yo en el.

Editor wysiwyg para web

Lo que ves es lo que hay, esa es su definición, editores gráficos de webs, para proyectos complejos o para quien no tiene ni idea y no le importa mucho la eficiencia del código (el codigo generado siempre resultara peor que uno hecho a mano y optimizado por norma general)

En su tiempo use NVU, el cual al llegar a estable ceso su desarrollo y se creo el fork Kompozer esta muerto así que aun no estar yo al dia me he decantado por usar Bluegriffon pero tampoco esta en los repositorios pero es fácil de instalar desde los repositorios de getdeb.

Respecto a editor simple de texto recomiendan Sublime Text el cual también os enseñare a instalar mediante repositorios, aunque la verdad, con yo con gedit y sus plugins por ahora me ha sobrado en GNU/Linux.

Descargamos e instalamos el .deb de getdeb que nos añadirá su repositorio.
Y luego para añadir sublime text e instalar ambos los comandos tipicos:
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer bluegriffon
Para Windows y Mac simplemente bajamos los instaladores de sus paginas oficiales.

Herramientas de edición web en la propia web

Ahora, si buscamos algo totalmente multiplataforma, movil o simplemente sin instalacion os ofrezco unas webs interesantes para tratar diseño web... usando interfaces webs html5 precisamente.

Editores simples
Ej: htmlinstant.com
Depuración de código HTML en tiempo real que puede ayudarnos a tener un aprendizaje bastante rápido y fácil. No guarda nada por si solos eso si.
Tenemos en una parte de la pantalla para poner código con alguna simple y en el otro para verla directamente.
Podemos encontrar desde algunos increiblemente simples con solo 2 paneles (editor y visor) a otros mas completos con cuentas online para guardar y compartir nuestros proyectos pasando claro esta por una gran variedad de opciones y controles.
Mozilla tiene también su propia versión en desarrollo ademas llamado Thimble

Editores con su propia plataforma
Ej: codepen.io
Tienen sus limitaciones y con características de pago habitualmente no pudiendo encontrar uno perfecto fácilmente.
Este nos obliga a guardar públicamente y a mano (excepto si pagamos) pero tiene la ventaja de poder manipular html, css y js a la vez viendo automáticamente sus resultados.

Editores integrados en otras plataformas
Ej: editey.com
Pueden tener un diseño profesional y sin capar en nada pero con algunos fallos debido a que se basan en servicios de terceros bastante populares.
Este integrado en Drive completamente guarda automáticamente en el y desde el podremos abrir nuevos archivos fácilmente, con el he creado mis primeras webs con CSS de 0 almacenadas en Drive.

Editores de texto enriquecido
Ej: tinymce.com
Estos son los llamados "editores avanzados" que salen para escribir artículos en blog o foro. Tienen la peculiaridad de tener un manejo muy semejante a un editor de texto enriquecido pero permitir ver el código html fácilmente pudiendo también modificarlo.

Habrá muchas mas pero con estas ya podemos hacer bastante y eso que son los primeros con los que me he topado :)

Almacenamiento o hosting en Google Drive

Si estáis empezando, ya habréis escuchado sobre, servidores, ftp, dominios y muchas otras cosas que sinceramente... ahora mismo tal vez no necesitéis aun conocer. Si que os ofrecer como alternativa guardar esos archivos en vuestra propia cuenta de Google.

Para ello debemos marcar preferiblemente la carpeta que lo contenga como compartida públicamente. El enlace sera siempre algo como:
https://googledrive.com/host/idlargodelacarpetacompartida/archivo.html
Tenedlo en cuenta porque si movéis el archivo de carpeta claro esta el identificador cambiara. Este sera de cerca de 30 caracteres, lo cual no es lo mas cómodo pero si gratuito y si lo deseamos podremos añadirle muy fácilmente un subdominio o incluso nuestro propio dominio mediante gweb.io http://gweb.io/ (un servicio muy simple pero también efectivo).

Habrá que que el navegador sea el visor directo del fichero así que no pueden ser ficheros con formato de Google Docs, por lo tanto hay que crearlos y subirlos antes desde otro lado (sin convertirlos al subirlos claro esta) y no podrás editarlos online directamente con Google Docs aunque los guardes en Drive (ya que solo permite editar los ficheros soportados por el). Aunque yo os comente que editey es una gran opción para trabajar con ellos.

Así que señores, ya tenéis unas buenas herramientas para empezar a trastear ^^

Entradas populares