There is so much potential for groundbreaking journalism to spring from a room full of web developers and reporters. There’s a wealth of data available on the Internet. Journalists know there are stories there. Web programmers know how to mine the date quickly. If the two groups team up, thousands of good stories previously buried beneath mountains of paperwork will reveal themselves. It sounds like the future of journalism.

The ScraperWiki logo (via scraperwiki.com)

Unfortunately, when you get the two groups in a room, things rarely work out the way the new media prognosticators envision this next generation of journalism.

Programmers jump on computers, guzzle two-liters of soda, and zone out in their code. It’s not their fault. While writing code and mining data, programmers are immersed in another language. After hours of speaking that language, it cannot be easy to have a journalist walk in speaking newsroom speak.

That was the position many programmers and journalists were in when our American University School of Communication grad class visited the second day of the ScraperWiki Conference at the Washington Post on March 31.

Our class spent the day with roughly 25 programmers and 15-20 journalists working together – in theory – to identify possible stories in data, mine the data, and build the code to present the data.

However, when we arrived at the conference, programmers had already spent the first day of the conference identifying data and were deep into their coding. The class moved around the room to identify topics that interested them, but the programmers were already lost in their code. Many were friendly, but it was hard to figure out where we fit in as journalists.

The organizers needed to create more structure to the conference to facilitate collaboration. But that’s easier said than done. The fundamental issue with this new union in journalism is that the two groups do not speak the same language. Both groups are looking for stories, but programmers were looking for stories on their own and journalists were trying to identify how they could help. If this is the future of journalism, who is responsible for creating stories? Are programmers in charge or are journalists in charge? With nobody in charge, it’s chaos.

Despite the chaos, I tried to jump around the room and absorb knowledge from programmers. In that process, I was able to identify what had potential to be an interesting story. One group of programmers was working on mining data on Washington, D.C., crime incidents. Across the room, another group of programmers was mining data on D.C. vacant properties. The two teams were in no way working together, but it seemed like a natural. Was there any correlation between crime and vacant properties in D.C.? I called it the “broken windows” story.

By the end of the day, the two teams did come together to match their data. They took home second place during the awards ceremony.

So I guess our class left with the feeling that there was some hope that we could learn to speak the same language.

On April 6, 2009, President Barack Obama took his first trip overseas as President. He traveled to Turkey and with him he carried nearly 100 years of disputed history and a promise that he made as a candidate. Armenians in the United States and worldwide watched in hopes that President Obama would do what no U.S. President had done before him—officially acknowledge the slaughter of Armenians by Ottoman Turks in 1915 as genocide.

When he reached the podium in front of the Turkish parliament, President Obama was forceful and direct.

“History is often tragic, but unresolved, can be a heavy weight. Each country must work through its past. And reckoning with the past can help us seize a better future,” he said.

He never uttered the word “genocide.” That word is the crux of a moral, diplomatic, and legal fight between historians, human rights activists, politicians, diplomats, Armenia and Turkey that has lasted nearly a century and has come to its zenith in the United States as the 100th anniversary of the slaughters approaches.

On that April day, thousands of Armenians and many of the world’s leading human rights experts and historians expected to hear President Obama speak of the genocide that killed an estimated 1.5 million Armenians. Instead, he continued into a different narrative. A narrative that some argue has been shaped by the U.S. State Department, the Turkish government, and millions of dollars of lobbying money.

“I know there are strong views in this chamber about the terrible events of 1915. While there has been a good deal of commentary about my views, the best way forward for the Turkish and Armenian people is a process that works through the past in a way that is honest, open, and constructive.”

In 2006, then Senator Obama was less open in his interpretation of the events of 1915. In a letter to Secretary of State Condoleezza Rice, Senator Obama wrote, “The occurrence of the Armenian Genocide in 1915 is not an ‘allegation,’ a ‘personal opinion,’ or a ‘point of view.’ Supported by an overwhelming amount of historical evidence, it is a widely documented fact.”

Senator Obama was concerned with the moral obligation humanity has to recognize its darkest periods. In 2009, however, President Obama walked into Turkish parliament with political concerns. Turkey is too important an ally in the Middle East to risk falling out of its good graces. The Turkish government continues to deny that genocide occurred. Today, the government admits that there were mass deportations of Armenians, but claims that deaths were the result of the chaos of WWI.

