Globetronica</h1> <article> <h1>Globetronica</h1> <p>admin — Wed, 11 Jan 2012 21:06:17 +0000</p> <div class="field field-type-filefield field-field-article-thumbnail"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/podcast_cover_600w.jpg" type="image/jpeg; length=263589">podcast_cover_600w.jpg</a></div> </div> </div> </div> <div class="field field-type-text field-field-overview"> <div class="field-items"> <div class="field-item odd"> <p> We helped this cross-continental digital music magazine and record label define a visual identity and web presence which made multi-media publishing a breeze plus integrated social networking tools.</p> </div> </div> </div> <div class="field field-type-link field-field-url"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> URL: </div> <a href="http://www.globetronica.org">http://www.globetronica.org</a> </div> </div> </div> <div class="field field-type-filefield field-field-article-images"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/homepage_0.jpg" type="image/jpeg; length=822372">homepage.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/magazine.jpg" type="image/jpeg; length=934963">magazine.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/reviews.jpg" type="image/jpeg; length=997969">reviews.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/review.jpg" type="image/jpeg; length=833239">review.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/broadcast.jpg" type="image/jpeg; length=925554">broadcast.jpg</a></div> </div> </div> </div> <div class="field field-type-text field-field-budget"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Approximate Budget: </div> $15,000 - $20,000 </div> </div> </div> <div class="field field-type-text field-field-description"> <div class="field-items"> <div class="field-item odd"> <p> Our mission was to create a visual identity and web presence for this digital music magazine which accurately reflected their mandate of championing pioneering sounds from around the planet.</p> <p> In attempts to establish <span data-scayt_word="Globetronica" data-scaytid="10">Globetronica</span> as an eminent publication focused on the world's new sounds, we crafted a logo from three main elements; a sphere to represent the globe itself, a crest to represent authority and fairness and the letter 'G' to imply the brand-name.</p> <p> The website's color palate was defined from earth-tones to create a warm <span data-scayt_word="aesthetic" data-scaytid="52">aesthetic</span> using a textured and processed world map in the background layered by semi-transparencies containing content to imbue grounding.</p> <p> Built using the Drupal framework, this site comprises of several content types including pages, articles and reviews - mainly made up of copy and embedded images (which the site automatically sizes, crops and overlays depending on specific settings for dynamic listings), video (which is automatically pulled via a simple URL from <span data-scayt_word="youtube" data-scaytid="97">youtube</span> and then automatically embedded according to sizing conventions) and audio (which automatically pull in from <a href="http://soundcloud.com"><span data-scayt_word="Soundcloud" data-scaytid="186">Soundcloud</span></a> using a custom <span data-scayt_word="HTML5" data-scaytid="124">HTML5</span> audio player displaying artwork and tracks with a waveform and play-bar).</p> <p> In addition to regular posts with embedded media, we defined a custom content type for <span data-scayt_word="Globetronica's" data-scaytid="196">Globetronica's</span> Broadcast series - essentially content managers can fill out a description and track-listing for a 'broadcast' and then annotate the post with cover art and an audio file upload; all of which get displayed in play-able format on the site as well as wrapped into an XML file pushed to iTunes as a podcast feed for subscription/syndication.</p> </div> </div> </div> </article> <article> <h1>Together, lets make 2012 a success!</h1> <p>Qasim — Fri, 06 Jan 2012 16:16:57 +0000</p> <div class="field field-type-filefield field-field-article-thumbnail"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/5005493084_0cbe805501_z.jpg" type="image/jpeg; length=137773">5005493084_0cbe805501_z.jpg</a></div> </div> </div> </div> <div class="field field-type-filefield field-field-fullsize-image"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/5005493084_0cbe805501_z_0.jpg" type="image/jpeg; length=137773">5005493084_0cbe805501_z.jpg</a></div> </div> </div> </div> <p> Every New Year brings potential for realizing fresh experiences and attaining goals for success above every year before.</p> <p> Towards the end of 2011 we took some time away from finding new project partners to work on developing and launching a platform for <span data-scayt_word="Creatives" data-scaytid="2">Creatives</span> to make their own websites called <a href="http://introduction.io">introduction.io</a> as part of our <a href="/incubator">incubated initiatives</a> but as 2012 begins <span style="background-color:#ffff00;">we're now actively seeking clients to work with on new projects</span>.</p> <p> Have you got an idea for a new project you'd like feedback on? Need help rethinking your current online identity and web presence(s)? Interested in bringing an offline community to the Web, or encouraging a current online community to be more participatory? We can help out!</p> <p> <strong>Lets discuss how we can work together to make this new year exciting and successful! </strong>You can get in touch <a href="/contact">via our contact/RFP-submittal form</a>, via telephone at 1.416.642-5469 or email: <a href="mailto:info@designguru.org">info@designguru.org</a></p>  </article> <article> <h1>Getfilmi</h1> <p>admin — Thu, 05 Jan 2012 19:01:46 +0000</p> <div class="field field-type-filefield field-field-article-thumbnail"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/thumb.jpg" type="image/jpeg; length=219419">thumb.jpg</a></div> </div> </div> </div> <div class="field field-type-text field-field-overview"> <div class="field-items"> <div class="field-item odd"> <p> This web-based Video-on-Demand service is the world's premier central source for Indian Cinema. The main website offers members an extremely intuitive interface to make watching films online enjoyable and easy.</p> </div> </div> </div> <div class="field field-type-link field-field-url"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> URL: </div> <a href="http://www.getfilmi.com">http://www.getfilmi.com</a> </div> </div> </div> <div class="field field-type-filefield field-field-article-images"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/frontpage.jpg" type="image/jpeg; length=600233">frontpage.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/frontpage-hover.jpg" type="image/jpeg; length=572235">frontpage-hover.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/action-section.jpg" type="image/jpeg; length=693862">action-section.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/section-withmenu.jpg" type="image/jpeg; length=664526">section-withmenu.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/anon-filmpage.jpg" type="image/jpeg; length=439968">anon-filmpage.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/similarfilms.jpg" type="image/jpeg; length=414111">similarfilms.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/artistlisting.jpg" type="image/jpeg; length=317827">artistlisting.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/loggedinfilm.jpg" type="image/jpeg; length=340324">loggedinfilm.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/filmshelf.jpg" type="image/jpeg; length=391144">filmshelf.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/ratings.jpg" type="image/jpeg; length=176098">ratings.jpg</a></div> </div> </div> </div> <div class="field field-type-text field-field-budget"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Approximate Budget: </div> $50,000 + </div> </div> </div> <div class="field field-type-text field-field-description"> <div class="field-items"> <div class="field-item odd"> <p> This new Video-on-Demand service was born out of a need to create a central place to watch Indian Cinema online. After an exhaustive study of the various web-based <span data-scayt_word="VoD" data-scaytid="1">VoD</span> services out there, we designed the public and logged-in interfaces to make exploring and discovering films fun and easy.</p> <p> A main goal with the site is to relate the depth of Indian Cinema - we wanted to show the public what <span data-scayt_word="Getfilmi" data-scaytid="2">Getfilmi</span> has to offer before they sign up so that they are excited about becoming a member, and to do that we essentially left the whole site available to the public except the videos themselves. As soon as someone signs up an email is sent to them to verify their details and then they can log in and immediately view the video content throughout the site.</p> <p> Being that the content base will include films dating back a period of over 70 years from a large country with many languages we built the system with flexibility in mind; films are tagged with language, cast & crew member names and genre upon ingestion into the CMS we built. </p> <p> The overall navigation is per-genre and then once people are viewing a film they are offered a dynamic list of the cast & crew - each person's name is click-able, and linked to a dynamic listing of all films on <span data-scayt_word="Getfilmi" data-scaytid="3">Getfilmi</span> which that person worked on - so its very easy to watch more of the actors you like, for example... To this end we also included a simple algorithm to display a dynamic list of films similar to whatever one the user is looking at.</p> <p> The search function of the site also features optional filtering by language (Hindi, <span data-scayt_word="Telegu" data-scaytid="5">Telegu</span>, Tamil, <span data-scayt_word="Gujurati" data-scaytid="6">Gujurati</span>, Bengali and others are included) and this filter display can be turned on/off simply by clicking into the search field.</p> <p> Through our research we found that its extremely frustrating to members of other <span data-scayt_word="VoD" data-scaytid="7">VoD</span> services, like Netflix, to not be able to keep track of interesting films they wanted to watch but didn't immediately have time for - so we included a virtual 'Film Shelf' in <span data-scayt_word="Getfilmi" data-scaytid="8">Getfilmi</span>. Members can click a simple <span data-scayt_word="javascript" data-scaytid="11">javascript</span> toggle on whatever film they would like to shelve and the system automatically includes it in a central location called the 'Film Shelf.' If they've watched a film, or otherwise want to take it off the shelf, the same toggle can remove the film from the shelf.</p> <p> We've had a lot of experience in the past building custom <span data-scayt_word="intranets" data-scaytid="12">intranets</span> for media firms to keep track of internally developed video content (e.g. <a href="/client-projects/charlex-intranet"><span data-scayt_word="Charlex" data-scaytid="13">Charlex</span></a>), as well as public-facing sites which let users upload videos to share with on-site communities (e.g. <a href="/client-projects/directors-change">Directors of Change</a>) but this was the first true-and-true Video-on-Demand service focused on a specific type of film and its been exciting to explore how best to relate the uniqueness of <span data-scayt_word="Getfilmi's" data-scaytid="14">Getfilmi's</span> content and look forward to working on this project as it evolves post-launch.</p> </div> </div> </div> </article> <article> <h1>Express Scripts Canada</h1> <p>admin — Wed, 04 Jan 2012 17:42:32 +0000</p> <div class="field field-type-filefield field-field-article-thumbnail"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-png"></div><a href="http://designguru.org/files/screen_shot_2012-01-04_at_12.46.03_pm.png" type="image/png; length=245610">screen_shot_2012-01-04_at_12.46.03_pm.png</a></div> </div> </div> </div> <div class="field field-type-text field-field-overview"> <div class="field-items"> <div class="field-item odd"> <p> This project entailed building a bilingual website for the Canadian operations of this American health services company.</p> </div> </div> </div> <div class="field field-type-link field-field-url"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> URL: </div> <a href="http://www.express-scripts.ca">http://www.express-scripts.ca</a> </div> </div> </div> <div class="field field-type-filefield field-field-article-images"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/homepage.jpg" type="image/jpeg; length=499847">homepage.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/homepage2.jpg" type="image/jpeg; length=560035">homepage2.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/page.jpg" type="image/jpeg; length=425105">page.jpg</a></div> </div> <div class="field-item even"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/page-fr.jpg" type="image/jpeg; length=425455">page-fr.jpg</a></div> </div> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-jpeg"></div><a href="http://designguru.org/files/press-fr.jpg" type="image/jpeg; length=424968">press-fr.jpg</a></div> </div> </div> </div> <div class="field field-type-text field-field-budget"> <div class="field-items"> <div class="field-item odd"> <div class="field-label-inline-first"> Approximate Budget: </div> $10,000 - $15,000 </div> </div> </div> <div class="field field-type-text field-field-description"> <div class="field-items"> <div class="field-item odd"> <p> We developed this site for our project partners at <a href="http://www.designlab.net">Design Lab</a> here in Toronto to enable their client, Express Scripts Canada, to easily manage content in both English and French.</p> <p> As most of the copy on the site was corporate in editorial style, it needed to co-exist in each language, so we implemented a language <span data-scayt_word="versioning" data-scaytid="1">versioning</span> system which uses English as the base language and allows for French versions to be made of the English (thereby maintaining navigational coherency - a user can be looking at a page or dynamic list, tap the '<span data-scayt_word="Francais" data-scaytid="2">Francais</span>' button and be shown a translated version of whatever they were working on) or as independent posts existing only on the French 'side of the site.'</p> <p> Employing AJAX tools to streamline user interface, the site was outfitted with growl-style popup messaging and hover-state help tips throughout the various forms <span data-scayt_word="admins" data-scaytid="3">admins</span> use to manage content - making it easier for them to find help when they need it.</p> <p> As Express Scripts publishes news <span data-scayt_word="regularily" data-scaytid="4">regularily</span> to Canada <span data-scayt_word="newswire" data-scaytid="5">newswire</span>, we automated the process of content ingestion to the website for Press Releases - setting the site to look at the news-feed for new posts at regular intervals and parse them into posts within the Content Management System, <span data-scayt_word="versioned" data-scaytid="6">versioned</span> by language automatically.</p> </div> </div> </div> </article> <article> <h1>Multiple File Upload Field with Drupal 7</h1> <p>admin — Thu, 22 Dec 2011 06:18:46 +0000</p> <div class="field field-type-filefield field-field-article-thumbnail"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-png"></div><a href="http://designguru.org/files/screen_shot_2011-12-22_at_1.10.41_am.png" type="image/png; length=20411">screen_shot_2011-12-22_at_1.10.41_am.png</a></div> </div> </div> </div> <div class="field field-type-filefield field-field-fullsize-image"> <div class="field-items"> <div class="field-item odd"> <div class="filefield-file clear-block"><div class="filefield-icon field-icon-image-png"></div><a href="http://designguru.org/files/screen_shot_2011-12-22_at_1.10.41_am_0.png" type="image/png; length=20411">screen_shot_2011-12-22_at_1.10.41_am.png</a></div> </div> </div> </div> <p> Transitioning over to using Drupal 7 has been very frustrating these past few months - after the lengthy process of encouraging the Drupal Community to help updating core to reflect some user interface improvements over Drupal 6, that energy for making processes simpler hasn't seemed to carry through to contributed modules. </p> <p> Particularly, all the <span data-scayt_word="CCK" data-scaytid="1">CCK</span> advancement for media handling through fields that had happened with Drupal 5 and then 6 seems to have been thrown out the window with the horridly infantile state of the Media Module, which is reason enough to hold off on upgrading and stick with Drupal 6 for a few more months... yes, while the core team races to plan for Drupal 9's life-changing improvements, <span style="background-color:#ffff00;">I would still recommend making things work well using Drupal 6, a proven platform</span>.</p> <p> Still, you may be inclined to use Drupal 7 and then start pulling your hair out when you realize that the Media Gallery module doesn't really work well (lock in to 1 type of <span data-scayt_word="lightbox" data-scaytid="4">lightbox</span> etc...) and yearn for old <span data-scayt_word="CCK" data-scaytid="2">CCK</span> methods for using <span data-scayt_word="imagefields" data-scaytid="6">imagefields</span> which can handle multiple files being uploaded at once via flash or AJAX using <span data-scayt_word="contrib" data-scaytid="7">contrib</span> modules, of which there are many options these days...</p> <p> <strong>Fear not </strong>- there is an experimental approach that works and is currently being developed further using <span data-scayt_word="Plupload" data-scaytid="8">Plupload</span> which is being lead by <span data-scayt_word="vingborg" data-scaytid="9">vingborg</span> called <span data-scayt_word="Mupload" data-scaytid="10">Mupload</span> - I recommend checking it out and using that cash stored in the <span data-scayt_word="toupe" data-scaytid="11">toupe</span> fund for something else.</p> <p> <a href="http://drupal.org/sandbox/vingborg/1138512">http://drupal.org/sandbox/<span data-scayt_word="vingborg" data-scaytid="12">vingborg</span>/1138512</a></p>  </article> </main></body></html>