¿Qué es la programación web?
Es
una rama de la programación que se enfoca en la creación de sitios
web y aplicaciones que funcionan en un navegador.
¿Por qué es importante?
El mundo se está digitalizando y la mayoría de las empresas necesitan una presencia en línea. Además, los sitios web pueden ser una forma emocionante de compartir contenido e interactuar con otros.
¿Qué se necesita para empezar?
Una computadora, un editor de código y acceso a internet. También es útil tener bases de lógica de programación y aprender los fundamentos de HTML, CSS y JavaScript
La
programación informática es una de las habilidades esenciales que
aprendes cuando estudias informática.
Detrás de todos los programas informáticos que conocemos y usamos de manera cotidiana para facilitarnos diversas actividades de nuestro día con día, existe todo un proceso para poderlos crear. Este proceso es conocido como programación, conozcamos un poco más sobre lo que conlleva este proceso.
Por
medio de la programación se establecen los pasos a seguir para la
creación del código fuente de los diversos programas informáticos.
Este
código le indicara al programa informático que tiene que hacer y
cómo realizarlo.
HTML
¿Qué es HTML?
HyperText Markup Language (lenguaje de marcado de hipertexto) es el lenguaje utilizado para estructurar y mostrar contenido en la web.
HTML utiliza etiquetas para identificar los diferentes tipos de contenido en una página web. Los navegadores usan estas etiquetas para interpretar la página y mostrarla.
¿Por qué es importante?
HTML permite a los desarrolladores web crear sitios web bien estructurados y accesibles para todos los usuarios y dispositivos.
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en index.html (que viste por primera vez en el artículo Manejo de archivos
<!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.
<html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (root element).
<head></head> — el elemento <head>. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
<meta charset="utf-8"> — <meta>. Este elemento establece el juego de caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.
<title></title> — el elemento <title> establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.
<body></body> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.
El Área de aprendizaje de HTML incluye varios módulos que enseñan HTML desde cero, sin necesidad de conocimientos previos.
Introducción a HTML
Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, tal como la aplicación de HTML al texto, cómo crear hipervínculos y cómo utilizar HTML para estructurar una página web.
Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.
Representar datos tabulares en una página web de una manera comprensible y accesible puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.
Formularios HTML (en-US) Los formularios son una parte muy importante de la Web — proporcionan gran parte de la funcionalidad que necesitas para interactuar con sitios web, p. ej. registrarte e iniciar sesión, enviar comentarios, comprar productos y más. Este módulo te ayuda a comenzar a crear las partes de formularios del lado del cliente/Interfaz de usuario.
JavaScript - Lenguaje de Programación del Lado del Cliente
¿Qué es JavaScript?
Es un lenguaje de programación utilizado para crear contenido interactivo en la web.
¿Cómo funciona?
JavaScript se ejecuta en el navegador del usuario y permite la creación de interactividad en una página web, como formularios, animaciones y más.
¿Por qué es importante?
JavaScript es una herramienta esencial para crear sitios web modernos y atractivos y mejorar la experiencia del usuario.
Tutoriales completos principiantes
Dirígete a nuestro tema del Área de Aprendizaje JavaScript si quieres aprender JavaScript, pero no tienes experiencia previa de JavaScript o programación. Los módulos completos disponibles allí son los siguientes:
Responde algunas preguntas fundamentales tales como "¿qué es JavaScript?", "¿cómo se ve?", y "¿qué puede hacer?", junto con la discusión de características clave de JavaScript, como variables, cadenas, números y arreglos.
Bloques de construcción JavaScript
Continúa nuestra cobertura de las características fundamentales clave de JavaScript, dirigiendo nuestra atención a los tipos de bloques de código que se encuentran comúnmente, tales como declaraciones condicionales, bucles, funciones y eventos.
Introducción a objetos JavaScript
Es importante comprender la naturaleza de la orientación a objetos en JavaScript si deseas ir más allá con tu conocimiento del lenguaje y la escritura de código más eficiente, por lo tanto, hemos proporcionado este módulo para ayudarte.
Analiza el JavaScript asíncrono, por qué es importante y cómo se puede usar para manejar eficazmente las potenciales operaciones de bloqueo, tales como recuperar recursos de un servidor.
En términos generales, una función es un "subprograma" que puede ser llamado por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado cuerpo de la función. Se pueden pasar valores a una función, y la función puede devolver un valor.
En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos Function.
Toda función en JavaScript es un objeto Function. Ver Function para obtener información sobre las propiedades y métodos de los objetos Function.
Las funciones no son lo mismo que los procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no puede devolver un valor.
para devolver un valor especifico distinto del predeterminado, una función debe tener una sentencia return, que especifique el valor a devolver. Una función sin una instrucción return devolverá el valor predeterminado. En el caso de un constructor llamado con la palabra clave new, el valor predeterminado es el valor de su parametro. Para el resto de funciones, el valor predeterminado es undefined.
Los parámetros en la llamada a una función son los argumentos de la función. Los argumentos se pasan a las funciones por valor. Si la función cambia el valor de un argumento, este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto referenciado, ese cambio es visible fuera de la función, tal y como se muestra en el siguiente ejemplo:
La etiqueta “script” Los programas de JavaScript se pueden insertar en casi cualquier parte de un documento HTML con el uso de la etiqueta <script>.
Por ejemplo:
La etiqueta <script> contiene código JavaScript que se ejecuta automáticamente cuando el navegador procesa la etiqueta.
CSS - Hojas de Estilo en Cascada
¿Qué es CSS?
Cascading Style Sheets es un lenguaje utilizado para dar estilo y diseño a una página web.
¿Cómo funciona?
CSS utiliza una sintaxis de reglas para asignar estilos a diferentes elementos en una página web. Estas reglas pueden controlar el color, el tamaño, la posición y más.
¿Por qué es importante?
CSS permite a los desarrolladores web crear sitios web atractivos y bien diseñados que mejoran la experiencia del usuario.
Nuestra área de aprendizaje CSS presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.
CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.
Este módulo continúa a partir de donde dejó el módulo de primeros pasos de CSS. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más. Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (debugging) y mucho más.
El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como estilo de textos y diseño CSS.
Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS. Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto. Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.
En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer.
El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:
La regla se abre con un selector (en-US). Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno (<h1> (en-US)).
Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las propiedades (en-US) CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.
una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra
Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.
Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como styles.css. La extensión .css muestra que es un archivo CSS.
Para vincular styles.css a index.html, añade la siguiente línea en algún lugar dentro del <head> del documento HTML:
