Este post está orientado a personas que no saben nada de nada de desarrollo web ni de programación en general. Según mi experiencia personal, cuando uno empieza a aprender algo lo más importante es tener una visión general, para luego elegir mejor. ¿A quién no le ha pasado que cada vez que hace algo una persona con más conocimiento le explica que eso no se hace así, que ya es viejo, que ahora hay algo mejor, etcétera? Evidentemente todo se trata de investigar, pero a veces entender el funcionamiento general de algo es lo más difícil y aprender cosas particulares resulta más fácil. El contenido es propio, lo redacté yo y lo publiqué en mi blog, aclaro para los desconfiados 
Espero que les sea de utilidad!
El funcionamiento de un sitio web se basa en el modelo cliente-servidor. La arquitectura cliente-servidor es un modelo en el que un programa ejecutándose en un cliente realiza peticiones de datos a un servidor, que le responde. Un servidor web, físicamente, es una computadora conectada constantemente a Internet, y allí se alberga el sitio web que luego es solicitado por los clientes web. Los clientes web son los navegadores (como Chrome o Mozilla Firefox) de los usuarios que quieren visitar el sitio.
La siguiente imagen explica muy simplificadamente el funcionamiento de un modelo cliente-servidor web, pasando por alto muchos detalles que exceden a la temática de este post.
Cuando un usuario escribe una dirección (http://google.com/, por ejemplo) en el navegador, éste realiza una petición al servidor correspondiente. El servidor web, al ser una computadora casi como cualquier otra, tiene una estructura de directorios y archivos. Algo que es muy importante que comprendas es que el servidor web le responderá al cliente con el archivo que esté en el path correspondiente a lo que hay escrito después de la dirección que identifica al dominio. Si después del dominio no hay nada, entonces el servidor buscará el archivo index (index.php, index.htm, index.jsp, index.aspx, etcétera).
Igual, hay excepciones, porque en general los desarrolladores personalizamos las direcciones para que sean más amigables con el usuario.
ACLARACIÓN: Asumo que a medida que leas el post irás visitando al menos los links indicados, ya que los mismos constituyen conocimientos previos para poder continuar.
1. Contratar un servidor web
Como ya sabemos, para poder desarrollar un sitio necesitás un lugar donde hostearlo, es decir, un servidor web. El alojamiento web se alquila mensualmente, hay varios proveedores en Argentina, podés encontrarlos buscando en Google. Hay servidores gratuitos, pero si pretendés desarrollar un sitio profesional debés estar realmente convencido de que funcionará continuamente.
También existe la opción de instalar un servidor web local, es decir en tu propia computadora, lo que será útil para hacer pruebas, pero no te brindará la posibilidad de que otros usuarios ingresen a tu sitio. Hay muchos tutoriales en internet sobre cómo hacer eso, por ejemplo este para Windows y este para Ubuntu.
2. Registrar un dominio
El siguiente paso para que funcione un sitio web es registrar un dominio. Si querés registrar tu dominio gratuito .com.ar deberías dirigirte a NIC Argentina, institución que regula las asignaciones de dominios en nuestro país. Si querés registrar un dominio internacional, como .com o .net, deberías dirigirte a una empresa que venda dominios internacionales, como Dattatec, que los ofrece a $54 pesos argentinos por año. Asegurate de que el nombre de dominio elegido sea el más adecuado para tu sitio y sobre todo que sea fácil de recordar.
3. Aprender HTML
HTML es un lenguaje de markup (NO un lenguaje de programación) que permite describir hipertexto, es decir, texto presentado de forma estructurada, con enlaces que conducen a otros documentos relacionados y elementos multimedia, entre otras cosas.
HTML deriva de XML (eXtensible Markup Language), un lenguaje que permite estructurar información a través de un sistema de marcas y contenido.
Los clientes web interpretan el HTML que reciben del servidor cuando éste responde a su petición.
Las dos versiones utilizadas actualmente son HTML4 y la reciente HTML5. HTML5 incorpora algunas reglas que sobreescriben a otras de HTML4, por lo que te recomiendo que investigues sobre la nueva versión además de aprender HTML básico, para que tus sitios vayan a la par de los nuevos estándares.
Muchos tutoriales de HTML en internet se limitan a listar la inmensa cantidad de tags que el lenguaje posee, lo cual probablemente provoque que sientas que el desarrollo web es de lo más aburrido. Lo más importante, y esto no aplica sólo para HTML, es que sepas cómo funciona y qué te permite hacer la tecnología con la que vas a trabajar. Si recordás o no los nombres de sus funciones, librerías, tags y propiedades tiene poca importancia, porque todo eso lo aprenderás a medida que lo utilices. Y mientras no lo aprendas, podrás recurrir a la documentación.
Quizás este sería un buen comienzo.
4. Aprender CSS
CSS es un lenguaje usado para definir hojas de estilo en un documento estructurado escrito en HTML. Al igual que HTML, recientemente se lanzó una nueva versión, CSS3, que incorpora nuevas posibilidades para la definición de estilos y depreca otras utilizadas en CSS2. El funcionamiento de CSS es muy simple, se basa en la definición de selectores de elementos HTML (se pueden seleccionar por casi cualquiera de sus atributos) y la asignación de estilos (color de texto, tipografía, color de fondo, borde, margen, ancho, alto, posición, alineación del texto, etcétera) a cada uno de ellos. Si bien HTML permite definir algunos estilos y además embeber el CSS en el atributo style, es altamente recomendable separar la hoja de estilos de los archivos HTML. Analizaremos por qué unos items más adelante. Una vez comprendido esto, queda investigar qué posibilidades ofrece CSS, podés hacerlo echando un vistazo a W3C Schools.
También te invito a que eches un vistazo a Bootstrap.
5. Elegir un framework de cliente (opcional)
Lo que hemos visto hasta ahora permite que el usuario vea el contenido que se quiere mostrar, pero la interacción que el mismo permite es mínima, limitándose a clicks en links y botones. Existe un lenguaje de programación interpretado, llamado JavaScript, que permite dinamismo en el cliente de una aplicación web. Dinamismo significa interacción entre el usuario y el sitio web. El intérprete de JavaScript forma parte de casi todos los navegadores modernos, ya que este lenguaje se ejecuta en el cliente y no en el servidor. Con JavaScript pueden manejarse eventos, que representan acciones que el usuario realiza, como clickear un link o pasar el mouse sobre una imagen. Una vez que hayas investigado más sobre JavaScript y conozcas más o menos cómo funciona (lo cual no te parecerá muy simpático), considerarás la posibilidad de utilizar un framework que hará más cómodo tu trabajo con el lenguaje.
El framework más conocido (y el que personalmente recomiendo) para JavaScript se llama jQuery, pero también existen otros como Prototype y Yahoo UI.
6. Elegir un lenguaje de servidor
Ya contamos con un sitio que muestra contenido en forma dinámica y más o menos interactiva, pero éste se limita simplemente a mostrar contenido. Ahora supongamos que queremos que este sitio tenga alguna utilidad, como por ejemplo permitir a los usuarios dejar su opinión y luego mostrarlas todas y además mostrar cuántas opiniones hemos recibido en total. Creamos un formulario HTML, le pedimos al usuario que nos cuente su opinión y... ¿Dónde almacenamos la información que el usuario nos brindó? Lógicamente debemos almacenarla en nuestro servidor. Cuando un usuario quiera ver las opiniones de los demás debemos recurrir al lugar de nuestro servidor donde hemos almacenado las opiniones. En general este lugar es una base de datos (si no sabés lo que es, te recomiendo que lo busques en Google), aunque también podrían ser archivos de texto.
Ahora bien, necesitamos algún lenguaje de programación que se ejecute/compile en el servidor y que se encargue de recopilar toda esta información, contar la cantidad de comentarios que se han dejado y le envíe toda esta información al cliente. Este tipo de lenguajes se conocen como lenguajes de servidor. Hay muchos, como PHP, Java, Python, ASP.NET y PERL, podés elegir el que te resulte más cómodo, mi recomendación es que comiences con PHP.
El código PHP puede embeberse en los documentos HTML. Cuando el cliente pida el archivo HTML, el servidor ejecutará el código PHP contenido entre las tags y lo reemplazará por el contenido HTML que corresponda. Una vez hecho esto, enviará el archivo conteniendo HTML puro (y JavaScript) al cliente. El cliente nunca se enterará de que el HTML que recibió fue producto de un script PHP en el servidor, porque PHP es un lenguaje de servidor.
7. Elegir un motor de bases de datos
Supongamos que ya sabés lo que es una base de datos, porque ya lo deberías haber leído en el item anterior. Existen distintos motores de bases de datos, como MySQL, Oracle y SQL Server. MySQL es el que mejor trabaja con PHP, es gratuito, el más utilizado en bases de datos pequeñas y medianas y viene en WAMP (aplicación de servidor que quizás instalaste en tu computadora en el punto 1), así que lo recomiendo ampliamente. MySQL es un motor de bases de datos que utiliza SQL, un lenguaje que permite realizar consultas a la base de datos. Podrías comenzar leyendo este tutorial. Una vez que sepas como realizar consultas a una base de datos, deberías también saber que desde PHP podés realizar consultas utilizando la función mysql_query, previamente establecida la conexión a la base de datos.
8. Definir cómo se establecerá la comunicación entre el cliente y el servidor
Un evento realizado en el cliente (por ejemplo un click) podría desencadenar una conexión con el servidor donde se requiera determinada información. Como quien se encargará de procesar y enviar esta información es el servidor, y cuando el HTML llega al cliente ya el lenguaje de servidor ha realizado todo su trabajo, para poder visualizar esta información en el cliente es necesario volver a cargar la página, lo que suele resultar incómodo para el usuario.
Existe una alternativa a esta situación y consiste en utilizar AJAX (Asynchronous JavaScript And XML), técnica que permite realizar un pedido al servidor y obtener una respuesta de éste sin tener que recargar la página, utilizando JavaScript, claro. Si leés un poco y comprendés como funciona, verás que realizar una request AJAX con jQuery resulta muy sencillo y conllevará a grandes beneficios para la interactividad de tu sitio.
Cuando termines de leer este post y quieras dejar un comentario, verás que será mostrado inmediatamente debajo del formulario para escribir. Cuando presionas el botón 'Enviar', el cliente realiza una request AJAX al servidor que inserta tu comentario en la base de datos y devuelve el contenido insertado, para luego agregarlo a la página utilizando JavaScript.
9. Tomar medidas de seguridad básicas
Existen diversos métodos que permiten vulnerar la seguridad de un sitio web, y la efectividad de los mismos depende de cuánto se haya preocupado el desarrollador por cubrir estos riesgos. Hay algunas cosas que deberías hacer:
- Cuando pidas a un usuario que ingrese información en un formulario, por ejemplo su nombre, que luego formará parte de una consulta SQL, siempre debés 'escapar' el contenido que llegó desde el cliente una vez esté en el servidor. Existe una función en PHP llamada mysql_real_escape_string que permite realizar esto. Supogamos que solicitás a un usuario que ingrese su DNI. En el servidor PHP, al DNI que ingresó lo llamás $dni. Ahora realizarás una query del estilo:
- Si realizás un sitio donde los usuarios deban loguearse con un usuario y contraseña, deberías leer sobre MD5 y tokens de seguridad.
En este link encontrarás una lista de los ataques más frecuentes.
10. Definir tus objetivos y la estructura de tu sitio
Ahora que ya sabes cuáles son las posibilidades que ofrecen las tecnologías que elegiste, deberías definir qué es lo que querés lograr de ellas, haciendo bocetos del maquetado en papel y diagramas para la estructura de tus datos.
Además de hacer estos bocetos, deberías tomar algunas decisiones con respecto a tu aplicación web:
- Debés definir si tu aplicación va a ser más o menos dinámica o estática, teniendo en cuenta la interactividad que quieras generar entre el usuario y el sitio web. Por ejemplo, si estás interesado en lograr animaciones y respuestas a eventos de mouse o teclado, probablemente deberías usar jQuery para lograr una mejor experiencia de usuario.
- Es necesario definir la estructura de tu aplicación, es decir, cuáles van a ser las fuentes de información, dónde va a estar la lógica y dónde va a estar la vista (lo que el usuario visualice). Podés leer más sobre esto en este artículo de Wikipedia. Podrías decir, por ejemplo, que la fuente de información de tu sitio será una base de datos MySQL, que la lógica estará en PHP, que harás la interacción entre el cliente y el servidor con AJAX y jQuery y la vista con HTML5, CSS3 y jQuery. Te preguntarás, ¿y esto qué implica? Esto significa que el único lugar donde almacenarás datos es en la base de datos. Esto implica que si necesitás hacer cálculos o procesar datos, probablemente lo harás en PHP del lado del servidor. Esto significa que no usarás PHP embebido en el HTML ya que PHP no puede intervenir en la vista de tu sitio web, porque toda información que llegue desde PHP debe ser recibida por JavaScript utilizando AJAX. Obviamente este no es el único modelo posible.
11. Definir convenciones y prácticas (sé prolijo)
Este es el paso más importante, porque definirá si sos un desarrollador que se conforma con que algo funcione o uno que apunta a la excelencia, de esos que piensan que «Si algo está simplemente 'bien', no está bien todavía». Probablemente tu primer sitio no sea excelente, pero reflejará qué intención tenías cuando lo estabas desarrollando. Las cosas que voy a listar a continuación son aquellas que, según mi criterio, contribuyen a la excelencia de un desarrollador web:
- Si no querés que tu sitio esté formado por un archivo constituído por un conjunto de caracteres dispuestos aleatoriamente, sería importante que procures dividir tu código en todos los archivos que sean necesarios, cada uno de ellos correctamente nombrados y almacenados en directorios medianamente organizados. Por ejemplo, sería bueno que crees carpetas tales como 'scripts', 'images', 'css', 'ajax', etcétera.
- Procurá que los nombres de tus variables, IDs, clases y tablas en la base de datos respeten algún estándar. No importa mucho cuál, aunque sea uno tuyo propio, que al menos respeten uno. No llames a un ID 'registerFormulario', si todos tus nombres están en español deberías llamarlo 'formularioDeRegistro' y si están todos en inglés 'registerForm', o algo del estilo. Si elegiste 'registerForm' y ahora existen 2 formularios más, asignar una clase 'registerForm' para todos sería mucho más correcto que simplemente ponerles 'registerForm', 'registerForm1', 'registerForm2', y esto sería mejor que 'registerForm', 'RegisterForm', 'registerFORM'. Con prudencia es suficiente, siempre intentá hacer estas cosas de la mejor forma posible, y si es necesario cambiá aquellos nombres que hayan quedado fuera de los estándares que definiste previamente.
- Evitá usar cosas que están deprecadas, sobre todo si vas a usarlas para hacer algo para lo que no fueron creadas. En otras palabras, no uses tablas, frames o iframes al menos que sea estrictamente necesario.
- Mejor no uses Flash, y si lo usás, usalo menos de lo necesario (solamente para jueguitos y cosas que un humano no pueda hacer con JavaScript).
- No hagas el sitio más pesado de lo mínimo que podría pesar. No olvides que cada vez que un usuario ingrese a tu sitio deberá descargar todo el contenido que hayas subido a él, y que probablemente le molestará que uses más ancho de banda que el que merece lo que tenés para mostrar.
- No molestes al usuario haciendo cosas como cambiarle el tamaño de la ventana, abrir popus, crear sitios con exceso de publicidad, no permitirle volver atrás u obligarlo a escuchar una música horrible que no puede detener al menos que cierre la pestaña.
- Hacé que tu sitio sea lo más compatible posible, no olvides que será visitado por todo tipo de personas. Es importante definir qué tipo de personas excluirás de la posibilidad de visualizar tu sitio, y lo mejor para vos probablemente será que este grupo sea lo más reducido posible. Algunas cosas que deberías tener en cuenta para lograr una mayor compatibilidad son: la resolución de pantalla, la utilización de tecnologías no estándar, no olvidar que muchos usuarios se conectarán desde un teléfono y no olvidar que existe IE. Bueno, un poquito podrías olvidarlo, quizás sea bueno para tu salud mental olvidar que todavía existen personas que usan IE6.
- Si te enterás que tu sitio tiene un defecto, solucionalo de inmediato y de la mejor forma posible, o al menos intentá que el usuario no tenga que perder su tiempo luchando contra él hasta que poseas el tiempo necesario.
12. Algunos tips que deberías tener en cuenta para mejorar tu sitio
- Personalizar los paths. En uno de los ítems anteriores, mencioné que con frecuencia los desarrolladores modificamos el path original de una página para que sea más amigable con el usuario. Sería bueno que lo hagas, y si bien hay muchas formas, quizás para tu primer sitio lo más cómo sea modificar el archivo .htaccess. No es difícil, podés buscar en Google cómo hacerlo.
- No olvides que los buscadores le dan prioridad a las cabeceras o títulos a la hora de indexar, con prioridad decreciente desde h; hasta h6. Para que tu sitio esté bien diseñado conceptualmente, debes respetar la función de cada etiqueta HTML.
- Siempre que coloques un link externo en tu sitio, será conveniente que se abra en una pestaña nueva para que los usuarios no se vayan de tu sitio cuando no quieren hacerlo o cuando les da igual si irse o no. Esto podés hacerlo colocando el atributo target="blank" a las tags a.
- No olvides que excepto que especifiques una tag de descripción en el head, lo que aparecerá en Google como resumen de tu sitio será lo primero que se encuentre en él.
- Existe una herramienta muy útil en Google Chrome, podés usarla haciendo click con el botón derecho del mouse sobre casi cualquier parte de la página y clickeand en 'Inspeccionar elemento'. El monitor del chrome incluye muchas herramientas que te serán de increíble utilidad, ya que permite editar el HTML y los estilos CSS desde el mismo navegador, para que puedas hacer tests de diseño con una rapidez máxima, permite monitorear el tráfico de recursos utilizados por el sitio e incluye una consola de JavaScript, entre otras cosas.
13. Comenzar
Una vez que leiste todo los pasos anteriores, los tutoriales suficientes e hiciste una cantidad considerable de sitios de prueba básicos, estás en condiciones de emprender el desarrollo de tu sitio.
14. Google Analytics
Incluí Google Analytics. Así vas a conocer muchas estadísticas de tu sitio.
15. Validar W3C
Validá W3C. Si tengo que dar una opinión, diría que una vez que valides W3C, podés empezar a considerar los puntos siguientes. Si tu sitio no pasa el test, entonces hay algo que no estás usando bien.
16. Tests en distintas plataformas
Probá tu sitio en mútiples navegadores, diferentes resoluciones de pantalla y dispositivos móviles. No olvides que existe público muy diverso. Te dejo un link a las estadísticas de uso de navegadores de W3C Schools, uno a las estadísticas de resoluciones de pantalla y otro a las estadísticas de uso de dispositivos móviles.
17. Tests de usabilidad
Pedile a gente de todo tipo, amigos, familiares, comapañeros de trabajo, etcétera, que intenten usar tu sitio. Considerá su opinión y observalos cuando intenten usarlo para identificar posibles deficiencias.
18. Bugfixing
Solucioná todos los problemas detectados en los dos ítems anteriores. Realizá arreglos todas las veces que sea necesario.
19. Mantenimiento
Nunca dejes de realizar el mantenimiento que tu sitio requiera.
Espero que les sea de utilidad!
El funcionamiento de un sitio web se basa en el modelo cliente-servidor. La arquitectura cliente-servidor es un modelo en el que un programa ejecutándose en un cliente realiza peticiones de datos a un servidor, que le responde. Un servidor web, físicamente, es una computadora conectada constantemente a Internet, y allí se alberga el sitio web que luego es solicitado por los clientes web. Los clientes web son los navegadores (como Chrome o Mozilla Firefox) de los usuarios que quieren visitar el sitio.
La siguiente imagen explica muy simplificadamente el funcionamiento de un modelo cliente-servidor web, pasando por alto muchos detalles que exceden a la temática de este post.
Cuando un usuario escribe una dirección (http://google.com/, por ejemplo) en el navegador, éste realiza una petición al servidor correspondiente. El servidor web, al ser una computadora casi como cualquier otra, tiene una estructura de directorios y archivos. Algo que es muy importante que comprendas es que el servidor web le responderá al cliente con el archivo que esté en el path correspondiente a lo que hay escrito después de la dirección que identifica al dominio. Si después del dominio no hay nada, entonces el servidor buscará el archivo index (index.php, index.htm, index.jsp, index.aspx, etcétera).
Igual, hay excepciones, porque en general los desarrolladores personalizamos las direcciones para que sean más amigables con el usuario.
ACLARACIÓN: Asumo que a medida que leas el post irás visitando al menos los links indicados, ya que los mismos constituyen conocimientos previos para poder continuar.
1. Contratar un servidor web
Como ya sabemos, para poder desarrollar un sitio necesitás un lugar donde hostearlo, es decir, un servidor web. El alojamiento web se alquila mensualmente, hay varios proveedores en Argentina, podés encontrarlos buscando en Google. Hay servidores gratuitos, pero si pretendés desarrollar un sitio profesional debés estar realmente convencido de que funcionará continuamente.
También existe la opción de instalar un servidor web local, es decir en tu propia computadora, lo que será útil para hacer pruebas, pero no te brindará la posibilidad de que otros usuarios ingresen a tu sitio. Hay muchos tutoriales en internet sobre cómo hacer eso, por ejemplo este para Windows y este para Ubuntu.
2. Registrar un dominio
El siguiente paso para que funcione un sitio web es registrar un dominio. Si querés registrar tu dominio gratuito .com.ar deberías dirigirte a NIC Argentina, institución que regula las asignaciones de dominios en nuestro país. Si querés registrar un dominio internacional, como .com o .net, deberías dirigirte a una empresa que venda dominios internacionales, como Dattatec, que los ofrece a $54 pesos argentinos por año. Asegurate de que el nombre de dominio elegido sea el más adecuado para tu sitio y sobre todo que sea fácil de recordar.
3. Aprender HTML
HTML es un lenguaje de markup (NO un lenguaje de programación) que permite describir hipertexto, es decir, texto presentado de forma estructurada, con enlaces que conducen a otros documentos relacionados y elementos multimedia, entre otras cosas.
HTML deriva de XML (eXtensible Markup Language), un lenguaje que permite estructurar información a través de un sistema de marcas y contenido.
Los clientes web interpretan el HTML que reciben del servidor cuando éste responde a su petición.
Las dos versiones utilizadas actualmente son HTML4 y la reciente HTML5. HTML5 incorpora algunas reglas que sobreescriben a otras de HTML4, por lo que te recomiendo que investigues sobre la nueva versión además de aprender HTML básico, para que tus sitios vayan a la par de los nuevos estándares.
Muchos tutoriales de HTML en internet se limitan a listar la inmensa cantidad de tags que el lenguaje posee, lo cual probablemente provoque que sientas que el desarrollo web es de lo más aburrido. Lo más importante, y esto no aplica sólo para HTML, es que sepas cómo funciona y qué te permite hacer la tecnología con la que vas a trabajar. Si recordás o no los nombres de sus funciones, librerías, tags y propiedades tiene poca importancia, porque todo eso lo aprenderás a medida que lo utilices. Y mientras no lo aprendas, podrás recurrir a la documentación.
Quizás este sería un buen comienzo.
4. Aprender CSS
CSS es un lenguaje usado para definir hojas de estilo en un documento estructurado escrito en HTML. Al igual que HTML, recientemente se lanzó una nueva versión, CSS3, que incorpora nuevas posibilidades para la definición de estilos y depreca otras utilizadas en CSS2. El funcionamiento de CSS es muy simple, se basa en la definición de selectores de elementos HTML (se pueden seleccionar por casi cualquiera de sus atributos) y la asignación de estilos (color de texto, tipografía, color de fondo, borde, margen, ancho, alto, posición, alineación del texto, etcétera) a cada uno de ellos. Si bien HTML permite definir algunos estilos y además embeber el CSS en el atributo style, es altamente recomendable separar la hoja de estilos de los archivos HTML. Analizaremos por qué unos items más adelante. Una vez comprendido esto, queda investigar qué posibilidades ofrece CSS, podés hacerlo echando un vistazo a W3C Schools.
También te invito a que eches un vistazo a Bootstrap.
5. Elegir un framework de cliente (opcional)
Lo que hemos visto hasta ahora permite que el usuario vea el contenido que se quiere mostrar, pero la interacción que el mismo permite es mínima, limitándose a clicks en links y botones. Existe un lenguaje de programación interpretado, llamado JavaScript, que permite dinamismo en el cliente de una aplicación web. Dinamismo significa interacción entre el usuario y el sitio web. El intérprete de JavaScript forma parte de casi todos los navegadores modernos, ya que este lenguaje se ejecuta en el cliente y no en el servidor. Con JavaScript pueden manejarse eventos, que representan acciones que el usuario realiza, como clickear un link o pasar el mouse sobre una imagen. Una vez que hayas investigado más sobre JavaScript y conozcas más o menos cómo funciona (lo cual no te parecerá muy simpático), considerarás la posibilidad de utilizar un framework que hará más cómodo tu trabajo con el lenguaje.
El framework más conocido (y el que personalmente recomiendo) para JavaScript se llama jQuery, pero también existen otros como Prototype y Yahoo UI.
6. Elegir un lenguaje de servidor
Ya contamos con un sitio que muestra contenido en forma dinámica y más o menos interactiva, pero éste se limita simplemente a mostrar contenido. Ahora supongamos que queremos que este sitio tenga alguna utilidad, como por ejemplo permitir a los usuarios dejar su opinión y luego mostrarlas todas y además mostrar cuántas opiniones hemos recibido en total. Creamos un formulario HTML, le pedimos al usuario que nos cuente su opinión y... ¿Dónde almacenamos la información que el usuario nos brindó? Lógicamente debemos almacenarla en nuestro servidor. Cuando un usuario quiera ver las opiniones de los demás debemos recurrir al lugar de nuestro servidor donde hemos almacenado las opiniones. En general este lugar es una base de datos (si no sabés lo que es, te recomiendo que lo busques en Google), aunque también podrían ser archivos de texto.
Ahora bien, necesitamos algún lenguaje de programación que se ejecute/compile en el servidor y que se encargue de recopilar toda esta información, contar la cantidad de comentarios que se han dejado y le envíe toda esta información al cliente. Este tipo de lenguajes se conocen como lenguajes de servidor. Hay muchos, como PHP, Java, Python, ASP.NET y PERL, podés elegir el que te resulte más cómodo, mi recomendación es que comiences con PHP.
El código PHP puede embeberse en los documentos HTML. Cuando el cliente pida el archivo HTML, el servidor ejecutará el código PHP contenido entre las tags y lo reemplazará por el contenido HTML que corresponda. Una vez hecho esto, enviará el archivo conteniendo HTML puro (y JavaScript) al cliente. El cliente nunca se enterará de que el HTML que recibió fue producto de un script PHP en el servidor, porque PHP es un lenguaje de servidor.
7. Elegir un motor de bases de datos
Supongamos que ya sabés lo que es una base de datos, porque ya lo deberías haber leído en el item anterior. Existen distintos motores de bases de datos, como MySQL, Oracle y SQL Server. MySQL es el que mejor trabaja con PHP, es gratuito, el más utilizado en bases de datos pequeñas y medianas y viene en WAMP (aplicación de servidor que quizás instalaste en tu computadora en el punto 1), así que lo recomiendo ampliamente. MySQL es un motor de bases de datos que utiliza SQL, un lenguaje que permite realizar consultas a la base de datos. Podrías comenzar leyendo este tutorial. Una vez que sepas como realizar consultas a una base de datos, deberías también saber que desde PHP podés realizar consultas utilizando la función mysql_query, previamente establecida la conexión a la base de datos.
8. Definir cómo se establecerá la comunicación entre el cliente y el servidor
Un evento realizado en el cliente (por ejemplo un click) podría desencadenar una conexión con el servidor donde se requiera determinada información. Como quien se encargará de procesar y enviar esta información es el servidor, y cuando el HTML llega al cliente ya el lenguaje de servidor ha realizado todo su trabajo, para poder visualizar esta información en el cliente es necesario volver a cargar la página, lo que suele resultar incómodo para el usuario.
Existe una alternativa a esta situación y consiste en utilizar AJAX (Asynchronous JavaScript And XML), técnica que permite realizar un pedido al servidor y obtener una respuesta de éste sin tener que recargar la página, utilizando JavaScript, claro. Si leés un poco y comprendés como funciona, verás que realizar una request AJAX con jQuery resulta muy sencillo y conllevará a grandes beneficios para la interactividad de tu sitio.
Cuando termines de leer este post y quieras dejar un comentario, verás que será mostrado inmediatamente debajo del formulario para escribir. Cuando presionas el botón 'Enviar', el cliente realiza una request AJAX al servidor que inserta tu comentario en la base de datos y devuelve el contenido insertado, para luego agregarlo a la página utilizando JavaScript.
9. Tomar medidas de seguridad básicas
Existen diversos métodos que permiten vulnerar la seguridad de un sitio web, y la efectividad de los mismos depende de cuánto se haya preocupado el desarrollador por cubrir estos riesgos. Hay algunas cosas que deberías hacer:
- Cuando pidas a un usuario que ingrese información en un formulario, por ejemplo su nombre, que luego formará parte de una consulta SQL, siempre debés 'escapar' el contenido que llegó desde el cliente una vez esté en el servidor. Existe una función en PHP llamada mysql_real_escape_string que permite realizar esto. Supogamos que solicitás a un usuario que ingrese su DNI. En el servidor PHP, al DNI que ingresó lo llamás $dni. Ahora realizarás una query del estilo:
SELECT * FROM Persona WHERE dni=$dni;
El DNI que esa persona ingresó, es 38390850
DELETE FROM Persona
Ahora realizarás la query
SELECT * FROM Persona WHERE dni=38390850; DELETE FROM Persona;
Lo que borrará TODOS los registros de la tabla Persona. Este ataque es conocido como SQL Injection.
- Si realizás un sitio donde los usuarios deban loguearse con un usuario y contraseña, deberías leer sobre MD5 y tokens de seguridad.
En este link encontrarás una lista de los ataques más frecuentes.
10. Definir tus objetivos y la estructura de tu sitio
Ahora que ya sabes cuáles son las posibilidades que ofrecen las tecnologías que elegiste, deberías definir qué es lo que querés lograr de ellas, haciendo bocetos del maquetado en papel y diagramas para la estructura de tus datos.
Además de hacer estos bocetos, deberías tomar algunas decisiones con respecto a tu aplicación web:
- Debés definir si tu aplicación va a ser más o menos dinámica o estática, teniendo en cuenta la interactividad que quieras generar entre el usuario y el sitio web. Por ejemplo, si estás interesado en lograr animaciones y respuestas a eventos de mouse o teclado, probablemente deberías usar jQuery para lograr una mejor experiencia de usuario.
- Es necesario definir la estructura de tu aplicación, es decir, cuáles van a ser las fuentes de información, dónde va a estar la lógica y dónde va a estar la vista (lo que el usuario visualice). Podés leer más sobre esto en este artículo de Wikipedia. Podrías decir, por ejemplo, que la fuente de información de tu sitio será una base de datos MySQL, que la lógica estará en PHP, que harás la interacción entre el cliente y el servidor con AJAX y jQuery y la vista con HTML5, CSS3 y jQuery. Te preguntarás, ¿y esto qué implica? Esto significa que el único lugar donde almacenarás datos es en la base de datos. Esto implica que si necesitás hacer cálculos o procesar datos, probablemente lo harás en PHP del lado del servidor. Esto significa que no usarás PHP embebido en el HTML ya que PHP no puede intervenir en la vista de tu sitio web, porque toda información que llegue desde PHP debe ser recibida por JavaScript utilizando AJAX. Obviamente este no es el único modelo posible.
11. Definir convenciones y prácticas (sé prolijo)
Este es el paso más importante, porque definirá si sos un desarrollador que se conforma con que algo funcione o uno que apunta a la excelencia, de esos que piensan que «Si algo está simplemente 'bien', no está bien todavía». Probablemente tu primer sitio no sea excelente, pero reflejará qué intención tenías cuando lo estabas desarrollando. Las cosas que voy a listar a continuación son aquellas que, según mi criterio, contribuyen a la excelencia de un desarrollador web:
- Si no querés que tu sitio esté formado por un archivo constituído por un conjunto de caracteres dispuestos aleatoriamente, sería importante que procures dividir tu código en todos los archivos que sean necesarios, cada uno de ellos correctamente nombrados y almacenados en directorios medianamente organizados. Por ejemplo, sería bueno que crees carpetas tales como 'scripts', 'images', 'css', 'ajax', etcétera.
- Procurá que los nombres de tus variables, IDs, clases y tablas en la base de datos respeten algún estándar. No importa mucho cuál, aunque sea uno tuyo propio, que al menos respeten uno. No llames a un ID 'registerFormulario', si todos tus nombres están en español deberías llamarlo 'formularioDeRegistro' y si están todos en inglés 'registerForm', o algo del estilo. Si elegiste 'registerForm' y ahora existen 2 formularios más, asignar una clase 'registerForm' para todos sería mucho más correcto que simplemente ponerles 'registerForm', 'registerForm1', 'registerForm2', y esto sería mejor que 'registerForm', 'RegisterForm', 'registerFORM'. Con prudencia es suficiente, siempre intentá hacer estas cosas de la mejor forma posible, y si es necesario cambiá aquellos nombres que hayan quedado fuera de los estándares que definiste previamente.
- Evitá usar cosas que están deprecadas, sobre todo si vas a usarlas para hacer algo para lo que no fueron creadas. En otras palabras, no uses tablas, frames o iframes al menos que sea estrictamente necesario.
- Mejor no uses Flash, y si lo usás, usalo menos de lo necesario (solamente para jueguitos y cosas que un humano no pueda hacer con JavaScript).
- No hagas el sitio más pesado de lo mínimo que podría pesar. No olvides que cada vez que un usuario ingrese a tu sitio deberá descargar todo el contenido que hayas subido a él, y que probablemente le molestará que uses más ancho de banda que el que merece lo que tenés para mostrar.
- No molestes al usuario haciendo cosas como cambiarle el tamaño de la ventana, abrir popus, crear sitios con exceso de publicidad, no permitirle volver atrás u obligarlo a escuchar una música horrible que no puede detener al menos que cierre la pestaña.
- Hacé que tu sitio sea lo más compatible posible, no olvides que será visitado por todo tipo de personas. Es importante definir qué tipo de personas excluirás de la posibilidad de visualizar tu sitio, y lo mejor para vos probablemente será que este grupo sea lo más reducido posible. Algunas cosas que deberías tener en cuenta para lograr una mayor compatibilidad son: la resolución de pantalla, la utilización de tecnologías no estándar, no olvidar que muchos usuarios se conectarán desde un teléfono y no olvidar que existe IE. Bueno, un poquito podrías olvidarlo, quizás sea bueno para tu salud mental olvidar que todavía existen personas que usan IE6.
- Si te enterás que tu sitio tiene un defecto, solucionalo de inmediato y de la mejor forma posible, o al menos intentá que el usuario no tenga que perder su tiempo luchando contra él hasta que poseas el tiempo necesario.
12. Algunos tips que deberías tener en cuenta para mejorar tu sitio
- Personalizar los paths. En uno de los ítems anteriores, mencioné que con frecuencia los desarrolladores modificamos el path original de una página para que sea más amigable con el usuario. Sería bueno que lo hagas, y si bien hay muchas formas, quizás para tu primer sitio lo más cómo sea modificar el archivo .htaccess. No es difícil, podés buscar en Google cómo hacerlo.
- No olvides que los buscadores le dan prioridad a las cabeceras o títulos a la hora de indexar, con prioridad decreciente desde h; hasta h6. Para que tu sitio esté bien diseñado conceptualmente, debes respetar la función de cada etiqueta HTML.
- Siempre que coloques un link externo en tu sitio, será conveniente que se abra en una pestaña nueva para que los usuarios no se vayan de tu sitio cuando no quieren hacerlo o cuando les da igual si irse o no. Esto podés hacerlo colocando el atributo target="blank" a las tags a.
- No olvides que excepto que especifiques una tag de descripción en el head, lo que aparecerá en Google como resumen de tu sitio será lo primero que se encuentre en él.
- Existe una herramienta muy útil en Google Chrome, podés usarla haciendo click con el botón derecho del mouse sobre casi cualquier parte de la página y clickeand en 'Inspeccionar elemento'. El monitor del chrome incluye muchas herramientas que te serán de increíble utilidad, ya que permite editar el HTML y los estilos CSS desde el mismo navegador, para que puedas hacer tests de diseño con una rapidez máxima, permite monitorear el tráfico de recursos utilizados por el sitio e incluye una consola de JavaScript, entre otras cosas.
13. Comenzar
Una vez que leiste todo los pasos anteriores, los tutoriales suficientes e hiciste una cantidad considerable de sitios de prueba básicos, estás en condiciones de emprender el desarrollo de tu sitio.
14. Google Analytics
Incluí Google Analytics. Así vas a conocer muchas estadísticas de tu sitio.
15. Validar W3C
Validá W3C. Si tengo que dar una opinión, diría que una vez que valides W3C, podés empezar a considerar los puntos siguientes. Si tu sitio no pasa el test, entonces hay algo que no estás usando bien.
16. Tests en distintas plataformas
Probá tu sitio en mútiples navegadores, diferentes resoluciones de pantalla y dispositivos móviles. No olvides que existe público muy diverso. Te dejo un link a las estadísticas de uso de navegadores de W3C Schools, uno a las estadísticas de resoluciones de pantalla y otro a las estadísticas de uso de dispositivos móviles.
17. Tests de usabilidad
Pedile a gente de todo tipo, amigos, familiares, comapañeros de trabajo, etcétera, que intenten usar tu sitio. Considerá su opinión y observalos cuando intenten usarlo para identificar posibles deficiencias.
18. Bugfixing
Solucioná todos los problemas detectados en los dos ítems anteriores. Realizá arreglos todas las veces que sea necesario.
19. Mantenimiento
Nunca dejes de realizar el mantenimiento que tu sitio requiera.