Pequeña super introduccion al desarrollo web

  • Categoría de la entrada:General

Este post va dirigido a personas que entre 0 a 10 saben 0,1 o 2 sobre desarrollo web, pero que desean aprender e incursionarse en este mundo. La introduccion va a ser pequeña porque no voy a profundizar en ningun tema, no va a haber codigo. Pero va a ser super porque voy a abarcar todos los temas posibles y va ser una lectura larga pero entretenida.

Que es el desarrollo web?

Resumido: Hacer sitios, sistemas y/o aplicaciones que se pueden visualizar en un navegador web. Esto significa que desarrollo web no es simplemente hacer paginas y que queden bonitas, hoy en dia aplicaciones complejas y empresariales prefieren hacer asi sus sistemas internos por las muchas comodidades y ventajas que esto proporciona.

web

Desarrollo web vs Diseño web? Son diferentes?

Si y no. No vamos a ser tan estrictos. Yo puedo decir ‘yo hago desarrollo web’ siendo que tambien hago diseño web. En general suele referirse al desarrollo web como aquel que se centra mas en la funcionalidad de un sistema que en el aspecto del mismo. Y como diseño web entendemos hacer sitios web, darles forma y dejarlos bonitos y funcionales.

Que es maquetar?

Maquetar es darle forma a un sitio, es decir: «el logo va aqui, este texto alla y los botones tienen que tener esta forma y estos colores». Hace muchisimo tiempo se solia maquetar usando tablas HTML. Hoy en dia para maquetar correctamente hace falta tener buenos conocimientos de HTML y CSS(HTML5 y CSS3) y se hace por lo general usando frameworks como los que veremos en unos momentos.

FrontEnd vs BackEnd

Estos son terminos que se escuchan bastante. FrontEnd es basicamente la parte que interactua con los usuarios, la pagina en si. Y BackEnd es la parte que el usuario no ve pero que hace cosas. Ej: Un FrontEnd es la parte donde uno puede agregar productos a un canasto de compras y BackEnd es todo el proceso que se realiza cuando uno apreta el boton de «comprar», es decir, guardar los articulos y el pedido en la base de datos, restar los articulos del stock, etc etc.

Solo sirve para hacer sitios?

No, creo haberlo dejado claro en los puntos anteriores. No es solo hacer sitios bonitos, tambien se pueden hacer sistemas completos(y se hacen). Hoy tambien se puede usar HTML, CSS y JS(javascript) para hacer aplicaciones de escritorio y hacer aplicaciones para Android o iOS.

Que lenguajes debo aprender?

Esa es basicamente tu eleccion, tienes varias opciones. En primer lugar debes decidir que te gusta mas, la parte del Front o la del Back? Pueden ser ambas, pero no se puede ser bueno en todo.

logos diseno webPara el Front deberas aprender:

  • HTML5
  • CSS3
  • (opcional pero altamente recomendado) Javascript/JQuery
  • Conceptos basicos de maquetacion

phpPara el Back pueden elegir entre:

  • PHP
  • ASP
  • Node.js
  • Ruby
  • Python

Hay mas, pero segun ‘mi criterio’ no vale la pena que las mencione en este post.

Ruby Y Python no eran para hacer aplicaciones de escritorio?

Si, y esa es una de sus ventajas. Ruby y Python tienen extensiones que son Ruby on Rails y Django respectivamente, que permiten desarrollar aplicaciones robustas facilemente y sin tener que aprender otro lenguaje(si es que ya saben Ruby y/o Python).

Cual es la diferencia entre Javascript y JQuery?

Basicamente Jquery es una libreria que facilita el trabajo con Javascript. Nos permite hacer las mismas cosas pero con codigo mas facil de leer, de escribir y mas corto.

Javascript es para hacer animaciones?

Esta duda me la plantearon hace poco. La respuesta es NO!

Hace tiempo, cuando se entendio que Flash no era bueno para hacer diseños web, se empezo a mover muchos de esos bonitos efectos y a realizarlos con Javascript, y de ahi quedo ese mal concepto de que solo sirve para eso. La realidad es que es un lenguaje completo para el navegador, incluso se pueden contruir aplicaciones completas usando solo este lenguaje.

Algo mas que deba aprender?

No obligatoriamente, pero si recomiendo que aprendan algo sobre seguridad web, que aprendar a validar datos de entrada y otras cuestiones basicas. Lo digo por experiencia.

