Desarollo web

 Es una actividad que consiste en la planificación diseño e implementación de sitios web y página web requiere de agilidad de interactividad arquitectura de la información y la interacción de medios como el audio texto y más y video un buen diseño de contenidos correctamente laborados aumenta la eficiencia de la Web como canal de comunicación para el intercambio de datos por medio del Internet el diseñador web comprendo perfectamente que la unión de un buen diseño con una jerarquía bien elaborada de contenidos aumenta la princesa de la Web como canal de comunicación e intercambio de datos que brinda la posibilidad de cómo el contacto directo entre conductor y consumidor de contenidos el diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World WIDE web a menudo a la Web utiliza como medio de expresión plástica Elsy artistas y creadores hacen las páginas en Internet

Internet es la interacción descentralizada de computadoras implementada en un conjunto de productos sus orígenes se remontan a 1969 cuando se estableció la primera computadora llamada arpa net de avances proyecto agencia Network vete a gerencia de proyecto de investigación avanzada cambias al final internet como el conjunto de redes de ordenadores equipo ese cable que conecta en puntos en todo el mundo la web es un conjunto de información que encuentran en un desayuno terminado el internet funcionamiento parálisis visualizando una página web que no realmente se comienza tecleando la dirección URL de la página en el navegador o bien si en un enlace del hipertexto llamado clic paso uno consistente decodificar el nombre de la URL en una dirección IP usando la base de datos BNS con la dirección IP se localiza el servidor web en dónde está la información pasó eso enviar una petición HTTP al servidor web solicitando la información en el

En el caso web típico de la información solicitada en el siguiente texto HTML gráfico ficheros paso tres después de recibir el servidor la información solicitada navegador despliega la página tal como lo describe el código HTML y él es ese y otros lenguajes web protocolo de Internet la familia protocolo de Internet es un conjunto de protocolos de Rare que se emplea para transmitir datos entre ordenadores a través de Internet por ejemplo HTTP iPad Sex Transfer por tu color se emplea para la transmisión de las páginas web y el protocolo ftp ese Fire Transfer Protocol se emplea para transmisión de fichas a RP protocolo de resolución de direcciones para encontrar la dirección física Mac correspondiente determinada y POC protocolo de oficina de correo para correos electrónicos SMTP protocolo de transferencia simple de correo para el correo electrónico del met telecomunicación Network para acceder a equipos remotos de HSP el protocolo de configuración dinámica de host es un protocolo cliente servidor que proporciona automáticamente un juego de Internet en una dirección IP L de Apple protocolo ligero simplificado de acceso privado 

¿Qué es una página web? 🌍

Una página web es un documento digital accesible a través de Internet mediante un navegador web (como Chrome, Firefox o Edge). Está creada con tecnologías como HTML, CSS y JavaScript y puede incluir texto, imágenes, videos y enlaces.

📌 Características de una página web:

