Archive for the ‘Web’ Category

« Older Entries
Newer Entries »

Why WordPress?

Published by | Wednesday, January 16th, 2013

Why WordPress?

 

What makes WordPress a good solution? Why is it so popular? Regardless of the question, the answer is the same, and it can be boiled down to three simple words:

Because WordPress works.

Of course, it’s a little more complicated than that. Let me put it into context from the perspective of the three main users of WordPress: the end user, the site owner, and the designer/developer.

 

 

Easy to find, easy to use, easy to share

A poorly kept secret about WordPress is its findability. If someone asked you how to get indexed on Google and you answered “Just set up a WordPress site,” you would not be far from the truth. The way WordPress is built makes it a magnet for search engines and other online indexes. So much so that if you don’t want your WordPress site indexed, you have to take steps to prevent it from happening.

Out of the box, WordPress has great search and share optimization. With the addition of plugins like WordPress SEO, AddThis, and Facebook for WordPress, these built-in capabilities are further enhanced, giving any site the opportunity to become the next big thing on the web. This is provided the content is great, of course. We’ll get to that later.

The purpose of many websites is to put out easily findable, accessible, and shareable information. And WordPress does this in spades. When you are searching for content on the web today, you will likely find it on a WordPress site. If you are reading or viewing content on a WordPress site, you are able to access and interact with that content through comments and RSS feeds. And once you have read the content, you will have an easy time sharing it with your friends on social sharing sites and social media.

 

Easy to publish, easy to configure, easy to maintain

WordPress is a prime example of the virtues of open source. It is built, evolved, and maintained by the people that use it and is therefore in a constant state of forward-moving flux. For site owners this means by simply running a WordPress site and keeping it up to date, they are at any time using the most current web technologies to communicate with the world.

Over the past three years, WordPress has undergone several fundamental design and development changes that have made an already easy-to-use application even easier to use. At the same time it has become more powerful and diverse. From how it is installed to how a site owner can publish content and interact with visitors, WordPress leads the way in removing the barriers that prevent anyone from publishing online. Between WordPress.com and self-hosted WordPress, most people with access to an Internet connection are now able to publish their thoughts, ideas, and creations online with minimal effort. With the challenges of web technologies all but removed, the site owner can focus on what matters: producing and publishing excellent content to share with the world.

 

Easy to build, easy to augment, easy to evolve

For me, the true power of WordPress lies in the back end. Whether you are a complete novice or a seasoned pro, building themes and plugins for WordPress will make your life easier and will enable you to do more in less time. I am walking proof.

With a design in place, building a custom WordPress site from scratch—one that looks and behaves nothing like what is expected of a WordPress site but is still just as easy to use and maintain—takes less time than with any other platform I have tried. When people ask me what WordPress can do I answer, “Whatever you want it to do.” And I stand by that statement. At its core, WordPress is a simple interface between the site owner, the database, and the end user. All the stuff in between (administration, themes, and functionalities) is available for the designer and developer to play with and add to in any way they want. And because WordPress is open source, people can step in and contribute to the WordPress community in whatever capacity they feel fit, from answering questions in the forums and building free themes or plugins to contributing to WordPress Core.

The bottom line

Though it may sound like I see WordPress as the be-all and end-all of web publishing, the reality is I am a pragmatic platform agnostic. The reason I laud WordPress and why I love teaching people about WordPress is because I see it as one of the best available solutions for most websites today. I have and continue to work with other solutions including Drupal and Joomla!, but for most of the websites I encounter, WordPress is one of the best options.

Whether you are just starting to play with the idea of publishing a blog, you want to become a web designer or developer, or if you already know all there is to know about the web and you just want to play with something new, WordPress is a great tool to use. It has both the ease of use and the advanced features to suit pretty much any need. And when that need isn’t met, a theme, a plugin, or an extension is there to fill the void.

Interested in more?

Suggested courses to watch next:

Tags: , , , ,
Posted in Developer, Web | 16 Comments »

