Herramientas necesarias para crear páginas web

Crear Páginas WebTanto, si ya tienes camino andado, o a penas estás en la línea de partida del diseño web, estas herramientas para crear páginas web debes conocer.

Si, ya lo notaste hoy amanecí poético, las razones son muchas pero podría resumirse en una sola, !sigo vivo¡, algo así de friki como.

Por cierto en CSS el !important solo significa una cosa “Conflictos de estilos“, y suelen verse a menudo cuando hacemos uso de frameworks como bootstrap, foundation o cualquier otro.

Pero como yo vivo en Venezuela y aquí desde hace varios años toda vain.. es un conflicto, el !important me viene de rechupete.

Pero no te me emociones, porque tu no deberías estar usando !important en tu código CSS, si estás usando un framework lo ideal sería editar el estilo directamente en el framework.

Bueno dejemos la habladera de paj… que este blog no es de crecimiento personal y nada por el estilo, así que saltemos al grano 🙂

La herramienta indispensable para crear páginas web, es tener la formación adecuada sobre la materia, sin ello ninguno de los recursos que te dejare en este post te serán de utilidad como para entrar de plano a crear tu página web (que mamón, descubrí la luna). A por las herramientas coñ…

Herramientas para crear páginas web.

Editores de texto o código.

Los editores de código son el amigo fiel e inseparable del programador web, en ellos vertemos la magia que hemos aprendido, los que yo recomiendo son los siguientes.

crear página web con sublime text Sublime Text: Mi editor de cabecera, siempre listo para la batalla, es ligero, no consume casi recursos y tiene a una inmensa comunidad creando plugins para extender su funcionalidad y temas para darle el aspecto ideal para trabajar de la mejor manera.

Sublime text es de pago, pero puedes usarlo de manera gratuita, “lo malo” es que te saltara una ventana diciéndote que compres la licencia, y puede llegar a ser molesto.

En el blog tengo dos artículos que deberías leer si usas este editor, en uno de ellos te enseño a instalar el corrector ortográfico en español, y en el otro te muestro tres plugins que te harán más productivos en el Front-End.

páginas web con atom Atom: Este editor de código lo tengo instalado como respaldo, confieso que también me encanto, pero no termino de acomodarme a él, lo que me gusta de Atom es su autocompletado, de verdad que es una pasada y al igual que Sublime Text cuenta con una gran comunidad aportando plugins y temas. Atom es 100% gratuito y de código libre.

brackets texts editor Bracket: Es la apuesta de Adobe por los editores de código, es 100% gratuito y de código libre, también cuenta con plugins y temas para su personalización. Lo probé en su momento pero no me gusto para nada.

visual studio code Visual Studio Code: El editor de código de Microsoft es el último en llegar a la escena, apenas cuenta con un año de vida, fue presentado en la BUILD 2015 y sorprendió más por el anuncio de que se liberaba gratuitamente y bajo código libre que por ser un editor de código.

Creo que este editor fue el abreboca en cuanto a liberaciones Open Source por parte de Microsoft se refiere.

Visual Studio Code también cuenta con su comunidad que comparte plugins y temas, y al igual que Atom no terminé de acomodarme a él o viceversa.

Navegadores Web.

Para poder ver la magia en acción que hemos volcado en nuestro editor de código preferido para crear páginas web, necesitamos de un navegador web, si o si, no hay de otra y como este tema de los navegadores es tan variopinto, y los usuarios tienen sus corazoncillos puesto en uno u en otros.

“La lógica nos diría, instalemos todos los que hayan”, y aunque es lo que te dirán muchos, difiero al 100% sobre ello porque hay navegadores que tiene tan baja cuota de uso que no merecen la pena gastar tiempo y recursos en ellos.

Mi recomendación es estar pendiente de los informes sobre la cuotas de usos de los navegadores, en la actualidad la preferencia de uso esta de la siguiente manera según Stat Counter.

google chrome Google Chrome

Mozilla Firefox Mozilla Firefox

EDGE Browser IE & EDGE

safari web browser Safari

Opera Browser Opera

Hay otros tipos de navegadores que están orientado a nosotros, los desarrolladores web, ya que incluyen herramientas que nos facilitan el debug de nuestro proyecto. Ellos son.

firefox developer edtion Firefox Developer Edition

bliks browser Blisk

Servidor local.

