Guía de estilo del sitio web

Aspecto y sensación

Hay plantillas específicas que han sido creadas para mantener la consistencia de la marca WOU. Si vas a utilizar el Divi Builder y quieres añadir algo más que palabras básicas a una página tendrás que utilizar estas plantillas.

Colores

El color es uno de los elementos más importantes del sistema de identidad de la Western Oregon University. El rojo y el blanco son los colores primarios oficiales. El gris y el plata de WOU son colores opcionales. Si decides cambiar los colores de los fondos de las mesas y demás, a continuación encontrarás los colores que puedes elegir.

Colores primarios Colores secundarios
WOU RED
HEX: #db0a29
BLANCO
HEX: #ffffff
WOU NEGRO
HEX: #000000
WOU GRIS
HEX: #c4c6c8
WOU PLATA
HEX: #a7a9ac

Tipografía

Rúbricas

  • Utilice títulos en orden cronológico (h1, h2, h3, h4)
  • Si desea cambiar el tipo de letra puede utilizar Montserrat o Caveat
  • Siga nuestra paleta de colores
    • Negro (#000000)
    • Gris (#73777b)
    • WOU rojo (#db0a29)

Imágenes

Tamaño de imagen recomendado:

  • Imágenes de la pancarta: 2000×1500 (la altura se puede ajustar)

  • Cuadrado: 1500×1500

  • Vertical: 1500x1800

  • Horizontal: 1500×1100

Tipos de archivos:

  • Guarde las imágenes sólo en formato .jpg, .gif o .png.

  • Los archivos .pdf, .psd, .tff y .doc no son compatibles con la web.

Pasos:

  1. PULSE AQUÍ para registrarse o iniciar sesión en Canva (¡es gratis!)

  2. En la esquina superior izquierda, haga clic en el botón verde azulado, "Crear diseño" para el desplegable

  3. Haga clic en "Dimensiones personalizadas" y poner 2000×1500y haga clic en "Crear diseño".

alex-sardi-blog-canva-resize-3-scaled.jpg

4. Nombre de su archivo "Imágenes de banners 2000×1500" y puedes utilizarlo para todas las imágenes de los banners de tu sitio web
5. A la izquierda, haga clic en "Elementos"
6. En "Rejillas", haga clic en el elemento de imagen única

alex-sardi-blog-canva-resize-1-scaled.jpg

7. Al hacer clic, haga clic en "Cargas" y sube una imagen de tu elección
8. Arrastrar y soltar al elemento de la imagen en la mesa de trabajo
9. Redimensionar si es necesario

alex-sardi-blog-canva-resize-2-scaled.jpg

10. En la esquina superior derecha, pulse el botón "descargar" y descargar como .PNG
11. Añadir a su sitio web

 

Diseños de página y plantillas

Página web

Utilizando el Divi Builder: debe utilizar estos plantillas. Puede elegir las secciones que desea añadir.

Usando el bloque estándar de WordPress ya sea: Opción 1 de la página de inicio o Opción 2 de la página de inicio y necesita tener más contenido que sólo la presentación de imágenes en la parte superior. Aquí hay un tutorial sobre cómo modificar las áreas de widgets para la página de inicio. Aquí hay otros tutoriales básicos sobre cómo editar su sitio de WordPress.

Sección Tempalates (Divi)

Puede utilizar cualquiera de estos plantillas para diferentes secciones de su sitio.

Estilos de navegación

Navegación superior

Debe caber todo en una línea. Puede ajustar el espacio entre las pestañas siguiendo estos pocos pasos sencillos.

Navegación a la izquierda

La navegación izquierda es opcional, pero si se utiliza la cantidad máxima es de 8.

Web Accessibility Guidelines

    Introduction

    Western Oregon University web accessibility guidelines have been created to fulfill Western Oregon University’s on-going commitment to establish and maintain a learning environment free of barriers. In order to achieve such an environment, these guidelines have been designed to provide accessible web material to all persons regardless of physical, mental, or technological ability.

    Legal Requirements

    Web accessibility guidelines have also been created to meet ethical and legal standards set by Section 504 of the Rehabilitation Act of 1973 and Section 508 of the Rehabilitation Act Amendments of 1998. These laws prohibit Western Oregon University from discriminating against individuals with disabilities and require all material intended for presentation to the general population to be presented in an accessible format for anyone.

    Best Practices to Address the Needs of Persons with Disabilities:

    Auditory Limitations or Deafness:

    • Provide transcripts of audio content and Closed Captioned or Full Text transcripts for video materials where applicable.
    • 3Play Media (http://www.3playmedia.com/): cost effective technique for Captioning video content.

    Cognitive Limitations:

    • Do not use flashing or strobe content.
    • Provide easy-to-use controls and navigation schemes.
    • Employ consistency in labeling and navigation, where possible.
    • Use the clearest, simplest language appropriate to the content.
    • Provide control over all time-based media (i.e., slideshows).

    Visual Limitations or Blindness:

    • Use well-structured and semantic HTML.
    • Use meaningful ALT attributes on images.
    • Do not use tables for layout purposes.
    • Utilizar los encabezados en orden cronológico (piense que si alguien tiene la página sólo se muestra en un formato de lista)
    • Properly linearize content, especially forms.
    • Provide sufficient contrast between foreground and background elements.
    • Avoid using pop-up windows.
    • Label all form elements.
    • Do not use Flash™ for navigation and avoid using it in other places, where possible.
    • Provide access keys and “skip to content” links.
    • Use WAI-ARIA landmarks where possible.
    • Position hidden content of-screen instead of using “display:none.”
    • Provide additional guidance and controls using of-screen content (i.e. descriptions of the page layout and available access keys).
    • Provide transcripts of audio content and Full-Text transcripts or Captioning for video materials where applicable.
    • Do not use flashing or strobe content.
    • Provide easy-to-use controls and navigation schemes.
    • Employ consistency in labeling and navigation, where possible.
    • Use the clearest, simplest language appropriate to the content.
    • Provide control over all time-based media (i.e., slideshows).

    Development tools

    While creating websites, developers throughout the WOU –System should adopt and exceed the web standards established by the Worldwide Web Consortium (W3C) for the creation of online content. Specifically consult the W3C’s page on accessibility (http://www.w3.org/TR/WCAG/)

    Web applications and tools for developers include:

    A number of plugins are available for the Firefox web browser (http://www.mozilla.org/en-US/firefox/new/?from=getfirefox) in testing your website’s compliance with accessibility guidelines:

    Additional Resources

    Non HTML documents

    Many types of document types may not be accessible to screen readers including the following:

    • PDF’s
    • Word documents
    • Power Point
    • Flash or streaming video

    Sometimes the software used to create specific file types includes features which allow a user to add accessibility functionality. The problem is that many times using these features properly takes longer than creating the original document.

    The easiest method for making a document accessible is to copy the text from the file and paste it into a standard web page. This is especially true for Microsoft word files with minimal formatting and imagery. Documents designed with page layout software such as InDesign or Quark many times depend on graphic elements to convey their message appropriately. The design staff within the Marketing & Communication office at Western Oregon University will assist individuals wishing to convert graphic layouts of marketing material into an accessible webpage.

    Where to check pages for accessibility

    Reference material

    Section 508
    Disability Info.gov

    Enlaces a otros sitios web

    Si está añadiendo contenido a su sitio que es repetitivo y ya existe en otro sitio WOU, por favor, enlace a su página para que podemos eliminar la duplicación de información y la necesidad de actualizar las cosas en dos lugares distintos.