miércoles, 19 de octubre de 2011

¿Como me inicio en el diseño, desarrollo y programación Web?

Este nuevo post, lo hago con la única intención de guiar aquellas personas que desean iniciarse en el desarrollo web y que por tal motivo no tienen ningún o poco conocimiento en esta área, dejando así un gran vacío, del cual muchos expertos quieren aprovecharse.


No me declaro una autoridad en cuanto a tecnologías web, pero puedo dar a conocer unos cuantos pasos iniciales que deben tenerse en cuenta, para que con el tiempo, quienes estén interesados, vayan adquiriendo conocimientos que les sirvan tanto para defenderse como para corregir a aquellos que hacen gala de saber mucho, y aunque así sea, generalmente confunden términos.  


Tampoco estoy diciendo que se pongan a pelear con cualquiera que sepa del tema, pero si que traten por medio de la razón, indicarles que están mal y explicarles por que, además mi objetivo principal es el de enseñarles el camino que, según veo, debe tomarse para aprender lo necesario.

También aclaro que este post, surge como ayuda para responder esta pregunta que es muy común en el sitio de Yahoo! Respuestas de España, en el cual encontramos preguntas hechas por diferentes usuarios, relacionadas con todas las áreas del conocimiento.  Y una de las características que ofrece Y! Respuestas, es el hecho de no poder colocar más de 10 enlaces a páginas externas, y por obvias razones de comodidad, limitar el tamaño de las respuestas escritas.

Imagen tomada de:
MalKaL!na.CoM
Para empezar, tenemos el lenguaje de creación de páginas web básicas o estáticas, es decir HTML, que no es propiamente un lenguaje de programación, es como su nombre lo dice, un lenguaje de marcado.  El acrónimo HTML viene del ingles HyperText Markup Language, lo que quiere decir, Lenguaje de marcado de HiperTexto, el cual se basa en SGML (Standard Generalized Markup Language) , como todos los lenguajes de marcado.


Desde hace mucho tiempo, la organización encargada de mantener, revisar, mejorar y publicar, las reglas básicas y/o estándares de la web, recae en el Consorcio de la WWW, mejor conocimo como w3c.  El w3c publica estos estándares con base en los RFC's (Request for Comments, del inglés, petición de comentarios), que son documentos colaborativos que proponen nuevos protocolos o mejoras para los ya existentes.



HTML, es definido como HipertTexto, lo cual es muy importante entenderlo, por que a diferencia del texto normal, su principal y más antigua característica es que permite conectar diferentes documentos por medio de enlaces (links en ingles), agregar imágenes y otros elementos.  Es la base de todo desarrollo web.





PRIMEROS PASOS

Recomendación Previa: Para el desarrollo en cualquier lenguaje web, existen IDE (Integrated Development Environment, Entorno de desarrollo Integrado), pero vienen con muchas ayudas como sugerencias de código, que mal acostumbran a las personas, y lo cual es nocivo para principiantes, ya que al confiar demasiado en estas herramientas, en el momento que no cuenten con ellas, no pueden hacer nada, por eso, recomiendo que se utilice el notepad++, el vim o el emacs si se utiliza linux:




Página de Notepad++ 

Para iniciar el estudio de HTML, recomiendo los siguientes sitios:

Aunque pueden encontrar muchos otros, estos son los que yo he utilizado para aprender.

Alguna persona que lea esto, y conozca del tema, seguro se preguntará por que no doy un enlace al nuevo standard HTML5, y sencillamente lo hago, por que no creo que sea justo para los principiantes, leer algo nuevo que solo los va a confundir, ya que al conocer el standard antiguo y después estudiar el actual, podrán entender cuales son los cambios que se hicieron y por qué se hicieron.

