Nerd Alert: Get your CSS menus in front of the new YouTube player

In an effort to keep up with HTML5, just like Vimeo, YouTube has started to implement <iframe>s for their <embed> codes as a means of displaying their videos. By doing so, it allows a wider variety of devices to view an embedded YouTube (or Vimeo) video.

However, for all you developers out there, this means the old-school way of fixing a CSS-only drop-down menu from going behind an embed code no longer works. Previously (and this still works with the old code), you had to use z-index and wmode=”transparent” to make sure your menus show in front of the video.

The Previous Way

Old embed code:

<object width="640" height="390"><param name="movie" value="https://www.youtube.com/v/fDX7tevXO1E?fs=1&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param wmode="transparent"></param><embed src="https://www.youtube.com/v/fDX7tevXO1E?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="640" height="390"></embed></object>

Emphasis added. What is in red above was necessary to put CSS menu drop-downs in front of the YouTube player.

The New Way

To get your videos behind the menu as they’re meant to be, the “wmode” is now part of the query string added to the end of the source of the YouTube video:

<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/fDX7tevXO1E?wmode=transparent" frameborder="0" allowfullscreen></iframe>

This will fix your issue.

It should also be noted that, so far, this has only been noticed in Chrome and IE. Firefox appears to behave as normal.

DrupalCon Day 2: A whole lot of nerdery

DrupalCon Day 1 was a blast with a ton of good information, but Day 2 was a whole lot nerdier in our sessions. So, as with our last post, there may be a nerd alert necessary.

Making Maps Beautiful

If you’re a Drupaler and want to make sure your maps look beautiful, we attended a session on ways to make Drupal maps beautiful. Hint: You don’t always need to use Google Maps.

  1. Check out the OpenLayers module. It’s an open source javascript library that allows theme-ing of maps so you can make them look way more beautiful.
  2. Open Stream Maps is an open source mapping system that is similar/rivals Google Maps. There are (believe it or not) instances where clients cannot use Gmap (or Drupal’s Google Maps module); Open Stream allows for another option.
  3. Bring it all together by using the MapBox module which allows you to provide layers (e.g. selected boxes that show/hide information) on your maps (even Google Maps!).
  4. And let’s not forget about TileMill. You can use it to create custom tile sets—it’s a WYSIWYGish editor to create a look for a map and map interactions. As they say, they’re a “a modern map design studio
    powered by open source technology.” They do all the heavy CSS-lifting to making your maps pretty. USE THIS.

Drush Make

I was completely, totally, and utterly humbled by dmitrig01. Here’s the nerdy part: Below is a basic Drush Make file (there’s a lot that goes in before this, but hit up Schipul and we can help you out). The idea is that within literally a few lines of code, you can launch a “News” site or a “Video” site, all using Features and Drush.

By the way, dmitrig01 is a 15-year-old 10th grader who is an incredible speaker and actually wrote Drush Make. He spoke at 12-years-old at DrupalCon. I was still learning what women were when I was 15.

A basic, annotated Drush Make file

Hopefully this can get you started:

core = 6.x (Tell it what version of Drupal you're using)
api = 2 (What version of Drush Make we're running, found on Drush Make download page)

projects[cck] = 2.9 (Tell it which version of the module you're grabbing)
projects[features] = 1.0
etc...

projects[news_item][type][module]
projects[news_item][download][type] = get
projects[news_item][download][url] = URL (can be localhost, e.g. http://localhost/...)
projects[news_items][subdir] = features

We’ll be back tomorrow to drop some more nerdery on your ass!

DrupalCon Day 1: The future of Drupal, HTML5, and the Media Module in D7

We’ve come to the end of Day 1 of DrupalCon in Chicago. Al Hughes and David Stagg are back at DrupalCon (big ups to San Francisco last year!), ready to share some more Drupal knowledge with you all.

Al Hughes, Kieran Lal, David Stagg, and Dries Buytaert at DrupalCon Chicago
Al Hughes (PM at Schipul), Kieran Lal (Drupal Community Adventure Guide from Acquia), David Stagg (Creative Director at Schipul), and Dries Buytaert (Drupal Founder and Lead) with our man Morten Heide taking the photo at DrupalCon Chicago

Day 0: Party!

Of course, at the end of Day 0, the Drupalers gather at the local hotel bar and go to town. We have to give mad love to all those we partied with: Kieran Lal, Morten Heide, Dries Buytaert, Liza Kindred, Jonathon DeLaigle, Marco Carbone, and more!

The Future of Drupal (8)

  1. For the most part of the keynote, Dries hammered home the fact that Drupal 8 must work for all devices (no longer the desktop); the number of smartphones in the past year has increased exponentially and it would be egregious to miss that market.
  2. Dries also wanted to note that if you have two platforms, Drupal and some other CMS, the one that always wins out is the one with the better “ecosystem.” For example, the reason the iPhone wins out over competitors (that might even have a better product or coverage), is due to the ecosystem they’ve created: the App Store, the Apps themselves, the culture, etc. Dries wants to ensure that the Drupal ecosystem is not just stable, but thrives moving into the next generation Web platform.
  3. When creating Drupal 7, Dries met with 20 major market CTOs (e.g. Time Magazine), and asked them what the biggest issues facing the then current state of Drupal was. He said two bubbled to the top: Configuration and Administration. These were added directly to the direction of D8.

HTML5

D.Stagg attended a session by the wonderful speaker Jen Simmons about the future of HTML5 specifically in regards to Drupal. Rockin’ HTML5 with Drupal provided a number of good insights:

Coming up: Nerd alert!

  1. You can use ARIA (short for Accessible Rich Internet Applications) roles for descriptions, e.g. <nav role=”main-nav”>, to target and separate your HTML structures.
  2. Rule of thumb: Use the new <section> tag to group similarly related items (e.g. footer link menus), and use <div> tags to group somewhat unrelated items (e.g. a main content area and a sidebar).
  3. Really cool tip: On <input> fields, add type=”url” or type=”email” to change the keyboard layout on smartphones.

Media Module for Drupal 7 only

Albert Hughes spent some of his time in a session that discussed the way Drupal 7 will handle and update media in the Drupal system:

  1. Media is now treated closer to what one would consider a “node”, e.g. you can add fields like “caption”.
  2. You can also now upload a file and reference it throughout the site, as opposed to have it attached to a custom content type node.
  3. “Uploads” or the “File Attachments” have been taken away to make things more clean and streamlined.
  4. However, one of the main reasons this was taken away isn’t because of the Media module, but because the FileField module in Drupal 6 was added to core.

“Monster (Drupal Remix)”

And of course, both A.Hughes and D.Stagg spent a lot of time throwing out moocards getting people to visit http://bit.ly/drupalmonster. And if you don’t want to click, we’ll provide the embed for you 😉

“Monster (Drupal Remix feat. A.Hughes and D.Stagg)” from Schipul – The Web Marketing Co. on Vimeo.

“Monster (Drupal Remix feat. A.Hughes and D.Stagg)” music video released

Last year, A.Hughes and QCait dropped a Drupal remix of Successful by Drake for Schipul’s bi-annual conference SchipulCon in 2010. We were lucky enough to have Dries himself link to the video.

This year, though, A.Hughes teamed up with writing partner D.Stagg (both Schipul employees), taking it up a notch, dropping “Monster (Drupal Remix feat. A.Hughes and D.Stagg)”, complete with video, for DrupalCon 2011.

“Monster (Drupal Remix feat. A.Hughes and D.Stagg)”

“Monster (Drupal Remix feat. A.Hughes and D.Stagg)” from Schipul – The Web Marketing Co. on Vimeo.

Mad love to Brian Potter for the editing and direction.

Lyrics

D.Stagg
CMS is a monster
Blue on ya monitor
site bombin on ya
Now look where Drupal poppin up
As look through ya pocketbook
Site need a new look
try a Drupal sample
Hughes’ll demo an example

Hook
Drupal Drupal gotta lotta users
I’m a need to see a lot sites on this movement
I’m a need to see more Drupal sites watch us prove it
I’m a need to see more Drupal sites watch us prove it

Drupal, Drupal, everybody Drupal (x3)

A.Hughes
took my first site live on Drupal 5
that was ’08 i was trying to survive
got my suit straight and bought 2 ties
the lord blessed me with a gig now we on the rise
html i knew css
dreamweaver jquery and a cms
on my resume and in my cover letter
everyday i’m goin in and i’m getting better
up all night i done learned php
I’m on that on lullabot for a phd
in the Drupal game i’m a do my thang
managing projects on my way to fame
and we don’t see the same i got better views
in different regions doing fields like some soccer shoes
yeah its a.hughes i’ll replace ya name like a token
and you better back up before your site is broken

Hook
Drupal Drupal gotta lotta users
I’m a need to see a lot sites on this movement
I’m a need to see more Drupal sites watch us prove it
I’m a need to see more Drupal sites watch us prove it

Drupal, Drupal, everybody Drupal (x3)

D.Stagg
Drupal Drupal got a lot of users
Gotta build a site that’ll scale like weight losers
Gotta load fast using solr and some views
Gotta look better like Bentleys over land cruisers
Weak CMS sites boy we be trashing them
Call EMS those sites Drupal bashin them
Like Perez Hilton talkin’ trash bout yo fashion
Gotta have a clean back end like kardashian
Source code on LSD all tabbed out
Using css3, I’m a brag about
The Drupal 7 drop, stagg’ll always be about
Killin these sites with some node templates maxxed out
Give me a fresh install and an IDE
Hooked on hooks, modulating like I’m Whitney
Hook_form-alter like I’m doin’ plastic surgery
Takin’ these sites to a level like you never seen

In which I learn the most important life lesson about women

My brother, sister, and I from high school, circa 2000
My brother, sister, and I from high school, circa 2000

One day my sister Kathleen and I were both up at our church and I wanted to tell her something. We were in high school. She’s 14 months older than I am. We liked each other, never fought.

We were very close as children, moving around a whole lot, but when it came to personal issues—as high school students—it wasn’t like we were opening up about our formative experiences.

At church that day, she wasn’t around me at the time so I scoured the church for her and eventually found her tucked away in a back room. The type of place where you have to really want to talk to someone if you’re going to commit to that kind of search. She was crying, curled up on a couch.

I had never seen my sister cry; she was always very strong and in control. I came in the room, sat down, and asked her what was wrong. She started to tell me, and I would interject every once in a while trying to ease her feelings.

I hated to see her cry and I wanted to do anything I could to fix it. She would start talking again and then I would comment again and she’d have to start talking again and I’d try to comment again because it hurt me to see her cry.

Eventually she just turned to me, stared me down and said: “Shut up!” I froze. “I don’t always need you to fix things. Sometimes, women just have to talk. And all you have to do is listen.”

SFL: The Schipul Fantasy Football League Update

If you know anyone that works here at Schipul, you’ll know we’re a pretty competitive group. Not a whole lot of us are want to lose, and I’m sure there is a sub-set of us who no one wants to see lose for fear of flying objects or obscure injury.

So of course, we started a fantasy football league.

Rookie Commissioner Michael Coppens put together the crew, a batch of 10 Schipul misfits and a couple of the company’s close friends. Draft day was held after-hours in our conference room where dinner and libations were consumed and the crap talk immediately started flying.

We live to draft: The War Room
We live to draft: The War Room

Aside: For those of you who aren’t familiar with fantasy football, it goes like this: A certain number of teams (usually 10 or 12) divvy out NFL players by position (e.g. you get quarterbacks, running backs, wide receivers, tight ends, a kicker, and a defense) and, depending on their individual performances each week, they garner a certain number of points. The sum of these points is put up against the sum of your opponent’s points that week. Team with the most points wins. Repeat weekly.

After three weeks, I’d like to proudly say I’m in dead last place. This is obviously because I’m cursed with too much knowledge. Mr. Coppens himself is in first place which, as I’m sure we’ll all agree, is a little suspicious considering he’s the Commissioner. And although it’s still early, it’s gotta be hard for people like Project Manager Derek who (see standings below) has scored the third highest point total of any team, but has only won one game. Such is the life of a fantasy football owner.

What’s the point?

In all seriousness, Schipul values its culture above almost everything else (customer service is easily number one). And even though not everyone in the league has two televisions turned to one game and the other to NFL’s Red Zone while streaming a third game from ESPN3.com with four separate StatTracker windows open to keep up with fantasy stats like some people, it’s a great opportunity for our employees to hang out with each other and chat it up around the water cooler.

Even though dead last place takes a beating on Monday morning in the smack talk, I can’t wait for that shiny, shimmering moment when one of my players explodes, I smash my opponent, and I can get my own comebacks in.

No wins after the first three weeks? Only sounds like it’s going to be more of feat when I come back and win.

The Shake Down

East Division

Double Rainbow Warriors (Michael Coppens)
Not a Coward (Courtney Pemberton)
Dirty Branch Danger Fields (Rodney Sabrsula)
Team Key (Derek Key)
The Helper Monkeys (April Kyle)
One two Farve Five (Glen Zangirolami)
3-0-0
3-0-0
2-1-0
1-2-0
0-3-0
0-3-0

West Division

H-Town Headwreckas (Albert Hughes)
The Expandables (Dan M)
Orange Goo Goo (John-Michael Oswalt)
Ocho Cinco Ranch (Aaron Long)
Team Rice (Regina Rice)
Houston Get Money Crew (David Stagg)
2-0-1
2-1-0
2-1-0
1-1-1
1-2-0
0-3-0

Enjoying the Trip (Not the Destination) with The Oscars of Literal Travel

The California Coast
The California Coast from my flight SFO to IAH, by way of San Diego

In the interest of full disclosure, I really dislike traveling. My idea of traveling is making my way 24 miles from my home in midtown Houston to my parents’ house in Katy, TX by way of a decade-old Corolla.

Hardly the jet-setting, 4,800+ miles to London in a Boeing 767.

It’s part of my nature not to want to be away from my home. It makes it so that when I’m in a temporary home (read: hotel) in another city, I start to get antsy. So for me, half of the fun of travel is the literal travel itself. I love being in an airplane, I love airports and taxis, I love airport bars.

When I’m sitting around in San Diego waiting for my layover flight back to Houston, there’s something so engaging about hitting up the crappy Home Turf Sports Bar with a beer and people watching. No need to break out the computer.

So in honor of travel itself, I present to you The Oscars of Literal Travel, my takes on the best of the best in enjoying the trip itself, and not necessarily the destination.

Here’s the deal: Before all you travelers and jet-setters and skip-town-to-Vegas-for-one-day-ers tell me I’m wrong with these, I know that I don’t travel a lot. I’ve hit my fair share of American airports, but no, I haven’t been to Seattle or Portland or to any in Florida. Fair warning.


Best Airport: Hartsfield-Jackson Atlanta International Airport

Atlanta's Hartfield-Jackson Airport Layout
The beautiful layout of the ATL airport

There is nothing better than ATL’s long halls. If you compare airports to malls, most are convoluted and next to impossible to navigate with escalators and floors and gates that you have to take three trams to get to before realizing you still need to go up another level. (Yes, IAH, you’re that bad.)

For such a major city with a major airline hub, Atlanta’s airport gets it right. There’s no mistaking where you need to go: Just walk down the hall. You want to remove some stress from traveling? Just take out all that worry of touching down in a new place and having no clue where to go. In Atlanta, you just walk. Check out that terminal map to the left. Head to Atlanta and the worry about finding your gate will be a thing of the past.


Best Airport Eating: Pappadeaux’s (IAH)

I may be a little partial here, but there is nothing like Pappadeaux’s before catching a flight out of your home town. Sure, it’s a “chain” in the sense that they have more than one location, but the fried alligator is so damn good, you can’t pass it up—and I hate seafood. Combine that with a good draft beer selection and a very close proximity to Terminal D and E, it’s a can’t miss. If you’re not a Houstonian, try to fly Continental and get a gate out of D and hit it up.


Best Airport Bar: The “Restaurant Area” in Columbia Metropolitan Airport

When I’m traveling, I don’t want glitz and glamour. I don’t want to have my attire checked at a door with a dude with an earpiece checking a list like I’m at some uppity club on Washington Ave. I want a beer. I want it cold and I want it fast because we all know the layover isn’t long enough.

So don’t give me Vino Volo. Give me the wide open area in what Columbia Metropolitan calls its “restaurant area.” Familiar with the airport because I went to school there, the airport is so small it’s got only one terminal with two sides, joined together by this “restaurant area” that offers a view of the entire terminal. (Check out the layout for yourself.) Just hop up to the bar, grab a tall cold one and commence to people watching. You get to see all of the comings and goings and there’s no chance you’ll miss your flight because you got held up behind a ridiculously over-sized golf cart.


Best Nap Material: Nothing

After moving and shaking in between (or before) your flight(s), you want to do nothing but nap it up. Don’t reach for those headphones, don’t put on that movie. Just put your head up against the window. Nothing beats the hum of the plane buzzing along thousands of feet above the bustling earth.


Let me know I’m wrong!

If you’re a fan of Schipul and are reading this blog, we know you are most likely a traveler with an opinion. Let us know YOUR favorite travel trip spots—not your favorite destination. Let me know which airport I need to make my layover in so I can hit up that bar—and not even want to leave the airport.

An Intro to The Google Font Directory: The Next Step for Web Ready Fonts

If you’ve ever wondered why all the fonts on the Internet look the same, it’s because there’s a very limited number of them for Web designers to choose from. The issue is this: For a font to work correctly, it has to be installed on your computer. If it’s not there, it doesn’t show up.

Fortunately, every single computer on earth comes with at least one font installed. In fact, there are multiple. And because every computer has this specific set, Web designers are free to use those fonts in their designs because they a) know what it will look like, and b) they know it will work.

Being limited to around five or six fonts (Arial [or Helvetica on a Mac], Verdana, Times New Roman, Georgia, Tahoma, roughly) seriously limits the way your designs will look.

But as the Internet grows up, Google is hoping to utilize some new features to allow for designers to use more fonts in their creations. Enter the Google Font Directory.

The Google Font Directory now easily allows designers to embed fonts into a site itself, rather than require the computer to have them installed. (Visit the Directory itself to see the ever-growing list of new fonts available.)

And the best part? It’s incredibly simple!

All the designer needs to do now is drop this line of code…

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz'


rel='stylesheet' type='text/css'>

…in the header, and now it’s available for use in their style sheet! So if they wanted to make all their paragraphs Yanone Kaffeesatz, they can now do this:

p { font-family: 'Yanone Kaffeesatz', serif; }

Pretty cool, huh??

Google hopes to continue to build the list—and there are still some hiccups—but as Web designers, we’re hoping this is another great step towards a much larger palette for us to work with.