This back and forth is how the history of the Armenian genocide has played out over the last decade in the United States. For every Congressional action urging the President to acknowledge the genocide because of a moral imperative, there is an equal political reaction from the Turkish government and U.S. diplomats urging the President to drop the issue.

The most recent Congressional action on the Armenian genocide—House Resolution 304—was introduced by Representative Bob Dold (R-IL) on June 14, 2011 and has been referred to the House Committee on Foreign Affairs. The fifth such resolution to be introduced since 2000, it carries with it a trail of millions of dollars in lobbying money.

Millions in Lobbying and No Resolution

Representative George Radanovich (R-CA) and David Bonior (D-MI) introduced the first Armenian Genocide recognition legislation—House Resolution 596—on September 27, 2000. The resolution called on the President to pronounce an “affirmation of the United States record on the Armenian genocide.” There had been previous resolutions calling for a day of remembrance for the Armenians killed, but H. Res. 596 was the first to call for the President to declare an official stance on the issue for the nation.

The backlash from the Turkish government, the U.S. State Department and Defense Department was swift. While the House International Relations Committee voted 24-11 to send it to the House floor, Speaker Dennis Hastert received a letter from Secretary of Defense William Cohen that read, “Passing judgment on this history through legislation could have a negative impact on Turkish-Armenian relations and on our security interests in the region.” The letter was sent on September 28. On October 19, Hastert pulled the resolution from the House agenda.

On December 15, Representative Joe Knollenberg (R-MI) voiced his displeasure with the speaker, his colleagues and the Turkish government:

“Mr. Speaker, in the closing days of the 106th Congress, I rise today to add perspective to the issue of the Armenian Genocide. Like many, I was deeply disappointed that the House did not consider H. Res. 596…In an effort to stop the resolution, Turkey made repeated threats…I regret that the Republic of Turkey opted to use coercion to make its case. However, it’s more regrettable that the United States succumbed to such tactics.”

The same pattern has played out since 2000 with H. Res 316 in 2005, H. Res 106 in 2007, H. Res 252 in 2009, and H. Res. 304. In each case, resolutions are referred to the House Committee on Foreign Affairs (formerly the House International Relations Committee) before inexplicably dying before reaching the House floor for a vote.

In nearly 12 years since H. Res 596 was introduced, Dennis Hastert has continued to be a major player in defeating Armenian genocide resolutions. In July, Hastert, now a lobbyist for Dickstein Shapiro LLP, was hired by the Turkish Embassy to dissuade Congress from passing H. Res. 304, according to documents filed with the Justice Department. In 2007, when H. Res. 106 was under consideration, the Turkish government spent more than $300,000 per month on lobbying and PR firms Dickstein Shapiro LLC, Gephardt Group Government Affairs, Fleishman-Hillard, Inc., and DLA Piper, according to Department of Justice Foreign Agency Registration Act (FARA) documents.

Since 2007, FARA documents show that the Turkish government has spent more than $10.4 million on high-powered lobbyists, including Hastert, Dick Gephardt, and Bob Livingston. Attempts to contact many of the lobbyists under contract with the Turkish government went unanswered.

Beyond the money spent directly by the Turkish government, Turkish Political Action Committees (PACs) like the Turkish American Heritage PAC, Turkish Coalition USA PAC, and the Turkish Coalition California, spend tens of thousands every election cycle contributing to members of Congress influential on the issue of the Armenian Genocide. In the 2010 election cycle, Turkish Coalition USA PAC spent $183,950 toward House candidates.

Many of these PACs spend significant amounts of money supporting members of the House Committee on Foreign Affairs, where Armenian genocide resolutions often lose momentum. In the 2012 election cycle, Turkish Coalition USA PAC has already spent $39,521 supporting House candidates and just $1,000 supporting Senate candidates. Of that money, $14,521 went toward nine members of the House Foreign Committee on Foreign Relations. The largest sums went to Chairman Ileana Ros-Lehtinen (R-FL), who received $4,000 and Dan Burton (R-IN) who received $3,021. Since 2008, Ros-Lehtinen and Burton have received $25,321 from Turkish Coalition USA PAC.

