Administración de Sitios Web

Pedro Bermúdez Talavera

 Diseño Web y Desarrollo Web
Diferencias Desarrollo Web
Concepto Se encarga de las características y funciones
internas de una página web. Crea la parte interna
de una web como son los sistemas de
funcionamiento, contenidos, base de datos, entre
otros. Esto es lo que permite la interacción de
una web con los usuarios.
Habilidades Aquí se refiere al uso correcto de las diferentes
herramientas de programación, en especial en
establecer soluciones cuando se presente algún
problema con web.
Conocimiento Manejo de software de programación, base de
datos, CMS, manejo de sistemas, entre otros.
https://ondesarrollo.com/se-diferencia-diseno-web-desarrollo-web/
Diseño Web
Se refiere a crear la apariencia de una página web,
se encarga de la estética de la misma e incluye
logo, diseño gráfico, forma de navegación, color.
Así como otras funciones las cuales permitan una
navegación fácil y sencilla.
En este punto es de gran importancia el diseño
gráfico que presenta la página web, pues de ello
depende si podrá captar la atención de aquellos
que la visitan.
Manejo de herramientas o software de diseño, así
como técnicas de color, tipografía entre otras.
Tipos de Sitio Web
Páginas web estáticas
• Son aquellas que no necesitan variar contenidos, siendo ideales para
empresas que buscan mostrar información básica del negocio.
• Suelen estar construidas con html porque su contenido es texto,
enlaces y archivos. También con otros códigos de programación.
• El contenido se suele actualizar poco, pero para hacerlo es necesario
tener unos conocimientos de html. Por eso, suele gestionarlo un
programador web o el propietario de la web si tiene conocimiento de
este lenguaje de programación.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Páginas web dinámicas
• Son complejas porque muestran información básica pero también
contenidos que varían en función de la interacción del usuario.
• En las tiendas online se pueden añadir productos al carrito,
seleccionar diferentes características de un producto, etc.
• Suelen tener un panel de control, generalmente CMS, desde el que
acceder al contenido y modificarlo de una forma más sencilla.
• Requiere de conocimientos de programación y manejo de bases de
datos. Se utilizan soluciones CMS (WordPress, Prestashop). Crearla a
medida puede resultar muy costoso.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Web personal
• Una web personal es aquella que tiene contenido a nivel personal,
siendo sobre todo desarrollada por particulares que quieren
comunicar algo.
• Si tienes un hobby que compartir, quieres mostrarle a alguien tus
conocimientos, enseñar tu web a tus amigos, crear un blog personal o
lo que desees, este es el tipo de web que buscas.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Web corporativa
• Lo principal es dar información comercial sobre una empresa. Se
indica quién es la empresa, el equipo, los productos y servicios que
ofrecen, un catálogo, dónde se encuentra, su historia, la página de
contacto y alguna que otra información más.
• Las webs corporativas deben ser profesionales, por tanto, deben
cuidar muy bien su diseño y la optimización a todos los dispositivos
desde los que se accede.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Portafolio
• Es una plataforma base para sus proyectos, estudios de caso, y toda la
información acerca de usted. Es una de las mejores formas para
expresar su personalidad, experiencia y capacidades.
• Un portafolio es una buena forma para presentarse ante fotógrafos,
diseñadores, desarrolladores y una amplia variedad de artistas para
presentar su trabajo en línea. Le permite reflejar su identidad a través
de sus trabajos (fotos, diseño gráfico, sketches, etc.)

https://kinsta.com/es/blog/portafolio-online/
Tipos de Sitio Web
Blog
• Un sitio web en donde se tiene contenido actualizado con frecuencia.
Se publican temas específicos donde se puede interactuar por
formularios, comentarios y chats.
• El contenido se presenta de forma cronológica inversa. Lo gestionan
una o varias personas. Las empresas usar el blog para dar información
de interés a sus clientes.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Ecommerce
• Son aquellas en las que se comercializan productos de una marca o
empresa con posibilidad de comprarlos en cualquier momento.
• Se pueden ver fichas de producto con información sobre
características, precio y demás datos relevantes.
• Tener un ecommerce es complejo y caro, sin embargo, existen
opciones muy interesantes en el mercado que nos permiten tenerlo
de forma rápida, fácil y económica.

https://clickage.es/diseno-web/tipos-de-webs/
Tipos de Sitio Web
Landing Page (página de aterrizaje)
• Es una página web diseñada específicamente para convertir visitantes
en leads. Esta página nos ayuda a convertir a los usuarios en clientes
finales, de ahí la importancia de conseguir crear una landing page que
convierta de verdad.
Microsites
• Son páginas web que se han creado expresamente para un propósito
concreto, que suele ser la captación de leads, y se encuentran fuera
de la navegación por nuestra página web principal.