Luego de usar html plano, los desarrolladores se dieron cuenta que era necesario aplicarle algo de estilo para que no se viera tan simple, y utilizaban el atributo "style" para darle color y formato a sus páginas, este estilo en línea, tuvo mejoras hasta el momento en que se creó CSS (cascade style sheet, hojas de estilo en cascada), permitiendo añadir estilo a las páginas HTML, evitando el modo intrusivo o en línea (inline), del atributo "style".  


Tomada de:
posicionamiento seo web
Los diseñadores Gráficos Web se especializan, y resalto gráficos, por que ellos ahondan en temas como maquetación web, teoría del color, y en especial CSS; se especializan en resolver un problema que tiene que ver con los motores de renderizado de los distintos navegadores, en el cual el modelo de caja se ve muy diferente en cada navegador (Mozilla Firefox, Google Chrome, Opera, Safari e Internet "virus" Explorer), siendo de todos estos Virus Explorer el más rebelde de todos, ya que tiene su propia manera de hacer las cosas, tanto en css como con javascript.  


Con el tiempo, quienes se interesan por este lado del diseño web, aprenden a desarrollar sus propios métodos y herramientas.  Para aprender sobre CSS dejo los siguientes enlaces:

Css Ya

Introducción a CSS
Guía breve de CSS
Especificación de CSS2
Tutorial de CSS en w3Schools (en Inglés)
Css Avanzado

Es cierto que css también tiene varias versiones o especificaciones, pero el problema con esto es que aunque algunos desarrolladores de los motores de renderizado, tratan de cumplir con estás, soportando todos los atributos, algunas veces se quedan cortos, y por eso,expertos como los que se pueden encontrar en CSS Zen Garden, recomiendan utilizar solo los atributos que sean compatibles con todos los navegadores de modo que no se tengan que utilizar trucos indeseados que no dejen validar nuestras páginas web.



En algunos casos van a encontrar métodos para trabajar con CSS tanto en Internet Virus Explorer como en otros navegadores, pero lo recomendado y mejores consejos se pueden encontrar en Quirks Mode, lo único relativamente malo es que está en ingles, para quienes aún no dominan medianamente este idioma.  En Quirksmode.org van a encontrar muchos consejos e información como compatibilidad de elementos y/o atributos en los diferentes navegadores.


Hay que tener cuenta que con el tiempo se encuentran características que solo funcionan con un navegador específico, pero que a su vez, los otros navegadores implementan con algunos cambios o variaciones, como es el caso de los bordes redondeados.


Compatibilidad Css3
Comparación en wikipedia

Luego da haber aprendido lo básico de estos dos lenguajes, que como ya he dicho, son de marcado y diseño, no son lenguajes de programación, se puede dar un vistazo a XHTML,lenguaje HTML extendido, el cual define nuevas reglas para escribir el código HTML.  XHTML (unión de HTML con XML) no define reglas para el diseño visual web, pero aporta muchas mejoras que hacen de la maquetación web, una tarea más entendible, organizada y fácil de interpretar en motores web.



Guías de XHTML:
Introducción a XHTML
Guía breve de XHTML
Manual XHTML
XHTML Básico

Una vez se termina el estudio básico de la web estática, se pude continuar con lenguajes de guión (scripts, lenguajes interpretados, que no se compilan ya que el intérprete del navegador se encarga de traducir las ordenes escritas).  El más popular de todos los lenguajes de guión, que funcionan en el lado cliente, es decir, interpretados por los navegadores, es Javascript, el cual nos permite manipular algunos elementos básicos del navegador.



A su vez, es necesario examinar características que están ocultas detrás de los elementos HTML, como botones, cuadros de texto, párrafos, encabezados y demás, para descubrir las capacidades dinámicas de estos.  El DOM (Document Object Model), es decir el Modelo de Objetos del Documento, nos ofrece una interfaz para interactuar con los elementos HTML. DOM es una interfaz, que no tiene preferencia por lenguajes de script del lado del cliente, es decir, se supone que cualquiera puede tener acceso a su funcionalidad, pero es más fácil conseguir ejemplos, soporte y ayuda cuando se trabaja con Javascript, es por esto que casi no se nota la diferencia, pero es bueno conocerla, para no cometer errores de definición.  Aclaro que en muchos tutoriales de javascript, se ve el uso del DOM y no se explica que es este, lo mismo sucede con el muy desconocido BOM (Browser Object Model)