In 2000, Burton was one of three Representatives on the House International Relations Committee to write a dissenting view on the committee’s 24-11 vote in favor of H. Res. 596. Burton, with then chairman Tom Lantos and Eni F.H. Faleomavaega, wrote:

“The statements in this resolution go beyond the factual evidence in terms of the role of the Ottoman government in perpetrating the atrocities that were committed. There has been a great deal said about ‘genocide’ and the direct involvement and instigation of the Ottoman government in the atrocities. While we do not wish to minimize in any way the enormity of the atrocities committed against the Armenian people, the statements in the resolution do go beyond the historical evidence of Ottoman involvement. The Ottoman government was weak and ineffectual and in the process of collapse at the time of these tragic events, but there are clear indications that the government itself did not order or instigate them.”

While the International Association of Genocide Scholars and many historians and scholars have recognized the Armenian deaths as genocide, the narrative outlined by Burton and his colleagues echoed that of the Turkish government.

Peter Balakian, author of The Burning Tigris: The Armenian Genocide and America’s Response, believes that the Turkish government’s political and financial pressure is equally powerful in diplomatic circles.

“Turkey is investing an enormous amount of money in this absurd game they’re playing,” said Balakian. “Many of us believe in the importance of recognizing genocide for ethical reasons, but if you place that next to the perceived fears of the military, political, and financial loss, every time the realpolitik is going to win out over the ethical question.”

Turkey’s diplomatic pressure was evident on October 1, 2007, when Speaker of the House Nancy Pelosi received a letter from eight former U.S. Secretaries of State and Defense urging her not to pass H. Res. 106. The letter, which was signed by Alexander Haig, George Shultz, Lawrence Eagleburger, Madeleine Albright, Henry Kissinger, James Baker, Warren Christopher, and Colin Powell, read:

“Passage of the resolution would harm our foreign policy objectives to promote reconciliation between Turkey and Armenia. It would also strain our relations with Turkey, and would endanger our national security interests in the region, including the safety of our troops in Iraq and Afghanistan.”

Nine days after that letter was sent, the House Committee on Foreign Affairs passed the resolution by a 27-21 vote. The resolution never made it to the House floor for a vote.

While H. Res. 106 was stifled in the United States, the Turkish government was responding to continued calls citizens in the U.S. and Great Britain to recognize the Armenian Genocide. In an Op-Ed in The New Statesman, Orhan Tung of the Turkish Embassy offered the government’s official stance on the issue:

“Contrary to the Armenian allegations, in fact, there is no consensus among the historians and legal experts to qualify the events of 1915 as “genocide”. A good number of well-respected scholars recognize the deportation decision in 1915, taken under World War I conditions, as a security measure to stop the Armenians from co-operating with the foreign forces invading Anatolia.”

Pressure from the Turkish government continued in 2009 and 2010 as the House again considered an Armenian genocide resolution. Rep. Adam Schiff (D-CA) introduced House Resolution 252 on March 17, 2009. Just 14 days before the House Committee on Foreign Affairs was slated to vote on the resolution, U.S. Ambassador to Turkey James Jeffrey wrote to State Department officials from Turkey. The classified document, which was uncovered by WikiLeaks, warned of the consequences should the House pass H. Res. 252:

“Turkey consistently warns that any U.S. determination of the events of 1915 as ‘genocide’ would set off a political firestorm in Turkey, and the devastating effect on our bilateral relationship—including political, military, and commercial aspects—would be unavoidable.”

Despite the 23-22 vote in favor of the resolution—Ros-Lehtinen and Burton among the Nays—it never reached the floor for a vote.

This kind of diplomatic pressure is nothing new to John Evans. The former U.S. Ambassador to Armenia, Evans spent a year and a half as Ambassador before he was relieved of his duties. He attributes his short tenure to statements he made during speaking tour in February 2005.

“I found myself faced with the dilemma of saying to my audiences that I didn’t believe it was a genocide or telling the truth, which was that I did believe it was a genocide under the definition that we have from the 1948 convention. In my view this was a dilemma, but it was clear what my choice had to be. I wasn’t going to spin complicated and ultimately futile, twisted arguments to get around what is clearly a matter of proven truth. It wasn’t in my power to recognize the Armenian genocide on behalf of the U.S. government, but I was breaking with current State Department policy and that is of course where I ran into trouble. I wasn’t actually fired, but I was replaced after 18 months by another nominee.”

