PÁGINAS WEB by SOFIA YARETZI SANCHEZ ARELLANO

¿QUÉ ES UNA PÁGINA WEB?

2023-02-20 17:04:35 UTC

¿Qué es?

saas050916mmcnrfa1 — 2023-02-20 17:07:56 UTC

Consiste en transformar el diseño de una web en un conjunto de archivos (html, css y js) para que los navegadores web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos.
La maquetación es una fase avanzada del proceso de desarrollo web.

¿QUÉ ES UN SITIO WEB?

2023-02-20 17:09:54 UTC

Es un espacio digital en Internet con información que todo el mundo puede obtener online.

Todo sitio web está constituido por contenido en distintos formatos: texto, fotos, videos, etc. Estos elementos se organizan cuidadosamente dentro de un diseño que debe ser atractivo y fácil de utilizar para el visitante.

OBSERVA EL VÍDEO QUE ESTÁ DENTRO DE SITIO Y CONOCE LA DIFERENCIAS ENTRE UNA Y OTRA

2023-02-20 17:12:37 UTC

Tablas

saas050916mmcnrfa1 — 2023-02-20 17:14:48 UTC

Como las tablas tienen filas y columnas, nos servirán para crear varias áreas donde se mostrarán los contenidos maquetados como si fuera una revista o un portal.

2023-02-20 17:16:21 UTC

Malavé, M. (2022, 26 agosto). ¿Qué es un sitio web? Neolo Blog. https://www.neolo.com/blog/que-es-un-sitio-web.php

TEXTO

2023-02-20 17:16:39 UTC

El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en hipertexto.

Divisiones

saas050916mmcnrfa1 — 2023-02-20 17:16:56 UTC

La etiqueta

define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc).
Divisiones anidadas:
La etiqueta

se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web.

¿Cuándo utilizar una división?

Las divisiones son elementos muy útiles, puesto que permiten agrupar elementos, pero hay que evitar las divisiones innecesarias. Por ejemplo, en general no suele ser necesario crear divisiones cuando sólo contienen un elemento.

2023-02-20 17:17:53 UTC

WEB SIMPLE. (2021, 10 mayo). QUÉ ES UNA PÁGINA WEB EXPLICACIÓN SIMPLE. YouTube. https://www.youtube.com/watch?v=qJxbC9PJSrA

IMAGENES

2023-02-20 17:18:11 UTC

Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga. Las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

HIPERVÍNCULOS

2023-02-20 17:19:48 UTC

Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces.

DOMINIO

2023-02-20 17:20:21 UTC

Nombre fácil de recordar asociado a una dirección IP física de Internet. Se trata del nombre único que se muestra después del signo @ en las direcciones de correo y después de www. en las direcciones web.

2023-02-20 17:21:17 UTC

URL

2023-02-20 17:22:52 UTC

Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una dirección que es dada a un recurso único en la Web. En teoría, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc.

VIDEOS

2023-02-20 17:23:02 UTC

Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios.

Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.

2023-02-20 17:26:04 UTC

2023-02-20 17:26:45 UTC

Conceptos basicos de los nombres de dominio - Ayuda de Administrador de Google Workspace. (s. f.). https://support.google.com/a/answer/2573637?hl=es

Encabezado

2023-02-20 17:27:46 UTC

Bebe ser llamativo para invitar al usuario a navegar por ella. Es necesario que la primera imagen que los visitantes tengan de nuestra web sea atractiva. Por ello, el logo debe ser estar en un lugar preferente y es conveniente recurrir a los colores corporativos.

Botones de redes sociales

2023-02-20 17:29:08 UTC

El mejor medio del que disponen las empresas para llegar a su público.

Incluir botones que redirijan a las diferentes redes sociales ayudará a unificar tu presencia digital y, en consecuencia, aumentará la confianza de los usuarios.

Productos/Servicios

2023-02-20 17:30:15 UTC

Esta es una de las partes más importantes de los elementos de una página web, ya que proporciona a tus usuarios toda la información sobre la oferta de tu empresa. Tanto si tienes un e-commerce como una tienda física.

Cuerpo o body

2023-02-20 17:31:04 UTC

Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la página principal.

Pie de página o footer

2023-02-20 17:31:48 UTC

El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página. En el footer podemos encontrar los siguientes elementos:

Menú simplificado
Información de contacto
Botones de redes sociales
Logo de la empresa
Enlace a la política de privacidad

Contacto

2023-02-20 17:31:56 UTC

Un buen recurso que está presente en muchas web son los chatbots o chats en directo, mediante los cuales cualquier duda o consulta pueden ser resueltas de manera rápida y eficaz.

EJEMPLO

