CONCEPTOS

 HTML

hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, sobre todo en lo referente a su escritura e interpretación. HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web, este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

HTML es un lenguaje de marcado que nos permite indicar la estructura de nuestro documento mediante etiquetas. Este lenguaje nos ofrece una gran adaptabilidad, una estructuración lógica y es fácil de interpre­tar tanto por humanos como por máquinas.

CSS

es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores...

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

Para empezar

Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.

Ejemplo:

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

• HTML es el lenguaje de marcado que usamos para estructurar y dar significado a nuestro contenido web, por ejemplo, definiendo párrafos, encabezados y tablas de datos, o insertando imágenes y videos en la página.
• CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples columnas.
• JavaScript es un lenguaje de secuencias de comandos que te permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (Está bien, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).

• Bootstrap

  Bootstrap es una excelente herramienta que te permite crear interfaces de usuario limpias y totalmente adaptables a todo tipo de dispositivos y pantallas, sea cual sea su tamaño. Desde Bootstrap 3, el framework se ha vuelto más compatible con el desarrollo web responsive. De esto ya te habló Álvaro en 2015, pero vamos a recordarlo. Bootstrap 3 fue una gran actualización y, si no me crees, fíjate en las novedades de esa versión:

  • Soporte bastante bueno (casi completo) con HTML5 y CSS3, que permite un uso muy flexible para desarrollo web con unos excelentes resultados.
  • Un sistema GRID que permite diseñar usando un grid de 12 columnas donde se debe plasmar el contenido. Así podemos desarrollar responsive de forma mucho más fácil e intuitiva.
  • Bootstrap 3 establece Media Queries para 4 tamaños de dispositivos diferentes, variando en función del tamaño de la pantalla. Estas Media Queries permiten desarrollar para dispositivos móviles y tablets de forma mucho más fácil.
  • Bootstrap 3 también permite insertar imágenes responsive, es decir, con solo insertar la imagen con la clase “img-responsive” estas se adaptarán al tamaño.

  • framework 

    Debemos tener claro cuáles son las características y necesidades de nuestro proyecto para elegir que tecnología utilizar. Si con un framework sencillo tenemos bastante, no hay necesidad de usar uno más complicado, ya que lo único que vamos a conseguir es complicarnos la vida. Por otro lado, utilizar el mismo framework que te fue bien en otro proyecto, tal vez no sea la decisión correcta. Dicho esto te exponemos una serie de factores que debes considerar a la hora de elegir uno u otro

  • backend

  • El desarrollo de backend está a cargo de diseñadores web con experiencia en programación. Deben dominar los lenguajes más utilizados en el desarrollo web como Ruby, PHP, CSS, HTML, Java y muchos otros. Es importante que dispongan de conocimientos en los distintos lenguajes ya que el uso de uno u otro en determinadas ocasiones puede provocar problemas en un sitio web, como caídas, o ralentizaciones.

  • Frontend es la parte de un sitio web que interactúa con los usuarios, por eso decimos que está del lado del cliente. Backend es la parte que se conecta con la base de datos y el servidor que utiliza dicho sitio web, por eso decimos que el backend corre del lado del servidor. Estos dos conceptos explican a grandes rasgos cómo funciona una página web y son fundamentales para cualquier persona que trabaje en el mundo digital, ya sea en programación, marketing, diseño o emprendimiento.

    Frontend

    Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan de la interactividad con los usuarios.

    Para convertirte en Frontend Developer debes saber HTML y CSS, los lenguajes de maquetación que nos permiten definir la estructura y estilos de una página web. Y también JavaScript, un lenguaje de programación para definir la lógica de nuestra aplicación, recibir las solicitudes de los usuarios y enviárselos al backend.

  • Flexbox

    Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquetar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

    Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el elemento que contiene la propiedad display:flex.

    Desde ese contenedor vamos a poder especificar la alineación de los elementos que hay dentro, el tamaño de los elementos que contienen y distribuir el espacio restante que hay entre los elementos del contenedor Flex, y todo esto en una sola dirección, ya sea una horizontal o vertical. Es decir, podemos distribuir los elementos que contiene la etiqueta sin poner nada dentro de esos elementos.