The United States has not always been so measured when considering the Armenian massacres of 1915. Between 1915 and 1922—the years of the Armenian slaughters according to many historians—U.S. diplomats and human rights organizations were among the first to recognize the plight of the Armenians and call for help.

The History of the Armenian Genocide and the United States

Henry Morgenthau Sr., the United States Ambassador to the Ottoman Empire during WWI, was perhaps the first U.S. official to acknowledge what was happening to Armenians in Anatolia (present-day Turkey). In a letter to U.S. Secretary of State Robert Lansing dated July 20, 1915, Morgenthau wrote:

“Deportation of and excesses against peaceful Armenians is increasing and from harrowing reports of eye witnesses it appears that a campaign of race extermination is in progress under a pretext of reprisal against rebellion.”

At the time Morgenthau wrote the letter—which many Armenian scholars point to as among the first eyewitness accounts of genocide—the Ottoman Empire was losing territory to Russia, Great Britain and Austria. While the Turkish government claims the crumbling empire’s weak military is proof it would not have been capable of perpetrating genocide, other U.S. diplomats in the region were documenting contrary evidence.

In September 1915, Leslie A. Davis, U.S. Consul in Hurput, Turkey, wrote to Secretary of State Lansing of what he was seeing:

“We saw hundreds of bodies and many bones in the water below. It was rumored that many of the people that were brought here were pushed over the cliffs by the gendarmes. That rumor was fully confirmed by what we saw. In some of the valleys there were only a few bodies, but in others there were more than a thousand. I do not believe there has ever been a massacre in the history of the world so general and thorough as that which is now being perpetrated in this region. Or that a more fiendish or diabolic scheme has ever been conceived by the mind of man.”

Morgenthau and Davis were not alone in documenting and acknowledging the atrocities befalling the Armenian people in 1915. Back in the United States, public figures like H.L. Mencken, Ezra Pound, William Jennings Bryan, Woodrow Wilson, and Theodore Roosevelt all spoke out about what was happening to the Armenian people.

The New York Times published 145 articles in 1915 that spoke of race extermination of Armenians in the Ottoman Empire, including one report titled, “Tales of Armenian Horrors Confirmed,” published on September 27, 1915. The article quoted from a report published by the Committee on Armenian Atrocities that read:

“Evidence seems to prove that probably 500,000 Armenians have already been murdered or forced to the desert, where only death awaits them unless relief is secured at once. And all this has taken place since March and it is now at the height of its gruesome fury.”

As a result of these reports, thousands of Americans rallied to help the Armenian people. The Near East Relief Foundation raised $100 million ($1.3 billion today) in relief for the Armenians. However, as another New York Times article, dated Nov. 1, 1915, noted, aid for Armenians was blocked.

While the first-hand accounts and New York Times reports seem to paint a one-sided picture of what was happening to Armenians during WWI, one former U.S. diplomat with intimate knowledge of U.S.-Turkey relations, who chose to remain anonymous, believes that the issue is far more complex. The former diplomat wrote in an email:

“Observers do not necessarily have a complete picture when they make their records. Time must pass, and many different and differing perceptions need to be analyzed, and data must be gathered widely and deeply—something not yet accomplished.”

But many, including former Ambassador John Evans, argue that the history of the events is no longer debatable. Evans noted that the United States government has already acknowledged the Armenian genocide. He pointed to a U.S. filing with the International Court of Justice in 1951, which read:

“The practice of genocide has occurred throughout human history. The Roman persecution of the Christians, the Turkish massacres of Armenians, the extermination of millions of Jews and Poles by then Nazis are outstanding examples of the crime of genocide.”

One year after the United States’ filing with the International Court of Justice, Turkey joined the North Atlantic Treaty Organization and became an important ally to the United States. Evans believes that since that day, the United States policy on the Armenian Genocide has been influenced by “geopolitical thinking and the demands of being an ally.”

Those demands, according to the anonymous U.S. diplomatic source, should remain our nation’s focus and not the legislation that has been moving through Congress over the last 12 years. Via email, the source wrote:

