Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 cou...
HTML5•   Better Semantic Tags•   New Attributes•   Full CSS3 Support•   Video and Audio•   2D/3D Graphics•   Drag & Drop• ...
HTML5 Help•   W3schools Tutorials•   HTML5 Readiness•   HTML5 Rocks•   HTML5 Logo & Examples•   HTML5 Boilerplate•   22 Ha...
CSS3•   New Selectors•   New Properties•   Animations•   2D/3D Transformations•   Rounded Corners•   Shadow Effects•   Dow...
CSS3 Help•   W3Schools Tutorials•   CSS3 Tips Tricks & Tutorials•   70 CSS3 & HTML5 Tutorials•   12 CSS3 Tutorials•   100 ...
Modernizr• A JavaScript library that makes this template viewable  in browsers that do not support the new HTML5  semantic...
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•   ...
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• G...
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 updatin...
Web Managers List• To add yourself to a list, send an email to  listserv@lists.ufl.edu with the line subscribe  (listname)...
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 th...
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: webmaster@ufl.edu• 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...
Lynda• Lynda is an online training resource partner of  UF and is free to all faculty, staff, and students• Over 1,100 cou...
Sample Sites•   webservices.ahc.ufl.edu•   shcc.ufl.edu•   plastic.surgery.ufl.edu•   radonc.med.ufl.edu•   egh.phhp.ufl.e...
Developer Tools•   Chrome Developer Tools•   Firebug•   IE Developer Tools•   Seriously these tools save kittens
Thank YouDownload HTML Template or   HTML Presentationwww.it.ufl.edu/webservices
Upcoming SlideShare
Loading in …5
×

UF HTML Template 2-3-12

2,727 views

Published on

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

Published in: Education, Technology, Design
  • Be the first to comment

UF HTML Template 2-3-12

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

×