Regresar
Tarea 02 · Cultura Digital 2

Lenguajes deProgramación

Diseño, maquetación y desarrollo: los lenguajes que construyen el mundo digital.

🌐

Desarrollo Web

Lenguajes para construir sitios y aplicaciones en internet

HTML
Estructura Web

HyperText Markup Language es el lenguaje base de toda página web. Define la estructura y el contenido mediante etiquetas que el navegador interpreta.

index.html
<!-- Estructura básica HTML -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi Página</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Cultura Digital 2</p>
  </body>
</html>
CSS
Estilos Web

Cascading Style Sheets controla la presentación visual: colores, tipografía, animaciones y diseño responsivo de las páginas web.

styles.css
/* Estilos básicos */
body {
  background: #1a0530;
  font-family: 'Lato', sans-serif;
  color: #ffffff;
}
h1 {
  font-size: 2rem;
  color: #a78bfa;
}
JS
Interactividad

JavaScript es el lenguaje de programación de la web. Permite crear interfaces dinámicas, manejar eventos, consumir APIs y construir aplicaciones completas.

app.js
// Función de bienvenida
function saludar(nombre) {
  const msg = `Hola, ${nombre}!`;
  console.log(msg);
}

saludar("Carlos");
// → Hola, Carlos!
PHP
Backend Web

PHP es un lenguaje de servidor ampliamente usado para crear sitios dinámicos, conectar bases de datos y gestionar formularios. Alimenta WordPress y muchos CMS.

index.php
<?php
// Variables en PHP
$nombre = "Carlos";
$materia = "Cultura Digital";

echo "Alumno: $nombre";
echo "Materia: $materia";
?>
Python
Backend / IA

Python es versátil y legible. En web se usa con frameworks como Django o Flask. También es el lenguaje líder en inteligencia artificial y ciencia de datos.

app.py
# Servidor web con Flask
from flask import Flask

app = Flask(__name__)

@app.route("/")
def inicio():
  return "¡Hola desde Python!"
TypeScript
JavaScript Tipado

TypeScript es JavaScript con tipado estático. Detecta errores antes de ejecutar el código y es esencial en proyectos grandes con Angular, React o Vue.

main.ts
// Tipado estático
interface Alumno {
  nombre: string;
  grado: number;
}

const carlos: Alumno = {
  nombre: "Carlos",
  grado: 3,
};
🖥️

Desarrollo de Escritorio

Lenguajes para crear aplicaciones que se instalan en tu computadora

Python
Tkinter / PyQt

Con librerías como Tkinter o PyQt, Python permite crear aplicaciones de escritorio con ventanas, botones y formularios en Windows, Mac y Linux.

ventana.py
import tkinter as tk

ventana = tk.Tk()
ventana.title("Mi App")

btn = tk.Button(
  text="Clic aquí",
  bg="#6d28d9"
)
btn.pack()
ventana.mainloop()
Java
Multiplataforma

Java es el lenguaje por excelencia para aplicaciones empresariales, Android y sistemas de escritorio. Su principio: "escribe una vez, ejecuta en cualquier lugar".

Main.java
public class Main {
  public static void main(String[] args) {
    String nombre = "Carlos";
    System.out.println(
      "Hola, " + nombre
    );
  }
}
C#
Microsoft / .NET

C# es el lenguaje principal del ecosistema Microsoft. Se usa para aplicaciones Windows, videojuegos con Unity y servicios en la nube con .NET.

Program.cs
using System;

class Programa {
  static void Main() {
    string nombre = "Carlos";
    Console.WriteLine(
      $"Hola {nombre}"
    );
  }
}
C++
Sistemas / Juegos

C++ es uno de los lenguajes más poderosos. Se usa en videojuegos (Unreal Engine), sistemas operativos, drivers y software donde el rendimiento es crítico.

main.cpp
#include <iostream>
using namespace std;

int main() {
  string nombre = "Carlos";
  cout << "Hola, "
      << nombre << endl;
  return 0;
}
🎨

Diseño y Maquetación

Herramientas y lenguajes para crear interfaces y experiencias visuales

Sass
CSS Avanzado

Sass es un preprocesador CSS que añade variables, mixins, anidamiento y funciones al CSS estándar, haciendo el código más organizado y reutilizable.

styles.scss
// Variables Sass
$morado: #6d28d9;
$fuente: 'Lato', sans-serif;

.card {
  background: $morado;
  font-family: $fuente;
  &:hover {
    opacity: .8;
  }
}
Tailwind
Utilidades CSS

Tailwind CSS es un framework de clases utilitarias que permite diseñar directamente en el HTML sin escribir CSS personalizado, ideal para prototipos rápidos.

card.html
<!-- Card con Tailwind -->
<div class="
  bg-purple-700
  rounded-xl
  shadow-lg
  p-6 text-white
  hover:scale-105
">
  Cultura Digital 2
</div>
SVG
Gráficos Vectoriales

SVG (Scalable Vector Graphics) es un formato XML para dibujar gráficos vectoriales en la web: íconos, ilustraciones y animaciones que no pierden calidad al escalar.

icon.svg
<!-- Círculo morado -->
<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
  <circle
    cx="50" cy="50" r="40"
    fill="#6d28d9"
    stroke="#ddd6fe"
  />
</svg>
Markdown
Documentación

Markdown es un lenguaje de marcado ligero para crear documentos con formato usando texto plano. Es usado en GitHub, blogs, READMEs y wikis.

README.md
# Cultura Digital 2

## Alumno
**Carlos** Javier Pérez

## Temas
- Inteligencia Artificial
- Lenguajes de Programación

> Aprendizaje digital
JSON
Intercambio de Datos

JSON (JavaScript Object Notation) es el formato estándar para intercambiar datos entre servidores y aplicaciones web. Toda API moderna lo utiliza.

alumno.json
{
  "nombre": "Carlos",
  "grado": 3,
  "materia": "Cultura Digital",
  "temas": [
    "HTML",
    "CSS",
    "JavaScript"
  ]
}