• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Hay que seguir

Log in or subscribe for free to enjoy all this course has to offer!

Conforme este curso va llegando a su fin, podría ser tentador pensar que lo hemos visto todo. ¿Todo? En serio no pensarás eso, ¿verdad? Venga, tienes todavía cientos de cosas que descubrir, ya sea en HTML, CSS o en tecnologías relacionadas (PHP, JavaScript, etc.).

Este capítulo tiene como objetivo darte algunos consejos para completar tu aprendizaje. Así que no estés triste, ¡aún hay un montón de cosas que descubrir!

Desde los sitios web a las aplicaciones web (JavaScript, AJAX, etc.)

JavaScript es un lenguaje que existe desde hace algunos años y se utiliza con frecuencia en la creación web, además de HTML y CSS. Es probablemente uno de los primeros lenguajes que hay que aprender ahora que sabes algo acerca de HTML y CSS.

¿Para qué se usa JavaScript? ¿No podemos hacer todo con HTML y CSS?

Ya puedes hacer muchas cosas en HTML y CSS, pero si quieres hacer tu página más interactiva, un lenguaje como JavaScript es esencial.

Estos son algunos ejemplos de para qué se puede utilizar JavaScript:

  • A menudo la utilizaremos para cambiar las propiedades CSS sin tener que recargar la página. Por ejemplo, señalas una imagen y el fondo de tu sitio web cambia de color (no puedes hacer esto con :hover puesto que implica dos etiquetas distintas. Es una limitación de CSS).

  • También se puede utilizar para editar el código fuente HTML sin tener que recargar la página mientras el visitante está viendo la página.

  • También te permite mostrar cuadros de diálogo en la pantalla del visitante ...

  • ... o cambiar el tamaño de la ventana.

JavaScript es un lenguaje que está más cerca de lenguajes de programación como C, C ++, Python, Ruby, etc. HTML y CSS, sin embargo, son más lenguajes de descripción: describen cómo debería aparecer la página, pero no dan instrucciones directas al ordenador ("haz esto, haz aquello, etc.") como hace JavaScript.

JavaScript se utiliza normalmente hoy para AJAX ( JavaScript asíncrono y XML). Esta técnica se utiliza para cambiar cualquier parte de la página web vista por el visitante a través del intercambio de datos con el servidor. Esto da la impresión de que las páginas son más dinámicas y sensibles. El visitante no ha de recargar sistemáticamente toda la página.

Como los navegadores son cada vez más eficaces procesando JavaScript, las páginas que utilizan JavaScript son más sensibles. Algunos sitios web que se crean ahora se convierten en aplicaciones web literalmente, el equivalente de software pero disponibles como sitios web.
Un ejemplo destacado: Google Docs, la suite de oficina de Google disponible en internet (figura siguiente).

La hoja de cálculo de Google Docs
La hoja de cálculo de Google Docs

¡Aprenderás más sobre Javascript en otros cursos!

Tecnologías relacionadas con HTML5 (Canvas, SVG, Web Sockets, etc.)

El W3C no solo funciona en los lenguajes HTML y CSS. Si bien son sin duda los más conocidos, el W3C quiere también identificar otras tecnologías que complementen a HTML y CSS. Hay un gran número y también se confunden a menudo con HTML5.

Esta es una lista de las nuevas tecnologías introducidas en paralelo con HTML5 (ten en cuenta que algunas no son realmente "nuevas" sino que han vuelto a la escena):

  • Canvas: te permite dibujar en la página web dentro de la etiqueta HTML <canvas>. Puedes dibujar figuras (triángulos, círculos, etc.) y añadir y hacer las cosas con imágenes, aplicar filtros gráficos, etc. Al final, todo esto nos permite desarrollar juegos reales y aplicaciones gráficas directamente en las páginas web.

  • SVG: te permite crear gráficos vectoriales en páginas web. A diferencia de canvas, estos gráficos se pueden ampliar hasta el infinito (el principio del vector). El programa Inkscape es conocido por ser capaz de crear dibujos SVG.

  • Drag & Drop: permite "arrastrar y soltar" objetos en la página web de la misma forma que puedes arrastrar y soltar archivos en tu escritorio. Gmail lo utiliza para permitirte añadir fácilmente archivos adjuntos a un correo electrónico.

  • File API: proporciona acceso a los archivos almacenados en el ordenador del visitante (con su permiso). Concretamente lo usarás en combinación con Drag & Drop.

  • Geolocalización: para localizar a los visitantes y ofrecer servicios relacionados con el lugar donde se encuentren (por ejemplo, los horarios de cines cercanos). Aunque la ubicación no siempre es muy precisa, se puede identificar a un visitante dentro de unos pocos kilómetros (con su permiso).

  • Almacenamiento web: se utiliza para almacenar una gran cantidad de información en el ordenador del visitante. Es una alternativa más potente a las cookies de siempre. La información se organiza de forma jerárquica, como en una base de datos.

  • Appcache: dice al navegador que ponga en caché ciertos archivos que ya no va a descargar sistemáticamente. Muy útil para crear aplicaciones web que pueden incluso trabajar "offline" (desconectadas).

  • Web Sockets: permite intercambios rápidos, en tiempo real, entre el navegador del usuario y el servidor que gestiona el sitio web (es una especie de AJAX mejorado). Esto puede ser el futuro de las aplicaciones web, que acabarán siendo tan sensibles como los programas reales.

  • WebGL: permite introducir el 3D en páginas web, utilizando el estándar OpenGL 3D (figura siguiente). Las escenas 3D las maneja directamente la tarjeta gráfica.

