Llevo mucho tiempo (literalmente) queriendo meterme a eso del Diseño web, pero siempre le he tenido roña y le he huído como cucaracha al raid matabichos, como polvo a la escoba, como yerno a los abrazos de su suegra… en fin, podría nombrar más ejemplos bizarros argumentando que eso no es para mi porque yo soy una artista que vive de la inspiración de las musas y lo de echar código a mis diseñitos no es lo mío, peeero… El diseño gráfico no es ya suficiente, si quieres conseguir una chamba decente en la industria tecnológica, no basta saber ya sólo de diseño de pre pensa, logotipos y demás. Lo de hoy, la panacea… es el web design y el web development con todo y sus diseños responsivos. Me ha tomado semanas encontrar las herramientas correctas para identificar un camino de por donde comenzar a aprender, y como nueva también en esto lo he querido compartir con ustedes.

web-design

Comenzar con el desarrollo web puede ser agotador y confuso (díganmelo a mí). Tanto que aprender y en este mundillo de herramientas hay tantas opciones diferentes para lenguajes, marcos y proyectos de código abierto entre los cuales elegir.

¿Pero por dónde se empieza pues?

No hay una sola respuesta correcta, pero hay una progresión natural que la mayoría de los desarrolladores toman. Es más fácil comenzar con lo básico y pasar lentamente a estudiar los lenguajes de programación más detallados. En esta guía quiero compartir un enfoque de principio a fin que cualquiera puede tomar para aprender el desarrollo web. (Yeah! incluso yo, figúrense) Compartiré no sólo los lenguajes de desarrollo más populares, sino también los mejores recursos y herramientas para ayudarte a tí, querido prójimo lector de este blog, a aprender a lo largo del camino.

NOTA IMPORTANTE: Las herramientas que aquí recomiendo son la mayoría en inglés, porque las herramientas y tutoriales más actualizados y sobre todo más completos están en ese idioma, y porque además que si quieres ser desarrollador o diseñador web es fundamental que manejes el inglés, al menos el técnico; ya no se puede ser monolingue, sobre todo en una profesión como esta e independientemente del lugar del planeta donde radiques. He encontrado algunas sugerencias en español pero como les decía no están tan actualizadas y completas.

Los básicos: CSS3 y HTML5

Para empezar HTML y CSS son fundamentales y absolutos para el desarrollo web. HTML es un lenguaje de marcado y CSS es un lenguaje de estilo. HTML define cómo se debe estructurar una página y CSS define cómo se ve una página en la pantalla. Estos dos lenguajes se consideran lenguajes frontend porque operan en el navegador (o séase que no se necesita un servidor).

Algunos programadores empiezan con lenguajes completos como Python o JavaScript. Pero si deseas construir para la web y no estás seguro de por dónde empezar, HTML / CSS debería ser prioridad # 1 en tu lista.

Los dos lenguajes son muy diferentes, pero se complementan muy bien. Una página con sólo HTML funcionará, pero no se verá linda. Del mismo modo un archivo CSS puro realmente no mostrará nada en el navegador porque no hay HTML para procesar. Si podemos aprender HTML y CSS entonces podemos construir un Web site. Pueden no ser dinámicos o programables, pero los sitios HTML / CSS puros pueden funcionar y lucir bien.

Las versiones más actualizadas de estos lenguajes son HTML5 y CSS3. Estos no son increíblemente diferentes de HTML4 y CSS2. Simplemente añaden nuevas funciones que facilitan mucho el desarrollo de sitios web. Podrías analizar las ideas de proyectos o los enfoques paso a paso para aprender estos lenguajes. Pero honestamente la mejor manera es hacer tus propios –proyectos pininos – y construir conforme vas aprendiendo; puedes hacer tu portafolio en un sitio responsivo, poner un blog o ayudar al marketing de la señora de las quekas de la esquina haciéndole su página web. A lo largo del trayecto podrán surgir problemas pero puedes solucionar todos ellos con búsquedas de Google y foros de Preguntas y Respuestas como Stack Overflow. También puedes encontrar grandes fragmentos en Codepad si estás buscando soluciones HTML / CSS a problemas comunes. Incluso puedes crear una cuenta gratuita para guardar tus fragmentos favoritos para referencias futuras.

Cuando se trata de conceptos básicos como HTML y CSS realmente se puede aprender todo de forma gratuita en Internet. Si estás buscando algunas recomendaciones, consulta estos recursos gratuitos:

Hay una página que a mí, en lo personal, me ayudó mucho y sugiero en verdad le echen un vistazo primero, porque te explica desde los fundamentos de internet, qué demonios es el backend, el frontend, y demás terminajos técnicos que pueden apabullar al comienzo.

Learn to code 

Hay otro link que también te quita el miedo al comienzo para el html. Estos son unos tutoriales que están configurados para que puedas aventartelos en una semana. Un tutorial por día. Sin embargo, si puedes ir más rápido, hazlo!

Si no sabes nada de HTML, aquí es donde comienzas

Aquí hay otros enlaces muy útiles que sin duda te servirán:

Khan Academy

Free Code Camp

w3schools.com/html

w3schools.com/css

