Account login is available via UA NetID at: https://www.lpl.arizona.edu/user

Main LPL website account holders can log into the site to access certain resources, such as LPL Logos & Templates, and bypass CAPTCHAs on forms. Additional features may be provided based on the role of the account holder (such as profile page updating). Various other groups (e.g., outreach, library, sys, business office, etc.) may receive additional permissions to edit certain sets of pages or content types.

LPL profile pages are provided to graduate students, faculty, postdocs, and staff scientists. To update your profile page, click the "Update Your Profile" button on your page, log in, and click on the Edit buttons to see fields which you can update.

There are two options for creating a personal web page:

• Maintain your LPL profile page.
  • See the FAQ item "How do I update my profile page?" for more information.
• Create a site using a third-party service and add the link to your LPL profile page.
  • UA offers Google services that are included with all student CatMail accounts and available to faculty and staff by opt-in on UITS Accounts Management. Google Sites is a service available under the UA's Google services offering.

LPL sites use the Arizona Quickstart asset package on the Drupal content management system (CMS).

Learn how to work with Drupal with these resources:

• AZ Quickstart
• Drupal
• Contributed Modules

AZ Quickstart

• Working with Content
  • Adding Content
  • Finding Content
  • Content Types
    • Pages
    • Events
    • News
    • People & Directories
    • Webforms
  • Blocks
• Navigation
  • Main Menu
• Best Practices
  • Accessibility
  • Descriptive Links
  • Writing for the Web

Drupal

Drupal User Guide

• Understanding Drupal
  • General concepts
  • Content types
  • URL paths
• Nodes, content types and fields
  • About nodes
  • Working with content types and fields
  • Create a custom content type
  • Add a field to a content type
  • Rearrange the order of fields
  • Specify how fields are displayed
• Organizing content with taxonomy
  • About taxonomy
  • Add a term to a vocabulary
  • Add a vocabulary to a content type
  • Create a vocabulary
  • Guidelines for taxonomy design
  • Organizing content with taxonomy
• Working with menus
  • Overview
  • Adding a link to a menu
  • Drop Down menus
  • Named anchors in menus

Contributed Modules

• Views
• Webforms

Accessibility on the web ensures all individuals have equal access to the content on a site.

The University has adopted the World Wide Web Consortium's Web Content Accessibility Guidelines (WCAG) 2.0, level AA and Revised Section 508 Standards of the Rehabilitation Act.

Key Elements in Creating Accessible Sites

• Ensure text color has sufficient contrast from the background.
  • Color Contrast: Color your site with care
  • WCAG 2.0 1.4.1: Use of Color
    • Understanding WCAG 2.0: Use of Color
    • Techniques for WCAG 2.0: Use of Color
  • WCAG 2.0 1.4.3: Contrast (Minimum)
    • Understanding WCAG 2.0: Contrast (Minimum)
    • Techniques for WCAG 2.0: Contrast (Minimum)
  • WebAIM: Color Contrast checker
• Structure a page with headings H1 > H5.
  • Use Headings to organize your documents
  • WebAIM: Semantic Structure Guidelines
• Avoid elements that only activate with hover-over.
  • All content is accessible with keyboard alone, in a logical way
  • WebAIM: Keyboard Accessibility
  • WebAIM: Keyboard Accessibility - Tabindex
• Use descriptive labels for form fields.
  • Design your forms for accessibility
  • WebAIM: Creating Accessible Forms
• Use tables only for data, not for page layouts.
  • Create accessible Data Tables
  • WebAIM: Creating Accessible Tables - Layout Tables
  • WebAIM: Creating Accessible Tables - Data Tables

Additional Resources

• University Commitment & Obligation to EIT Access
• Accessibility Standards
• Website Accessibility
• Taming the Wild West of Dynamic Content on the Web for Accessibility
  • WebAIM: Accessible JavaScript
• Use an Accessible Content Management System
  • Drupal 7 and 8 Accessibility

From the editor, links can be added that either link to another page/site or to a file uploaded to the site through the File Browser.

Please review How do I make links accessible? for things to consider when making a link.

1. Navigate to the page you want to edit and click the "Edit" button.
2. Edit the relevant textarea and type in the text.
3. Highlight the text to be linked.
   
4. Click the 'Link' button in the middle row of the toolbar (button shows a picture of a chain link).
   
5. Enter the link URL:
   
   • If the link should go to a file uploaded to the site, see How do I upload files to a site?
6. Click Ok to have the link inserted into the page.
7. Click Save.

• Use link labels instead of full URLs. (See URLs as Links)
  Screen readers will read aloud each word in a link label as opposed to reading aloud each letter, number and symbol of a full URL.
• Use contextually-independent link labels that are informative. (See Avoid uninformative link phrases)
  Links should be understandable without the surrounding text.
  • Example: Visit History of LPL to learn more about LPL's origins.
  • Avoid: To learn more about LPL's origins, click here.
• Add filetypes to link labels when linking to files. (See Links to Non-HTML Resources)
  Users should be informed about non-HTML resources to set expectations.
  • Example: Learn about LPL's history in LPL: Its Founding and Early Years (PDF).
  • Example filetypes: (PDF), (PPTX), (DOCX)