“It makes more sense to focus on the future, not litigate the past, and not needlessly mess up that future. If we are ever to be of help in moving Turkey to accept any view of what happened and to work through the consequences, then in my personal opinion, we have to work gradually. They have to travel to and arrive at whatever the destination is themselves. Attempting to compel them there by foreign legislative insults would not be the way one treaty ally, friend, and strategic partner—and that’s what we rightly are—would or should treat another.”

Moving Forward with Education

On August 22, 1939, according to reports received by the Associated Press, Adolf Hitler said as he prepared to invade Poland, “Who, after all, speaks today of the annihilation of the Armenians?” That quote hangs in the United States Holocaust Memorial Museum as a reminder to the importance of remembering atrocities against humanity.

Despite those words, a majority of Americans do not know about the Armenian Genocide. An informal, unscientific poll conducted online found that 73 percent of 7,327 people polled had never heard of the Armenian Genocide.

Organizations like Facing Ourselves and Our History are trying to change that. The organization, based out of Brookline, Mass., has developed curriculum to help teachers develop lesson plans on the Armenian Genocide.

Peter Balakian believes, regardless of whether or not President Obama recognizes the Armenian deaths as genocide, education about the events is becoming more widespread.
“The good news in this evolving history and narrative is that there isn’t denial anymore,” said Balakian. “Nobody believes Turkey. The Armenian discourse has become sophisticated and so dense and deep and full that the process of education really has worked.”

While progress is being made, Ambassador Evans still believes acknowledgement of the Armenian genocide by our government is an important statement that can help prevent future atrocities.

“We need, when we see one of these mass atrocities looming, to be able to say there is a genocide coming if we don’t act. And if we’re afraid to use what [Turkey] coyly calls the ‘G-word,’ then we’re robbing ourselves of the necessary vocabulary to sense danger, to point at oncoming danger and act.”

To see more of the research behind this project, visit my Armenian Genocide research Delicious bookmarks.

School is back and I haven’t posted in a while so I thought I would post the writing assignment I had to do during our first class. I’m currently in a public affairs and journalism class that focuses on investigative journalism. We watched Edward R. Murrow’s “Harvest of Shame” and had one hour to write 2-3 pages about the documentary and themes throughout Murrow’s life that came through in the film. Here is what I wrote.

“Harvest of Shame,” a one-hour documentary news program on the plight of migrant workers in America, exposed the horrific working conditions farm workers endured and their struggle to survive and raise a family. Edward R. Murrow used all of the strengths of the medium of television to the fullest extent—showing vivid and alarming pictures of a world few people had seen—just as he had with radio during World War II. For journalism, “Harvest of Shame” created a new, compelling, in-depth, and powerful genre. For the migrant workers, “Harvest of Shame” gave voice to the powerless and created legislative change. As Upton Sinclair changed the meat packing industry at the turn of the century with “The Jungle,” Murrow used journalism to confront the American public with the truth of how food ended up on the table.

In “Harvest of Shame,” Murrow woke people from the slumber of their comfortable lives. It was the manifestation of the overarching theme of his 1958 address to the Radio and Television News Directors Association. There he said, “For surely we shall pay for using this most powerful instrument of communication to insulate the citizenry from the hard and demanding realities which must be faced if we are to survive.”

The strength of Murrow’s journalism is the belief that any medium could be a “powerful instrument of communication.” Throughout his career, he seemed to study the medium thoroughly enough to understand its strengths and weaknesses in telling a story and communicating with the people. In “Harvest of Shame,” the long, lingering shots of the faces of the migrant workers humanized people that much of America had likely never seen. It showed children ravaged by malnutrition and poverty. And it exposed the industry that profited off of the backs of these workers.

Murrow led the program by proclaiming that he was about to tell a story about “forgotten people.” It tugged at heart strings and would make any person with a heart feel for the migrant workers who had to endure those conditions. But if Murrow simply exposed those conditions, told their story, and made people feel bad for them, he would be an advocate, not a journalist. He would not be performing a public service, but advocacy on behalf of the workers.

The depth of his reporting—a theme throughout his life that still guides journalism today—is what made “Harvest of Shame” a brilliant piece of journalism and public service. All of the lingering shots of the faces of migrant workers were matched with the raw numbers behind their abuse and mistreatment: traveling 1,500 to 2,000 miles to find work; making $1 for a 10-hour day of work while a crew leader made $14,000 per year; working at the age of eight. Those statistics don’t lie.

