-
7/30/2019 The Bridge to Somewhere
1/19
-
7/30/2019 The Bridge to Somewhere
2/19
The Bridge to Somewhere
The Newhttp://BayBridgeInfo.org
The Oldhttp://archive.BayBridgeInfo.org
-
7/30/2019 The Bridge to Somewhere
3/19
=
=
-
7/30/2019 The Bridge to Somewhere
4/19
Overview
Goals
Mimic Look and Feel ofthe New Bridge
Ability to quickly updatecontent
No More Code
Better MediaManagement & Display
General
WordsPicturesIdeas.com
Project behind schedule
No "client"
No project manager, lotsof 'audibles'
-
7/30/2019 The Bridge to Somewhere
5/19
Site TransitionMigrate the Database
Most copy and page content stayed relatively the same. Kept some
things that may be improved upon later
Threw away old theme, started new one A lot of custom CSS
jQuery Small module tweaks (flowplayer api) Mucho general Drupal
configuration
Get a lot of stuff out of code and back into the Drupal
system.
(CCK)
Re-Design 9 Design comp iterations
-
7/30/2019 The Bridge to Somewhere
6/19
Drupal ThemeThemes
Tao = base theme for both admin and main theme
Admin Theme: Rubik Front End: Modified Cube (unsupported front
end
theme)Tao : http://drupal.org/project/taoRubik:
http://drupal.org/project/rubik
(Originally by DevelopmentSeed, now supported by
Phase2Technology.)
-
7/30/2019 The Bridge to Somewhere
7/19
Drupal ModulesModules For Everyone
General Administration Menu Views 3 PathAuto Taxonomy :)
WYSIWYG API
Media Handling CCK
FileField Imagefield FUpload (mutiple img)
ImageCache Flowplayer API
Specific Modules
Context Context UI Ctools Modal Frame API
Automodal
jQuery UI jQuery Update (patched)
jQuery 1.4.4 Superfish
Special Menu Items Menu HTML
Quick Tabs (small biz) NodeQueue Nodeblock (front page)
Flowplayer API
-
7/30/2019 The Bridge to Somewhere
8/19
Other Cool Stuff Not as Drupalized
Google Earth
http://earth.google.com/outreach/tutorial_kmz.html User must
have google earth plugin installed
Fullscreen Background Slideshow
Keyed array based on node id's for project pages
Isotope jQuery (requires jQuery 1.4.4 via patched jQuery Update)
Animated sorting CSS3 with js fallback
http://isotope.metafizzy.co/
UniformJS Stylized radio buttons and drop downs
-
7/30/2019 The Bridge to Somewhere
9/19
Menu SytemSuperfish Module
Works for touchscreen/mobile devices (istuff, android etc.)
Great markup, very specific selectors
Programatically Print Superfish Blocks$block = module_invoke(,
'block', 'view', );
In the header.tpl.php:
Special Menu Items
Allows 'nolink' placeholder for dropdown menu items
Menu HTML Put HTML into menu fields i.e.
-
7/30/2019 The Bridge to Somewhere
10/19
Media Handling - Images
Images
CCK Filefield FUpload (multi image upload)
ImageCache Insert
Lots of Taxonomy
-
7/30/2019 The Bridge to Somewhere
11/19
Media Handling - Video
Video
Filefield Upload
Flowplayer API theme('flowplayer')
inserts js and div element flowplayer_add()
inserts only js, you must provide div element in tpl.php
HTML 5 FallbackWhy?
Flash still works on "most" brosers/devices HTML5 browser
support still changing
-
7/30/2019 The Bridge to Somewhere
12/19
Media Handling - Video, HTML5HTML 5
All Video files encoded as .mp4 (h.264 codec)
Lots of issues with browser support of different codecs
Mozilla
supports .ogg (theora codec) Firefox 4 supports .ogg &
H.264
Chrome dropping support for H.264
IE H.264 (only IE 9)
Safari H.264
Bottom Line:
HTML5 is annoying until Browser manufacturers can agree
onsupported codecs
-
7/30/2019 The Bridge to Somewhere
13/19
Google dropping support for H.264?
-
7/30/2019 The Bridge to Somewhere
14/19
Media Handling - Video, HTML5 HTML 5, flash fallback
Browser Sniffing jQuery
Poster Image provided by ImagecacheModified flowplayer module:
flowplayer.jsfunction doesPlayHTMLFive(){
return (( navigator.platform.indexOf("iPad") != -1) ||(
navigator.platform.indexOf("iPod") != -1) ||(
navigator.platform.indexOf("iPhone") != -1) ||
( navigator.userAgent.toLowerCase().indexOf('chrome') != -1) ||(
navigator.userAgent.toLowerCase().indexOf('safari') != -1)
);}if(doesPlayHTMLFive()){
var movie = config['playlist'][1]['url'];
var poster = config['playlist'][0]['url'];
var width = config['width'];var height = config['height'];var
videoline = "";$('#player').html(videoline);
} else {//Load Flowplayer
}
-
7/30/2019 The Bridge to Somewhere
15/19
Project PageLots of Taxonomy
Context & Context UI Handles block layout
Views Content based off of taxonomy term of main content node
Items tagged as specific project name show up on
corresponding project page
if (arg(0) == 'node' && is_numeric(arg(1))) {$node =
node_load(arg(1));
if (is_array($node->taxonomy) &&
!empty($node->taxonomy)) {$terms = array();foreach
($node->taxonomy as $term) {$terms[] = $term->tid;
}return implode ('+', $terms);
}return '';
}
-
7/30/2019 The Bridge to Somewhere
16/19
BayBridge360 and MediaBar
Views
Many custom views templates
ModalFrame API and AutomodalAll you need:(class="automodal")/***
Implementation of hook_automodal_alter.
*/function baybridge_automodal_alter(&$settings, $selector)
{$settings['autoFit'] = FALSE;$settings['width'] =
950;$settings['height'] = 650;$settings['draggable'] = FALSE;
}
Isotope Sorting w/ Views Row Theming
-
7/30/2019 The Bridge to Somewhere
17/19
Mobile
Fixed Elements Don't Work on Ipad
So hide them with conditional jQuery
//Function to returns boolean indicating whether the client
device is an iDevice (pod, pad, phone)...function isIDevice(){
return ((navigator.platform.indexOf("iPhone") != -1 ) ||
(navigator.platform.indexOf("iPod") != -1)
||(navigator.platform.indexOf("iPad") != -1)
);}
//Hides the pesky fixed menuif(isIDevice()){
$("#block-superfish-3").hide();
}
-
7/30/2019 The Bridge to Somewhere
18/19
Lessons
Use Git
Use some kind of bugtracker
Keep It Simple
Plan for Progressive Enhancement
Hard Deadlines Work
Internet Explorer Sucks
Working with an 'in flux' design comp sucks
-
7/30/2019 The Bridge to Somewhere
19/19
Thanks for Listening!
Questions?
Twitter@ImJoeToday
[email protected]
