Slaider de imagenes

MENU

anuncio

Curso basico de lenguaje de marcas lección 2

 Lección 2: Creación de Páginas Web Sencillas

¿Qué vamos a aprender?

En esta lección, aprenderás los fundamentos para construir tus propias páginas web. Descubrirás cómo organizar el contenido de manera efectiva utilizando HTML y cómo añadir elementos visuales como imágenes y enlaces.

¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje estándar para crear estructuras de páginas web. Imagina que es el esqueleto de una página web, definiendo la organización y la estructura del contenido.


Estructura básica de una página HTML

Toda página HTML tiene una estructura básica que se compone de las siguientes etiquetas:

  • <!DOCTYPE html>: Declara el tipo de documento HTML.
  • <html></html>: Raíz de todo documento HTML.
  • <head></head>: Contiene información sobre la página, como el título.
  • <body></body>: Contiene el contenido visible de la página.

<!-- end list -->

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Mi primera página web</title>

</head>

<body>

    </body>

</html>

Usa el código con precaución.

Agregando contenido a tu página

  • Encabezados: Utiliza las etiquetas <h1>, <h2>, <h3>, etc. para crear encabezados de diferentes niveles.
  • Párrafos: Utiliza la etiqueta <p> para crear párrafos.
  • Saltos de línea: Utiliza la etiqueta <br> para insertar un salto de línea.

            <!-- end list -->


HTML

<body>

    <h1>¡Bienvenido a mi página!</h1>

    <p>Este es un párrafo de ejemplo.</p>

    <p>Puedes utilizar <b>etiquetas en negrita</b> o <i>etiquetas en cursiva</i>.</p>

    <br>

    <h2>Otro encabezado</h2>

</body>

Usa el código con precaución.

Insertando imágenes

Para insertar una imagen, utiliza la etiqueta <img> y el atributo src para especificar la dirección de la imagen.

HTML

<img src="mi_imagen.jpg" alt="Descripción de la imagen">

Usa el código con precaución.

El atributo alt es importante para la accesibilidad y la optimización para motores de búsqueda.

Creando enlaces

Para crear un enlace a otra página, utiliza la etiqueta <a>. El atributo href especifica la URL del destino.

HTML

<a href="https://www.example.com">Visita mi sitio web</a>

Usa el código con precaución.

Creando listas

Puedes crear listas ordenadas y no ordenadas:

  • Listas ordenadas: Utiliza la etiqueta <ol>.
  • Listas no ordenadas: Utiliza la etiqueta <ul>.
  • Elementos de la lista: Utiliza la etiqueta <li> para cada elemento de la lista.

<!-- end list -->

HTML

<ul>

    <li>Manzana</li>

    <li>Banana</li>

    <li>Naranja</li>

</ul>

Usa el código con precaución.

Ejemplo completo

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Mi página web</title>
</head>
<body>
    <h1>¡Bienvenido a mi página!</h1>
    <p>Esta es una página web sencilla creada con HTML.</p>
    <img src="paisaje.jpg" alt="Un hermoso paisaje">
    <h2>Mis frutas favoritas</h2>
    <ol>
        <li>Manzana</li>
        <li>Banana</li>
        <li>Naranja</li>
    </ol>
    <a href="https://www.google.com">Visitar Google</a>
</body>
</html>

Usa el código con precaución.

¿Cómo ver tu página web?

  1. Guarda el archivo: Guarda el código HTML en un archivo con extensión .html (por ejemplo, index.html).
  2. Abre el archivo: Haz doble clic en el archivo para abrirlo en tu navegador web.

¡A practicar!

Ahora que conoces los fundamentos, ¡es hora de crear tus propias páginas web! Experimenta con diferentes etiquetas y atributos para personalizar tus diseños.

Recursos adicionales:

En la próxima lección, exploraremos cómo darle estilo a nuestras páginas web utilizando CSS.

