CARACTERISTICAS Y
PARTES DE UN SITIO WEB.
COVARRUBIAS GOMEZ
MONSERRAT
MEZA GARCIA VERONICA
4AM PROGRAMACION
¿QUÉ ES UN SITIO WEB?
Un sitio web es un conjunto de páginas web
desarrolladas en código HTML, relacionadas a un
dominio de Internet el cual se puede visualizar en la
World Wide Web (www) mediante los navegadores web
o también llamados browser como ser Chrome,
Firefox, Edge, Opera entre otros.
Cada página web perteneciente al sitio web tiene
como objetivo publicar contenido, y este contenido
podrá ser visible o no al público.
CLASIFICACIÓN DE SITIOS WEB
Los sitios web se pueden clasificar en dos tipos:
Sitios Web Estáticos: Se denomina sitio web estático a aquellos
que no acceden a una base de datos para obtener el contenido.
Por lo general un sitio web estático es utilizado cuando el
propietario del sitio no requiere realizar un continuo cambio en
la información que contiene cada página.
Sitios Web Dinámicos: Por el contrario los sitios web dinámicos
son aquellos que acceden a una base de datos para obtener los
contenidos y reflejar los resultados obtenidos de la base de
datos, en las páginas del sitio web. El propietario del sitio web
podrá agregar, modificar y eliminar contenidos del sitio web a
través de un “sistema web”, generalmente con acceso restringido
al público mediante usuario y contraseña, el cual se denomina
BACK END.
Se asume que a la hora de contratar el desarrollo de un sitio
web, el propietario, especificará al desarrollador web, la cantidad
de páginas que contendrá el sitio, discriminando si son
PARTES DE UN SITIO WEB
Home
La home o portada es quizá el elemento más importante de un sitio
web. Dependiendo de lo atractiva que sea ésta y de la cantidad de
información, fotos, menús y demás elementos, que sean utilizados
de forma proporcionada y que un usuario vea al visitarla por
primera vez va a determinar la continuidad del mismo. Esto es
crucial para sitios de comercio electrónico, donde se busca que el
usuario navegue y compre. Está estudiado que la mayoría de
usuarios, si en 15 segundos no han visto algo interesante en una
web siguen navegando a otro sitio y abandonan. Sí, sólo 15
segundos.
Otro aspecto muy importante relacionado con la portada y, en
general, con todo el sitio web es la cantidad de dispositivos que
pueden ver su contenido sin problemas. Es fundamental hoy en día,
cuando más de la mitad de los dispositivos que navegan por
Internet son móviles o tablets, que el sitio web se adapte
correctamente. Esto es lo que tratábamos en anteriores artículos
sobre el Responsive Design.
Menús
Como parte fundamental de la navegación en un sitio están los
menús. El menú debe ser claro, vistoso y mostrar las secciones del
sitio web, puede contener un buscador y se debe ocultar cuando se
accede desde un dispositivo móvil para mostrarse mediante un botón.
En algunas secciones podemos tener nuevos menús laterales que
accedan a contenido filtrado relevante para esa sección. Por ejemplo,
y volviendo al ejemplo de un sitio Tienda online, es muy habitual
entrar en una sección de productos y en el menú lateral filtrar el
contenido por marcas, precios, etc. O en un Blog que aparezcan las
categorías o nube de etiquetas de nuestros artículos.
Es un error muy grave mostrar menús principales demasiado
cargados de opciones, que consiguen perder y aburrir al usuario
provocando su abandono, ¿recordáis los 15 segundos de antes? Pues
tenedlo en cuenta para vuestros propios sitios web.
Header
El header o encabezado es una parte importante del diseño web,
contiene el menú principal y muestra el logotipo de la empresa o el
nombre del sitio. En la portada suele venir acompañado de un slider o
deslizador de imágenes con titulares o claims del sitio que invitan a
seguir navegando. Estas imágenes suelen ser de calidad y muestran
fotos de la empresa, fotos relacionadas con el sector, etc. Últimamente
se han puesto de moda vídeos cortos de gran tamaño en vez de estas
imágenes. El tamaño del encabezado en la portada dependerá mucho
del tipo de página, siendo pantalla completa la web de un estudio de
fotografía o un tercio de la altura un sitio de Tienda online por
ejemplo.
Footer
El footer o pie de página cierra todas las vistas de nuestra
web. En él se mostrarán normalmente las secciones más
relevantes de nuestro sitio, los enlaces a las redes sociales
de nuestra organización, el acceso a contacto y los enlaces
obligatorios por ley a la Política de
Privacidad, Cookies y Condiciones de uso. Dependiendo
del espacio que tengáis puede ser interesante mostrar la
dirección o razón social, teléfonos, etc.
Secciones
De igual manera a la portada, nuestro sitio se organizará en secciones
accesibles desde los menús principales. El contenido debe ser claro y
conciso. Es importante mostrar imágenes, fotos y diseños vistosos para
mantener el interés del usuario y es fundamental que las secciones estén
bien tituladas para que el usuario en todo momento sepa dónde está y de
dónde viene. Para obtener buenos resultados SEO es fundamental que
estas secciones tengan título utilizando las etiquetas HTML para tal efecto,
es decir, h1, h2, ….
También es muy útil colocar los denominados breadcrumbs (“migas de
pan” en inglés) que muestran, junto al título de la sección, el camino por
las secciones y apartados que hemos seguido hasta llegar a la página
donde nos encontramos. Esta funcionalidad nos permitirá volver a varios
niveles superiores pinchando en los enlaces mostrados en estas “migas de
pan”, lo que permite al usuario navegar de forma fluida conjuntamente con
los menús disponibles en el sitio.
Contacto
Es importantísimo la retroalimentación por parte de nuestros usuarios, por
lo que siempre debemos proporcionar un mecanismo sencillo para el
contacten con nosotros y sepan dónde estamos. La sección más importante
para ello es la de Contacto. Lo habitual en esta sección hoy día es encontrar
un mapa de cualquiera de los servicios conocidos existentes como Google
Maps u Open Map en donde se marque nuestra ubicación física, ya sea la de
una tienda o varias, oficina, etc. La dirección aparecerá destacada también
junto a dicho mapa y en otra zona relevante de esta sección un formulario
de contacto.
En el formulario de contacto solicitaremos al usuario aquella información
relevante para nosotros, siempre y cuando no sea algo largo y tedioso que
implique rellenar multitud de campos que provocarán que el usuario se
aburra. También es interesante que el usuario pueda preguntarnos o
enviarnos sugerencias en dicho formulario.
Características que hacen placentera y útil la
visita a un sitio web.
Deben utilizarse de forma correcta las diferentes herramientas (HTML,
CSS, ASP.NET o algún otro lenguaje de servidor, AJAX, etc.) para lograr
una navegación que cuente con las siguientes características:
Páginas ligeras que descarguen rápidamente.
El formato y estilo de los diferentes elementos están centralizados en un
solo archivo, de tal forma que el navegador solamente lo tiene que leer
una vez.
Elementos técnicos que facilitan la indexación en buscadores de Internet:
Inclusión de Metatags “Description” y “Keywords”.
Información bien redactada sin intentos de engañar a los buscadores de Internet.
Uso de etiquetas H1 a H6 para títulos.
Imágenes optimizadas para que pesen menos.
No utilizar marcos (frames). Esto evita algunos posibles errores de
visualización en el navegador y facilita la impresión.
No utilizar Flash cuando no agregue valor. Los buscadores de Internet y algunos
smartphones y tabletas no pueden leer el texto en Flash.
En la mayoría de los casos es recomendable utilizar un ancho fijo (no expandible a todo
lo ancho de la pantalla) porque facilita la lectura.
Utilización de tipos de letra fácilmente legibles y una herramienta para permitir crecer el
texto. Existe una estimación de que el 75% de los adultos utiliza algún tipo de anteojos
para corregir la visión.
Todas las páginas contarán con un URL absoluto. Esto es, cada página tendrá una
dirección distinta y única en la barra de direcciones de tu navegador (puede parecer
obvio, pero hay sitios web que no funcionan así). Haciéndolo correctamente, es posible
para el visitante añadir tu página a favoritos o enviar una liga a un producto
determinado por e-mail.
De manera opcional se puede utilizar la migaja (breadcrumb) en todas las páginas.
Ejemplo: “Usted está en: Inicio –> Servicios –> Consultoría”.
Apegarse a estándares de desarrollo para garantizar que el sitio web pueda ser
visualizado en todos los navegadores, como Internet Explorer, Firefox, Safari, Chrome y
Opera tanto en computadoras Windows como Mac.
Establecer contacto con el visitante mediante formularios y una herramienta de chat en
línea.
Para romper la monotonía de grandes cantidades de texto, utilizar fotografías propias o
de stock.
Utilización de Google Analyticso alguna otra herramienta para medir los ingresos al sitio
web.
El copy del sitio web, es decir, la información que contiene, debe
tener estas características: Textos bien redactados, que contengan
información relevante a lo que queremos destacar.
No tratar de engañar a los buscadores de Internet mediante
repeticiones exageradas de palabras, utilización del mismo color de
texto y fondo, o alguna otra táctica indeseable.
No utilizar un lenguaje muy técnico ya que nuestros posibles clientes
no son necesariamente expertos en el tema.
Mantener los textos breves y concisos.
Incluir alguna sección (o blog) en la que se publiquen artículos
generados por tu empresa sobre el tema que domina. Esto ayuda a
que tu página sea más relevante para los buscadores, además de que
te conviertes en una fuente de información confiable para tus clientes
y posibles clientes.
TEMA
EL TEMA QUE ELEIGIMOS ES DE FOTOGRAFIA, YA QUE
ES IMPORTANTE CONOCER LAS TOMAS MAS BONITAS
O PRESENTABLES DE CUALQUIER COSA, PARA PODER
MOSTRAR A TODOS DIFERENTES PUNTOS DE VISTA.
ESTO AYUDA A TENER UNA CREACTIVIDAD LIBRE Y
EXPRESIVA PARA LA SOCIEDAD.
COVARRUBIAS GOMEZ MONSERRAT
MEZA GARCIA VERONICA
BIBLIOGRAFIA
http://lagahe.com/partes-sitio-web/
https://www.codedimension.com.ar/noticias-sobre-
tecnologia/noticias/que-es-y-para-que-sirve-un-sitio-web/1
https://blog.quadrato.mx/caracteristicas-basicas-de-un-sitio-web-
bien-desarrollado/