Algunas personas no les gusta esta página de W3Schools, pero es un gran sitio para principiantes. Y si estás dispuesto a tomar la ruta de paga muchas personas apuestan por el curso Treehouse que ofrece una prueba gratuita a nuevos usuarios.

También cabe mencionar el valor de los preprocesadores. Estos son como los lenguajes de superconjunto construidos sobre CSS que ofrecen una lógica más avanzada para variables, loops y funciones. Si apenas comienzas no te preocupes demasiado sobre esto por ahora. Solo necesitas entender los fundamentos de CSS antes de que puedas saltar a cosas más complejas como Sass , que es una extensión de lenguaje para CSS. Pero si deseas hacer trabajo de desarrollo web seriamente entonces necesitarás finalmente zambullirte en esta área. También hay lenguajes de preprocesamiento para HTML, pero no son tan ampliamente utilizados. Algunas opciones incluyen Haml y Jade. 

Pero si quieres profundizar en estos preprocesadores, aquí tienes algunos recursos para empezar.

El tutorial de Sass y Compass para principiantes absolutos

Una guía de principiantes para npm (Node Package Manager) 

Utilizar Jade y Grunt para acelerar la producción HTML

HAML? ¿Jade? Yaml? ¿Qué son estas cosas?

Links en español

HTML5 y CSS3 Domine los estandares de las aplicaciones web (Libro en línea)

HTML.net

JavaScript/ ES6

El otro lenguaje de interfaz que la mayoría de los desarrolladores web aprenden es JavaScript. JavaScript ha estado estrechamente vinculado al desarrollo web durante décadas y permite a los desarrolladores crear efectos dinámicos en la página. Con JavaScript puedes crear menús desplegables, carruseles deslizantes, ventanas modales y muchas otras interfaces web comunes. Los avances en CSS3 permiten a los desarrolladores hacer algunas cosas interesantes sin ningún tipo de JavaScript. Pero eso no significa que JS sea un lenguaje sin valor; aun estamos muy lejos de eso.

Más sitios web dependen de JavaScript para características dinámicas, ahora más que nunca. Los navegadores web modernos finalmente apoyan a JS hasta un punto en el que la mayoría de los usuarios que visiten su sitio tendrán activado JavaScript.

La última versión de JavaScript se llama ES2015, abreviatura de ECMAScript 2015. No quiero atascar este post con detalles mundanos, por lo que a todos los efectos el término “JavaScript” significa básicamente ECMAScript.

Si deseas obtener más información sobre la historia, consulta éste artículo.

Si aprendes los conceptos básicos de JavaScript, entonces entenderás ES2015. Los fundamentos están afianzados en la versión actual de JS y todas las versiones futuras.

JavaScript es, a menudo, el primer lenguaje de programación del desarrollador web. Algunos pueden argumentar que no es una programación real porque funciona como un lenguaje de scripting. Pero ya que puede ejecutar Node.js en el servidor ahora es posible ejecutar JavaScript como un lenguaje frontend + backend. JS dicen que es muy divertido, pero para desarrolladores en pañales como nosotros no deberíamos ni siquiera pensar en Node.js al menos durante algún tiempo. Comienza con los fundamentos de JavaScript como establecer variables, crear loops, funciones y operadores lógicos. Este conocimiento se puede aplicar a todas las formas de JavaScript y otros lenguajes de programación también.

Estos son algunos recursos básicos para empezar:

¿Qué es JavaScript, en realidad?

Cómo aprender JavaScript apropiadamente

 Java Script Elocuente. Libro en linea (2da. Edición/English Version). 

Todos estos son completamente gratis y deberán llevarte a través de todo lo necesario para ayudarte a sentirse cómodo escribiendo código JS. En ese proceso, a menudo leerás sobre bibliotecas como jQuery y el popular lenguaje TypeScript.  Ambos son herramientas valiosas para aprender, especialmente como desarrollador web.

Pero realmente no debemos ahondar en ellos hasta que nos sintamos cómodos construyendo características muy básicas en JS. La mejor manera de aprender es, como dije antes, crear proyectos desde cero. Nada como que le sudes aprendiendo para resolver cada reto que se te presente. En el proceso, te encontrarás con obstáculos y Google te ayudará a resolverlos. Si utilizas Chrome, echa un vistazo a este enlace que explica cómo generar código JavaScript en la consola de Dev Tools. De esta forma obtendrás mensajes de error específicos que te indicarán la línea que causó el error. Esto hará que la depuración sea mucho más sencilla.

En el curso de estudiar JavaScript y otras bibliotecas como jQuery / TypeScript a menudo tendrás preguntas que Google no puede responder. Si, hay momentos en los que te das de topes en la pared porque no sabes por dónde o cómo, para eso te recomiendo publicar tu pregunta en las comunidades en línea para obtener ayuda. Aquí hay algunos sitios web que recomiendo para la resolución de problemas:

Stackoverflow.com

Reddit.com

Reddit.com/javascript

Links en español

JavaScript a Fondo

PHP, Ruby o Phyton