https://www.40defiebre.com/que-es/landing-page
Dominio y Hosting
Dominio
• El dominio es el nombre de tu sitio en internet, ya
sea el de la página web tu empresa, o el de tu
proyecto personal o tienda ecommerce.
• Un dominio ayuda a que los usuarios se dirijan
directamente a tu sitio web. Contiene los
parámetros que indican a los navegadores web
dónde encontrar y acceder a la información de tu
sitio en internet.
• Un dominio atractivo y fácil de recordar puede
hacer que tu sitio se destaque entre los miles de
millones que existen.
Hosting
• El hosting o alojamiento web se refiere al lugar que
ocupan los archivos de un sitio web en línea.
• Los elementos básicos de un plan de hosting, que
pueden variar dependiendo del proveedor que
elijas para este servicio.
• Almacenamiento: memoria y espacio en disco.
• Número de sitios: desde un sitio hasta sitios
ilimitados asociados a tu misma cuenta.
• Ancho de banda: velocidad de carga del sitio
dependerá de los recursos del servicio.
• Seguridad: procesos de seguridad de datos.
https://pe.godaddy.com/blog/cual-es-la-diferencia-entre-hosting-y-dominio/
Consejos sobre Dominios
• Nombre de dominio: recordación, marca, empresa, evitar confusión,
utilizar palabras clave,
• Dominio y subdominio.
• Extensiones por tipo: .com, .org, .edu, .gob, .net, .info, etc.
• Extensiones por país: .pe, .co, .ar, .mx, .us, .it, .au, .nl, etc.
• Extensiones especiales: .blog, .link, .shop, .xyz, .online, etc.
Donde adquirir Dominios y Hosting
Dominios
• https://pe.godaddy.com/
• https://donweb.com/es-pe/
• https://punto.pe/
• https://yachay.pe/dominios
• https://www.hostinger.es/comprar-
dominio
• https://www.hostingperu.com.pe/compr
ar_dominio.html
• https://www.hostalia.com/dominios/
• https://www.bluehosting.pe/dominios/
Hosting
• https://www.hostgator.com/
• https://www.bluehost.com/
• https://www.fastcomet.com/
• https://es.siteground.com/
• https://www.hostinger.es/
• https://raiolanetworks.es/
• https://www.webempresa.com/
• https://donweb.com/es-pe/web-hosting
• https://www.hostingperu.com.pe/
¿Qué son los códigos de estado HTTP?
• Cada vez que haces clic en un enlace o escribes una URL y pulsas
Enter, tu navegador envía una petición al servidor web del sitio al que
estás intentando acceder. El servidor recibe y procesa la solicitud, y
luego devuelve los recursos relevantes junto con un encabezado
HTTP.
• Los códigos de estado de HTTP se entregan a tu navegador en el
encabezado de HTTP. Aunque los códigos de estado se devuelven
cada vez que el navegador solicita una página web o un recurso, la
mayoría de las veces no los ves.
• Por lo general, sólo cuando algo sale mal, es posible que veas uno en
tu navegador.

https://kinsta.com/es/blog/codigos-de-estado-de-http/
Tipos de código de estado HTTP
• 100s: Códigos informativos que indican que la solicitud iniciada por el
navegador continúa.
• 200s: Los códigos con éxito regresaron cuando la solicitud del
navegador fue recibida, entendida y procesada por el servidor.
• 300s: Códigos de redireccionamiento devueltos cuando un nuevo
recurso ha sido sustituido por el recurso solicitado.
• 400s: Códigos de error del cliente que indican que hubo un problema
con la solicitud.
• 500s: Códigos de error del servidor que indican que la solicitud fue
aceptada, pero que un error en el servidor impidió que se cumpliera.

https://kinsta.com/es/blog/codigos-de-estado-de-http/
Tipos de código de estado HTTP comunes
• 200: «Todo está bien». Este es el código que se entrega cuando una página
web o recurso actúa exactamente como se espera.
• 301: «El recurso solicitado ha sido trasladado permanentemente». Este
código se entrega cuando una página web o un recurso ha sido
reemplazado permanentemente por un recurso diferente. Se utiliza para la
redirección permanente del URL.
• 302: «El recurso solicitado se ha movido, pero fue encontrado». Este
código se utiliza para indicar que el recurso solicitado se encontró, pero no
en el lugar donde se esperaba. Se utiliza para la redirección temporal de la
URL.
• 404: «No se encontró el recurso solicitado». Este es el mensaje de error
más común de todos ellos. Este código significa que el recurso solicitado no
existe, y el servidor no sabe si alguna vez existió.