Tambien les recomiendo que aprendan y usen alguna metodologia de desarrollo agil. Realmente es una perdida de tiempo y un generador de dolores de cabeza eso de estar desarrollando con el modelo en cascada. Muchos lo hacen porque un sitio web ‘parece algo chiquito’, ‘se puede terminar rapido y sin problemas’. La realidad es que si no se es organizado y se sigue alguna metodologia decente, esto se vuelve imposible.

Aprendan sobre alguna forma de hacer versionado de codigo. O van a terminar teniendo algo asi: index.html, index2.html, index1_correcciones.html, index1_final_correcciones.html, index2_2_wtf.html

Aprendan a usar la herramienta que han elegido. Los atajos de teclado, los snippets, y todas las comodidades que sus herramientas les proporcionen. Ahorraran segundos valiosos que con el tiempo agradeceran.

Que necesito para empezar?

Si vas a aprender HTML, CSS y Javascript y estas leyendo este post entonces tienes todo lo que necesitas, el navegador. El notepad de windows o gedit en linux y ya puedes empezar a escribir codigo.

Si vas a aprender PHP necesitaras instalar un servidor Apache con PHP y MySQL seguramente. Hay algunas utilidades que instalan todo eso de manera super sencilla como XAMPP o APPserver o google «como instalar apache php mysql«.

Que herramientas usar?

Lo mas importante es el editor de codigo. Puedes simplemente empezar con cualquier editor de texto plano. Luego tal vez te interese pasar por Geany que te colorea el codigo, tiene pestañas, es liviano y tiene muchos plugins. Luego ya querras probar mejores editores y empezaras a usar Netbeans, Aptana o Komodo Edit. Y al final terminaras con Sublime Text (Sublime, el editor de texto definitivo, sublime text para desarrollo web)

Ademas de un editor de codigo, deberan buscar herramientas para un monton de otras cosas, muchas utilidades web y plugins para hacer tareas como: buscar imagenes de ejemplo, validar codigo, optimizar codigo, crear expresiones regulares, trabajar con colores, trabajar con fuentes, etc etc. No te preocupes por esto ahora que ya iran apareciendo solas.

Que son las librerias?

Resumido: paquetes de codigo(puede ser un solo archivo o mas) que facilitan o posibilitan realizar algo ahorrandonos codigo y trabajo.

Que son los frameworks?

Resumido: lo mismo que una libreria

Cual es la diferencia entre libreria y framework?

No vale la pena hacer una diferenciacion tecnica. Van a usar uno u otro indistintamente. Pero para que tengan un conocimiento basico y sencillo vamos a dar 2 diferencias:

  • Generalmente un framework puede incorporar varias librerias. O sea que una libreria facilita hacer algunas cosas pero un framework facilita hacer un monton mas. Lo que no indica que sea mejor ni peor.
  • Un framework generalmente es mas estructurado, te dice en que carpetas escribir codigo, te dice como tienes que configurarlo y hasta como escribir el codigo. Una libreria no.

Vas a terminar usando muchas librerias/frameworks.

Que frameworks usar?

zurb logoHay tantos para hacer tantas cosas que lo voy a resumir:

  • Frameworks CSS/HTML/JS: Frameworks como Zurb Foundation y Boostrap sirven para crear rapidamente maquetas. Incluyen muchos estilos para los elementos comunes de un sitio como los formularios, botones, barras de navegacion, etc. E incluyen plugins JS para crear por ejemplo: una galeria de imagenes rapidamente.
  • Frameworks JS: Estan de moda y son aquellos que permiten crear aplicaciones en el navegador rapidamente como Backbone, Ember y Knockout
  • Frameworks PHP: Tambien existen un monton pero los mas conocidos son Zend Framework, Yii y Synfony y CakePHP
  • Frameworks CSS: no son frameworks, son pre-procesadores en realidad. Pero bueno, al final hacen lo mismo, ahorrarnos trabajo al escribir codigo. Ej: SASS y Stylus

Como elegir un framework?

Lo mas importante es trabajar con aquel con el que se sientan mas comodos. Seguramente terminaran probando mas de 1. Pero una recomendacion personal que les voy a dar es que se fijen en su popularidad.

Dependiendo de que tan popular sean habra mas documentacion, una comunidad mas grande y mas oportunidades de trabajo.

Pueden investigar su popularidad simplemente poniendo su nombre en google o pueden usar Google Trends que les permitira incluso comparar algunos segun el pais que deseen.

Que es un CMS? 

Son gestores de contenido. Cuando uno hace una pagina, esta normalmente tiene texto, imagenes, videos, archivos descargables, enlaces…’contenido’ basicamente. Un gestor de contenido hace lo que su nombre indica, permite decidir que contenido poner en la pagina. El CMS mas popular de todos es wordpress y sirve para muchas cosas, no solo para hacer blogs. Se pueden hacer con el sitios de e-commerce, webs empresariales, personales, etc.