Tutoriales de Javascript:
Javascript Ya
Introducción a Javascript

Manual de Javascript
Tutorial de Javascript en w3Schools (en inglés)
Javascript en MDN (Mozilla Development Network)

Tutoriales DOM:

DOM en MDN
Tutorial HtmlDOM en w3Schools (en inglés)
W3c DOM (En Inglés)
DOM + Javascript



También hay un tutorial DOM para xml que enseñan a manipular documentos xml apropiadamente:
Manual para principiantes XML DOM
Tutorial XmlDOM en w3Schools (en inglés)

Al igual que CSS, con Javascript, el Internet Virus Explorer tiene algunas diferencias respecto a otros navegadores, pero son básicas y generalmente se encuentran soluciones rápidas y sencillas descritas en estos tutoriales.



PASO SIGUIENTE
INTERACCION CON SERVIDORES WEB

Los sistemas de información han sido una herramienta muy importante en el ambiente laboral, empresarial e industrial, y por lo tanto, han evolucionado gracias a los sistemas computacionales.  Un ejemplo de esto son las bases de datos de una empresa que se almacenan en computadores designados para esta tarea, es decir del tipo servidor, y que cuentan con herramientas de software especialmente diseñadas para esto, como lo son los Sistemas de Gestión de base de datos (DBMS).

Siempre me gusta recalcar, que una base de datos, no va ligada a los computadores, es decir, un conjunto de documentos impresos, fotos, hasta medios de sonido como discos compactos, o cassettes (en base de datos de antaño), ordenados y almacenados para su uso posterior, se considera una base de datos; el hecho de poder utilizar equipos computacionales para almacenar y gestionarlas, es irrelevante con respecto a esta definición.


La posibilidad de interactuar a corta, mediana y larga distancia con servidores web y sus páginas en HTML, hizo posible la aparición de lenguajes de programación que se utilizan como scripts del lado del servidor, para darle la posibilidad al usuario de generar peticiones  hacia el servidor, el cual responde, de acuerdo a las funciones que hallan sido programadas en el script, y teniendo en cuenta los privilegios del usuario y otras políticas.

Con el crecimiento abismal de internet, los empresarios han sido capaz de llevar su administración de información, al siguiente nivel, ya que es posible acceder a sus bases de datos vía internet, y es aquí donde entran en juego ambas tecnologías como lo son los DBMS y los scripts de lado del servidor.

El proceso básicamente es el siguiente:

1. El usuario genera una petición al servidor, solicitando la página de inicio (index).

2. El servidor responde, enviándole la página principal del portal
3. El usuario ingresa los datos comunes como nombre o id, y contraseña (password), generando así una solicitud para ingresar al sistema
4. El servidor recibe estos datos, los filtra y compara, para luego dejar ingresar al usuario a un área determinada, según los privilegios que este tenga, y le muestra contenido al que solo este tipo de usuario pueda contener. En caso que estos datos no puedan ser confirmados, se le informa la usuario que la información de inicio de sesión que suministró no es la correcta.


Este es un ejemplo básico de inicio de sesión en sitios como hotmail, yahoomail, facebook, twitter, y otros.

Aunque no se ve reflejado, el servidor trabaja internamente con una sistema gestor de base de datos, el cual le permite acceder a los datos guardados en la base de datos de usuarios u otras.  La información ingresada por el usuario, es filtrada, validada y verificada, proceso que genera un resultado, o respuesta, la cual puede visualizar el usuario en el navegador web.



Aunque lo he explicado muy superficialmente, espero que se entienda, ya que este tipo de procesos no se encuentra al alcance de este artículo, por lo cual, pronto haré uno en el cual explique a fondo estas operaciones de interacción cliente-servidor.


