INTRODUCCIoN al desarrollo web

 

Que es el desarrollo web?

Desarrollo web es simplemente la combinación entre 

"front-end" y "back-end", la colaboración entre estas tecnologías para mostrar y generar contenido en internet.


Simple! verdad?


QUE ES LA W3C?

W3C, abreviatura de World Wide Web Consortium, es un consorcio internacional encargado de regular y producir stand-ares,recomendaciones para la World Wide Web
(o internet y punto!)

http://www.w3.org/   

 

Mitos y leyendas sobre la w3c

Cuenta la leyenda que la W3C es un grupo de borrachos dedicados a regular internet, mejorando o frenando el progreso de la web

 

DEBIDO A ESTA RAZON..

 

Y OJO! ES MUY IMPORTANTE..

No sigas al PIE DE LA LETRA las recomendaciones de la W3C, parte de las recomendaciones son demasiado estrictas y no se aplican al mundo real cuando uno se encuentra desarrollando..

Si tratas de seguir al pie de la letra todas estas recomendaciones podrías terminar..



 

FRONT-END


Front-end

Hablar de front-end es sin duda hablar de HTML, CSS, HTML5, CSS3, Javascript, Jquery Y MAS...

Hablar y aplicar front-end se refiere a maquetar la estructura semantica del contenido (HTML), codificar el diseño de la pagina en hojas de estilo (CSS) y agregar interaccion con el usuario (Javascript)
 

EN LA EPOCA ACTUAL LOS FRONT-ENDS TIENEN HTML5 Y CSS3

 

HTML5

Con HTML5 desde el front-end es posible hacer geolocalizacion, dibujo vectorial (SVG) , dibujo a nivel de bitmaps (CANVAS), guardar datos en el disco del usuario (LocalStorage y SessionStorage), insertar audio y video sin la necesidad de plug-in's como el viejo y mitico FLASH 

CSS3

Con CSS3, se pueden crear diseños altamente complejos y hermosos sin la necesidad sin la necesidad de imagenes cortadas o demasiado diseño gráfico, solo usando CODIGO.


Bordes redondeados, sombras, degradados, fondos múltiples, transformaciones, transiciones, animaciones, tipografía.. 

en fin CSS3 es hermoso!

Javascript

El lenguaje de programación para la web, javascript y sus diversos frameworks y librerias añaden el toque de interactividad y conexion al servidor fluidamente.


Con javascript es posible comunicarse con el back-end y la base de datos sin recargar la pagina (si, ese momento incomodo en el que estas en una web, presionas un botón para realizar una tarea sencilla y tienes que esperar que recarge toda la pagina.. -.-' AGARREN A ESE PROGRAMADOR Y LLEVENLO A LA HOGUERA! ) usando AJAX o WebSockets, recibir esos datos y cambiar el diseño del sitio. . Maravilloso!

  

BACK-END


BACK-END

El clasico programador tiende a ser un back-end, back-end en pocas palabras es la labor que compone el acceso a datos.. generar, modificar y eliminar informacion, gestionar la seguridad, crear informacion en base a ciertos parametros.


El back-end se encarga de implementar base de datos (MySql, Postgres, SQL Server, MongoDB), luego atraves de un lenguaje (PHP, JAVA, PYTHON) realizamos la conexion a la base de datos para recibir, procesar y enviar la informacion devuelta al navegador del usuario.

 

CHARLEMOS UN POCO..

 

Lenguajes de programacion


BASES DE DATOS




FUNCIONAMIENTO GENERAL DE UNA WEB

Toda esta bella historia comienza cuando un usuario atraves de su navegador web favorito (Chrome por favor!) realiza una petición (request) a un servidor mediante las famosas URL, el servidor procesa esta petición realizando una serie de tareas (conexión a base de datos, validaciones, seguridad, etc) y al final retorna una respuesta (response) al usuario (específicamente al navegador.. nuevamente Chrome por favor!) para representar la información.

No entendiste?

expliquemos un poco mas..


VERBOS HTTP

La peticiones (request) que envían los navegadores a los servidor se realizan mediante un verbo http..


Los mas usados:

  • GET : Petición para obtener información del servidor
  • POST: Petición para agregar información al servidor

Existen mas.. investiga un poco!

(PUT, DELETE..)

CODIGOS HTTP DE RETORNO

  • 200 : Todo esta perfecto
  • 201 : Nuevos cambios
  • 3[xx] : Redireccion
  • 4[xx] : Errores del cliente
  • 400: No tengo ni idea de lo que pediste!
  • 401: Hey! no tienes permiso de hacer esto!
  • 404: No se encuentra
  • 5[xx] :  Error del servidor

EL DESARROLLO WEB MODERNO IMPLICA

  • Diseño de prototipos - mockups (diagramar la interfaz y lo que se tiene pensado realizar
  • Definir cual sera la estructura de la informacion
  • Realizar el front-end de la web (puede trabajar en paralelo con el back-end)
  • Realizar el back-end de la aplicacion (puede trabajar en paralelo con el front-end)
  • Pruebas

Y SOBRE TODO IMPLICA..

DEJAR DE PENSAR QUE UNA SOLA PERSONA PUEDE HACER TODOS ESTOS TRABAJOS

NO A LOS TODISTAS!

SACAR UN PRODUCTO WEB MODERNO IMPLICA TRABAJO EN EQUIPO, GENTE ESPECIALIZADA EN CADA ÁREA DEL DESARROLLO PARA UN MAYOR RENDIMIENTO..


 

NO COGER LO VIEJO Y PARCHARLO!

NOOOO!!

TRABAJO EN EQUIPO

  • Diseñador : Para el diseño de los prototipos, creacion de logos e imagenes personalizadas
  • Front-end : Para llevar el prototipo a la realidad
  • Back-end : Para estructura el manejo de la informacion, la seguridad y las validaciones
  • Implementador de servidores : Para implementar o hacer el deploy del producto en un servidor real. 

PRINCIPIOS DEL DESARROLLO WEB

Nuestro producto final debe ser:

  • Bonito
  • Funcional
  • Seguro
  • Escalable
 

DISCIPLINA

PASIÓN

DEDICACION

 

NO SERAS NADIE SI NO APLICAS ESTAS PALABRAS EN TU VIDA

NO PIENSES QUE TIENES TODO EL TIEMPO DEL MUNDO.. ESE ES EL ERROR MAS GRANDE QUE PUEDES COMETER EN TU VIDA

EMPIEZA AHORA, EMPIEZA YA!

 

ÚNETE AL CAMBIO.. 

SE PARTE DEL HERMOSO MUNDO DE LA WEB

 

FIN


Pero VOLVERE ¬¬!

Desarrollo web

By Boris Matos Morillo

Desarrollo web

Presentacion de la charla TAM de desarrollo web

  • 505