By ¿Quieres ser un desarrollador web? ¿No sabes por donde empezar? No te preocupes! Hoy te doy la clave y el rumbo a seguir para iniciar en el mundo del desarrollo web, te diré que es lo que primero que debes de aprender y en que orden así como los siguientes pasos y algunos consejos adicionales.
En lo particular cualquier área del desarrollo me encanta!
He tenido la oportunidad de estudiar y dedicarme al desarrollo web, te puedo asegurar que es muy gratificante.
Para mi, la posibilidad de crear algo de la nada ( o bueno mejor dicho de una idea ) es increíble! La posibilidad de plasmar y crear proyectos de clientes que solo viven en su mente es fascinante.
Si tu tienes esa espinita o esa motivación para convertirte en un desarrollador web no la dejes pasar, comienza hoy mismo a aprender y practicar, no es secreto que la mejor forma de iniciar es simplemente hacerlo!
Y si le sumas que hoy te dejo una lista de lo que necesitas para ser un desarrollador web pues los pretextos no existen.
¿Quieres saber por donde iniciar para ser un desarrollador web? Te dejo la lista de conocimientos necesarios para comenzar..
¿Quieres aprender a programar? Mira estos conceptos básicos de programación
Antes que nada imaginemos que tenemos un proyecto y queremos colocar un botón.
LENGUAJE DE ETIQUETADO HTML
HTML, que significa lenguaje de marcado para hipertextos, es un lenguaje de marcado o etiquetado con el que puedes indicar que elementos quieres en tu proyecto, es decir, con HTML creas los elementos de tu proyecto.
Es un lenguaje de etiquetado ( No de programación ) pues utilizas etiquetas para ordenar las cosas, en nuestro ejemplo si queremos colocar un boton primero lo hacemos con HTML:
|
1
|
<button id=«mmiboton»> Mi boton </button>
|
Con esto ya aparece nuestro boton en nuestro proyecto, ¿Fácil no?
Por cierto, el texto id=»miboton» hace referencia a un atributo de nuestro boton.. con un nombre id y con un valor miboton. Es muy común que nuestros componentes HTML tengan atributos.
LENGUAJE DE ESTILO CSS
CSS, que significa hojas de estilo en cascada, es un lenguaje de estilos para definir precisamente esto, el estilo de un elemento en un proyecto web.
Con CSS podemos definir el tamaño de un elemento HTML, su ubicación, su forma, su color y más!
Hasta ahora solo nuestro botón es un botón con un diseño estándar sin ningún tipo de diseño o estilo.
En nuestro ejemplo si nosotros quisiéramos aplicarle estilo a nuestro botón tendríamos que hacer algo similar a lo siguiente con CSS:
|
1
2
3
4
5
6
7
8
9
|
#miboton{
background–color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text–align: center;
text–decoration: none;
font–size: 16px;
}
|
Como puedes ver enlazamos nuestro boton mediante su atributo id.
Ahora nuestro botón paso de tener un estilo estándar a:
- Tener un color verde de fondo.
- No tener borde.
- Su texto ahora es blanco.
- Tiene un espaciado interno.
- Su texto esta alineado al centro.
- Su texto no tiene decoración.
- Su texto tiene un tamaño de 16 pixeles.
Todo esto lo hicimos posible gracias a CSS!
Ahora ya tenemos un botón creado con HTML y con un diseño bonito establecido con CSS pero.. ¿Que hay de la funcionalidad?
No puedes considerarte ser un desarrollador web sin saber programar la funcionalidad.
EL LADO DEL CLIENTE Y EL LADO DEL SERVIDOR ( SERVER – SIDE Y CLIENT SIDE )
Hasta ahora vamos perfecto! Con HTML ya sabemos que se crean los elementos, con CSS se le configura un estilo visual pero.. ¿Nuestro botón no hace nada?
En nuestros proyectos gran porcentaje de nuestros elementos tienen alguna interacción o funcionalidad, no son elementos estáticos y ya.
Como en todo desarrollo se debe de resolver algún problema o realizar alguna acción determinada no solo se dibujan pantallas.
Para hacer la funcionalidad generalmente utilizaremos 2 tipos de lenguajes: lenguajes del lado del cliente y lenguajes del lado del servidor.
Resumen del proceso de una petición web
Cuando un cliente solicita una pagina web, ya sea de un sitio web o sistema web, ocurre algo como esto:
- El cliente da clic sobre un botón de tipo ‘Ir a otra página’ y manda una solicitud de dicha pagina al servidor.
- El servidor recibe la petición, procesa la página y la manda al cliente.
- El cliente recibe la pagina y la interpreta mediante un navegador web.
Es en el paso 1 y 3 cuando los lenguajes de programación del lado del cliente son ejecutados e interpretados por el navegador web.
Es en el paso 2 cuando el servidor interpreta el lenguaje de programación del lado del servidor ( si existe en la programación del sitio ).
Lenguajes del lado del cliente
Son lenguajes de programación que se ejecutan del lado del cliente, es decir, en el equipo de los visitantes de nuestro proyecto web.
El encargado de interpretar este lenguaje de programación es generalmente el navegador web.
El código de programación de estos lenguajes se pueden observar analizando el codigo fuente del sitio web por lo que únicamente se utiliza para realizar funcionalidades relacionadas a la interfaz web.
Lenguajes del lado del servidor
Son lenguajes de programación que se ejecutan del lado del servidor, es decir, en el servidor donde esta alojado nuestro sitio o proyecto web.
El encargado de interpretar este lenguaje es el servidor mismo.
El código de programación de estos lenguajes no es visible para el cliente final pues se interpreta en el servidor y no en el lado del cliente por lo que se suele utilizar para funcionalidades más sensibles como consulta a base de datos, procesamientos de datos, inicio de sesión, etc.
LENGUAJE DE PROGRAMACIÓN JAVASCRIPT (LADO DEL CLIENTE)
Existen varios lenguajes de programación del lado del cliente pero lo más común para comenzar a ser un desarrollador web es aprender Javascript.
Javascript es el lenguaje de programación del lado del cliente más utilizado y con un futuro aún más prometedor.
El código de programación del lado del cliente si es visible para el cliente.
En nuestro ejemplo ya tenemos un botón creado con HTML y con un bonito diseño gracias a CSS, ahora necesitamos que al hacer clic sobre él se calcule una operación, cualquier cosa es buena para ver como luce un código javascript..
El código javascript sería:
|
1
2
3
4
5
6
7
8
|
<script>
document.getElementById(«test»).onclick = realizarOperacion();
function realizarOperacion(){
var operacion = 2 * 5;
alert(‘La suma de 2 * 5 es: ‘ + operacion);
}
</script>
|
Con esto al presionar nuestro botón, además de tener bonita apariencia, nos mostrará el resultado de una multiplicación mediante una alerta.
Es un ejemplo simple pero sencillo para mostrar como luce el código javascript.
LENGUAJE DE PROGRAMACIÓN PHP (LADO DEL SERVIDOR)
También existen varios lenguajes de programación del lado del servidor pero lo más común para comenzar a ser un desarrollador web es aprender PHP.
PHP es un lenguaje excepcional y bastante utilizado, con el podemos realizar conexiones a bases de datos, procesamiento de datos, existen infinidades de librerías ( al igual que javascript ) y más! Vaya! Que es un lenguaje de programación!
Un código de PHP luce asi:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
$favcolor = «rojo»;
switch ($favcolor) {
case «rojo»:
echo «Tu color favorito es rojo!»;
break;
case «azul»:
echo «Tu color favorito es azul!»;
break;
case «verde»:
echo «Tu color favorito es verde!»;
break;
default:
echo «No tiene sun color favorito.»;
}
?>
|
Solo vemos un código php al azar para no confundirte al implementar algo con nuestro ejemplo del botón pero en si puedes meter código php dentro del código de tu proyecto o simplemente crear un archivo especial para tu script y mandarlo llamara desde Javascript.
Como te comente este código es ejecutado e interpretado por el servidor antes de llegar al cliente por lo que nunca es visible este código de programación para el usuario final.
LO BÁSICO PARA SER UN DESARROLLADOR WEB
En este punto ya tienes lo básico y necesario para convertirte en un buen desarrollador web.
Dominando HTML, CSS, Javascript y PHP tienes todo para realizar cualquier proyecto, y si! digo cualquier proyecto!
No te queda más que practicar y practicar para coger el hilo del tema pero una vez lo tienes es fácil realizar cualquier proyecto o funcionalidad.
FRAMEWORKS
Como te dije ya tienes todo para ser un desarrollador web excelente! Aún así te cuento de los frameworks que nos ayudan bastante.
Un framework web es un concepto que hace referencia a un conjunto codigos que hacen más fácil y sencillo el desarrollo web.
Es un termino un poco confuso de explicar así que veamos un ejemplo.
jQuery es un framework Javascript, es decir, fue creado en Javascript y facilita la programación en Javascript.
Lo que haces con javascript en 20 lineas tal vez lo haces con jQuery en 3 o 4 lo cual nos ahorra tiempo y esfuerzo a la hora de nuestros proyectos web pues no escribimos tanto código repetitivo.
Para utilizar una framework, en este caso jQuery, simplemente debemos importarlo o agregarlo a nuestro proyecto antes de utilizarlo.
Así como jQuery existen muchos frameworks para cada tecnología, existen frameworks de CSS, frameworks Javascript, frameworks PHP, etc.
Pero como te digo lo primero es lo primero, ya que seas experto en lo primero entonces meteté a los frameworks, es un error muy común intentar aprender frameworks antes de siquiera saber Javascript, PHP o incluso sin saber HTML.
Espero y este tema te sirva de algo, si es así ya sabes que puedes dejarnos un comentario o compartir este post en tus redes sociales favoritas.
Fuente: https://jonathanmelgoza.com