Diseño y Programacion Web – Clase 1 – Introduccion a Web

programacion web html js cssprogramacion web html js css

empezar

Muchos tutoriales cometen el error de arrancar sus articulos basandose en toneladas de teoria que termina rellenando una clase y no le aporta demasiado al usuario. En este caso mi idea es ser lo mas practico posible para que nos pongamos manos a la obra en cuestion de minutos.

Division fundamental entre Programar y Diseñar Webs

Si bien en este tutorial enseñaremos las dos cosas, es importante saber que si bien estan integrados, no son lo mismo, ni una es mejor que la otra.

El diseño web abarca todo lo que es maquetacion y previo diseño del template (plantilla) en programas como Illustrator o Photoshop. Esto lo puede cubrir tanto un diseñador grafico, un ilustrador o directamente un diseñador web.

Luego esta la parte de programación web. Es muy sencillo diferenciarlo, y es donde mas vamos a hacer incapie. El programador web tambien maqueta. Usa HTML y CSS para maquetar sus sitios web. Luego nos meteremos a fondo en el tema. Por ahora es importante entender que un programador web suele utilizar lenguajes de programación tales como Ruby, Perl, PHP, Java entre otros.

Web Core

Inicialmente hay que empezar por entender el core de la web. Tenemos dos lados fundamentales: El cliente y servidor. Nosotros vamos a estar manejando los dos constantemente. Cuando nos conectamos a un sitio web entramos como clientes. Podemos ver el codigo html, javascript y css porque son lenguajes que nuestro navegador interpreta. Pero cuando submitimos un formulario, y este viaja con nuestros datos, estamos enviandolos al servidor. De ese lado se ocupan lenguajes como PHP, Ruby, Java entre otros.

La Web tiene 3 capas: Vista, Servidor de Aplicaciones y Base de datos. Siguiendo el ejemplo anterior, nosotros como clientes estamos usando la vista, es la unica capa que vemos y accedemos. Luego cuando enviamos esos datos, el servidor de aplicaciones se encarga de procesar esos datos. Y en el caso de que exista, tenemos una capa base de datos donde se consultan y procesan los mismos. Esto es solo una introduccion; en las proximas clases abordaremos a fondo cada tema. Pero es importante tener una vision global de lo que estamos tratando.

Con que programamos?

Primero que nada debemos entender que web se interpreta desde el lado UI, y se puede compilar desde el backend.  Se puede empaquetar como gzip y en css se puede transformar una imagen en lenguaje de maquina. Se programa un codigo que el navegador interpreta. Entonces eso significa que podemos usar hasta un bloc de notas para programar. Igualmente les paso un listado de los IDEs que he usado para programar web y me gustaron:

Sublime Text 2: Excelente, amado por todo programador que conozca. Tiene autocompletado de codigo, muy buen syntax highlighter, multiedicion de caracteres y entre otras cosas se puede crear una grid para ver varios archivos al mismo tiempo.

Notepad++: Lo use durante un tiempo y fue una buena experiencia. Es un competidor del Sublime Text, asi que es una cuestion de gustos personales elegir entre uno u otro.

Eclipse: Muchos no confian en Eclipse, y tienen razon. A veces sus cuelgues son drasticos, y su gestion con los proyectos muere de vez en cuando. Sin embargo, al menos programando para PHP, es bastante funcional. Una de las cosas que me gusta es que tiene linkeo a metodos, cosa que por ahi los dos anteriores no podrian hacer sin algun plugin instalado.

Yo en lo personal, uso Sublime Text y me va bien.

En las proximas clases empezaremos a tocar codigo, vayan preparando el entorno y estudiando un poco de teoria del Core de Web.

Be the first to comment on "Diseño y Programacion Web – Clase 1 – Introduccion a Web"

Leave a comment

Your email address will not be published.


*