Una aplicación web 3D usando WebGL
Una aplicación web 3D usando WebGL

Como puedes ver, ¡hay nuevos mundos por descubrir! Cuando sepas lo suficiente de JavaScript, podrás avanzar en la gestión de tu sitio web ... ¡e incluso convertirlo en una aplicación real!

Sitios web dinámicos (PHP, JEE, ASP. NET, etc.)

Los lenguajes de los que vamos a hablar aquí también son lenguajes de programación. ¿Como JavaScript? Sí, pero con una diferencia importante: JavaScript se ejecuta en el ordenador de tu visitante, mientras que los lenguajes que vamos a ver se ejecutan en el servidor que contiene tu sitio web.

¿Qué diferencia implica que el programa se ejecute en el ordenador del visitante o en el servidor?

Las diferencias son considerables. En primer lugar, en términos de potencia, un servidor suele ser más rápido que el ordenador del visitante, y por lo tanto puede realizar cálculos más complejos. También tienes un mayor control en el lado del servidor que en JavaScript ... Pero JavaScript sigue siendo insustituible, ya que hay algunas cosas que solo se pueden hacer en el lado de "visitante".

Los lenguajes del servidor generan la página web cuando el visitante llega a tu sitio web (figura siguiente). ¡Cada visitante puede por tanto tener una página web personalizada de acuerdo a sus necesidades!

Intercambio de datos con un servidor
Intercambio de datos con un servidor

Así, vemos que los lenguajes no se utilizan para las mismas cosas sino que se complementan entre sí. Si combinas HTML + CSS + Javascript + PHP, por ejemplo, puedes manejar AJAX (intercambio de datos entre la página y servidor), realizar cálculos, almacenar información en bases de datos ... en definitiva, ¡crear sitios web dinámicos reales!

Hay muchos lenguajes "del lado del servidor". Mencionemos algunos:

  • PHP: uno de los más conocidos. Este lenguaje fácil de utilizar y potente lo utiliza en particular Facebook. ¡También estoy escribiendo un tutorial de PHP!

  • JEE (Java): esta extensión de Java se usa ampliamente en el mundo profesional para construir sitios web dinámicos, potentes y sólidos. Es un poco más complejo que PHP para empezar.

  • ASP .NET (C#): es el lenguaje de Microsoft y es parecido a JEE. Se utiliza en combinación con otras tecnologías de Microsoft (Windows Server, etc.). Utiliza el potente marco .NET, que es la auténtica navaja suiza de los desarrolladores, y que ofrece muchas funciones.

  • Django (Python): se trata de una extensión del lenguaje Python que permite construir sitios web dinámicos con rapidez y facilidad. Es conocido por generar listas para usar interfaces de administración.

  • Ruby on Rails (Ruby): una extensión del lenguaje Ruby, bastante similar a Django, la cual permite construir sitios web dinámicos con facilidad y con mayor flexibilidad.

En última instancia, estos lenguajes permiten hacer realidad hacer tus mejores sueños en tu sitio web:

  • foros;

  • boletín de noticias;

  • contador de visitantes;

  • sistema de noticias automático;

  • gestión de socios;

  • juegos por internet (juegos de estrategia, de cría de animales virtuales, etc.)

  • ...

Example of certificate of achievement
Example of certificate of achievement