✅ Se accede mediante una URL (ejemplo: https://www.ejemplo.com).
✅ Puede contener enlaces a otras páginas (hipervínculos).
✅ Puede ser estática (contenido fijo) o dinámica (se actualiza con datos en tiempo real).
✅ Se aloja en servidores web y se visualiza en dispositivos como computadoras y móviles.

¿Qué es un sitio web? 🌐

Un sitio web es un conjunto de páginas web interconectadas bajo un mismo dominio (www.ejemplo.com). Está alojado en un servidor y accesible a través de Internet mediante navegadores como Chrome, Firefox o Edge.

📌 Características de un sitio web:

✅ Contiene múltiples páginas web organizadas (inicio, contacto, productos, etc.).
✅ Puede ser estático (contenido fijo) o dinámico (se actualiza con datos en tiempo real).
✅ Puede incluir textos, imágenes, videos, formularios y bases de datos.
✅ Se accede mediante una URL única y puede estar optimizado para dispositivos móviles.

Tipos de Sitios Web

1️⃣ Sitios Web Corporativos 🏢

• Objetivo: Presentar información de una empresa o marca.
• Ejemplo: www.microsoft.com
• Tecnologías: HTML, CSS, JavaScript, WordPress.

2️⃣ Tiendas Online (E-commerce) 🛒

• Objetivo: Vender productos o servicios en línea.
• Ejemplo: www.amazon.com
• Tecnologías: Shopify, WooCommerce, Magento.

3️⃣ Blogs 📝

• Objetivo: Compartir artículos, noticias o tutoriales.
• Ejemplo: www.medium.com
• Tecnologías: WordPress, Blogger.

4️⃣ Redes Sociales 📱

• Objetivo: Conectar personas y compartir contenido.
• Ejemplo: www.facebook.com
• Tecnologías: React, Node.js, Firebase.

5️⃣ Plataformas Educativas 📚

• Objetivo: Cursos en línea y formación virtual.
• Ejemplo: www.coursera.org
• Tecnologías: PHP, Python (Django), LMS.

6️⃣ Foros y Comunidades 💬

• Objetivo: Fomentar la discusión entre usuarios.
• Ejemplo: www.reddit.com
• Tecnologías: PHP (MyBB), Node.js (Discourse).

Elementos de una Página Web 🌍

Una página web está compuesta por varios elementos fundamentales que trabajan juntos para ofrecer contenido e interacción al usuario. Estos elementos pueden dividirse en estructura (HTML), estilos (CSS) e interactividad (JavaScript).

Mi logo personal

Cómo Planificar un Sitio Web Paso a Paso

Planificar un sitio web correctamente es clave para que sea funcional, atractivo y fácil de usar. Aquí te dejo una guía paso a paso para planificar tu sitio de manera efectiva. 🚀

---

1️⃣ Definir el Objetivo del Sitio Web 🎯

Antes de empezar, pregúntate:
✅ ¿Para qué servirá el sitio web? (Ejemplo: blog, tienda online, portafolio).
✅ ¿Quiénes serán los usuarios principales? (Ejemplo: clientes, estudiantes, comunidad).
✅ ¿Qué acciones quiero que realicen los visitantes? (Ejemplo: comprar, suscribirse, contactarme).

Ejemplo:

• Objetivo: Crear una tienda online de collares.
• Usuarios: Personas interesadas en joyería.
• Acciones deseadas: Comprar productos y suscribirse a boletines.

---

2️⃣ Investigación y Análisis de la Competencia 🔍

Es importante analizar sitios similares para encontrar oportunidades de mejora.

✅ Visita sitios web de la competencia y evalúa:

• Diseño y estructura.
• Experiencia de usuario (UX/UI).
• Funcionalidades (formularios, carrito de compras, chat en vivo).

💡 Herramientas útiles:

• Google Trends (tendencias de búsqueda).
• SimilarWeb (análisis de tráfico).
• PageSpeed Insights (rendimiento del sitio).

---

3️⃣ Definir la Estructura del Sitio Web 🏗️

Un mapa del sitio (sitemap) ayuda a organizar las secciones y páginas.

Ejemplo de estructura de un e-commerce:

📌 Inicio  
📦 Tienda  
   ├── Collares  
   ├── Pulseras  
   ├── Anillos  
📖 Blog  
📞 Contacto  
🛒 Carrito  
👤 Mi cuenta  

✍ Herramientas para crear sitemaps:

• Draw.io (gratuito y fácil de usar).
• Gloomaps (interactivo).

---

4️⃣ Crear Bocetos y Wireframes ✏️

Un wireframe es un esquema visual del diseño del sitio. Puedes hacerlos en papel o con herramientas digitales.

🔹 Herramientas recomendadas:

• Figma (gratis y colaborativo).
• Adobe XD (para prototipos).
• Balsamiq (diseño rápido).

---

5️⃣ Elegir la Tecnología y Plataforma 🔧

Dependiendo del tipo de sitio, puedes optar por:

🔹 Sitios estáticos (HTML, CSS, JavaScript) → Para páginas simples.
🔹 CMS (WordPress, Shopify, Wix) → Para blogs y tiendas online.
🔹 Frameworks y Librerías:

• Front-end: React.js, Vue.js, Angular.
• Back-end: Node.js, PHP, Python.

Ejemplo para un blog: WordPress
Ejemplo para un e-commerce: Shopify

---

6️⃣ Diseñar la Experiencia de Usuario (UX/UI) 🎨

💡 Un buen diseño web debe ser:
✅ Responsivo (adaptado a móviles y tablets).
✅ Rápido (optimizado para carga rápida).
✅ Accesible (colores y textos legibles).
✅ Intuitivo (fácil de navegar).

🔹 Ejemplo de paleta de colores para un sitio elegante:
🎨 Negro, dorado y blanco.

🔹 Ejemplo de tipografía profesional:
🖋️ Montserrat, Open Sans, Roboto.

📌 Herramientas para UI/UX:

• Figma (prototipos).
• Canva (diseño gráfico).
• Adobe Color (paletas de colores).

---

7️⃣ Desarrollo del Sitio Web 👨‍💻

Si decides programarlo desde cero, sigue estos pasos:

8️⃣ Hosting y Dominio 🌍

🔹 Dominio: Nombre del sitio web (ejemplo: www.mitienda.com).
🔹 Hosting: Espacio donde se aloja el sitio web.

Opciones populares:

• Gratuitos: GitHub Pages, Netlify, Vercel.
• Pagos: Hostinger, Bluehost, SiteGround.

---

9️⃣ Optimización SEO y Seguridad 🔒

✅ SEO (Search Engine Optimization):

• Usar palabras clave relevantes.
• Optimizar imágenes (<img alt="collar de oro">).
• Usar enlaces amigables (www.mitienda.com/collares).

✅ Seguridad Web:

• Usar HTTPS con SSL.
• Implementar validaciones en formularios.
• Proteger bases de datos contra inyecciones SQL.

---

🔟 Monitoreo y Mantenimiento 🔄

Después de lanzar tu sitio, monitorea su rendimiento:

📊 Herramientas útiles:

• Google Analytics (estadísticas de visitas).
• Google Search Console (SEO y errores).
• PageSpeed Insights (velocidad de carga).

🚀 Ejemplo de mejora continua:

• Revisar comentarios y feedback de usuarios.
• Optimizar imágenes y código.
• Mantener el contenido actualizado.

Segundo parcial

¿Qué es HTML? (HyperText Markup Language)

HTML es un lenguaje de marcado que se utiliza para crear la estructura básica de una página web. Sus principales funciones son:

• Definir contenido: texto, imágenes, videos, enlaces, tablas, formularios, etc.

• Organizar la información: usando etiquetas como <h1> a <h6>, <p>, <div>, <a>, <img>, etc.

• Interpretado por navegadores web: como Chrome, Firefox, Edge, etc.

Ejemplo básico de HTML:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Mi sitio web</title>
  </head>
  <body>
    <h1>¡Bienvenido!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

---

¿Qué es XHTML? (Extensible HyperText Markup Language)

XHTML es una versión más estricta de HTML basada en las reglas de XML. Fue creado para mejorar la portabilidad y compatibilidad de las páginas web con diferentes dispositivos y navegadores.

🔹 Características de XHTML:

• Las etiquetas deben cerrarse siempre, incluso las vacías (<br />, <img />).

• Todo el código debe estar bien anidado.

• Se escribe siempre en minúsculas.

• Aumenta la consistencia en el desarrollo web.

• 
  
  
  

---

Esquema de evolución de HTML a XHTML y HTML5

plaintext
HTML 1.0 (1993) → HTML 2.0 (1995) → HTML 3.2 (1997)
→ HTML 4.01 (1999) → XHTML 1.0 (2000)
→ XHTML 1.1 (2001) → HTML5 (2014 - actual)

• HTML5 es el estándar actual: más flexible, multimedia, semántico, interactivo, y adaptable a dispositivos móviles.

---

¿Qué es CSS? (Cascading Style Sheets)

CSS es el lenguaje de estilos que se utiliza para definir el diseño visual de una página HTML.

🔹 Funciones principales:

• Cambiar colores, tamaños, fuentes, márgenes, bordes, alineaciones, etc.

• Separar el contenido (HTML) del diseño (CSS).

• Aplicar estilos desde un archivo externo, interno o en línea.

🔹 Ejemplo básico de CSS:

css
body {
  background-color: lightblue;
  font-family: Arial, sans-serif;
}
h1 {
  color: navy;
  text-align: center;
}

---

Estructura básica de una página web

🔸 Cabeza (<head>)

Contiene información no visible directamente para el usuario:

• Título de la página

• Enlaces a archivos CSS o scripts

• Metadatos, favicon, etc.

html
<head>
  <title>Mi sitio</title>
  <link rel="stylesheet" href="estilos.css" />
</head>

Cuerpo (<body>)

Contiene todo el contenido visible de la página:

• Texto, imágenes, formularios, videos, etc.

html
<body>
  <h1>Título de mi web</h1>
  <p>Contenido principal de la página.</p>
</body>

---

¿En qué se basa el lenguaje HTML?

HTML se basa en un sistema de etiquetas (tags), que se abren y cierran para indicar partes específicas del contenido. Se compone de:

• Elementos: un conjunto de etiqueta de apertura, contenido y etiqueta de cierre.

html
<p>Este es un párrafo.</p>

• Atributos: modificadores dentro de la etiqueta de apertura.

html
<img src="foto.jpg" alt="Descripción de la imagen" />

---

Elementos HTML más comunes

Elemento	Función
<h1> a <h6>	Encabezados (de mayor a menor nivel)
<p>	Párrafos
<a>	Enlaces
<img>	Imágenes
<ul>, <ol>, <li>	Listas
<table>	Tablas
<form>	Formularios
<div>	Contenedor genérico
<span>	Texto en línea

---

Crear una página web desde Bloc de Notas (Notepad)

Pasos:

1. Abre Bloc de Notas.

2. Escribe el código HTML y guarda el archivo con extensión .html (Ej: index.html).

3. Haz doble clic sobre el archivo para abrirlo en el navegador.

🔹 Ejemplo básico:

html
<!DOCTYPE html>
<html>
<head>
  <title>Mi sitio</title>
</head>
<body>
  <h1>Hola Mundo</h1>
  <p>¡Esta es mi primera página web!</p>
</body>
</html>

¿Qué es Adobe Dreamweaver?

Adobe Dreamweaver es un software de diseño y desarrollo web que permite crear sitios y aplicaciones web de forma visual o escribiendo código. Es una herramienta muy utilizada por diseñadores y desarrolladores para crear páginas web responsivas, interactivas y compatibles con distintos navegadores.

Dreamweaver combina un editor de código con una vista de diseño visual (modo WYSIWYG, What You See Is What You Get), lo que permite ver el resultado de tu trabajo en tiempo real mientras lo desarrollas.

---

¿Para qué sirve Dreamweaver?

• Crear y editar páginas HTML, CSS, JavaScript y otros lenguajes.

• Diseñar sitios web completos de forma profesional.

• Administrar y publicar sitios web en servidores mediante FTP o SFTP.

• Usar plantillas prediseñadas o crear diseños propios desde cero.

• Integrar código con bases de datos (por ejemplo, con PHP y MySQL).

• Probar cómo se ve el sitio en distintos tamaños de pantalla (diseño adaptable o responsive).

---

Características principales

Funcionalidad	Descripción
Vista de diseño y código	Puedes trabajar en modo visual (diseño) o directamente en el código. También puedes usar ambos al mismo tiempo (vista dividida).
Autocompletado de código	El editor te sugiere etiquetas, atributos, funciones y clases mientras escribes, lo que agiliza el desarrollo.
Soporte para múltiples lenguajes	Permite trabajar con HTML5, CSS3, JavaScript, PHP, XML, ASP, entre otros.
Editor de CSS integrado	Puedes modificar estilos fácilmente, con herramientas visuales o directamente desde el código.
Vista previa en tiempo real	Muestra los cambios que haces al instante, sin necesidad de abrir el navegador.
Integración con otros programas de Adobe	Se integra con Photoshop, Illustrator y otras aplicaciones de Creative Cloud.
Gestión de archivos y sitios	Puedes organizar todos los archivos del sitio y subirlos a un servidor directamente desde Dreamweaver.

---

¿Cómo usar Dreamweaver para crear un sitio web?

1. Instalar Dreamweaver

• Descarga Adobe Dreamweaver desde la página oficial de Adobe.

• Requiere una cuenta Adobe y puede usarse con una licencia o prueba gratuita.

2. Crear un nuevo sitio

• Abre Dreamweaver y selecciona "Sitio > Nuevo sitio".

• Elige una carpeta local donde guardarás los archivos del sitio web.

• Puedes definir también el servidor remoto si vas a publicarlo en línea.

3. Crear tu primera página HTML

• Ve a "Archivo > Nuevo", selecciona "HTML", y haz clic en "Crear".

• Escribe el código HTML o usa las herramientas visuales para agregar encabezados, texto, imágenes, etc.

Ejemplo básico en Dreamweaver:

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Mi sitio web</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <h1>Bienvenido a mi sitio</h1>
  <p>Este es un ejemplo de página web creada con Dreamweaver.</p>
</body>
</html>

4. Aplicar estilos CSS

• Puedes crear un archivo CSS nuevo (por ejemplo, estilo.css) y vincularlo.

• Dreamweaver permite editar los estilos visualmente (colores, tamaños, márgenes, etc.) o con código.

5. Vista previa del sitio

• Pulsa F12 o haz clic en "Vista previa en navegador" para ver cómo se verá tu sitio web.

• También puedes usar la vista en tiempo real directamente dentro del programa.

6. Publicar el sitio web

• Configura una conexión FTP para subir los archivos al servidor web.

• Dreamweaver puede subir, sincronizar y gestionar tus archivos directamente desde la interfaz.

---

Ventajas de usar Dreamweaver

• Permite trabajar tanto visual como técnicamente.

• Reduce errores gracias a sus herramientas de validación y sugerencias.

• Ahorra tiempo al permitir crear diseños rápidos con plantillas o herramientas visuales.

• Ideal para proyectos personales, educativos y profesionales.