Embed Size (px)
DESCRIPTION
Introduction to the html version of the website template available to University of Florida constituents.
Citation preview
UF HTML Template
Web Services
HTML Template Overview
• Template Building Blocks• Template Pages• Template Parts• Template Help
Template Building Blocks
Lynda
• Lynda is an online training resource partner of UF and is free to all faculty, staff, and students
• Over 1,100 courses, covering topics such as HTML, CSS, Photoshop, Illustrator, JavaScript, and jQuery to name but a few
• Go to http://it.ufl.edu/training and click the Lynda logo to access the free University of Florida log-in
HTML5
• Better Semantic Tags• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Drag & Drop• Web SQL Databases
HTML5 Help
• W3schools Tutorials• HTML5 Readiness• HTML5 Rocks• HTML5 Logo & Examples• HTML5 Boilerplate• 22 Handy HTML5 & CSS3 Tutorials• 28 Ultimate HTML5 & CSS3 Tutorials• 15 HTML5 Tutorials & Cheat Sheets• html5tutorial
CSS3
• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts• Flexible Box Model
CSS3 Help
• W3Schools Tutorials• CSS3 Tips Tricks & Tutorials• 70 CSS3 & HTML5 Tutorials• 12 CSS3 Tutorials• 100 CSS3 Tutorials
Modernizr
• A JavaScript library that makes this template viewable in browsers that do not support the new HTML5 semantic elements
• Tests over 40 next-generation HTML5 and CSS3 features• Creates a JavaScript object (named Modernizr) that
contains the results of these tests as boolean properties• It adds classes to the html element that explain precisely
what features are and are not natively supported• It provides a script loader so you can use polyfills
Modernizer Help
• Official Site• Alistapart• Polyfill Library
jQuery
• HTML Traversal• Event Handling• Animation• Ajax• CSS3 Compliant• Cross Browser
jQuery Help
• Official Site• Official Site Tutorials• W3Schools• 53 jQuery Tutorials• 40+ Excellent Tutorials• Tutorials for Designers• Nettuts+ Absolute Beginner Tutorials
960 Grid
960 Grid Help
• 960 Official Site• 960 Six Revisions• 960 Webdesigntuts+• 960 Example
Chrome Frame
• Allows you to render web pages viewed in Internet Explorer (IE6-IE9) as if you were using Google Chrome
• Gives you access to HTML5 & CSS3 features supported by Chrome
• Give you Chrome’s performance and security features without in any way interrupting your browsing experience
• When Google Chrome Frame is installed, the web just gets better for IE users on Chrome Frame enabled sites
Server Side Includes (SSI)
• Files must be on a server that supports SSI such as Apache or IIS or you will get a blank page
Template Pages
Page
Page With Roles
Page With Two Columns
HTML Elements Page
Full Width Page
Full Width Page With Two Columns
Columns Page
Template Parts
_includes
index.html
Nav Institutional
Nav Institutional
• Intended to be universal across all sites• Updates may occur from time to time• Downloading and updating Nav Institutional will
be your responsibility• Notifications will occur via WEB-MANAGERS-L
list-serv• Changes to any part of template will generate a
notification to WEB-MANAGERS-L list-serv
Web Managers List
• To add yourself to a list, send an email to [email protected] with the line subscribe (listname) (your first name) (your last name)
• Ex: subscribe WEB-MANAGERS-L Jane Doe• To remove yourself from a list, send a piece of
email to [email protected] with the line unsubscribe (listname)
• Ex: unsubscribe WEB-MANAGERS-L
Nav
Nav
Nav Mega Menu
Nav Mega Menu
Nav Sidebar
Nav Sidebar
Banner
Banner Logo
Banner Utility Links
Banner Search Bar
Banner Social Networking Links
Banner Notifications
Stacker
Stacker
Stacker No Dates
Slider
Slider Half Width Image
Slider Full Width Image
Slider Without Scrubber
Slide Numbers
Slider Thumbs Last Item
Roles
Roles Purpose
• This area was intended for target audiences
Roles Styles
• This area has two unique looks one for the home page and another for sub pages
Roles 1 Column
Roles 2 Columns
Roles 3 Columns
Roles 4 Columns
Roles 5 Columns
Widgets
Widgets Purpose
• This area was intended for different types of feeds such as RSS, calendar, news, etc.
Widgets Styles
• This area has a blue and a white style option• class = “homepage_layout_white”
Widgets 1 Column
Widgets 2 Columns Equal
Widgets 2 Columns Varied
Widgets 3 Columns Equal
Widgets 3 Columns Varied
Widgets 4 Columns
Widgets 5 Columns
Footer Widgets
Footer Widgets Purpose
• Typically used to advertise services
Footer Widgets 1 Column
Footer Widgets 2 Columns
Footer Widgets 3 Columns
Footer Widgets 4 Columns
Footer Widgets 5 Columns
Footer Utility Links
Footer Utility Links
• Typically used to present useful links to other pages on your site or other sites
• Also includes the footer global
Footer Utility Links 1 Column
Footer Utility Links 2 Columns
Footer Utility Links 3 Columns
Footer Utility Links 4 Columns
Footer Utility Links 6 Columns
Footer Global
Footer Global
• Should remain relatively consistent from site to site
• Part of footer utility links
Contact Webmaster
Make a Gift
About This Site
Google Analytics
Help
Web Services
• Phone: (352) 273-4902• Mail: [email protected]• Walk-in: with appointment via phone or mail
Tutorials
• We have a number of tutorials ranging from changing menus to changing layout options for various areas
• Go to www.it.ufl.edu/webservices and click on the tutorials link to view the tutorials we have
Lynda
• Lynda is an online training resource partner of UF and is free to all faculty, staff, and students
• Over 1,100 courses, covering topics such as HTML, CSS, Photoshop, Illustrator, JavaScript, and jQuery to name but a few
• Go to http://it.ufl.edu/training and click the Lynda logo to access the free University of Florida log-in
Sample Sites
• webservices.ahc.ufl.edu• shcc.ufl.edu• plastic.surgery.ufl.edu• radonc.med.ufl.edu• egh.phhp.ufl.edu• phhp.ufl.edu• cancer.ufl.edu• vetmed.ufl.edu
Developer Tools
• Chrome Developer Tools• Firebug• IE Developer Tools• Seriously these tools save kittens
Thank You
Download HTML Template orHTML Presentation
www.it.ufl.edu/webservices