Murrow even adhered to the rules he followed with CBS during the McCarthy days half a decade before—offering voice to both sides of the issue, albeit not equal time. He went beyond the raw numbers and the compassionate human element to the story and told every possible angle of the story. He answered the essential questions that need to be answered by a good journalist. And he unraveled the story in progression that made it powerful, thought-provoking, alarming, and entertaining.

He introduced the viewer to an issue and a people they have never seen before, explained how they ended up where they were, exposed who was responsible for their plight, and why they were subjecting them to a life with little hope. And then he explained how things could change, what laws exist to protect these people, what regulations could be enacted to help them, and how they are finding ways—unionization—of empowering themselves.

In one hour, Murrow used television to tell the story of not just one migrant worker, or even thousands of migrant workers, but the lives of thousands of migrant workers, their families, and future generations in their families. He made it clear with “Harvest of Shame,” that journalists could no longer, “Insulate the citizenry from the hard and demanding realities which must be faced if we are to survive.”

Web developers and designers I’ve worked with seem to treat iframes in websites with pure disdain. The scroll bar that often shows when a website is iframed into another can be a little aesthetically unappealing, but an iframe can also serve an important utilitarian purpose. If you are working with a vendor for a certain element of your site (commerce), an iframe will keep users within your site and your brand rather than bouncing them off your site.

When Tricia Fulks decided to do her tutorial on iframes, I was interested to see what she created and if I would have the same reaction to iframes as my developer and designer friends.

Regardless of opinions about the use of iframes, Tricia’s clarity, casual tone, and helpful notes made her tutorial easy to complete. Here’s what I had at the end of the tutorial.

A good tutorial is easy to spot. The quicker you can work through a tutorial the better. If a user has to stop and re-read a section, they’re gone. Not only did I not have to stop and re-read a section of Tricia’s tutorial, she offered helpful asides that predicted possible areas of trouble for anyone doing the tutorial:

“Important: (I found this out while I was troubleshooting) Make sure the extension of the photo you link to matches up in the styling. If it is a png, jpeg, tif, use those extensions. If the extensions are capitalized, make sure it is capitalized in your stylesheet.”

To be able to anticipate the problems a user might have when following a tutorial shows a particular attention to detail not found in all tutorials.

A screenshot of how I worked in Dreamweaver and Tricia's tutorial simultaneously to copy code.

If I had one problem with the tutorial as a whole, it was the use of images of the code instead of using a WordPress code plugin like WordPress Code Snippet or CodeHighlighter. Without a code plugin, I had to maneuver my browser and Adobe Dreamweaver so I could read the code in the tutorial from one side of my screen and type it into Dreamweaver on the other side.

While that extra bit of work could seem like a hinderance, I actually kind of appreciated it. When I come across tutorials with a code plugin, I usually follow the instructions, copy and paste the code, and move on. Actually typing the code for myself helped me understand the code if for no other reason than repetition. The more I type code, the more embeds in my brain.

Broken into three easy steps denoted with subheads—HTML, CSS, and background image—the coding was done quickly and I understood why each step was taken and each line of code was written.

Regardless of anyone’s feelings about iframes or using photos instead of code plugins, I walked away from this tutorial with a nice looking iframed site in a matter of 15 minutes. If only every tutorial was that clear and helpful. I wonder if she thought my tutorial on an iPhone dropdown using Photoshop and JQuery is as helpful and clear?

When I built my portfolio site a year ago, I had the idea of housing my main content within what would look like an iPad positioned horizontally. Each element of my portfolio—wordpress blog, video, photography, Twitter stream—would be represented in the main section as an app icon you might see on an iPad or iPhone.

When a user clicks on a bundle of iPhone apps (this is the news apps bundle on my iPhone), a dropdown appears in a smooth transition with a crosshatched background and a triangular pointer.

I have been wanting to rebuild my portfolio site for a while now, but when I learned a few JQuery tricks, there was one last thing I wanted to try with my portfolio before I blew it up. Using JQuery to hide an element, I created a dropdown within my portfolio that mimics the behavior of an iPod when a user clicks on a group of apps bundled together (pictured right). I just can’t let go of this iPad/iPhone theme.