https://kinsta.com/es/blog/codigos-de-estado-de-http/
¿Qué es WordPress?
• WordPress es un sistema de gestión de contenidos (CMS) que permite
crear y mantener un blog u otro tipo de web.
• No es solo un sistema sencillo e intuitivo para crear un blog personal,
sino que permite realizar toda clase de web complejas.
• Es un sistema ideal para un sitio web que se actualice de forma
periódica. Si se escribe contenido con cierta frecuencia, cuando
alguien accede al sitio web, puede encontrar todos esos contenidos
ordenados cronológicamente (primero los más recientes y por último
los más antiguos).

https://www.webempresa.com/wordpress/que-es-wordpress.html
¿Cómo instalar WordPress?
• En primer lugar deberemos disponer de un lugar donde instalar nuestro
WordPress. Podemos hacerlo en un servicio de hosting. Este servidor tiene que
ser capaz de ejecutar PHP y soportar bases de datos MySQL. Además, existen
otros requisitos mínimos que habrá que cumplir para que todo funcione
correctamente.
• Una vez que dispongamos de un lugar donde alojar nuestro WordPress,
deberemos descargar el instalador de WordPress y descomprimirlo en la ruta
donde se vaya a cargar la web. A continuación tendremos que crear una base de
datos MySQL y un usuario con acceso a esa base de datos.
• Ahora deberemos abrir la página donde hemos subido los archivos de WordPress.
Se mostrará un asistente de instalación en varios pasos, donde tendremos que
introducir los datos de conexión a la base de datos, el nombre de nuestra web, y
los datos del usuario administrador. Concluido este asistente tendremos la web
lista para empezar a añadir contenidos y personalizarla.

https://www.webempresa.com/wordpress/que-es-wordpress.html
Diferencias entre WordPress .com y .org
WordPress.com WordPress.org
Es más fácil de utilizar. Es un poco más técnico pero hay más control.
No es de tu propiedad. Es de tu propiedad.
Es gratuito y no se requiere adquirir un dominio propio o Requiere adquirir un dominio y un hosting donde instalar
un hosting. Contiene anuncios. la aplicación. No contiene anuncios.
El sistema se encarga del alojamiento, la seguridad y los El mantenimiento de seguridad y backups es nuestra
backups. responsabilidad.
Permite dominio propio. Permite dominio propio.
Se puede usar una versión gratuita. Se requiere dominio y hosting.
Personalización limitada. Dispone de plantillas gratis y Personalización completa. Permite instalar cualquier
premium. plantilla y personalizarlas.
Permite instalar plugins. Permite instalar plugins.
Permite enfocarse en los contenidos. Hay que tener en cuenta configuración y contenidos.
Soporte técnico. Foro de ayuda
Sitemap
Páginas Básicas y Secundarias

Páginas Básicas Páginas Secundarias

• Página de inicio
• Página de contacto
• Página sobre la empresa
• Página de entradas (blog)
• Catálogo de productos
• Ficha de productos
• Carrito de compras
• Términos y condiciones
• Política de privacidad
• Política de cookies
• Preguntas frecuentes
• Mapa de sitio
• Trabaja con nosotros
• Cambios y devoluciones
Inventario de contenidos
Herramientas básicas
• https://www.iloveimg.com/es
• https://pixabay.com/es/
• https://www.flaticon.com/
• https://www.freeimages.com/es
• https://www.freepik.es/
• https://www.pexels.com/es-es/
• https://www.pngocean.com/
• https://www.shutterstock.com/
• https://stocksnap.io/
• https://unsplash.com/
Analítica web
• La analítica web consiste en entender e interpretar los datos para
optimizar y mejorar resultados.
• No se trata sólo de analizar sino de tener visión crítica y saber
interpretar la información que nos proporcionan las herramientas de
analítica, ya sea una web para una ecommerce, un sitio corporativo,
un portal publicitario o una red social.

https://www.iebschool.com/blog/herramientas-analisis-web-analitica-usabilidad/
Google Analytics y Google Search Console
• Son las herramientas gratuitas de Google, esenciales para todo aquel
que tiene un sitio web. Utilizándolas en conjunto es posible
supervisar, inspeccionar, encontrar problemas y analizar el tráfico de
un sitio web.
• Mientras Google Analytics te da todos los datos de los usuarios a
partir del momento que llegan a tu sitio, Google Search Console te va
a dar las informaciones de cómo es que estos usuarios llegan y cuál es
su intención de búsqueda.

https://rockcontent.com/es/blog/google-analytics-y-search-console/