2023-02-20 17:32:11 UTC

2023-02-20 17:32:55 UTC

Casas, V. (2022, 28 abril). Partes de una página web: Estructura y contenido. Blog de LucusHost. https://www.lucushost.com/blog/partes-de-una-pagina-web-estructura-y-contenido/

Clases

saas050916mmcnrfa1 — 2023-02-20 17:33:30 UTC

2023-02-20 17:33:30 UTC

Publicado por Ing. Hugo Delgado. (2022, 22 agosto). Elementos básicos de un sitio Web y sus partes. Diseño Web akus.net. https://disenowebakus.net/elementos-de-un-sitio-web.php

"Quiénes somos?"

2023-02-20 17:34:09 UTC

Este apartado es determinante, especialmente si queremos convencer a los usuarios de que lo que nuestra empresa puede ofrecerles es mucho más de lo que pueden hacer nuestros competidores.

VIDEO

2023-02-20 17:34:33 UTC

HOSTTING

2023-02-20 17:36:03 UTC

Servicio que provee a los usuarios de Internet un espacio de almacenamiento en línea, también conocido como webspace, que permite publicar todo el contenido relacionado con un sitio web.

2023-02-20 17:36:14 UTC

2023-02-20 17:39:40 UTC

Los estándares web se introdujeron para proteger el ecosistema web, para mantenerlo abierto, gratuito y accesible para todos.

Menús

saas050916mmcnrfa1 — 2023-02-20 17:39:53 UTC

Se debe establecer una capa contenedora de todos los botones del menú, que además sirve para establecer el fondo gráfico del menú, es decir, que es la capa que dará la apariencia de una barra horizontal que ocupará todo el ancho de la página.
Para ello, luego de la etiqueta de cierre de la capa de la cabecera de la página, se colocará esta capa que corresponde el identificador “menu”.

Ejemplos:

2023-02-20 17:40:57 UTC

HTML (HyperText Markup Language), para definir la estructura de los documentos.
XML (eXtensible Markup Language), que sirve de base para un gran número de tecnologías.
CSS (Cascading Style Sheets), que permite asignar estilos para la representación de los documentos.
Javascript, que permite otorgar dinamismo y funcionalidad.

PARA SABER MÁS:

saas050916mmcnrfa1 — 2023-02-20 17:41:23 UTC

2023-02-20 17:41:40 UTC

2023-02-20 17:42:14 UTC

Sabías que...

saas050916mmcnrfa1 — 2023-02-20 17:42:50 UTC

https://open.spotify.com/episode/2YE2o8ii9hnMnxPSJ0a8b8?si=dw1m8ALZTf61EIsTlnAg1Q

Maquetación web

saas050916mmcnrfa1 — 2023-02-20 17:46:05 UTC

Fernández, A. (2021) Maquetacion de páginas web. https://www.lawebera.es/como-hacer/ejemplos-html-xhml/maquetar-paginas-web-crear-menus-horizontales.php
Flores, A. (2019) https://www.crehana.com/blog/transformacion-digital/que-es-maquetacion-web/

saas050916mmcnrfa1 — 2023-02-20 17:51:55 UTC

¿Qué es la usabilidad web?

saas050916mmcnrfa1 — 2023-02-27 00:37:53 UTC

La usabilidad web es el grado de facilidad de uso que tiene una página web para los visitantes que entran e interactúan con ella.

Una web con una buena usabilidad es aquella que permite a los usuarios una interacción sencilla, intuitiva, agradable y segura.

Imágenes

saas050916mmcnrfa1 — 2023-02-27 00:44:41 UTC

Usa el atributo title para dar alguna información cuando se pasa el ratón por encima de la imagen. L
Es importante controlar el tamaño de las imágenes.
Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta.
Una buena infografía puede sustituir o complementar a un texto.

Posiciones de los elementos

saas050916mmcnrfa1 — 2023-02-27 00:52:38 UTC

Estática: si un elemento se mueve, el otro se moverá también.
Absoluta: un elemento basándonos en propiedades x e y. La parte difícil es que va a ser absoluto frente al elemento padre que tendrá una posición relativa, absoluta o fija.
Relativa: sirven como un marco de referencia local para los elementos secundarios con posición absoluta.
Fija

Usabilidad

saas050916mmcnrfa1 — 2023-02-27 00:54:40 UTC

P. (2019) Posición en el diseño web. https://www.imaginanet.com/blog/la-posicion-en-el-diseno-web.html

¿QUE ES?

2023-02-27 01:39:09 UTC

En términos muy simples, localización de sitios web se refiere al proceso de refinar el contenido de un sitio web en términos culturales, de idioma y de fluidez para ofrecer la experiencia más relevante y útil posible a sus usuarios.