CLICK HERE TO VIEW THE DEMO.

STEP 1: Screengrab your iPhone Background

The first step in creating this effect in your portfolio or website is to get a picture of this action on your own iPhone (or steal it from my photo here). To take a picture of your iPhone screen, simply press the home button and the off button at the same time. Email the photo to yourself, save it and open it in Photoshop where we will begin building the background for your dropdown menu.

STEP 2: Creating a Background in Photoshop

To run you through the steps of creating the background for your iPhone dropdown div, I have put together a 5-minute tutorial video. This is my first time using Camtasia for screencapture and editing. It is very intuitive and easy to use. So I hope this video is easier to follow than 20 steps written out. We’ll pick up the HTML, CSS, and JQuery once you have your background created.

STEP 3: Hiding an Element with JQuery

Using JQuery, you can create a container that can be toggled open or closed when a user clicks on an element on your page. This container is where we will use our iPhone background (in CSS), but before we do that, we want to add our JQuery and HTML markup into the HTML document.

This process is covered nicely in the new HTML5 Digital Classroom book. First, create the HTML page where you would like to place your expandable content. In your head section of your HTML page, you want to paste the following code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('#videodropdown').hide();
	$('a#triggervideodropdown').click(function() {
	$('#videodropdown').toggle('slow');
	e.preventDefault()
	});
});

</script>

Here’s a quick rundown of what that code is doing:

• type=”text/javascipt” is defining the type of script we are using
• src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” links out to Google’s publicly hosted jquery library
• $(document).ready(function () { is the code that gets your HTML document ready to perform the JQuery: $ will always start a reference to JQuery, ready is the code that prepares your document and function defines the new fuction.
• The next three lines of code define the elements on the page that will be manipulated using JQuery. #triggervideodropdown defines the div that a user will click to expand our hidden element, #videodropdown.

STEP 4: The HTML Markup

<a id="triggervideodropdown" href="#"><img src="video.png" border="0" /></a>
<div id="videodropdown">
<p><iframe src="http://player.vimeo.com/video/27660579?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="400" height="225" frameborder="2" webkitAllowFullScreen allowFullScreen></iframe></p>
</div> <!-- close twitterdropdown div -->

In my demonstration I’ve used this JQuery dropdown technique to display a video I created when a user clicks on the video icon in my iPad-like portfolio page. To do this, I created a link id #triggervideodropdown with an video icon image (img src=”video.png”) associated. This creates a video icon to correspond with the .click (function () javascript defined in our head section. When a user clicks that icon, our div—#videodropdown—is deployed. Our JQuery in the head section tells that div to “toggle (‘slow’);”. As you can see within the #videodropdown div, I’ve embedded my Vimeo video, which can be done in two quick steps:

• Find a good Vimeo video. For example: http://vimeo.com/8191217
• Click “embed” in the upper right of the video before it starts
• Click “customize embed options”
• Change the size of the player to fit the size of your div section
• Copy the code in the box that says, “Get the embed code”

STEP 5:  The CSS

Now that we have our HTML and JQuery defined, we will come back to the iPhone background we built using Photoshop. We will create three sections in our CSS: #triggervideodropdown, #videodropdown, and #videodropdown p. Here is the code that I entered:

#triggervideodropdown {
	margin-left:10px;
}

#videodropdown {
	background-image:url(iphone-dropdown-background2.png);
	background-repeat:no-repeat;
	width:477px;
	height:361px;
	margin-left:10px;
	
	
}

#videodropdown p {
	margin-left:10px;
	padding-top:70px;
	padding-left:27px;
}

The #triggervideodropdown margin-left I entered is there to move my icon away from the left edge of my fake iPad.

In #videodropdown, we’ve defined the background with our iPhone background we built in Photoshop. I’ve named it iphone-dropdown-background2.png and have set it to not repeat. I’ve set the width and height of the background to match the pixel width and height of the background we created in Photoshop—477 pixels by 361 pixels.

Finally, in #videodropdown p, padding and margins allow the video, which is sized 400 pixels by 225 pixels to sit roughly in the middle of our background.

And that’s it. Here again is a look at the DEMO. Next up will be to learn how to use JQuery to fade out the other content when the icon is clicked—as you see in the iPhone photo above.