En este tema aprenderás las nociones básicas para construir tu web desde 0.
I. Conceptos Básicos de una web
- ¿Qué es una página web?Una página web es un documento digital que se puede acceder a través de internet o de una red interna. Piensa en ella como un documento de Word o un archivo PDF, pero en lugar de estar almacenado en tu computadora, está almacenado en un servidor y se puede acceder a él desde cualquier lugar del mundo a través de internet.
- Elementos de una página web
- Texto: El contenido escrito que se encuentra en la página web. Este es el principal medio de comunicación en la mayoría de las páginas web.
- Imágenes: Las imágenes pueden ser fotografías, ilustraciones, gráficos, etc. Se utilizan para mejorar la apariencia de la página web y ayudar a comunicar el mensaje.
- Videos: Los videos pueden ser utilizados para demostrar productos, explicar conceptos, entretenimiento, etc.
- Otros medios digitales: Esto puede incluir audio, animaciones, documentos descargables, etc.
- Lenguaje de marcado HTMLHTML (HyperText Markup Language) es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web. Es el lenguaje que se utiliza para estructurar y dar formato a los contenidos de una página web.
- Etiquetas HTML: Las etiquetas HTML son la base de cualquier página web. Son como los bloques de construcción que forman la estructura de la página. Algunas de las etiquetas más comunes incluyen
<head>,<body>,<h1>,<p>,<img>, etc. - Atributos HTML: Los atributos se utilizan para proporcionar información adicional sobre las etiquetas HTML. Por ejemplo, el atributo
srcen la etiqueta<img>se utiliza para especificar la fuente de la imagen.
- Etiquetas HTML: Las etiquetas HTML son la base de cualquier página web. Son como los bloques de construcción que forman la estructura de la página. Algunas de las etiquetas más comunes incluyen
- CSS y JavaScriptAunque HTML es esencial, las páginas web modernas también utilizan CSS (Cascading Style Sheets) y JavaScript para mejorar la apariencia y la funcionalidad de la página.
- CSS: Se utiliza para describir cómo se deben mostrar los elementos HTML en la pantalla. Permite a los desarrolladores controlar cosas como los colores, las fuentes, el espaciado, etc.
- JavaScript: Es un lenguaje de programación que se utiliza para hacer que las páginas web sean interactivas. Puede ser utilizado para cosas como validar formularios, crear animaciones, cargar contenido dinámicamente, etc.
II. Componentes de una web: servidor + dominio
Imagina que quieres construir una casa. Necesitarás dos cosas principales: un terreno donde construir la casa y la dirección que las personas usarán para visitarte. En el mundo digital, tu página web es la casa, el servidor es el terreno y el dominio es la dirección.
- Servidor (El Terreno): Un servidor es como el terreno donde se construye tu casa. Es un sistema informático que almacena los archivos de tu página web (la casa) y los hace accesibles a los usuarios a través de internet. Al igual que un terreno, los servidores vienen en diferentes tamaños y capacidades. Aquí es donde entran en juego las características del hosting.
- Ancho de Banda (Las Carreteras): El ancho de banda es como las carreteras que llevan a tu casa. Determina cuántos datos pueden transferirse desde tu sitio web (la casa) a los visitantes. Un ancho de banda más amplio permite que más visitantes accedan a tu sitio web al mismo tiempo sin ralentizaciones.
- Espacio de Almacenamiento (El Tamaño de la Casa): El espacio de almacenamiento es el tamaño de tu casa. Determina cuántos archivos puedes almacenar en tu servidor. Cuanto más grande sea tu sitio web, más espacio de almacenamiento necesitarás.
- Soporte (El Equipo de Mantenimiento): El soporte es como tu equipo de mantenimiento. Son las personas a las que llamas cuando algo va mal en tu casa. Un buen hosting debería ofrecer un soporte técnico eficiente para ayudarte a resolver cualquier problema que puedas tener con tu servidor.
- Dominio (La Dirección): Un dominio es la dirección de tu casa en internet. Es lo que los usuarios escriben en la barra de direcciones de su navegador para visitar tu página web. Al igual que una dirección física, tu dominio debe ser único para que las personas puedan encontrarte.
III. Estructura de WordPress: HTML, CSS y base de datos PHP
WordPress es una herramienta que te permite crear y gestionar sitios web de manera sencilla. Para entender cómo funciona WordPress, es útil conocer tres componentes clave: HTML, CSS y PHP.
1. HTML
Imagina que estás construyendo una casa. El HTML sería como los ladrillos y el cemento que forman la estructura de la casa. En WordPress, HTML se utiliza para crear la estructura básica de tu sitio web, como las páginas y las entradas de blog.
2. CSS
Si el HTML es como los ladrillos y el cemento de una casa, entonces el CSS sería como la pintura y la decoración que hacen que la casa sea bonita y única. En WordPress, CSS se utiliza para controlar el diseño y la apariencia de tu sitio web. Por ejemplo, puedes usar CSS para cambiar los colores, las fuentes y el diseño de tu sitio.
3. Base de datos PHP
Finalmente, PHP y la base de datos serían como el sistema eléctrico y de plomería de la casa, que hacen que todo funcione correctamente. En WordPress, PHP se utiliza para gestionar la información de tu sitio web y mostrarla a los visitantes. Por ejemplo, cuando alguien visita tu sitio, PHP se encarga de buscar la información correcta (como el texto de una entrada de blog) en la base de datos y mostrarla en la página.
La base de datos es el lugar donde se guarda toda la información de tu sitio WordPress, como las entradas de blog, las páginas, los comentarios y las configuraciones.
IV. Manejo básico de un servidor Dinahosting: back ups y php
Dinahosting es un popular proveedor de servicios de hosting que permite a los usuarios gestionar sus propios servidores. En esta sección, aprenderemos cómo realizar copias de seguridad (back ups) y gestionar PHP en un servidor Dinahosting.
Para adquirir tu prueba de hosting ve aquí
1. Introducción a Dinahosting y cómo obtener una prueba gratuita
Para comenzar, es importante entender cómo funciona Dinahosting. En este video, Dinahosting explica cómo puedes empezar a desarrollar tu proyecto online sin tener que pagar ni alojamiento ni dominio hasta que esté listo.
Además, aquí puedes aprender cómo comprar un hosting WordPress en Dinahosting y cómo obtener una prueba gratuita.
2. Sección de Backups
Esta sección te permite acceder a las copias de seguridad de la información de tu hosting, así como hacer restauraciones puntuales de ficheros, bases de datos y correo.
Además, puedes aprender más sobre cómo funciona el servicio de Backups en Dinahosting en este enlace.
3. Sección PHP
Para gestionar PHP en Dinahosting, puedes seguir las instrucciones en estos enlaces:
- Cómo modificar la configuración de PHP de tu web – En este artículo, Dinahosting explica cómo puedes modificar la configuración PHP de tu web o aplicación directamente desde tu Panel de Control.
- Cómo modificar parámetros PHP – Aquí se detalla cómo acceder a tu Panel de Control para modificar los parámetros de PHP.
- Sección de PHP de tu hosting – En esta sección, puedes aprender cómo ampliar los límites de algunas de las variables de PHP, de forma temporal o permanente.
IV. CMS: Wix, WordPress y Shopify
Un Sistema de Gestión de Contenidos (CMS) es una aplicación que permite a los usuarios crear, editar y gestionar contenido digital. Wix, WordPress y Shopify son ejemplos de CMS populares que facilitan la creación de páginas web sin necesidad de tener conocimientos de programación.
Wix
Wix es una plataforma de creación de sitios web que permite a los usuarios crear sitios web HTML5 y sitios móviles a través del uso de herramientas de arrastrar y soltar en línea. Los usuarios pueden agregar funcionalidades como formularios de contacto, galerías de imágenes, blogs y tiendas online sin necesidad de tener conocimientos de programación.
WordPress
WordPress es un sistema de gestión de contenidos de código abierto que permite a los usuarios crear y gestionar sitios web y blogs. WordPress es conocido por su flexibilidad y gran cantidad de plugins y temas disponibles, lo que permite a los usuarios personalizar sus sitios web de acuerdo a sus necesidades.
Shopify
Shopify es una plataforma de comercio electrónico que permite a los usuarios crear sus propias tiendas online. Shopify proporciona una variedad de plantillas que pueden ser personalizadas para satisfacer las necesidades individuales de los usuarios. También ofrece funcionalidades como procesamiento de pagos, gestión de inventario y herramientas de marketing.
Matriz de Comparación
| Wix | WordPress | Shopify | |
|---|---|---|---|
| Facilidad de uso | Muy fácil de usar con su interfaz de arrastrar y soltar. | Requiere un poco más de aprendizaje, pero sigue siendo accesible para los principiantes. | Fácil de usar, especialmente para configurar una tienda online. |
| Personalización | Ofrece una amplia gama de plantillas y aplicaciones. | Ofrece la mayor flexibilidad y personalización con miles de plugins y temas. | Ofrece plantillas personalizables, pero no es tan flexible como WordPress. |
| E-commerce | Posibilidad de añadir una tienda online, pero no es su principal fortaleza. | Necesita plugins como WooCommerce para configurar una tienda online. | Especializado en comercio electrónico con todas las herramientas necesarias para una tienda online. |
| SEO | Buenas capacidades de SEO con opciones para editar metadatos y URLs personalizadas. | Excelentes capacidades de SEO con plugins como Yoast SEO. | Buenas capacidades de SEO y herramientas de marketing integradas. |
| Precio | Ofrece un plan gratuito con opciones de pago para funcionalidades adicionales. | Es gratuito, pero el hosting, los temas y los plugins pueden tener un costo. | No ofrece un plan gratuito, pero sus planes de pago incluyen hosting y seguridad. |
| Wix | WordPress | Shopify | |
|---|---|---|---|
| Es para ti si… | Quieres una solución fácil de usar para crear un sitio web personalizado. Ideal para pequeñas empresas, portafolios, blogs personales y sitios web de eventos. | Necesitas un sitio web altamente personalizable y estás dispuesto a dedicar un poco más de tiempo a aprender cómo funciona. Ideal para blogs, sitios web de noticias, sitios web de empresas. | Tu principal objetivo es vender productos online. Perfecto para los propietarios de tiendas online que quieren una plataforma que incluya todas las herramientas necesarias para el comercio electrónico. |
| No es para ti si… | Necesitas un sitio web con funcionalidades avanzadas o específicas que Wix no ofrece, o si planeas escalar significativamente tu sitio web en el futuro. | No tienes tiempo o no estás dispuesto a aprender cómo usar el sistema y mantenerlo actualizado. No es ideal si buscas una solución de comercio electrónico «lista para usar». | No estás centrado en el comercio electrónico. No es ideal si quieres un control total sobre cada aspecto de tu sitio web, ya que la personalización es más limitada en comparación con WordPress. |
V. Práctica con Wix
Aquí tienes una lista de tutoriales en video de YouTube actualizados para 2023 en español que te ayudarán a aprender a manejar Wix desde cero:
- Tutorial WIX 2023 | Crea tu página Web PERSONALIZADA en WIX por Metics Media | Español
- Duración: 52:54
- Vistas: 37298
- Descripción: Un tutorial completo para ayudarte a crear tu propio sitio web personalizado con Wix.
- Cómo Crear Una Página Web En Wix (2023) | Tutorial Paso a Paso Para Principiantes por Tutoriales Diarios
- Duración: 8:32
- Vistas: 4489
- Descripción: Un tutorial paso a paso para principiantes sobre cómo crear una página web en Wix.
- Cómo Crear Una Página Web En Wix en español (2023) Tutorial Paso a Paso por Tecno Tutoriales
- Duración: 10:49
- Vistas: 21226
- Descripción: Un tutorial paso a paso en español sobre cómo crear un sitio web con Wix.
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Wix y cómo utilizar sus diversas funciones para crear tu propio sitio web. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta. ¡Buena suerte!
VI. Práctica con Shopify
Aquí tienes una lista de tutoriales en video de YouTube actualizados para 2023 en español que te ayudarán a aprender a manejar Shopify desde cero:
- Cómo Crear una Tienda de Shopify en 2023 (TUTORIAL PASO A PASO) por Metics Media | Español
- Duración: 18:53
- Vistas: 37329
- Descripción: Un tutorial paso a paso para ayudarte a crear tu propia tienda en Shopify.
- Tutorial de Shopify para Principiantes 2023 – Hacer Una Tienda COMPLETA en 13 Minutos (Paso a Paso) por Metics Media | Español
- Duración: 13:58
- Vistas: 16645
- Descripción: Un tutorial para principiantes que te enseñará cómo hacer una tienda completa en Shopify en solo 13 minutos.
- Curso GRATIS De Shopify | Cómo Crear Una Tienda Online Con Shopify Paso a Paso 2023 por Adrián Sáenz
- Duración: 2:19:12
- Vistas: 1084591
- Descripción: Un curso gratuito de Shopify que te guiará paso a paso para crear tu propia tienda online.
- Curso COMPLETO de Shopify 2023 GRATIS en español ✅ Crear una Tienda Online DESDE CERO 😎 por Ciudadano 2.0
- Duración: 2:20:17
- Vistas: 66176
- Descripción: Un curso completo de Shopify en español que te enseñará cómo crear una tienda online desde cero.
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Shopify y cómo utilizar sus diversas funciones para crear tu propia tienda online. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta. ¡Buena suerte!
VII. Práctica con WordPress
Aquí tienes una lista de tutoriales en video de YouTube actualizados para 2023 en español que te ayudarán a aprender a manejar Elementor y Divi en WordPress:
Elementor
- ✅ Crear una Web en WordPress con Elementor PRO 2023 (Tutorial Completo) por Pedro SEO
- Duración: 2:00:49
- Vistas: 41696
- Descripción: Guía completa para crear una página web con WordPress y Elementor en 2023.
- Tutorial de ELEMENTOR para WordPress 2022 (Parte 01) por Matias Porta
- Duración: 1:13:12
- Vistas: 171998
- Descripción: Tutorial de Elementor para WordPress, completo, desde cero y actualizado al 2021 para que aprendas a usar este plugin.
Divi
- Cómo Crear una Página Web con DIVI y WORDPRESS ✅ Curso Divi 2023 por MarketHax | Ecommerce México
- Duración: 32:57
- Vistas: 11787
- Descripción: En este curso completo te explico como crear una pagina web con Divi en WordPress.
- Cómo crear un sitio con WordPress 2023 | Curso de Divi Theme Tutorial en Español por Darrel Wilson – En Español
- Duración: 4:17:23
- Vistas: 7386
- Descripción: Un curso completo sobre cómo crear un sitio web increíble con WordPress y Divi.
- 🏅 Tutorial Divi en Español: Como Crear una Página Web en WordPress 2023 por MarketHax | Ecommerce México
- Duración: 1:36:34
- Vistas: 41805
- Descripción: Un tutorial sobre cómo crear una página web en WordPress usando Divi.
Estos videos te proporcionarán una visión detallada y paso a paso de cómo comenzar con Elementor y Divi en WordPress y cómo utilizar sus diversas funciones para crear tu propio sitio web o blog. Recuerda que la práctica es clave cuando se aprende una nueva herramienta, así que no dudes en pausar los videos y seguir los pasos por tu cuenta. ¡Buena suerte!