La última pieza de desarrollo web se enmarca en el desarrollo de backend. Estas ya son palabras mayores e intimidantes, al menos para mí. Pero esta es un área amplia con muchos lenguajes diferentes, algunos más populares que otros. Hace décadas, Perl / CGI era el idioma preferido para el desarrollo de backend. Hoy en día eso es casi inexistente.

Las tendencias cambian con frecuencia por lo que es importante planificar con anticipación e irse moviendo con la industria. Los nuevos desarrolladores escucharán mucho hablar de PHP. Es uno de los antiguos lenguajes de programación web y se hizo específicamente para el desarrollo web. Irónicamente, el creador de PHP  nunca quiso que fuera un lenguaje de programación. Pero a lo largo de los años se mantuvo y creció rápidamente. Ahora los proyectos como WordPress, Joomla y Magento se basan en PHP para funcionar correctamente. Esto significa que la gran mayoría de los desarrolladores web confían al menos en un poco de PHP para aplicarlo cuando sea necesario.

Otros dos lenguajes muy populares son Ruby y Python. Dicese de estos que son divertidos de aprender (ajá, ya quiero ver eso) porque son lenguajes de programación que pueden usarse más allá de los proyectos web. No sé decirte qué lenguaje aprender primero porque cada desarrollador debe decidir por sí mismo. Si deseas ser un desarrollador de Frontend, entonces realmente no necesitas preocuparte por aprender ninguno de estos. Pero si quieres una introducción fácil al desarrollo de Backend deberías seguirle con PHP. Te permitirá crear proyectos personalizados de WordPress desde cero y verás que la mayoría de las empresas de alojamiento lo soportan por defecto.

Todos estos lenguajes son completamente gratuitos y de código abierto. Cada lenguaje también viene con un marco detallado que puede utilizarse para construir proyectos rápidamente.

PHP tiene Laravel , Ruby tiene Rails y Python tiene Django. El código abierto permite que todos estos proyectos florezcan y proporcionen a los desarrolladores un recurso fácil para construir nuevos proyectos desde cero. La mejor manera de estudiar tu lenguaje preferido es a través de la práctica. Parece un patrón ¿eh? Escribir código supongo que como todo, se aprende mejor ensuciándose las manos. Cuando encuentres problemas, te verás obligado a resolverlos y cuando resuelvas un problema aprenderás un poco del proceso. Estos pequeños momentos se suman con el tiempo y ayudan a dar forma a tu capacidad de desarrollo.

Si no tienes idea por dónde empezar, pero realmente quieres entrar a crear código backend bucea en PHP.  Encontrarás muchas guías gratuitas y un montón de soluciones de Preguntas y respuestas (Q & A) sobre desbordamiento de pila. Lo mismo ocurre con Ruby y Python, aunque es posible que necesites obtener más menos sobre cuando se trata de configurar y practicar en un servidor web real. Simplemente es empezar poco a poco. Construyamos proyectos localmente y aprendiendo los fundamentos. Y siempre que te confundas recuerda que Google es tu mejor amigo. Los obstáculos confusos son, a menudo, los mejores profesores.

Link en español

PHP a Fondo

Paciencia, ya casi termino con mi post kilométrico, pero como dije quería mostrarles un panorama muy completo de las opciones que hay.

SQL – Lenguaje de Consulta Estructurado (Structure Query Language)

Por último, si estás buscando desarrollarte en backend, SQL es un lenguaje que debes aprender. Potencia la mayoría de los motores de base de datos como MySQL y PostgreSQL. La buena noticia es que la mayoría de los motores DB son compatibles con todo el código SQL. Así que una vez que aprendas SQL debe funcionar en cualquier base de datos que encuentres. El motor de base de datos más popular para principiantes es MySQL. Esto, a menudo viene incluido con los planes de alojamiento y es el motor más apoyado para los proyectos populares de CMS como WordPress. 

SQL Tutorial

Essencial SQL

SQL Administrador de bases de datos

Todos estos enlaces son completamente gratuitos y te llevan a empezar el camino hacia la competencia SQL. Pero debo mencionar que muchas bases de datos tienen interfaces como PHPMyAdmin. Estas herramientas te permiten ejecutar consultas sin escribir ningún código. Si quieres realmente desarrollar tu conocimiento SQL te hará mucho más valioso para los empleadores. Pero incluso si acabas de aprender los conceptos básicos absolutos te puede ir muy bien.

Finalmente… Todos los lenguajes mencionados en esta guía pueden convertirte en un diseñador web o un desarrollador de perfil completo. Los desarrolladores de Frontend y los Diseñadores web pueden aprender HTML + CSS y algunos JavaScript. Los desarrolladores de backend podrían aprender HTML / CSS básicos pero realmente enfocar sus esfuerzos en un motor de base de datos + un lenguaje base.

Link en español

Tutoriales de SQL

…………………………………..

Resumiendo. No hay una respuesta correcta o incorrecta porque todo depende de lo que queramos hacer. Esta guía cubre todos los lenguajes principales para el desarrollo web, así que no importa lo que elijamos aprender, podemos estar seguros que estamos en el camino correcto.

Animo entonces… y comencemos!

Leave a Reply

Your email address will not be published. Required fields are marked *