Our team’s New Year’s learning resolutions, inspired and supported by the lynda.com library

Published by | Tuesday, January 8th, 2013

Although the New Year’s resolution lists that proliferate in late December are full of worthy goals, my favorite remains “learn something new.” This time of year, I like the theme of giving in to expansion over contraction, generosity over deprivation, and passion over willpower. The staff, authors, and members here at lynda.com know that our library is a great resource to have if learning is on your life list.

Although many of us on the Content team work in a specific segment of the library, we can’t help but notice the intriguing courses our colleagues are developing in other areas. This year I asked members of the team, acknowledged enthusiasts in their given fields, which areas outside their usual sphere of knowledge are capturing their interest. Here are their answers and some suggestions for where they might want to start (or where you might want to start if you share the same interest).

Morten Rand-Hendriksen, staff author, Web segment
“Over the holidays I want to power through all the photography courses in the archive. Because it’s been a long time since I sat down and really tried to improve my photography skills. I also really want to become a more creative designer/artist, so I’ll be looking into any course that helps me in that respect.”

Recommendation: If you can’t get through the whole Photography segment in one holiday week off, you might try Foundations of Photography: Composition to start. Ben Long teaches principles that definitely go beyond photography into general artistry.

Jess Stratton, staff author, Business segment
“I’d like to learn something for the sake of a hobby this year—getting back into playing the keyboard and recording it somehow, but I don’t know how to start getting it from my keyboard into the computer. I want to check out the course on recording music using an iPad.”

Recommendation: Garrick Chow’s iPad Music Production series is the place for Jess and like-minded musicians. The first course—iPad Music Production: Inputs, Mics, and MIDI—is a great place to start (although if you’re up for playing on an iOS device directly, the GarageBand installment makes making music on your iPad look really fun).

David Franz, content manager, Audio segment
“Social media marketing … I want my music to rock the world! :) .”

Recommendation: I’ve noticed David isn’t the only musician who knows that thriving in the music business requires a direct relationship with fans via social media. Until David develops that perfect course expressly for musicians, there’s great material for getting started in our Social Media Marketing with Facebook and Twitter course.

Mordy Golding, director of content, Design and Photography segment
“I’ve been teaching myself Processing—the computer language. I’m interested in finding better ways to visualize data.”

Recommendation: A few months ago, our Developer group released Interactive Data Visualization with Processing. Processing is a tool that can literally change data into (beautiful and useful) art.

Elinor Actipis, director of content, Rich Media segment
Doug Winnie, director of content, Web and Developer segment

Both Elinor and Doug mentioned sharpening their advanced Excel skills, particularly with respect to data analysis. (Is it a coincidence that our directors are all about visualization of data?)

Recommendation: Our Excel library is vast and valuable, but for data crunching, one of my favorite courses is Cleaning Up Your Excel Data with Dennis Taylor. Dennis has great tips for efficiently wrangling all those numbers into consistent tables, making analysis both easier and more accurate.

George Maestri, content manager, 3D and Animation segment
Matt Gilbert, associate content manager, Business segment
Jim Heid, content manager, Photography segment

These three content managers from three different segments all mentioned wanting to learn about ebook publishing and iOS apps as content containers.

George notes: “I had a few cartoon pitches that got lost in development when I was at the studios. I figure releasing them as books/apps would be a fun distraction.”

And Jim: “Ebook publishing is hot among photographers. And as someone who grew up with tape recorders, movie cameras, and cameras, I have a lot of “family assets” that I’d like to turn into a little interactive memoir for my family.”

Recommendation: We’ve got excellent courses on iBooks Author, iOS app creation, EPUB with InDesign, and using jQuery in your digital magazine. If you don’t know where to start, Digital Publishing Fundamentals runs down the options you have for turning your words and pictures into electronic works of art.

Links:
• iBooks Author Essential Training
• iOS app creation
• EPUB with InDesign
• jQuery
• Digital Publishing Fundamentals

