El mundo del desarrollo web es uno enorme, de mucho aprendizaje, muchas tecnologías, mucho potencial, todos tenemos al menos alguna idea para la web que pensamos es lo que le falta al internet, ¿quién no ha escuchado la idea de un amigo (o propia) del nuevo Facebook? ¿El nuevo portal de noticias? ¿El nuevo chat? etc.
Como con todo, normalmente, empezar es lo más difícil; lo que me encanta de la web es que no necesitas instalar nada para comenzar, sólo necesitas un navegador y un editor de texto como el Bloc de Notas, Notepad++ o algunos más nuevos como Sublime Text, Atom, entre otros.
En este artículo quisiera contarte de algunos consejos y recursos para iniciar a programar tus propias páginas web, no olvides que si quieres ir más a fondo tenemos un curso ideal, el curso de Mi Primera Página Web, en donde desde 0 te enseñamos a crear una página básica y luego un proyecto de administrador de productos en web.
Las tecnologías.
HTML
Las páginas web funcionan con 1 tecnología básica y necesaria, HTML( HyperText Markup Language), lo mínimo que una página necesita para funcionar en el navegador es que lleve HTML, sólo eso. HTML no es un lenguaje de programación, más bien es un lenguaje de marcado, no es dinámico y nos sirve para darle sentido semántico a lo que escribimos, verás, para una persona es fácil entender dónde inicia y termina un párrafo observando el texto, sin embargo, las personas no son las únicas que consumen una página, también tenemos "robots" que necesitan entender el contenido de nuestro sitio.
¿Para qué robots visitan nuestro sitio? Para varias razones, pero una muy clara es para indexar nuestro sitio. Los buscadores como Google, indexan los sitios que hay en internet para posteriormente mostrarlos como resultados cuando una persona hace una búsqueda, si el algoritmo de indexado de Google no puede entender tu página, ¿cómo va a saber en qué búsquedas mostrar tu página?
Ahora bien, vemos que HTML es muy importante, ¿cómo escribo HTML? HTML está basado en etiquetas, las etiquetas agrupan contenido de tu página web, estas mismas etiquetas se distinguen porque están encerradas entre < y >. Algunos ejemplos son:
- Párrafos
<p> Contenido del párrafo </p>
- Links
<a href="link"> Texto del párrafo </a>
- Encabezados
<header> Texto del párrafo </header>
Y así sucesivamente, hay muchas etiquetas, pronto en Código Facilito vamos a tener una referencia a cada una de ellas :). Podrás notar que las etiquetas se cierran con el nombre de la misma pero con un / al principio.
En este punto es importante recalcar que HTML ** no tiene nada qué ver con cómo se ve tu sitio **, HTML lidia con el significado de cada sección de tu página, no con cómo se ven esas secciones.
CSS
CSS (Cascading Style Sheets) es la tecnología que se encarga de dar estilo y diseño a las páginas. CSS le dice a los elementos en qué posición van a aparecer, con qué tamaño, en qué colores, y muchas cosas más incluido cómo se verán en celulares, tabletas y computadoras.
CSS modifica las propiedades de un elemento asignándoles valores que van a cambiar la forma en cómo se ven, por ejemplo, si quisiera que todos mis párrafos aparecieran en color rojo para el texto, lo haría así:
p{
color: red;
}
Lo que está afuera de las llaves se llama selector e indica a qué elementos se van a aplicar los cambios hechos dentro de las llaves, hay selectores muy complejos, los más populares son:
- Por el nombre de la etiqueta
p{
color:red;
}
- Por clase
.parrafos_rojos{
color:red;
}
- Por ID
#parrafo_rojo{
color:red;
}
Cuándo usar cada uno depende de qué elementos quieras seleccionar, pero, una regla importante es que los selectores por ID se usan para seleccionar sólo 1 elemento es decir, 2 elementos HTML no pueden tener el mismo ID, en cambio, muchos elementos HTML pueden tener la misma clase.
Para colocar a un elemento HTML una clase o un ID usamos atributos, los atributos se colocan después de escribir el nombre de la etiqueta y antes del >, así:
<p class="parrafos_rojos">Este párrafo tiene la clase párrafos rojos, muchos párrafos
podrán compartir la misma clase</p>
<p id="parrafo_rojo"> Este párrafo tiene el ID párrafo_rojo, sólo este elemento puede tener ese ID
y nadie más podrá compartirlo </p>
<p class="parrafos_rojos fondo_azul" id="mi_id"> Un párrafo puede tener muchas clases pero sólo puede tener 1 ID </p>
javaScript, el Backend y más.
HTML y CSS son lo súper básico que tu página debe llevar para que se vea bien y los navegadores puedan mostrarla. Sin embargo, en el mundo web de hoy, pocas páginas son estáticas.
Cuando decimos que una página es estática, significa que no importa dónde la visites o cuándo la visites, siempre va a verse igual, siempre, porque no tiene ningún lenguaje de programación en la página que haga que alguna parte de la misma cambie.
En otros artículos podemos hablar de dichos lenguajes y sus diferencias, pero para este artículo de iniciación, nos quedaremos con CSS y HTML
Consejos
- Aprende e investiga qué elementos HTML hay y para qué sirven, en qué casos se usan. Puedes usar W3Schools para eso
- Aprende qué puedes modificar con CSS, también puedes usar la W3Schools o si te interesa conocer todo sobre CSS te recomiendo el curso premium de CSS de Código Facilito
- Las reglas CSS siempre van en un archivo externo al HTML, es decir, no revuelvas el código CSS con el de HTML, los archivos CSS se guardan con la extensión .css y se enlazan al HTML con la etiqueta link
- Intenta copiar los diseños de otras páginas para practicar tus habilidades en HTML y CSS.
- Visita sitios como CodePen donde puedes ver experimentos que la gente hace con HTML, CSS y javaScript; el plus de estos sitios es que puedes ver el código fuente.
- Aprende pensando en proyectos, ejemplo, Quiero hacer una página para mostrar las últimas noticias del fútbol, piensa en tu diseño y elabóralo con HTML y CSS, es muy probable que necesitas más que eso para realizar tus proyectos, pero primero necesitas saber HTML/CSS antes de entrar a proyectos más avanzados
- Si quieres un curso para iniciar desde 0, el de Mi Primera Página Web es perfecto, si quieres algo más avanzado como para hacerle una página a algún cliente, el de Diseño Web Avanzado que es aún mejor.
Conclusión
La mejor parte de ser programador es poder llevar a cabo tus ideas, piensa por un momento cuántas páginas se te ocurren que podrías crear, que te gustaría elaborar y construir... ahora ¡hazlo! Lo más difícil es iniciar, es escribir la primera etiqueta, el primer estilo, etc.
Por cierto, en los comentarios comparte consejos de cómo empezaste a escribir páginas web. ¡Gracias!