UF HTML Template Presentation

2,180 views

Published on

Introduction to the html version of the website template available to University of Florida constituents.

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,180
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • A CSS framework created to make web development faster and easierAccounts for various browser quirksVisually pleasing margins and grid structureUse the classes span-1, span-2, span-3, etc. to set your column widthsIf you want to fill a page horizontally, make sure the numbers add up to 24 (span-8 + span-8 + span-8 = 24) (3col 20px gutters 10px edges)In this template you will find places where that is not necessarily trueFor example in the widgets area you will need to add alpha to each of your span-8’s to achieve desired resultsUse the push and pull classes to independently position items on the page, regardless of their position in your page’s markupUse the prefix and suffix classes to create empty spaces in your layoutUse the alpha and omega to fix the margins for any nested grid units
  • Check this box to replace the default slider with the Story StackerThis will completely replace the slider and the previous two options do not applyUpload images using the “Set featured image” option the same way as with the half width and full width options
  • Check this box to replace the default slider with the Story StackerThis will completely replace the slider and the previous two options do not applyUpload images using the “Set featured image” option the same way as with the half width and full width options
  • Once a category is chosen the posts from the category will be show in a slider on the homepageNumber of Posts to Display in Slider:This option sets how many posts will be shown in the sliderPosts are always shown in reverse chronological orderThis option only affects the slider, the Story Stacker option is fixed at 3 postsThe half width image slider will use half of the slider area for an image and the other half of the area for title and excerpt textThe image is uploaded to each post by clicking on “Set featured image” in the post edit screenUse the media uploader dialog box to upload your image and then click on “Use as featured image”
  • Once a category is chosen the posts from the category will be show in a slider on the homepageNumber of Posts to Display in Slider:This option sets how many posts will be shown in the sliderPosts are always shown in reverse chronological orderThis option only affects the slider, the Story Stacker option is fixed at 3 postsTo use the full width image option, upload the image using the “Set featured image” option the same way as with the half width imageUnder the Post editor is the Featured Content Slider Options panelCheck the box labeled “Full Width Image” in order to use the Full Width optionBy default the title of the Post and the excerpt will be overlaid on the image with a dark black background To disable this option check the box labeled “Disable Image Captions” in the Featured Content Slider Options box
  • Check this box to disable the timeline scrubber underneath the sliderDefault is unchecked
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember that the .span-6, .span-8, .span-12, and .span-16 classes are overwritten for the widgets areaHowever you can still combine these classes along with alpha to achieve desired resultsThis appears to be done to achieve 10px rather than 20px gutters between widgetsWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Remember .span-1 through .span-5 classes are overwritten for the roles areaThis appears to be done in order to achieve a 5 column layoutYou can use normal 960 grid layout options for .span-6 or aboveWell cover 960 grid layout in more detail later
  • Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
  • Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
  • Webmaster Email:This controls the Contact Webmaster link in the footer of the websiteInsert your webmaster contact email addressIf left blank no ‘Contact Webmaster’ link will appear in the footerA contact webmaster link is required by the Acceptable Use Policy. Enter your contact email here.
  • This is for Google Analytics trackingEnter the domain’s account number here and the tracking code will be inserted into the websiteUses one of the following formats: 'UA-xxxxxxx-x‘'UA-xxxxxxx-xx' 
  • UF HTML Template Presentation

    1. 1. UF HTML Template Web Services
    2. 2. HTML Template Overview• Template Building Blocks• Template Pages• Template Parts• Template Help
    3. 3. Template Building Blocks
    4. 4. HTML5• Better Semantic Tags• New Attributes• Full CSS3 Support• Video and Audio• 2D/3D Graphics• Drag & Drop• Web SQL Databases
    5. 5. 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
    6. 6. CSS3• New Selectors• New Properties• Animations• 2D/3D Transformations• Rounded Corners• Shadow Effects• Downloadable Fonts• Flexible Box Model
    7. 7. CSS3 Help• W3Schools Tutorials• CSS3 Tips Tricks & Tutorials• 70 CSS3 & HTML5 Tutorials• 12 CSS3 Tutorials• 100 CSS3 Tutorials
    8. 8. 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
    9. 9. Modernizer Help• Official Site• Alistapart• Polyfill Library
    10. 10. jQuery• HTML Traversal• Event Handling• Animation• Ajax• CSS3 Compliant• Cross Browser
    11. 11. jQuery Help• Official Site• Official Site Tutorials• W3Schools• 53 jQuery Tutorials• 40+ Excellent Tutorials• Tutorials for Designers• Nettuts+ Absolute Beginner Tutorials
    12. 12. 960 Grid
    13. 13. 960 Grid Help• 960 Official Site• 960 Six Revisions• 960 Webdesigntuts+• 960 Example
    14. 14. 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
    15. 15. 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
    16. 16. Template Pages
    17. 17. Page
    18. 18. Page With Roles
    19. 19. Page With Two Columns
    20. 20. HTML Elements Page
    21. 21. Full Width Page
    22. 22. Full Width Page With Two Columns
    23. 23. Columns Page
    24. 24. Template Parts
    25. 25. Nav Institutional
    26. 26. 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
    27. 27. Web Managers List• To add yourself to a list, send an email to listserv@lists.ufl.edu 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 listserv@lists.ufl.edu with the line unsubscribe (listname)• Ex: unsubscribe WEB-MANAGERS-L
    28. 28. Nav
    29. 29. Nav
    30. 30. Nav Mega Menu
    31. 31. Nav Mega Menu
    32. 32. Nav Sidebar
    33. 33. Nav Sidebar
    34. 34. Banner
    35. 35. Banner Logo
    36. 36. Banner Utility Links
    37. 37. Banner Search Bar
    38. 38. Banner Social Networking Links
    39. 39. Banner Notifications
    40. 40. Stacker
    41. 41. Stacker
    42. 42. Stacker No Dates
    43. 43. Slider
    44. 44. Slider Half Width Image
    45. 45. Slider Full Width Image
    46. 46. Slider Without Scrubber
    47. 47. Slide Numbers
    48. 48. Slider Thumbs Last Item
    49. 49. Roles
    50. 50. Roles Purpose• This area was intended for target audiences
    51. 51. Roles Styles• This area has two unique looks one for the home page and another for sub pages
    52. 52. Roles 1 Column
    53. 53. Roles 2 Columns
    54. 54. Roles 3 Columns
    55. 55. Roles 4 Columns
    56. 56. Roles 5 Columns
    57. 57. Widgets
    58. 58. Widgets Purpose• This area was intended for different types of feeds such as RSS, calendar, news, etc.
    59. 59. Widgets Styles• This area has a blue and a white style option• class = “homepage_layout_white”
    60. 60. Widgets 1 Column
    61. 61. Widgets 2 Columns Equal
    62. 62. Widgets 2 Columns Varied
    63. 63. Widgets 3 Columns Equal
    64. 64. Widgets 3 Columns Varied
    65. 65. Widgets 4 Columns
    66. 66. Widgets 5 Columns
    67. 67. Footer Widgets
    68. 68. Footer Widgets Purpose• Typically used to advertise services
    69. 69. Footer Widgets 1 Column
    70. 70. Footer Widgets 2 Columns
    71. 71. Footer Widgets 3 Columns
    72. 72. Footer Widgets 4 Columns
    73. 73. Footer Widgets 5 Columns
    74. 74. Footer Utility Links
    75. 75. Footer Utility Links• Typically used to present useful links to other pages on your site or other sites• Also includes the global footer
    76. 76. Footer Utility Links 1 Column
    77. 77. Footer Utility Links 2 Columns
    78. 78. Footer Utility Links 3 Columns
    79. 79. Footer Utility Links 4 Columns
    80. 80. Footer Utility Links 6 Columns
    81. 81. Footer Global
    82. 82. Footer Global• Should remain relatively consistent from site to site• Part of footer utility links
    83. 83. Contact Webmaster
    84. 84. Make a Gift
    85. 85. About This Site
    86. 86. Google Analytics
    87. 87. Help
    88. 88. Web Services• Phone: (352) 273-4902• Mail: webmaster@ufl.edu• Walk-in: with appointment via phone or mail
    89. 89. 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
    90. 90. 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
    91. 91. 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
    92. 92. Developer Tools• Chrome Developer Tools• Firebug• IE Developer Tools• Seriously these tools save kittens
    93. 93. Thank YouDownload HTML Templatewww.it.ufl.edu/webservices

    ×