Rob Garrott, content manager, Video segment
“I’m going to try to get into a bit of coding. I should probably start digging into web coding, but that’s too much broccoli, so I might start with Python. That is a core component of truly advanced 3D animation, and I’ve been afraid to touch it.”

Recommendation: (Mental note: Broccoli is the new spinach!) Many members are happy to jump into Bill Weinman’s Python 3 Essential Training course. For those who want to warm up their veggies slowly, you may try Simon Allardice’s Foundations of Programming: Object-Oriented Design course.

Links:
• Python 3 Essential Training
• Foundations of Programming: Object-Oriented Design

Cynthia Scott, director of content, Business segment
“Top on my learning wish list is the On Camera series.”

Recommendation: The first of this series, On Camera: Develop Your Video Presence, immediately had me thinking of uses beyond straightforward video (it also had me knocking on Cynthia’s office door to share how valuable I thought it was to Business folk). In the days of Skype-based job interviews and high-stakes video conferencing, many of Rick’s suggestions prepare you for time in front of any camera, not just those destined for edited, produced video.

Ben Long, author, Photography segment
Finally, since so many of my interviewee colleagues mentioned Ben Long’s photography courses, I thought it would be interesting to ask Ben himself what he might be interested in learning from the library in 2013. True to his polymathic nature, he mentioned several things from iPhone development to Maya to WordPress. But perhaps he summed up the width and breadth of the lynda.com library (and the voracious appetite of any lifelong learner) when he asked:

“And where’s that course for adding 12 hours to one’s day?”

When we release “Changing the Laws of the Universe,” Ben, we’ll be sure to let you know. In the meantime, there’s Time Management Fundamentals.

What are your New Year’s learning resolutions? Let us help you find the lynda.com courses to get you on your way.

Posted in 3D + Animation, Audio, Business, Design, Photography, Video, Web | No Comments »

Introduction to JavaScript templating using mustache.js

Published by | Thursday, December 27th, 2012

Recently I built a small website for an event in my area. This type of project required me to manage small amounts of data—information about speakers, bios, titles, and a description of the talks. I wanted to have a speakers page, but I also wanted a rotating promo built as a component I could use on the homepage, and on other pages to highlight the event’s speakers. That meant two different views for the same data.

This was the kind of problem I used to throw a quick SQL database at, but it really wasn’t worth the pain for this project as the amount of data was so minimal.  However, I didn’t want to resort to HTML because I knew the information would change often and be a pain to update. To solve the problem, I used a library called mustache.js. It’s pretty easy to use, and solves the problem with just a few lines of code.

Why mustache.js?

Mustache is a library that allows you to read in JSON formatted data and display it using templates you design with JavaScript. There are lots of similar libraries, such as underscore.js, handlebars.js, and dust.js. So why did I choose mustache?

I picked mustache because I wanted something simple. Some of the other libraries provide more functionality, but I didn’t need complexity. I needed to spend time building the site, not learning something new. And that’s the great thing about mustache.js—if you know JSON and a bit of JavaScript, it’s a cinch to implement. Although, you do need to know how to use the JSON format, so if you’re not familiar with JSON, make sure you take a look at this article on getting started with JSON for beginners.

Installing or using CDNs

As usual, you have two options for working with libraries. You can install them manually or use CDNs (content delivery networks). Mustache has implementations available for different languages. If you want to download a copy, go to this GitHub page to download mustache.js. Because we’re going to be loading JSON files from an external source, you’ll also need to install jQuery, to download a copy of jQuery you can go to their website.

If you’re just experimenting with the libraries, another option is to load the files from a CDN, a site that specializes in hosting popular libraries like cdnjs.com. In order to keep things simple for this article, I’m going to load things from that CDN.

Our data

Here’s what the structure of my data looked like (abbreviated). It’s just a simple object with an array containing the usual information people would need to find out about the event speakers.

Of course, my JSON file has a lot more information. Here’s the original JSON document with all of the information for this project.