Actualmente solo hay dos lenguajes reconocidos, robustos y 100% funcionales para el desarrollo web de páginas dinámicas y que permita interacción con el servidor, estos lenguajes son PHP y ASP (el cual fué agregado a la suite visual de microsoft y ahora es conocido como ASP.NET). 


Se me olvidaba mencionar JSP, pero ninguno de mis amigos ha tenido buenas experiencias programando este lenguaje, y yo como usuario de plataformas realizadas en este lenguajes, no creo que todavía tenga la fuerza necesaria para competir con PHP, y si la tiene, se necesita mucho tiempo para aprender a utilizarlo y además realizar proyectos funcionales es casi una guerra :S.

Debido a mi simpatía por el software libre, obviamente les recomiendo programar en php, para lo cual, les dejo los siguientes Enlaces:

Instalación de servidor y servicios web:

Tomada de:
php.net
En windows (Xampp)
En Linux
En Linux (en ingles)



Manuales de PHP:
Manual Oficial en Español
PHP Ya
Tutorial de php en w3Schools (En Inglés)



Como les dije, una de las capacidades principales de PHP, es la de trabajar junto con DBMS, los cuales para nuestra comodidad, funcionan con el lenguaje estructurado de consultas (SQL, Structured Query Language), haciendo que entre todos tengan muchas similitudes.  


Php puede interactuar con diferentes DBMS como PostgreSQL, Oracle, Cubrid, Interbase/Firebird, MySql, MS SQL, entre otras gracias a los proveedores específicos de extensiones de bases de datos, pero debido a la facilidad de integración, muchos proveedores de servicios de internet y empresas de Alojamiento Web (hosting), utilizan mucho las extensiones de MySql, MySqli, PostreSQL y Oracle.

Generalmente los manuales que se encuentran en línea, nos indican como realizar conexion con MySql, ya que muchos paquetes de servidores web como el xamp, wampserver, lamp, traen esta aplicación, lo cual no quiere decir que se experimente con otra.



Es cuestión de decidirse, pero algo que si debe hacerse antes de iniciar a programar php junto con cualquier dbms, es aprender las bases del diseño de bases de datos, y aplicarlas con el gestor de nuestra selección.  Otra vez, el diseño de base de datos está fuera del alcance de este artículo, pero no por eso voy a dejar de ofrecerles enlaces a recursos interesantes para que aprendan:

Modelo Entidad-Relación

Modelo E-R en desarrollo web
Manuales de bases de datos en la web del programador
Normalización de base de datos
Diccionario de datos



Una vez se aprenden estos conceptos básicos, que con el tiempo se van mejorando, se puede escoger un DBMS para aplicar lo aprendido.  Sin importar el que sea, solo busquen tutoriales y recursos en internet, para el que escojan ya sea MySql, PostreSql, Firebird, pero antes cerciórense que el que escojan tenga buen soporte para php y puedan integrarlo fácilmente.


Finalmente, ya llegados a este punto y habiendo experimentado con html, javascript y php junto con un dbms, van a encontrar que todavía hace falta algo, como ver fluidez y ciertas características que otras web tienen, o algo que se ve muy comúnmente, la recarga completa de una página cuando se envía un formulario.


Para lograr llevar al siguiente nivel, las comunicaciones entre el cliente y el servidor, donde el cliente no note tanto estos momentos en blanco del navegador, y la experiencia sea más fluida como cuando se cargan las búsquedas en google, hay que utilizar una nueva tecnología, conocida como Ajax.


Ajax es la unión de varios lenguajes y la aparación de un nuevo concepto, y significa, Asynchronous Javascript and XML.  El núcleo de Ajax es xmlHttpRequest, que como pronto averiguarán fué un invento de microsoft que pronto fué acogido por el resto de desarrolladores de otras casas de software interesadas en esta tecnología.


