¿Alguna vez has asentido con la cabeza para confirmar que entendías algo, pero en realidad no tenías ni idea? Y luego dices, “Dios mío, ¿pero por qué he hecho eso?” Y lo siguiente que ocurre es que te hacen una pregunta sobre lo que dijiste que sabías o, peor aún, te han asignado una tarea para hacer lo que dijiste que sabías hacer... y ¡pesadilla! Por suerte para ti, si continúas leyendo, no tendrás ese problema cuando se trate de CSS, HTML y Javascript. Pero tal vez aún lo tengas en otros aspectos de su vida, como tratar de impresionar a alguien en una cita, o decir "oh sí, a mi también me encanta ese grupo" y buscarlo en Google en cuanto se va al baño. Por cierto, realmente deberías dejar de hacer eso, pero bueno, vayamos al grano... ;).
Si has estado pensando en desarrollar tu propio sitio web o alguna vez tuviste que administrar el de otra persona, lo más probable es que te hayas encontrado con HTML, CSS y Javascript. Estos son los tres lenguajes de programación principales de cualquier sitio o página web. Y aunque trabajan juntos, como explicaremos, cada uno juega un rol distinto cuando se trata de programación y desarrollo web.
¿Qué es HTML?
Quizás en algún momento de tu vida, hayas hecho clic en el pequeño ícono HTML (</>) y hayas visto una gran cantidad de lo que parece ser texto y símbolos aleatorios y confusos que te hacen sentir que has entrado en una versión con bajo presupuesto de Matrix. Ese, amigo mío, es el mundo de HTML. Prometemos que no es tan aterrador ni confuso como parece. Una vez que llegas a entenderlo, es otro idioma o mundo que llegas a apreciar y tal vez incluso a amar.
HTML es el acrónimo de Hypertext Markup Language (Lenguaje de marcado de hipertexto). El “hipertexto” es esencialmente el "texto estructural", y un “lenguaje de marcado” es un "lenguaje" o "contenido" especial que los ordenadores entienden; fue diseñado originalmente para describir páginas web y hacer que el contenido sea interactivo. Piensa en ello como el esqueleto de un sitio web. HTML fue lanzado en 1989 como un lenguaje de publicación oficial de la World Wide Web y es el componente inicial de la creación de una página web. Hay tres elementos principales de HTML: etiquetas, elementos y atributos, y su versión más reciente es HTML5. HTML5 tiene todas las características originales del HTML normal, es más dinámico e incorpora mucho menos código, ¡pero aún así te permite crear algo brillante en poco tiempo!
¿Qué es CSS?
CSS es dos cosas críticas. ¡Es una banda de rock alternativo de chicas asesinas de la década de los 2000 a la que te recomendamos encarecidamente que descubras si todavía no las conoces! Pero CSS, para el propósito de este artículo, es un componente esencial para la codificación de un sitio web.
CSS en el mundo de la tecnología significa Cascade Styling Sheets (hojas de estilo en cascada… ¡¿cómo de guay es eso?!). Como su nombre sugiere, CSS define la apariencia y el estilo del sitio web. Ayuda a determinar el color, las fuentes, la posición de ciertos elementos e incluso un poco de animación. Esto significa que CSS constituye una parte bastante importante de tu sitio web, formando los elementos visuales y la estética. CSS fue posterior a la creación de HTML para hacer que los sitios web se vieran mejor y, de hecho, ¡lo consiguió! Sin CSS los sitios web tendrían todos el mismo estilo: blanco y negro, algunos hipervínculos en azul y con la tipografía New Romans (¡ABURRIDO!). Entonces, si HTML es el esqueleto, CSS es la piel, los ojos, el cabello, la nariz y los pies de un sitio web que lo hace único y distinguible.
Entonces, aunque HTML y CSS funcionan bien juntos, son lenguajes bastante distintos. Y aprender ambos significa que también puedes usarlos por separado, ¡ya que ambos tienen una infinidad de aplicaciones diferentes! Puedes concentrarte en estos dos lenguajes y crear un sitio web con nuestro experto Uros Cirkovic en solo 60 minutos completamente GRATIS. Suena bastante bien, demasiado bien, pero te prometemos que no hay sorpresas ocultas, solo un excelente conocimiento y, al final, tendrás tu propio sitio web. ¿Interesado? Consulta “Crea tu página web responsive en menos de 2 horas”
Vale, ya casi terminamos…
¿Qué es Javascript?
Aquí es donde las cosas se complican un poco más. Javascript está presente en casi todos los sitios web funcionales y permite que los sitios web sean dinámicos e interactivos. Es el lenguaje que usan los desarrolladores web para crear sitios web que respondan a las instrucciones y movimientos del usuario. Y Javascript realmente puede darte el poder de cambiar el HTML y CSS de un sitio web. Es como el titiritero.
Por ejemplo, con Javascript, puedes hacer lo siguiente:
Reproducir una vista previa cuando el cursor se desplaza sobre un video
Reproducir una animación cuando te desplazas hacia abajo
Crear un menú emergente cuando presionas un botón en el teclado
Crear atajos de teclado para tu sitio web
Crear una galería de fotos en movimiento para que los usuarios puedan cambiar entre diapositivas
Y la lista continúa…
¿Cómo funcionan estos tres lenguajes juntos?
Un breve ejemplo: si tienes una tienda de moda online y lo primero que obtienes en tu sitio web es un pop-up "10% de descuento si te registras hoy", eso es Javascript. Mientras que HTML es el precio, los tamaños, la descripción, la imagen del artículo, etc., y CSS será el aspecto de tu tienda online, los colores, el tipo de letra, el tamaño de la imagen, los tableros y demás.
Ahora que conoces la diferencia entre HTML, CSS y Javascript y cómo se ayudan entre sí, tenemos algunos consejos esenciales para comenzar a planificar tu sitio web. Y recuerda, este es un proceso que realmente puedes disfrutar.
8 consejos que debes seguir para crear un sitio web desde cero:
1. ¡Elije!
Elije lo que quieres poner en práctica como escribir un CV, un portafolio o una página de destino sobre una oferta de servicio en particular.
2. ¿Podrías, por favor, no centrarte en cómo se ve la web en esta etapa?
¡Quítate esa presión de inmediato! Pronto podrás "iluminar" tu sitio web, pero e nesta etapa de momento solo necesitas ordenar la estructura y el contenido.
3. ¡Un trabajo en proceso!
Hay una razón para la palabra borrador; es una copia aproximada de tu brillante idea que pronto se hará realidad. Piensa en ello como un diamante en bruto que pronto será pulido.
4. Piense en la estructura
Siempre puedes buscar inspiración en otros sitios web que te gusten, pero al principio manténlo simple. Por ejemplo, piensa dónde quieres que esté la navegación principal y qué quieres en el pie de página. Honestamente, muchos de nosotros, los desarrolladores, simplemente tomamos un lápiz y papel y dibujamos rápidamente el diseño básico (muchos de nosotros todavía dibujamos peor que un niño de 7 años, así que no esperes una obra maestra; no la necesitas).
5. Practica tus habilidades de copywriter (redactor publicitario)
Puede agregar algo de relleno lorem ipsum en este momento, peeeero si sientes que sale tu vena creativa, simplemente escribe los textos de manera aproximada. Esto te evitará volver atrás, ya que el texto estará allí, listo y esperando. Además, si, por ejemplo, eliges practicar tu Portafolio, piensa en algunas líneas sobre lo que haces y quién eres y las áreas en las que trabajas y tu experiencia laboral y educativa.
6. Verifica algunas referencias de diseño de antemano
Investiga un poco sobre la inspiración visual. Cuando se trata de CSS, tendrás que pensar en el diseño en sí, como ancho, alto, margen, relleno, posición, color de fondo, tamaño de fuente, etc. Así que te recomendamos que visites algunos sitios web que te gusten como punto de referencia para tener un concepto visual más claro.
7. Hazlo viendo nuestro webinar :)
¡Permítenos echarte una mano! Confía en nosotros, es mucho más fácil y somos muy simpáticos :). Así que estamos seguros de que la experiencia de aprendizaje será divertida y fácil de absorber en lugar de leer y probar todo tú mismo. Nuestro seminario web es casi como una clase privada, ¡y terminarás en menos de 120 minutos! ¡Así que haz clic aquí para disfrutarlo!
8. ¡A celebrar!
¡Oooh, sí, lo has conseguido! Sea lo que sea, ¡has dado un gran salto! Y para que este proceso sea más agradable, ¡es hora de que lo celebres! ¿Copa de vino? ¿Boogie en tu habitación con tu canción favorita? ¿Abrazar a alguien que quieres? Sea lo que sea, ¡lo recomendamos encarecidamente!
Así que ahora que has leído este artículo y sabes un par de cosas sobre cómo crear un sitio web desde cero, tal vez estés pensando, "esto es interesante", "me gusta", "podría hacer esto como un trabajo". Piensa en todas las celebraciones que podrías hacer... Pero con toda honestidad, puedes hacer una carrera seria con esto y convertirte en un profesional total (confía en nosotros, ¡tendrás una gran demanda!). Entonces, si estás soñando en grande y quieres convertirte en un maestro en Desarrollo Web, ¡consulta nuestros Bootcamps de programación aquí!