Si bien podemos ver el progreso de nuestro proyecto web, mediante un navegador tomando como ruta la carpeta en donde se halle nuestro proyecto en el computador, lo recomendado es implementar un servidor local ya que este nos permitirá ver de forma cabal el comportamiento de nuestra web como si de un servidor en producción se tratase.

La forma más fácil de tener un servidor local en nuestro pc es valernos de paquetes que instalan todo por nosotros. Los más conocidos son.

xammp server Xampp: Gratuito sin limitaciones, ideal para MacOs, Windows y Linux.

mamp server Mamp: Gratuito y para más funciones debes adquirir la versión de pago, está disponible para MacOs y Windows pero se complementa mejor con Mac.

wampserver Wampserver: Gratuito sin limitaciones, ideal para Windows.

En el blog tengo 2 artículos en donde te muestro como instalar Xampp en Linux y Mamp en MacOs.

Clientes FTP.

Los clientes FTP son la mejor forma de conectarnos desde nuestro computador a nuestro servidor en producción, para cargar y descargar archivos, no creo que a estas alturas tu seas de los que aún usan el administrador de archivo del Cpanel para realizar estas tareas, si es así es hora de que conozcas a estos clientes FTP.

filezilla Filezilla: Mi preferido, gratuito y fácil de usar, es multiplataforma.

cyberduck Cyberduck: Otro gran cliente FTP gratuito, disponible solo para MacOs y Windows.

Existe una infinidad de clientes FTP, pero los que yo he probado son estos, por lo tanto son los que te recomiendo.

Editores Gráficos.

Los editores gráficos lo usamos para crear, editar, mejorar los archivos de imágenes que usamos en nuestro proyecto web, los más conocidos y usados son.

diseñar página web photoshop Photoshop: para el tratamiento de imágenes de mapas bit.

diseño web illustrator Illustrator: para la creación de vectores.

No te pierdas. 5 Compresores de imágenes para optimizar tus archivos gráficos.

Wireframe y Mockup.

Lápiz y papel son la principales herramientas a la hora de crear Wireframes, pero si no se te da del todo bien el dibujo a mano ahí te van unas excelentes herramientas para que los hagas desde tu ordenador.

Balsamiq mockups Balsamiq: Un excelente programa para crear Wireframes. Cuenta con versión gratuita y de pago.

Sketchapp para diseñar páginas web Sketchapp: La aplicación predilecta de los usuarios de MacOS para la creación de Mockup.

Adobe Experience Design Adobe Experience Design CC: Muy similar a Sketchapp, se encuentra en fase preview y solo está disponible para MacOs.

crear página web sin escribir código Adobe Muse: La herramienta de Adobe para crear páginas web “sin escribir una línea de código“, esta herramienta no fue concebida para crear Mockup, pero es el uso que ahora le doy desde que me atreví a más, y me propuse aprender HTML, CSS y JS puro y duro, no se si será la más idónea pero allí vuelco mis Wireframe y luego lo paso a código.

Photoshop e Illustrator también son utilizados por muchos, para crear Mockup.

Frameworks.

Los Frameworks tiene tantos seguidores como detractores, por aquello de que las páginas web creadas con ellos tiene un aspecto visual similar. Pero como entre gustos y colores no han escrito los autores, te dejo lo que a título personal considero están de boga.

bootstrao Bootstrap

Foundation 5 Zurb Foundation

Materializecss Materializecss: Por cierto, para este framework he creado una colección de snippets, que puedes descargar desde Github.

Semantic UI Semantic UI

herramientas_necesarias_para_crear_paginas_web

Se que existen muchas otras herramientas que deberías conocer si estas en el campo del diseño y desarrollo web, espero que las que te he brindado en este artículo te sean de utilidad o por lo menos te sirvan de referencia.

Nos leemos en la próxima 😉

Lenin Peña

Venezolano hasta los tuétano del 80 pa' acá, papá geek de dos hermosos [email protected], me dedico al Desarrollo y Diseño Web, la asesoría de las TIC, al maravilloso mundo del Blogging, el SEO y el Social Media.

También te podría gustar...

  • Juan L. Marval

    Excelente Aporte Lenin, muy buen artículo. En cuanto al estilo Material Design, no se si has usado esta: http://ui.lumapps.com/

    • Hola Juan, me alegro que te sea de utilidad el post, en cuanto a lumapps, me tope con él por un proyecto que tenía de curación de contenido para el Front-End, pero nunca lo he utilizado, aun no llego a desenvolverme completamente en JS. Saludos.