Caracteristicas y partes_de_un_sitio_web

  • 1.
    CARACTERISTICAS Y PARTES DEUN SITIO WEB. COVARRUBIAS GOMEZ MONSERRAT MEZA GARCIA VERONICA 4AM PROGRAMACION
  • 2.
    ¿QUÉ ES UNSITIO WEB? Un sitio web es un conjunto de páginas web desarrolladas en código HTML, relacionadas a un dominio de Internet el cual se puede visualizar en la World Wide Web (www) mediante los navegadores web o también llamados browser como ser Chrome, Firefox, Edge, Opera entre otros. Cada página web perteneciente al sitio web tiene como objetivo publicar contenido, y este contenido podrá ser visible o no al público.
  • 3.
    CLASIFICACIÓN DE SITIOSWEB Los sitios web se pueden clasificar en dos tipos: Sitios Web Estáticos: Se denomina sitio web estático a aquellos que no acceden a una base de datos para obtener el contenido. Por lo general un sitio web estático es utilizado cuando el propietario del sitio no requiere realizar un continuo cambio en la información que contiene cada página. Sitios Web Dinámicos: Por el contrario los sitios web dinámicos son aquellos que acceden a una base de datos para obtener los contenidos y reflejar los resultados obtenidos de la base de datos, en las páginas del sitio web. El propietario del sitio web podrá agregar, modificar y eliminar contenidos del sitio web a través de un “sistema web”, generalmente con acceso restringido al público mediante usuario y contraseña, el cual se denomina BACK END. Se asume que a la hora de contratar el desarrollo de un sitio web, el propietario, especificará al desarrollador web, la cantidad de páginas que contendrá el sitio, discriminando si son
  • 4.
    PARTES DE UNSITIO WEB Home La home o portada es quizá el elemento más importante de un sitio web. Dependiendo de lo atractiva que sea ésta y de la cantidad de información, fotos, menús y demás elementos, que sean utilizados de forma proporcionada y que un usuario vea al visitarla por primera vez va a determinar la continuidad del mismo. Esto es crucial para sitios de comercio electrónico, donde se busca que el usuario navegue y compre. Está estudiado que la mayoría de usuarios, si en 15 segundos no han visto algo interesante en una web siguen navegando a otro sitio y abandonan. Sí, sólo 15 segundos. Otro aspecto muy importante relacionado con la portada y, en general, con todo el sitio web es la cantidad de dispositivos que pueden ver su contenido sin problemas. Es fundamental hoy en día, cuando más de la mitad de los dispositivos que navegan por Internet son móviles o tablets, que el sitio web se adapte correctamente. Esto es lo que tratábamos en anteriores artículos sobre el Responsive Design.
  • 5.
    Menús Como parte fundamentalde la navegación en un sitio están los menús. El menú debe ser claro, vistoso y mostrar las secciones del sitio web, puede contener un buscador y se debe ocultar cuando se accede desde un dispositivo móvil para mostrarse mediante un botón. En algunas secciones podemos tener nuevos menús laterales que accedan a contenido filtrado relevante para esa sección. Por ejemplo, y volviendo al ejemplo de un sitio Tienda online, es muy habitual entrar en una sección de productos y en el menú lateral filtrar el contenido por marcas, precios, etc. O en un Blog que aparezcan las categorías o nube de etiquetas de nuestros artículos. Es un error muy grave mostrar menús principales demasiado cargados de opciones, que consiguen perder y aburrir al usuario provocando su abandono, ¿recordáis los 15 segundos de antes? Pues tenedlo en cuenta para vuestros propios sitios web.
  • 6.
    Header El header oencabezado es una parte importante del diseño web, contiene el menú principal y muestra el logotipo de la empresa o el nombre del sitio. En la portada suele venir acompañado de un slider o deslizador de imágenes con titulares o claims del sitio que invitan a seguir navegando. Estas imágenes suelen ser de calidad y muestran fotos de la empresa, fotos relacionadas con el sector, etc. Últimamente se han puesto de moda vídeos cortos de gran tamaño en vez de estas imágenes. El tamaño del encabezado en la portada dependerá mucho del tipo de página, siendo pantalla completa la web de un estudio de fotografía o un tercio de la altura un sitio de Tienda online por ejemplo.
  • 7.
    Footer El footer opie de página cierra todas las vistas de nuestra web. En él se mostrarán normalmente las secciones más relevantes de nuestro sitio, los enlaces a las redes sociales de nuestra organización, el acceso a contacto y los enlaces obligatorios por ley a la Política de Privacidad, Cookies y Condiciones de uso. Dependiendo del espacio que tengáis puede ser interesante mostrar la dirección o razón social, teléfonos, etc.
  • 8.
    Secciones De igual maneraa la portada, nuestro sitio se organizará en secciones accesibles desde los menús principales. El contenido debe ser claro y conciso. Es importante mostrar imágenes, fotos y diseños vistosos para mantener el interés del usuario y es fundamental que las secciones estén bien tituladas para que el usuario en todo momento sepa dónde está y de dónde viene. Para obtener buenos resultados SEO es fundamental que estas secciones tengan título utilizando las etiquetas HTML para tal efecto, es decir, h1, h2, …. También es muy útil colocar los denominados breadcrumbs (“migas de pan” en inglés) que muestran, junto al título de la sección, el camino por las secciones y apartados que hemos seguido hasta llegar a la página donde nos encontramos. Esta funcionalidad nos permitirá volver a varios niveles superiores pinchando en los enlaces mostrados en estas “migas de pan”, lo que permite al usuario navegar de forma fluida conjuntamente con los menús disponibles en el sitio.
  • 9.
    Contacto Es importantísimo laretroalimentación por parte de nuestros usuarios, por lo que siempre debemos proporcionar un mecanismo sencillo para el contacten con nosotros y sepan dónde estamos. La sección más importante para ello es la de Contacto. Lo habitual en esta sección hoy día es encontrar un mapa de cualquiera de los servicios conocidos existentes como Google Maps u Open Map en donde se marque nuestra ubicación física, ya sea la de una tienda o varias, oficina, etc. La dirección aparecerá destacada también junto a dicho mapa y en otra zona relevante de esta sección un formulario de contacto. En el formulario de contacto solicitaremos al usuario aquella información relevante para nosotros, siempre y cuando no sea algo largo y tedioso que implique rellenar multitud de campos que provocarán que el usuario se aburra. También es interesante que el usuario pueda preguntarnos o enviarnos sugerencias en dicho formulario.
  • 10.
    Características que hacenplacentera y útil la visita a un sitio web. Deben utilizarse de forma correcta las diferentes herramientas (HTML, CSS, ASP.NET o algún otro lenguaje de servidor, AJAX, etc.) para lograr una navegación que cuente con las siguientes características: Páginas ligeras que descarguen rápidamente. El formato y estilo de los diferentes elementos están centralizados en un solo archivo, de tal forma que el navegador solamente lo tiene que leer una vez. Elementos técnicos que facilitan la indexación en buscadores de Internet: Inclusión de Metatags “Description” y “Keywords”. Información bien redactada sin intentos de engañar a los buscadores de Internet. Uso de etiquetas H1 a H6 para títulos. Imágenes optimizadas para que pesen menos. No utilizar marcos (frames). Esto evita algunos posibles errores de visualización en el navegador y facilita la impresión.
  • 11.
    No utilizar Flashcuando no agregue valor. Los buscadores de Internet y algunos smartphones y tabletas no pueden leer el texto en Flash. En la mayoría de los casos es recomendable utilizar un ancho fijo (no expandible a todo lo ancho de la pantalla) porque facilita la lectura. Utilización de tipos de letra fácilmente legibles y una herramienta para permitir crecer el texto. Existe una estimación de que el 75% de los adultos utiliza algún tipo de anteojos para corregir la visión. Todas las páginas contarán con un URL absoluto. Esto es, cada página tendrá una dirección distinta y única en la barra de direcciones de tu navegador (puede parecer obvio, pero hay sitios web que no funcionan así). Haciéndolo correctamente, es posible para el visitante añadir tu página a favoritos o enviar una liga a un producto determinado por e-mail. De manera opcional se puede utilizar la migaja (breadcrumb) en todas las páginas. Ejemplo: “Usted está en: Inicio –> Servicios –> Consultoría”. Apegarse a estándares de desarrollo para garantizar que el sitio web pueda ser visualizado en todos los navegadores, como Internet Explorer, Firefox, Safari, Chrome y Opera tanto en computadoras Windows como Mac. Establecer contacto con el visitante mediante formularios y una herramienta de chat en línea. Para romper la monotonía de grandes cantidades de texto, utilizar fotografías propias o de stock. Utilización de Google Analyticso alguna otra herramienta para medir los ingresos al sitio web.
  • 12.
    El copy delsitio web, es decir, la información que contiene, debe tener estas características: Textos bien redactados, que contengan información relevante a lo que queremos destacar. No tratar de engañar a los buscadores de Internet mediante repeticiones exageradas de palabras, utilización del mismo color de texto y fondo, o alguna otra táctica indeseable. No utilizar un lenguaje muy técnico ya que nuestros posibles clientes no son necesariamente expertos en el tema. Mantener los textos breves y concisos. Incluir alguna sección (o blog) en la que se publiquen artículos generados por tu empresa sobre el tema que domina. Esto ayuda a que tu página sea más relevante para los buscadores, además de que te conviertes en una fuente de información confiable para tus clientes y posibles clientes.
  • 13.
    TEMA EL TEMA QUEELEIGIMOS ES DE FOTOGRAFIA, YA QUE ES IMPORTANTE CONOCER LAS TOMAS MAS BONITAS O PRESENTABLES DE CUALQUIER COSA, PARA PODER MOSTRAR A TODOS DIFERENTES PUNTOS DE VISTA. ESTO AYUDA A TENER UNA CREACTIVIDAD LIBRE Y EXPRESIVA PARA LA SOCIEDAD. COVARRUBIAS GOMEZ MONSERRAT MEZA GARCIA VERONICA
  • 14.