Como desarrollador web autodidacta, comenzar no fue lo más fácil. Tenía que aprender todo por las malas. En el camino llegué a aprender sobre cosas que, en mi opinión, habrían sido de gran ayuda cuando comenzaba.
Los sitios web se dividen en dos categorías principales, sitios web estáticos y sitios web dinámicos. Ambos tienen cosas en común, que es la utilización de HTML, CSS, JavaScript (en forma pura o en una forma de biblioteca más simple como JQuery). Piense en estos como su punto de partida.
Tanto HTML como CSS no son lenguajes de programación. Básicamente, no hay “x + y =?” tipo de programación con la que podría estar familiarizado. Se ocupan del diseño y el aspecto de una página. Un nerd podría argumentar que tienen algún tipo de funciones aritméticas básicas, pero en general no están definiendo lenguajes de programación por definición.
- Quiero usar AngularJS con Django y Django REST Framework. ¿Debo aprender AngularJS primero por separado?
- Descargué un tema de WordPress ahora quiero que sea mi propio sitio web. ¿Como lo puedo hacer?
- Quiero desarrollar un sitio web para una escuela. ¿Qué tecnología o CMS debería preferirse?
- Me estoy enseñando a codificar como un hobby y sé HTML, CSS y algunos jQuery / JS. ¿Cuáles son algunos proyectos front-end que podría intentar construir para ponerme a prueba?
- Estoy tratando de construir un backoffice para un sitio web, pero no quiero pasar por la molestia de diseñar los menús, formularios, etc. Estoy buscando una herramienta que me ayude a construir y aplicar un estilo estándar a mi páginas sin tener que escribir HTML y CSS. ¿Qué puedo usar?
Puede crear un sitio web utilizando solo HTML y CSS. Agregar JS es opcional, pero es un gran activo sin el que no puede administrar profesionalmente.
HTML
El lenguaje de marcado de hipertexto, HTML, (ahora en la versión 5, HTML5) se usa para el marcado de la página (un marco de alambre para la página). En general, establece la jerarquía de la página. Puede pensar en el marcado como cuadros dentro de cuadros donde se encuentran todos los textos, enlaces e imágenes. Todo esto se guarda en un archivo .html .
CSS
Las hojas de estilo en cascada, CSS, (ahora en la versión 3, CSS3) se utilizan para el lado gráfico de las cosas. Controla cómo se ve todo. Piense en colores, tamaños de fuente, fondos, bordes, márgenes, relleno … etc. Todos los estilos van en uno o más archivos .css y están referenciados en el HTML para ser utilizados.
JavaScript
JavaScript, JS, es un lenguaje de programación y un poco más complicado de explicar. Piense en ello como un manipulador de elementos en una página, aunque puede usarse para agregar o eliminar elementos a una página. Nuevamente, las secuencias de comandos se guardan en archivos .js y se referencian en los archivos HTML para poder utilizarlas. Me gusta pensar en JS como un lenguaje que trata el “tiempo” y las “condiciones”. Algunos ejemplos para reflejar lo que quiero decir pueden ser
- Cuando se carga una página, haz eso.
- Cuando un mouse pasa sobre algo, haz eso.
- Cuando haya pasado cierto tiempo, hazlo.
- Si esto … entonces eso.
Hay bibliotecas JS que facilitan el uso de JS. Uno famoso es JQuery. Piense en ello como una forma más fácil de JavaScript. JQuery es lo suficientemente extenso como para que haya desarrolladores que aprendieron y trabajen con JQuery sin aprender JS.
Al cubrir estos tres idiomas, puede ser un experto en el desarrollo de sitios web estáticos .
Desarrollo dinámico de sitios web
Los sitios web dinámicos (también conocidos como aplicaciones web) es donde sucede toda la magia. Utilizan lenguajes de programación web y bases de datos. En términos generales, piense en Quora, Facebook, Twitter y casi todos los sitios web que utiliza como sitio web dinámico. La idea básica detrás del desarrollo dinámico es tener una base de datos donde reside todo.
Una simple introducción al desarrollo dinámico sería el cuadro “Últimos artículos” que encontrará en muchos sitios web hoy en día. Digamos que tenemos un sitio web con las siguientes páginas.
- Casa
- Sobre nosotros
- Articulo 1
- Artículo 2
- Contáctenos
En cada una de estas páginas tenemos un recuadro al lado que enumera los últimos artículos en el siguiente formato,
últimos artículos
- Artículo 1, publicado el lunes
- Artículo 2, publicado el martes
Esto significa que, hasta ahora, tenemos un total de cinco cuadros de “Últimos artículos” en cinco páginas diferentes. Ahora, imagina que quisiéramos agregar un tercer artículo. En este caso, tendremos que
- Cree una nueva página llamada “Artículo 3”,
- Cree un nuevo cuadro “Últimos artículos” en la página “Artículo 3”,
- Actualice el otro no 1 o 2, sino 5 páginas con el nuevo artículo y la fecha de publicación.
Estoy bastante seguro de que entiendes lo agitado que sería con miles de páginas, o tal vez incluso diez páginas.
En el desarrollo dinámico, esto es mucho más fácil. La base de datos, que es básicamente un conjunto de tablas, contiene todos los artículos y páginas. Las tablas contienen columnas y filas para reflejar el nombre del artículo, la fecha de creación, la fecha de publicación, el autor, etc. Los cuadros “Últimos artículos” se generan “dinámicamente” conectándose a la base de datos y obteniendo los últimos artículos según la fecha de publicación.
El mismo concepto se puede utilizar para obtener, por ejemplo, los artículos escritos por un determinado autor. Además, podemos tener una tabla de autores que contiene los nombres de usuario, contraseñas, correos electrónicos y biografías de los autores que se utilizan para iniciar sesión y verificar (Nuevamente, piense en Quora, Facebook, Twitter).
Ahora que obtiene el concepto básico detrás del desarrollo web dinámico, pasemos a las tecnologías que necesita aprender. Tenga en cuenta que todavía vamos a utilizar HTML, CSS y JS, y que el resultado final seguirá siendo HTML, CSS y JS. No los estamos cancelando, solo estamos encontrando una manera más eficiente de trabajar con ellos. Como habrás notado, necesitamos una base de datos y una forma de conectarnos a ella. Recuerde, dije una manera más “eficiente”, nunca dije que fuera más fácil.
Bases de datos
El concepto de almacenar / recuperar datos en / desde una base de datos es mucho más amplio y tiene muchos otros usos además del desarrollo web. Lo que significa que cuando aprende a trabajar con bases de datos, en realidad está agregando un activo muy valioso a su lista de habilidades.
El lenguaje de consulta estructurado, SQL, es con mucho el lenguaje más común para tratar con bases de datos relacionales (las bases de datos relacionales son, básicamente, su conocimiento común de tablas que contienen columnas y filas). SQL es más conceptos generales que un lenguaje que aprenderá. Lo que puede aprender son los sistemas de gestión de bases de datos relacionales (RDBMS). Existen muchos RDBMS, los más comunes son (sin ningún orden en particular)
- MySQL
- PostgreSQL
- Oráculo
- Servidor SQL de Microsoft
- DB2 de IBM
Lenguaje de programación del lado del servidor
La base de datos residirá en un servidor y, como ya sabe, la base de datos es solo un montón de tablas con datos en ellas. La forma de obtener, manipular, usar y eventualmente mostrar los datos en HTML, CSS y JS es mediante el uso de un lenguaje de programación del lado del servidor.
Nuevamente, hay muchos lenguajes de programación del lado del servidor. Algunos de los populares son,
- PHP
- ASP.NET
- JAVA
- Fusión fría
- Perl
- Rubí
- Pitón
No le diría que siga adelante y aprenda ese RDBMS junto con ese lenguaje del lado del servidor. Encontrará a muchas personas que le dicen que use esto o que aprenda eso o que nunca use eso … etc. Es como la religión, más una elección personal.
Como recuerdo, PHP y MySQL forman la pareja más común. Algunas personas argumentan que con respecto a la usabilidad, Ruby gana. Cuando se trata de facilitar el aprendizaje, algunos dirán Python. Los argumentos nunca terminan.
Debe cavar, ensuciarse las manos con el código y decidir qué le conviene. Te recomiendo que comiences a aprender, saltes de un idioma a otro y finalmente encuentres con lo que te sientas cómodo.
Sé que no entre en muchos detalles, pero debes formar tu propia personalidad cuando se trata de desarrollo web. No dude en preguntarme si tiene alguna pregunta o necesita más información.