ASPECTOS BASICOS

2023-02-27 01:41:20 UTC

1. Idioma y regionalismos

2. Elementos culturales

3. Elementos transaccionales

4. Elementos de comunicación y confianza local

5. La navegación y herramientas disponibles

PAGINA PARA LOCALIZAR

2023-02-27 01:43:55 UTC

https://www.geodatatool.com/es/

2023-02-27 01:45:38 UTC

https://www.youtube.com/watch?v=rwjPe5DiyVI&ab_channel=PCenter

EJEMPLO

2023-02-27 01:46:37 UTC

Ubicacion del sitio web

2023-02-27 01:47:21 UTC

https://es.motionpoint.com/traducci%C3%B3n/qu%C3%A9-es-la-localizaci%C3%B3n-de-sitios-web-8c9k3/#:~:text=En%20t%C3%A9rminos%20muy%20simples%2C%20localizaci%C3%B3n,%C3%BAtil%20posible%20a%20sus%20usuarios.
https://www.mundodeportivo.com/urbantecno/tutoriales/como-saber-la-ubicacion-de-una-pagina-web-y-otros-datos

Paso 1: Descargar

cerd050216hmcdmga9 — 2023-02-27 16:03:08 UTC

Ve al sitio de descargas y haz clic en el botón Descargar. Una vez que se guarde la aplicación, debes instalarla.

Paso 2: Diseño

cerd050216hmcdmga9 — 2023-02-27 16:03:52 UTC

Abre la programa para diseñar paginas web y selecciona el tema que prefieras. Escribe tu texto de la manera habitual y reemplaza las imágenes con un solo clic. Ajusta los rellenos, títulos, colores y otros elementos utilizando los bloques que tienes disponibles y sus parámetros.

Paso 3: Publicar

cerd050216hmcdmga9 — 2023-02-27 16:05:46 UTC

Puedes guardarlo en tu disco duro local o usando el dominio del software de aplicación, o transferirlo a tu servidor de alojamiento usando FTP, o simplemente, subir tu sitio a GitHub.

Mejores programas para hacer Diseño de Páginas Web...

cerd050216hmcdmga9 — 2023-02-27 16:12:41 UTC

1.- WordPress.com. El CMS más popular del mundo.

2.- Websitebuilder.com El constructor de sitios para principiantes.

3.- Wix. El Constructor de sitios más versátil.

4.- SITE123. El constructor de Sitios más sencillo de usar.

5.- Weebly. Muy útil para crear sitios web profesionales.

6.- Jimdo.com. Requiere un poco más de conocimientos.

7.- Drupal. Excelente calidad, pero no es apta para novatos.

Diseño de página web usando Software

cerd050216hmcdmga9 — 2023-02-27 16:25:00 UTC

Sánchez H. (2019). Los mejores programas para hacer Diseño de Páginas Web Profesionales Sin ser diseñador. Adictos al trabajo. Documento en línea recuperado de: Mejores programas para hacer Webs Profesionales - Adictos al trabajo

¿Qué son?

2023-02-27 17:15:38 UTC

Es un archivo de extensión *. CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla definiciones de formato (tipo de fuente, tamaño, color de la fuente, color de fondo, párrafos, etc) de las distintas etiquetas que forman una página *. HTML.

Tamaño

2023-02-27 17:20:59 UTC

font-size.

Esta propiedad le podemos asignar un valor en porcentaje 100%, 120%, ... o en píxeles 12px, 15px, ....

Formato para definir una propiedad

2023-02-27 17:22:14 UTC

propiedad: valor;
propiedad: valor1 valor2 valor3;

Color

2023-02-27 17:26:24 UTC

Fuente

2023-02-27 17:27:40 UTC

Podemos elegir la fuente (o tipo de letra) a través del atributo font-family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-family: arial; o font-family: "Times New Roman";

2023-02-27 17:29:31 UTC

Curso gratis de Páginas Web. aulaClic. 3 - Aspecto de la página. Estilos básicos. (2023). Retrieved February 27, 2023, from Aulaclic.es website: https://www.aulaclic.es/paginas-web/t_3_3.htm

‌

Aquí podremos escuchar con más detención los estilos más básicos de creación

2023-02-27 17:30:21 UTC

Ejemplo

2023-02-27 17:32:04 UTC

2023-02-27 17:32:28 UTC

DE, C. (2023). CREACIÓN DE PÁGINAS WEB - UNIDAD 3 - Aspecto de la página. Estilos básicos. Retrieved February 27, 2023, from Google.com website: https://sites.google.com/site/glgcreaciondepaginasweb/home/unidad-3

‌