Curso basico de lenguaje de marcas lección 6

 

Módulo 6: Frameworks

Introducción a los Frameworks

  • ¿Qué es un framework? Definición clara y concisa de un framework, sus beneficios y cómo simplifican el desarrollo web.
  • Tipos de frameworks:
    • Front-end: React, Angular, Vue.js, etc.
    • Back-end: Node.js, Django, Ruby on Rails, Laravel, etc.
    • Full-stack: Frameworks que cubren tanto el front-end como el back-end (ej: MEAN Stack, MERN Stack).
  • Por qué usar frameworks: Ventajas de utilizar frameworks, como ahorro de tiempo, código reutilizable, mejores prácticas, comunidad y ecosistema.

Lección 1: Introducción a React

  • Conceptos básicos de React: Componentes, JSX, estado, props, ciclo de vida de los componentes.
  • Creación de componentes: Cómo definir componentes funcionales y de clase.
  • Gestión del estado: useState, useReducer, Context API.
  • Renderizado condicional y listas: Cómo mostrar y ocultar elementos en función de condiciones y cómo renderizar listas de elementos.
  • Eventos: Capturar y manejar eventos del usuario.

Lección 2: Introducción a Angular

  • Arquitectura de Angular: Componentes, módulos, servicios, plantillas.
  • Data binding: Enlace de datos entre componentes y plantillas.
  • Dependencia de inyección: Cómo gestionar dependencias en Angular.
  • Routing: Navegación entre diferentes vistas en una aplicación Angular.
  • Forms: Creación y validación de formularios.

Lección 3: Introducción a Vue.js

  • Fundamentos de Vue.js: Instancias, plantillas, datos, métodos.
  • Componentes Vue: Creación de componentes reutilizables.
  • Directivas: Manipulación del DOM con directivas.
  • Vuex: Gestión del estado global en aplicaciones Vue.js.
  • Vue Router: Navegación entre vistas en aplicaciones Vue.js.

Lección 4: Introducción a Node.js y Express

  • Node.js: Entorno de ejecución de JavaScript fuera del navegador.
  • Express.js: Framework web para Node.js.
  • Rutas: Creación de rutas HTTP para manejar diferentes solicitudes.
  • Middleware: Extensión de la funcionalidad de Express.
  • Manejo de bases de datos: Conexión a bases de datos utilizando módulos como Mongoose.

Lección 5: Introducción a Django

  • MVC en Django: Modelo-Vista-Controlador.
  • ORM: Object-Relational Mapper para interactuar con la base de datos.
  • Templates: Creación de plantillas HTML para generar páginas dinámicas.
  • Forms: Creación y validación de formularios.
  • Admin interface: Interfaz de administración generada automáticamente.

Lección 6: Introducción a Laravel

  • Características principales de Laravel: Rutas, controladores, vistas, Eloquent ORM.
  • Blade templating engine: Motor de plantillas para crear vistas.
  • Middleware: Capas de software que se ejecutan antes o después de una solicitud HTTP.
  • Artisan: Línea de comandos para generar código automáticamente.

Lección 7: Comparación de Frameworks

  • Tabla comparativa: Comparación de los principales frameworks en términos de popularidad, curva de aprendizaje, características, etc.
  • Cuándo usar qué framework: Recomendaciones para elegir el framework adecuado para cada proyecto.
  • Tendencias actuales: Los frameworks más populares y las últimas tendencias en desarrollo web.

Proyecto Final

  • Desarrollo de una aplicación web completa: Los estudiantes aplicarán los conocimientos adquiridos en el desarrollo de una aplicación web utilizando uno o varios frameworks.

Consideraciones Adicionales:

  • Ejemplos prácticos: Incluir ejemplos de código y proyectos pequeños para cada lección.
  • Ejercicios: Proponer ejercicios para que los estudiantes practiquen lo aprendido.
  • Recursos adicionales: Recomendar documentación oficial, tutoriales y comunidades en línea.
  • Herramientas de desarrollo: Presentar las herramientas más utilizadas para trabajar con cada framework (ej: React DevTools, Angular CLI, Vue Devtools).