Creating a page

Our page is going to be super simple. I’ll create a basic HTML document, and then create a <ul> tag with an id of talktitles. The list will be empty and will get filled up with data from our JSON file. I’ll also link, in order, to the jQuery and mustache.js libraries from the CDN.

Here’s what that code looks like:

Next, we’ll need to create the template. That’s pretty easy. You create a mustache.js template inside <script> tags. Normally, your page would interpret this as JavaScript and throw an error, but if we give the script a type of text/template, the browser’s JavaScript parser will ignore it. Our template will also need an **ID** because it’s how we’ll refer to it when we use JavaScript to target it.

Crafting our template

Here’s the code for our template. It should go after our call to the jQuery library.

This should be pretty to read. We want to print the titles for each of our speakers. Our template is simply HTML with double curly braces where we want the library to generate code for us. So, to output the title, we simply use {{title}} to output that field from our JSON file. In order to loop through each of the speakers, we use the {{#speakers}} because it’s the name of the array containing all of the speakers.

The reason a lot of these libraries have names related to facial hair is because of the all of the curly braces they use. This technique of putting data from a data file into a template is known as data binding.

Calling the data

To have our data load from the template, we use jQuery’s getJSON method. I can read any JSON file. We can pass the data into a function. We’re using an anonymous function here (a function with no name).

Inside this we can then create a variable called template and then use the jQuery html() method to read the contents of our template into a variable. Then, we use that template and the data with a call to the Mustache.to_html method from mustache.js that will return the HTML with the JSON data merged with our template.

Finally, we use jQuery to place that HTML inside our unordered list with the id of talktitles. Here’s that code:

Putting it all together

Here’s a full listing of the code:

You might have a problem when trying to read the JSON document if you don’t put this code on a server. For security reasons certain browsers (Google Chrome) don’t allow you to load external files on local folders. You can try using Safari, or just load the file on a live server.

The BarCamp Deland website - completed.

My Barcamp Deland project

For the final project, I used a more complicated template to drive the display of different elements on my page. The Featured Speakers rotating promo on the homepage as well as the data in the Speakers page. I also used this on a mobile app for the event, so changing a single text file updated the information in two or three places. You can see an example of the finished Barcamp Deland website for a more complex example of the code.

Tags: , , ,
Posted in Developer, Web | 5 Comments »

Converting Photoshop designs to HTML

Published by | Tuesday, December 11th, 2012

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers
When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics
The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS
Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next:
• More courses by Chris Converse
• CSS: Core Concepts
• CSS: Page Layouts

Tags: , , , ,
Posted in Design, Web | No Comments »

Twenty Twelve–lean, clean, and ready for your WordPress site

Published by | Wednesday, December 5th, 2012

The Twenty Twelve WordPress theme, responsively displaying itself at mobile resolution.
The past two years have seen the release of two default themes for WordPress, aptly named Twenty Ten (released in 2010) and Twenty Eleven (released in 2011). Now we can add this year’s addition, Twenty Twelve, to the list. And with it we get a new stock theme that redefines what a stock WordPress theme is and sets a new standard for lean and clean design and coding. But like all good things the Twenty Twelve theme is not without controversy, which makes it all the more exciting.

Less is more

Twenty Twelve is at the same time stripped down and sophisticated in a way we’ve only previously seen in sandbox and development themes like Toolbox and _s. But unlike these themes, which were created specifically to be used as baselines for new themes, Twenty Twelve is fully built out and ready to take on the challenges of pretty much any content you throw at it. Twenty Twelve is responsive, conforming to small and large screens and providing custom navigation for smartphones and tablets; it is in line with current ultra-minimalist design trends, putting content and typography front and center; and it has tons of cool features built in for beginners as well as advanced users. All in all it makes for a great theme whether you just want a fresh look for your site or you want a good baseline to start from when you build your own child theme or full-on custom theme.

If you ask me, one of the most important aspects of the Twenty Twelve theme is its simplicity in design, code, and implementation. When the Twenty Ten theme was released, it was a revolutionary shift from the old and stale default themes. Twenty Ten was simple to work with and had lots of advanced features under the hood like custom background color, custom header images, and more widgetized areas people could take advantage of. The next theme in the series, Twenty Eleven, built on this concept and introduced more advanced features like a custom front page template, a featured content slider, and other elements. However, the advancements of Twenty Eleven came at a cost with the theme being far more complex on the back end and far more convoluted and tricky to work with.

Considering this, Twenty Twelve is a step in the right direction. Gone are advanced features that few used in practice, replaced with simpler, more meaningful templates and tools to make customization and use as easy as possible.

Efficient in both code and display, the new Twenty Twelve WordPress theme is simple and powerful.

Twenty Twelve at a glance

The key features of Twenty Twelve include responsive design and custom phone and tablet menus; a custom front page template as well as full-width and sidebar templates for pages; full support for Aside, Image, Link, Quote, and Status post formats; full Theme Customizer support for all the standard WordPress functions; Google Fonts integration; and the standard header image and background color support we have come to expect from modern WordPress themes. Not to mention a clean and modern design with the content front and center.

Even with all this, the true power of Twenty Twelve can be found on the back end. Twenty Twelve is a leaner and cleaner theme than its numerically named predecessors. This is great for novice theme tinkerers and advanced theme developers alike. The theme provides more bang for your brackets, separating out functions and templates in separate files and folders and wrapping up functions in conditional functions, actions, and filters to make modifications and interactions easier. In my opinion, Twenty Twelve could be the new standard from which child themes and full themes should be built.

Controversy abounds

I say “could be” because quite a bit of controversy has stirred up around one decision made by the theme creators: It doesn’t seem to support Internet Explorer 8, at least not the way that is expected.

Twenty Twelve is fully responsive and ships with a custom mobile menu for smaller screens. This much is to be expected from a modern WordPress theme. However, in implementing the mobile menu function the developers of the theme made an interesting and controversial decision: Rather than setting the desktop stylesheet as the default for the theme and making special media queries for smaller screens and mobile devices, they chose to set smaller screens and mobile devices as the default and wrap the styles for larger screens in media queries. While this is no problem for modern browsers that follow the new HTML5 standard, it is problematic for older browsers like IE8 because the provisional media queries that create the layout for larger screens is not understood by these browsers. As a result, users of older browsers like IE8 get the mobile layout on their full-size screens.

The theme developers argue that this is not an issue for two reasons: One, the mobile version of the site is perfectly acceptable even on larger screens, and two, people shouldn’t be using old and outdated browsers like IE8 to begin with.

While I agree with both these statements, I believe our job as web designers and developers is not to police the Internet but rather to provide great experiences for the end users and educate them in the process. And since we have little to no control over what hardware and software the end users choose to access our sites, we need to provide the best experience possible for all of them regardless of their choices.

We can’t let older technologies hold us back from implementing new standards. In that case, providing a suboptimal experience for users with older browsers would be acceptable. However, the IE8 issue in Twenty Twelve is not caused by this type of situation but rather the choice to set the mobile styles as the default and wrap the desktop styles in media queries. In other words, they turned the theme stylesheet upside down on purpose. Had it been turned right side up, this would not be an issue.

These are the types of issues that arise in open source and they are incredibly interesting and frustrating for everyone working in open source. Unfortunately, more often than not the end users are left in the dark about what’s going on and get the impression that things are not working right. That is not the case at all. The great thing is that these issues are usually resolved through a collective effort, and a solution to the IE8 menu problem in Twenty Twelve is imminent.

If you want to read more about the IE8 menu controversy and get an idea of how these things happen and how they are resolved, check out the forum streams Excellent base for child themes and nav bar fails in IE8 as well as the track ticket. They provide for some interesting reading.

Check out Twenty Twelve right now!

Though it may sound dramatic, do not let this minor controversy deter you. Twenty Twelve is a great and forward-looking theme and a excellent basis for child themes as well. If you are itching for a new look for your WordPress or WordPress.com site, you should give it a spin and see what you think. There are lots of customization options and you can easily make it your own. Once you’re done, post your thoughts, ideas, and questions in the comments below.

Interested in more?
• The Twenty Twelve theme at wordpress.org
• WordPress 3: Building Child Themes at lynda.com
• All WordPress courses on lynda.com
• All courses from Morten Rand-Hendriksen on lynda.com

Suggested courses to watch next:
• WordPress Essential Training
• WordPress: Building Responsive Themes
• WordPress Mobile Solutions

Tags: , ,
Posted in In the news, Web | 3 Comments »

Responsive download, not just responsive design

Published by | Monday, November 19th, 2012

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

 

Interested in more?
• All web design courses on lynda.com
• All courses from Chris Converse on lynda.com

Suggested courses to watch next:
• CSS: Core Concepts
• CSS3 First Look
• HTML Essential Training

 

Tags: , , , ,
Posted in Developer, Web | No Comments »

Getting started with Bootstrap customization and responsive design

Published by | Friday, November 16th, 2012

Recently I’ve been using a really awesome framework called Bootstrap to put small websites together. In this article, I’m going to guide you through the basics of the Bootstrap installation process, and how the Bootstrap framework can be customized for a responsive web design.

The end result of this tutorial will be a custom Bootstrap website (you can see the final website here). If you prefer to skip the basics and get right to the Bootstrap code, you can download the code directly from GitHub.

Why Bootstrap?

Bootstrap is a framework that provides an easy-to-use 12-column grid system for a 940 pixel wide container as well as a fluid layout grid that adjusts to the size of a browser. Included in the framework are customizable, well documented features—such as dropdown menus, buttons, tabs, breadcrumbs, modals, tooltips, and carousels—that can be implemented without any handwritten JavaScript.

Our finished website

(more…)

Tags:
Posted in Developer, Web | 7 Comments »

Lessons learned from organizing a local BarCamp event

Published by | Sunday, October 21st, 2012

Photo of Downtownd Deland

A few months ago I decided to organize a local BarCamp in the Deland, FL area. It’s a small town with an old fashioned downtown district between Orlando and Daytona Beach. As the event came and went in early October 2012, we saw 163 registered people attend and over 20 speakers present. For a small town in Florida, it was a very successful first event.

If you’ve never been to a BarCamp, it is a fun and informal gathering of tech-minded people. Attendees are encouraged to present or help out in organizing the conference. I had never organized an event before, so I learned a lot from the experience. In this article, I share some of the lessons I learned, including a few of the online tools and choices I made when creating the website and mobile app for BarCamp Deland.

Lesson one: Asking for volunteer support

Putting together a tech event involves a lot more than can be handled by one person, so my first step was to gauge interest and potentially recruit some local volunteers to help coordinate the event. I casually brought the event up in conversation with people who I knew would be great speakers, helpers, and organizers, and who had the experience, resources, and access to others that could make or break the event.
If some of these people were in my corner, I felt it would be much easier to get things done.

When asking for support, it helps to have a direct way to reach your event volunteers. Facebook was one way that worked surprisingly better than email for me. Your Facebook community usually consists of close friends and family, it provides a quick list of your immediate contacts, and people tend to respond quicker to Facebook Direct Messages than email. Facebook is also a helpful promotional tool as your event volunteers can help spread the word by sharing and liking the event on their personal Facebook pages.

Lesson two: Asking for sponsorship support

Since I had no prior event planning experience, I talked to some of my friends who had put together tech events in the past and asked for advice on how to organize sponsorships. There’s nothing like experience to show you how to do something, and these people gave me some amazing tips and contacts.

When asked about sponsorship, Jose Caballer from This Week in Web Design suggested I target potential sponsors who I had reasonable access to, and then supply them with a list of the following questions:

  1. What is the event (workshop, conference, seminar)?
  2. Who will attend this event? (List your demographic, their needs, and how many people you expect to attend.)
  3. What will your audience get out of this event?
  4. What will the sponsors get out of this event? (The best benefit is probably product awareness because sponsors want access to your attendees who are potential consumers of their products.)

Another friend, Dee Sadler of A Box of Pixels, told me to create a list of companies I love and ask them for support. I cold-called or emailed several companies, and while I never heard back from some, I was able to get a lot of giveaways, some software, and even money to help with the event. About half the sponsors I signed on for the event came from this list.

Lesson three: Building a responsive event website

The website for BarCamp Deland

To get started on the BarCamp Deland website, I first purchased the domain name barcampdeland.org. From there it was a matter of deciding what I needed my website to do so I could choose the necessary tools to build it. I knew the site would only have a few pages, and it was important to build a responsive site that didn’t take too long to put together. Considering my needs, I chose Bootstrap using LESS to build the CSS files.

I was surprised at how quickly I was able to build the BarCamp Deland website with Bootstrap. Instead of taking days to build the framework and scaffold the responsive template, Bootstrap gave me a great framework that allowed me to put the site together in just a few hours with virtually no JavaScript. Bootstrap is built with LESS, so that also made writing the CSS easier.

I managed the site build in GitHub, and I also placed my project in Dropbox as a secondary backup. While GitHub is superior for project management, one of the great features of Dropbox is its ability to perform incremental backups, which archive every saved version in a Dropbox folder. If you ever delete a file and want access to an earlier version, the incremental saving makes it super easy. This feature alone has saved my bacon more than once.

Certain information, like the list of speakers and sponsors, needed to be reused in different places but the site really didn’t warrant building a database, so I used mustache.js to build templates that pulled in a JSON file. Editing the JSON file, allowed me to quickly update the information on multiple pages and widgets.

I only needed to write a small bit of JavaScript to ensure the Bootstrap templates adjust and hide the third column when the users viewed the site on a smaller screen, and also used the jQuery Cycle plugin to handle fading and sliding some graphics, and the speaker’s promo on the homepage.

I used PHP, but just minimally, to divide my pages into small modules and to use the include() method to pull files in as needed. This allowed me to reuse modules on different pages and easily swap out content.

Online tools

Of course, organizing a BarCamp means having an event website, but it also means dealing with registration and emails.

For registrations, I used Eventbrite, which offers free events a complimentary account option that lets you build surveys, view metric reports, and email your registration list with event updates. Eventbrite also offers an Entry app, which is an easy way to check in people on the day of the event.

Eventbrite has many tools, including the ability to see metric reporting charts

Eventbrite also has a strong API and tools to integrate extras like a countdown and a registration form. Unfortunately, all the pages aren’t optimized for mobile devices so some elements (like the registration form) can be a little hard to navigate from a smartphone.

Mobile web app

The two parts of the jQuery Mobile app
Unlike most conferences, BarCamp speakers aren’t prescheduled, which means most BarCamps have a dynamic schedule on a physical bulletin board that is adjusted in real time as speakers arrive and sign up for time slots and venue locations. Since our venues were very far apart, I wanted a schedule that attendees could check on their phones so they wouldn’t have to walk over to the bulletin board to see the speaker list.

I used jQuery Mobile to build the web app, which came in two parts. The first part of the app displays the dynamic schedule, as well as a list of venues and general information about the event. The second part is what allows organizers to enter the info about speaker time and location onto the schedule. Since all this info had to be stored and updated, I created a MySQL database and used PHP for MySQL access.

Conclusion

Overall, making the connections, planning the event, and working with an awesome team to bring BarCamp Deland together was really fun, and building the website was actually the easiest part. If you’re interested in using any of the code I mentioned for your own event, you can download it through GitHub.

Posted in Web | 5 Comments »

« Older Entries
Newer Entries »