Resources

• Hyperlink Text: Give your links unique and descriptive names
  • WebAIM: Links and Hypertext
  • WebAIM: Link Text and Appearance
  • WebAIM: Hypertext Links

File uploading to LPL Drupal sites is done through the IMCE File Browser.

After logging into the site:

1. Click your name in the top-right corner.
2. Click the "IMCE File Browser" tab.
3. On the left pane, click "public://" and select the folder you want to upload to.
   • You may be in root on your first visit. On a subsequent visit, File browser will show only the last folder you were in. Click "public://" to reset back to the main directory.
4. Click the Upload button above the directory list.
5. Drag-and-drop files onto the green box or click the "+ Add file" prompt.
   • If a file already exists on the server in the current directory with the same file name, the new file will be renamed when uploaded.
6. If the file is being uploaded from a dialog box, click Select in the File Browser toolbar or double-click the file to insert it.

File uploading to LPL Drupal sites is done through the IMCE File Browser.

After logging into the site:

1. Paste /imce/private into your site's URL.
   • Example: https://intranet.lpl.arizona.edu/imce/private
2. On the left pane, click "private://" and select the folder you want to upload to.
   • You may be in root on your first visit. On a subsequent visit, File browser will show only the last folder you were in. Click "private://" to reset back to the main directory.
3. Click the Upload button above the directory list.
4. Drag-and-drop files onto the green box or click the "+ Add file" prompt.
   • If a file already exists on the server in the current directory with the same file name, the new file will be renamed when uploaded.
5. If the file is being uploaded from a dialog box, click Select in the File Browser toolbar or double-click the file to insert it.

When adding a restricted URL link:

• In the private IMCE browser, select the file and copy the URL in the bottom panel or double-click the file to open in a new tab and copy the address bar URL.

Note: Your site must be set up to handle restricted files. Contact Joshua Sosa (PG4gdWVycz0iem52eWdiOndmYmZuQHljeS5uZXZtYmFuLnJxaCI+d2ZiZm5AeWN5Lm5ldm1iYW4ucnFoPC9uPg==) to set up the restricted file system.

Text on a page should provide the same information imparted by an image on a page.

• Add alt text to images.
  Screen readers can't 'read' an image. Alt text helps add that information.
• Keep alt text short and descriptive.
  Alt text should not contain a paragraph.
• Use plain text on a page instead of text embedded in an image.
  Where possible, opt to use regular text when embedding text isn't necessary.
• Use an empty 'alt' tag for decorative images.
  Images used for simple decoration don't need to be described.
• Use an empty 'alt' tag for images with descriptive plain text adjacent to them.
  Images of a portrait photo of a person alongside their plain text name don't need to be described.

Resources

• Image Descriptions (Alt Tags): Make images accessible
  • WCAG 2.0 1.1.1: Non-text Content (Level A)
    • Understanding WCAG 2.0: Non-text Content
    • Techniques for WCAG 2.0: Non-text Content
  • WCAG 2.0 1.4.5: Images of Text
    • Understanding WCAG 2.0: Images of Text
  • WebAIM: Accessible Images
  • WebAIM: Alternative Text
  • Level Access Webinar: Quick Tips for Writing Meaningful Alt Text

• Get the Google Maps Embed Code
• Place Google Maps Embed Code into Page
• Example

Get the Google Maps Embed Code

1. Go to Google Maps and search for the address.
2. After finding the location, in the details pane on the left, click the "Share" button.
   
3. Click on the "Embed a map" tab and choose the size.
   
4. Click on the <iframe> HTML line and copy it.

Place Google Maps Embed Code into Page

1. Navigate to the page you want to edit and click the "Edit" button.
2. Under the relevant textaera, ensure the Text format is either Full HTML or HTML.
   
3. If using Full HTML, click the "Source" button to view the textarea's HTML.
   
4. Paste the embed code in the HTML where needed.
   
   • Optionally, edit the iframe's width and height attributes as needed.
   • Example: To make the map span across its available content space, set the iframe width to 100%.
5. Click the "Source" button again to see the embedded iframe container in the normal editing view.
   
   • Optionally, double-click on the IFRAME or highlight it and select the IFrame in the top row.
   • Edit additional iframe options, such as width and height.
6. Click Save.

Example

Images are added to a page using the page's edit mode text formatter.

1. Navigate to the page you want to edit and click the "Edit" tab.
2. In the relevant textarea, place your cursor where you want the image to show.
3. Click the 'Image' button in the top row of the toolbar (button shows a picture of mountains and a sun).
   
4. Enter the image URL:
   • If the image should go to a file uploaded to the site, see How do I upload files to a site?
5. Optionally use the Image button with music icon instead to "embed media."
6. Click Ok to have the image inserted into the page.
7. Click Save.

The Arizona Digital team created the Arizona Bootstrap HTML template based on the Bootstrap 4 front-end framework. AZ Bootstrap can be used for creating HTML pages with the UArizona web design. All LPL Drupal sites and pages use the AZ Barrio theme to automatically apply the UArizona web design.

The LPL-themed version of the AZ Bootstrap template is available here for download which can be edited with your favorite code editor.

Download az-bootstrap.html (8 KB)