Este módulo proporciona una base sólida en el desarrollo web con frameworks. Los estudiantes aprenderán a construir aplicaciones web de manera más eficiente y escalable, utilizando las mejores prácticas de la industria.

 

Curso basico de lenguaje de marcas lección 5

 

Uniones en SQL: Combinando resultados de múltiples tablas

Introducción

Las uniones en SQL son una herramienta fundamental para combinar datos de dos o más tablas relacionadas. Esto permite realizar consultas más complejas y obtener información valiosa a partir de diferentes fuentes de datos.

Conceptos clave

  • Tipos de uniones:
    • INNER JOIN: Devuelve solo las filas que tienen un valor común en ambas tablas.
    • LEFT JOIN: Devuelve todas las filas de la tabla izquierda y las filas coincidentes de la tabla derecha.
    • RIGHT JOIN: Devuelve todas las filas de la tabla derecha y las filas coincidentes de la tabla izquierda.
    • FULL OUTER JOIN: Devuelve todas las filas cuando hay una coincidencia en alguna de las columnas.
  • Claves primarias y foráneas: La relación entre las tablas se establece mediante claves primarias y foráneas.

Ejemplos prácticos

SQL

-- Ejemplo de INNER JOIN

SELECT clientes.nombre, pedidos.fecha

FROM clientes

INNER JOIN pedidos ON clientes.id_cliente = pedidos.id_cliente;

Usa el código con precaución.

Ejercicios

  1. Crea una consulta que muestre el nombre de los productos y el nombre de la categoría a la que pertenecen.
  2. Obtén una lista de todos los clientes, incluso aquellos que no han realizado ningún pedido.

Consideraciones adicionales

  • Rendimiento: Las uniones pueden afectar el rendimiento de las consultas, especialmente en bases de datos grandes.
  • Optimización: Utiliza índices para mejorar la velocidad de las uniones.
  • Alias: Utiliza alias para hacer las consultas más legibles.

Subconsultas en SQL: Consultas anidadas para obtener resultados más complejos

Introducción Las subconsultas son consultas SQL incrustadas dentro de otras consultas. Permiten realizar consultas más complejas y obtener información detallada a partir de múltiples tablas.

Conceptos clave

  • Subconsultas escalares: Devuelven un único valor.
  • Subconsultas correlacionadas: Se refieren a filas de la consulta externa.
  • Subconsultas en cláusulas WHERE, HAVING, FROM, etc.

Sintaxis SQL

SQL

SELECT columna1

FROM tabla1

WHERE columna2 IN (SELECT columna3 FROM tabla2);

Usa el código con precaución.

Ejemplos prácticos

  • Encontrar empleados cuyo salario sea mayor que el salario promedio.
  • Obtener los productos más vendidos de cada categoría.

Ejercicios

  1. Encuentra los clientes que hayan realizado pedidos en los últimos 3 meses.
  2. Obtén el nombre del empleado que ha realizado más ventas.

Consideraciones adicionales

  • Rendimiento: Las subconsultas pueden afectar el rendimiento de las consultas, especialmente en bases de datos grandes.
  • Alternativas: En algunos casos, se pueden utilizar JOINs para obtener los mismos resultados de forma más eficiente.

Algunos temas adicionales que podríamos abordar:

  • Ventanas: Funciones de ventana para realizar cálculos sobre conjuntos de filas.
  • Índices: Cómo crear y utilizar índices para mejorar el rendimiento de las consultas.
  • Optimización de consultas: Técnicas para escribir consultas SQL eficientes.
  • Procedimientos almacenados: Creación y ejecución de procedimientos almacenados.
  • Triggers: Automatización de tareas mediante triggers.
Suscribirse a: Entradas (Atom)