Usar un CMS facilita mucho el trabajo de tener que crear una seccion de ‘administracion de contenido’ para que cada web que desarrolles. En vez de eso solo te preocuparas del diseño y de que este bonita.

Que es SEO y es necesario?

seo

SEO es Optimizacion para buscadores. Hay gente que se dedica exclusivamente a esto y no es algo que un diseñador web este obligado a aprender pero si les recomiendo que aunque sea le peguen una leida a un par de tutoriales sobre esto. Es feo ver como un mal maquetado, el abuso de texto escondido, las paginas lentas o el abuso de imagenes puede lograr que un sitio web tenga muy pocas visitas.

Donde aprender?

Es broma? Googleen! Hay mas tutoriales sobre diseño y desarrollo web que pelos tienes en tu cabeza. En este blog tenemos incluso una categoria dedicada a eso: Diseño y desarrollo web

Como recomendacion personal les voy a decir que vayan al canal de CodigoFacilito, tienen video cursos gratuitos sobre casi todo lo que hable hoy aqui, algunos no son tan buenos pero en general les aseguro que subiran un par o mas de niveles en nuestra escala imaginaria del 1 al 10 con esos videos.

La parte vergonzosa

Entre la comunidad de diseñadores y desarrolladores hay algunas cosas de las que en secreto nos burlamos, cosas que nos dan verguenza ajena. Como ustedes recien estan aprendiendo vamos a listarlas asi tratan de no repetirlas

  • En las universidades todavia se enseña a maquetar usando tablas. Por favor, maqueten como se debe.
  • Hay empresas que aun ofrecen servicios de diseño Flash como si fuera lo mejor. Por favor, no lo usen a menos que sea para hacer juegos.
  • Hay fanaticos de un lenguaje o tecnologia en particular. Por favor, entiendan que a todos los lenguajes y todas las tecnologias siempre les falta o les sobra algo.
  • Una cosa es usar imagenes para crear formas, colores y bonitos efectos que no se podrian lograr o serian muy dificil de lograr usando solo CSS, pero hay quienes practicamente costruyen todo el sitio(incluido texto y formularios) usando imagenes. Por favor no lo hagan.
  • Gente que defiende el uso de Dreamweaver como la mejor herramienta, o incluso peor, hace un par de meses(2013) recuerdo gente nombrando a FrontPage!

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.
guest
9 Comments
Inline Feedbacks
View all comments
Sir Juno

Basicamente Jquery es una libreria que facilita el trabajo con Jquery.???

sefsinalas

Es un post largo, se me deben haber pasado varios errores. Gracias por marcarlo, ahora lo corrijo

Sir Juno

No te preocupes, siempre pasa. Gracias por compartir :)

Cost Granda

Muy buen trabajo, aprendi muchos conceptos, como el front el back, que veo mucho en las ofertas de trabajo.. gracias por hacerlo!

sefsinalas

No problem :)
Si lo que buscas es encontrar trabajo te diria que uses la herramienta Google Trends para saber cuales son las tendencias. En el post creo que lo menciono

Gastón

Sef, primero muchas gracias x la info. Segundo, soy de Argentina, tenés idea o podrías recomendarme alguna institución donde se pueda aprender bien el desarrollo de un sitio web, los lenguajes y las aplicaciones correspondientes? Espero tu respuesa, gracias de nuevo!!!

sefsinalas

Hola Gaston. Pues….no :P
En la universidad, al menos en la mia(UCASAL) lo poco que te enseñan sobre desarrollo web son unas pocas etiquetas html.

Si sos de BsAs seguro que encontras muchos cursos, cualquiera te va a servir para aprender lo basico.

En esto del desarrollo web la cuestion es aprender lo basico y ya desde ahi uno puede arrancar con todo.

Y por ultimo, lo mejor me parece q es agarrar un buen libro(mas o menos nuevo) y ponerte a leer y aprender solo.

Kevin

Los languajes requeridos HTML y CSS son fáciles de aprender si usted tiene logica. Actualmente, los diseños están enfocados sobre el diseño adaptativo que se realiza con HTML 5.

Oscar Herrera - RedesSociales

Llevo buscando mucho tiempo la diferencia entre FrontEnd y BackEnd no me quedaba realmente clara hasta que encontré este artículo que me pareció bastante interesante.

http://www.oscarherrera.info/influenciasocial/suscribete/minicurso/pagina3.html