Otro concepto que aparece en el escenario es JSON (Javascript Object Notation), no tan complicado de entender, pero que si toma algo de tiempo, lo cual alegremente, se ha utilizado en el aprendizaje de Javascript, o sea que en el momento de utilizarlo junto con Ajax, ya se domina en su mayoría, pero sin conocerse bien el concepto.


Básicamente ajax, nos permite realizar otras operaciones, mientras retorna la petición del servidor, con la información solicitada, sin tener que esperar a que esta llegue para seguir utilizando el sitio web, en algunos casos.

Aquí es donde entran en juego con mayor fuerza, lo que es el DOM, BOM y los eventos. Dejo enlaces para el estudio de todos estos temas:

Introducción a Ajax (Este contiene referencias a DOM y BOM)
Ajax Ya
El rincón de Ajax
Tutorial de Ajax en w3Schools (En ingles)
Tutorial de Json en w3Schools (En ingles)
Página oficial de JSON (En ingles)

Página oficial de JSON (En Español)
Artículo de JSON en anieto2k.com


Otra vez, les sugiero que se abstengan a utilizar IDE's Avanzados como Compozer, Eclipse, dreamweaver y otros, mientras aprenden lo básico. Y mucho menos se vayan atrever a utilizar frameworks (frameworks en ingles), por que estos aunque dan muchas facilidades, recogen mucho código y no se aprende mucho de los lenguajes nativos.



Uno de los conceptos de alta competitividad en mercados internacionales, señalan como eficiente a aquel programador que se puede defender con conocimientos básicos sin necesitar el uso de IDE's y frameworks, y que incluso no se traumatiza utilizando solo el bloc de notas para programar.  Generalmente es una prueba, pero siempre toca estar preparado.


En este artículo solo cubrí lo básico por que como sabrán al finalizar la mayoría de estudios de estos lenguajes, quedan faltando temas como protocolos de internet, seguridad de sitios web (un slideshare de seguridad), UML (Lenguaje Unificado de modelado) y paradigmas de programación.  Otros temas de interés los trato superficialmente en este artículo, que utilicé para responder en Yahoo! respuesta, y por lo tanto no lo he corregido, ni editado.

Algo que vale la pena mencionar es que vayan estudiando temas como seguridad de sitios web, y programación orientada a objetos (Aplicable a PHP y Javascript
), con el fin que a medida que avancen en estos temas básicos, puedan ir encontrando nuevas ventajas.


Finalmente, una recomendación para todos los interesados en aprender o mejorar su nivel de programación en tecnologías web, PREGUNTEN, pero no esperen que les HAGAN TODO.  Un lugar donde pueden encontrar personas dispuestas a ayudar y enseñar, además que cuentan con muchos recursos es en 

foros del web


Aprendan a utilizar ese foro, buscando antes de publicar su pregunta, y preguntando cosas entendibles, y en el mejor de los casos, también mostrando el código con el que tengan problema.  Para conocer las reglas del foro antes de publicar una pregunta, pueden leer este tema sobre las políticas del foro.


Otros lugares que pueden utilizar para aprender algunas cosas, es en


Cristalab
Desarrollo web
SENA Virtual: Cursos de tecnologías de la información



El sena es una institución colombiana encargada de la capacitación y ayuda aprendices en distintas áreas, y aunque sus cursos virtuales son cortos, no importa de que nacionalidad sea la persona, cuenta con un invaluable recurso para aprender, además que estos cursos virtuales, cuentan con tutores de toda el área colombiana, dispuestos a ayudar a sus aprendices.


Hasta la próxima.


Nota:  Este post, está sujeto a cambios y actualizaciones de acuerdo a sugerencias de lectores y/o revisiones que yo mismo haga.


Nota: Ninguno de los comentarios contenidos en artículo representan ideas, preferencias y/o opiniones de las personas que desarrollan y/o mantienen los sitios a los cuales he suministrado enlaces, ya que son propias del dueño de este blog.

No hay comentarios:

Publicar un comentario