Web Application Programming Interfaces and Why They Rock!

Web Application Programming Interfaces, or API's, are sets of programming instructions and standards for accessing information in a specific software or hardware over the internet.  API's allow different software/hardware to "talk" with each other and securely exchange information with websites, web applications, mobile apps, and other devices.  API's are released to the public so that other software developers can create new products and applications that are intertwined with that software.  

Still a little confused?  

Imagine a website like Imgur or Photobucket, where billions of photos are uploaded and millions of users have accounts and public profiles.  Suppose you want to create a mobile app that updates you when your favorite users post new content.  This data will need to be made available to you, somehow.  Imgur could release an API so that Web and App developers could "pull" certain information when called on and "push" it back to their own application or software.  

So in this example, Imgur could say “if you call the method 'imgur.photos.search' and then add the user you want to search, we will check permissions and then send the search results to you.”  Imgur could create hundreds of call-methods for the developers to use, such as "get all of the photos from user ____" or "tell me what sizes this photo is available in".  There are hundreds of uses for Web API's, from sharing photos from one social media site to another, to embedding content from a different source or app, to live comment sharing.

Hopefully now "Application Programming Interface" makes a little more sense -- You are programming an application, and this is the interface and rules you must adhere to when talking to _____ (in this case, Imgur.)

Important Web API's

Imgur was used as an example earlier, but there are tons of different API's on the web and all of them are used for something different.

Google

Google is becoming a huge staple in our everyday lives.  I worship Google Chrome, use Gmail for my personal and school email accounts, and Youtube is my main video resource.  Android phones are getting to be as popular as the iPhone, and now Google is even working to create driverless cars and wearable tech such as glasses and wristbands.  The more technology Google releases, the more opportunities developers and designers have to create applications that work well with it’s projects.  Google has a ton of API’s available to the public.  

The Google Maps API, for example, allows you to add interactive maps and street view imagery to your website or mobile app, and works with Web, ioS and Android.  You have the option to use styled maps to change the visual style of the map and customize it to fit your needs.  W3schools offers a nice little tutorial on how to create a Basic Google Map using Google Maps API located here.  

Using the Maps API with the Directions API, you could create an app that shows a map and address to your establishment, then allows the user to search for directions based on their closest location.  Other important Google API’s include the Google+ API, which allows users to log-in to 3rd-Party services using their Google+ account, and the Custom Search API, which allows for searching on your own website and customizing search results.  

Google also has a few API’s specifically for Youtube, including an Analytics API, which provides feedback on views and demographic information, and a Live Streaming API, which allows you to create and manage live events on Youtube through video streaming from an outside website.  

A list of all available Google API’s can be found here.  For more information on a specific API, simply click the API link and view the API documentation.

Facebook

Google may seem like the new internet overlords, but Facebook has them beat on the Social Media front.  That’s why learning to use Facebook’s API’s is imperative if you’re interested in developing apps and software for social media networks.  

Facebook Developers was released in March of 2007 (though it was named Facebook Platform at the time), and provided developers with the tools and standards needed to create third-party software/applications that could interact and share information back-and-forth with Facebook.  Facebook Developers offers 2 main API's, as well as several SDK’s (Software Development Kits) for the use of Facebook Login and plugin’s with iOS, Android, PHP, Javascript and Unity.

Facebook’s Graph API is the main API for the website, and is the primary way for Apps and other widgets to read information from Facebook and post their own content.  Think of the Graph as a giant bowl that holds and supports the smaller API’s needed.  The Graph API can be used in a variety of ways, from getting real-time updates to your phone, to publishing status updates from a third party application like Spotify or G+.  

Mobile gaming has steadily been rising since the big “Angry Bird Outbreak” and Facebook has a few API’s that can help developers share their game information on Facebook.  The Scores API can be used with the Graph API to track player’s game scores on a mobile device and post them to their timeline, as well as build social leaderboards between friends who play the same game and share their Facebook information with the mobile game app.  The Achievements API works a lot like the Scores API, but is specifically for Facebook games.  This API allows developers to create a set of achievements for their apps, giving users the ability to share their achievements to their profile and an incentive to continue playing.       

The Ads API (also known as the Marketing API) allows developers to “access Facebook’s advertising platform from their own advertising tools”.  Using this API developers can manage their audience information to help find new customers, create ads to show on Facebook to target audiences, and manage all Facebook assets, including pages, apps, and ad accounts.

If you’re interested in learning how to create Apps or programs that work side-by-side with Facebook, it’s important you start by learning the Graph API.  As stated before, the Graph API is the primary way to send and receive data to Facebook, and most of the tasks you will want your app to do will require the use of this API.  Thankfully, Facebook offers a full tutorial/guide to teach you how to get your app to accomplish simple tasks using the Graph API.  If you’re interested in learning more about Facebook API’s, check out the developers page here.  

The Future of API’s?

As stated earlier, the more that technology advances and we continue to get new web-based products, the more the need for API’s will grow.  I often see technological/societal advancements that I believe will bring about great ideas in the future.  For example, a new(ish) company, UrTheCast have installed a camera on the International Space Station for the purpose of streaming live video footage of the Earth’s atmosphere to their website.

UrTheCast has already began releasing access keys for their API’s to begin working on creating public apps and websites that work with their tech.  Satellite Trackers and Map Tiles are on the list for future apps, and I’m interested in seeing what the API’s will make available.  I would love to create a “live desktop wallpaper” based off of the tracking of their app.

Confusing, but BIG!

API’s are a HUGE part of technology, and it’s important that we realize just how much they help us in our web-obsessed world.  API’s allow us to connect to each other on a much broader spectrum than just one website or application.  API’s allow us to share articles and images to each other from all over the web at the click of a single button.  API’s allow us to give our users peace-of-mind when it comes to creating accounts on unknown apps or websites.   

We’ve covered quite a bit on API’s so far in this blog, but keep in mind we’ve barely scratched the surface.  APIs are not limited to websites. Anything connected to the internet can have an API.  You can use an API to determine your computers power supply temperature.  Do you want to talk to your router from your own application and have it restart? There's an API for that. Send an email from your refrigerator?  As long as it’s connected to the internet (and you’d be surprised what is these days) there's an API you can create for it.  

For more information on API’s and how they’re used, check out the links below:

http://readwrite.com/2013/09/19/api-defined

http://money.howstuffworks.com/business-communications/how-to-leverage-an-api-for-conferencing1.htm

https://gigaom.com/2010/10/29/using-apis-not-quite-as-hard-as-it-looks/

Popular Mobile Trends in 2015

It's no surprise how popular mobile devices are in today's society, considering all the apps, games, and gadgets available to get users really sucked into their computer-on-the-go.   

Smartphones and tablets allow you to stay connected to all your important work, emails, and contacts with the push of a button, no matter where you are in the world (coverage permitting).  That's a pretty big deal!  

In fact, according to SmartInsights.com, mobile users surpassed PC users when it came to viewing websites in 2014.

Knowing how popular mobile devices are makes it easy to see why many designers are beginning to focus on mobile designs over the standard website.  "Flat" designs are becoming increasingly popular, as are module layouts, which are easy to stack and view on a cell-phone or tablet.  Microsoft even chose this type of theme for Windows 8!  In today's blog, I'll be listing 3 mobile-design trends for applications and websites that are popular this year.



Hidden Menus & Elements

When it comes to developing sites and apps for mobile devices, it's important to keep in mind that the users only have a limited amount of space for reading content.  That's why it's imperative designers create layouts for apps and mobile sites that are still easy to use, but also easy to view on even the smallest screen.

That's where the hidden menu's come in!  I'm sure all of you are aware of the "hamburger" icon and what it does.  It's usually seen somewhere at the top of all mobile sites/apps to open a menu.  Rather than use a list that takes up space, this "hamburger" design is used as a widely-known symbol to let users know that they can find navigation/settings information using this button.

Hidden search bars are also becoming quite popular in mobile designs.  It's important that designers save as much space as possible for their most important content, so while a search function is important, it shouldn't take up much space.  A simple slide-out search icon is easy to fit into any small space and important to have on sites that include a lot of information.  Using CodePen's "Slide out search bar" tutorial is an easy way to learn to code your own "responsive" search bar.

"Card" Layouts

Card layouts are usually popular with weather apps and other widgets that show in-time information.  You get the most basic information on the "card" and can tap/click an element for more relevant information.  Imagine the way cards work in the real world.  These digital cards contain the more important information on the "front" and can be flipped or expanded for more details depending on which icon you tap.

For example, the Weather and Clock Widget for Android shows real-time temperature, humidity, and wind-speeds on a card-layout and allows the user to tap any of these elements to get detailed info as well as future predictions.

Card layouts provide quick facts and figures that are easy to understand at a glance and remove the need for multiple pages or links to information.  These layouts are very popular and have pretty much taken over mobile apps and widgets.  

"Wearable"-Tech


With the new popularity of smart watches it's only a matter of time before wearable-tech becomes a staple in modern society.  Having a wearable device allows you to stay connected with your social media accounts, as well as your phone or tablet without needing to have your mobile device on-hand.

The Apple Watch, for example, gives you real-time updates from your phone, and allows you to create fitness schedules.  Unfortunately, the apple watch can only connect with iPhones and other apple devices.  

The new Razer Nabu can connect to a wide variety of mobile devices, allowing you to get real-time updates on text messages, phone calls, and email alerts.  The Nabu can also track work-out schedules and sleep schedules, helping the user to track and maintain their fitness goals.  

Many believe that smart-watches and other wearable tech will take the place of cell-phones and tablets.   It's important for graphic designers to recognize how important mobile (and even wearable) technology is, as the popularity of these devices is not going away and will only continue to grow.

For more information on emerging mobile technology and design trends, check out the list below:

http://colorlabsproject.com/blog/top-uiux-mobile-app-design-trends-watch-2015/

http://mashable.com/2015/01/02/mobile-trends-2015/
   

Popular Trends in Web Design

As technology grows so does the need for new techniques and modernized design elements that work well with upcoming new devices, software, and programming language upgrades.  There are many design tips and tricks that are becoming very popular in today's electronic society, including full-page video backgrounds, interactive drag-and-drop layouts, and responsive web designs.

In today's post, I'll be listing only a few of the exciting web design elements that are found on the most popular sites available on the web, and are must-know trends for any savvy web programmer.

Image Sliders

Usually used as a type of "introduction" to the site, image sliders make it easier to put important information on your homepage without it seeming bogged down with text and other content.  Image sliders allow you to post images of your products, as well as add quotes, pricing, and sales information in a "hover" tag over the image.   Many sliders offer the ability to click each image for "fullscreen" view or link to other pages based on image clicked.  

Using image sliders is nothing new, but it seems that the popularity in the trend is continuously rising.  These things are popping up everywhere!  Article sites like PCGamer use image sliders to showcase their most recent news and videos, while store sites like Steam use the slider to make their best sales and new items easy to see and find for purchase.  

Flexslider is a great downloadable jQuery toolkit that makes it SUPER easy to create a no-bells-and-whistles image slider in minutes!  Simply download the "tutorial" files, add your own images, change the code around a bit to fit your needs, and BAM!  You have a nice image slider that took you about as long as it would to cook dinner. 

Minimalism/"Flat" Designs

I don't think I need to tell you guys how popular designing for mobile has gotten.  People love their mobile devices and programmers picked up on that early on, adapting and developing new ways to allow sites to be viewed on any device without issue.  Now the trends for mobile are carrying over to the PC with the popularity of "Flat Design".  

Flat Design = Minimalist Design.  It's all about keeping the layout looking interesting, while also being clean and simple.  The integration of CSS3 allowed for responsive flat buttons, natural box shadows, and text shadows that scream modern.

Microsoft is seen by many as a "PC God" and the company tries to stay up-to-date with popular trends.  Windows 8 is the perfect example of how far flat design has come.   The simple, flat "buttons" have great color contrast and pop-out from the background.  Nothing is too complicated, and you can tell what you're looking for based on icons alone.

Parallax/Single-Page Scrolling Sites

Speaking of mobile design, as the mobile market continues to grow designers are forced to continue to design websites that make it easy-to-view on a mobile platform.  Scrolling through a page is easier than linking to sub-pages for every reader.  

The ability to scroll from side-to-side, add 3-D type elements, and create depth using image placement added a sense of flair and adventure to seemingly simple and boring websites. 

A good example of single-page parallax-scrolling would be Apple's iPhone 6 showcase.  The site is very clean and simple, but the parallax-scrolling gives the user the option to read at their own pace, while also adding a "motion graphic" feel to the site.




As technology advances, so will the need for new design trends.  It's important to keep ahead-of-the-game when it comes to web development, and know what elements and trends you should be expected to know.

For more information on Web Development Trends, please visit the links below:

http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015


http://www.creativebloq.com/web-design/hottest-trends-2015-11513980

The 3 BEST Web Design Resources

Whether you're new to web-design or a long-time web developer,  it's important to stay up-to-date on the latest in new programming languages and software.  With all the different coding languages available, from HTML to Javascript, it's hard for freelancers and those interested in specializing in a language outside of school to learn these skills on their own.  

I've never been great at web design.  When I have to work on a web project for school, a lot of nights are spent with me pulling my hair out wondering WHY my sidebar isn't floating properly.  Trying to learn jQuery to create an image slider last semester almost drove me mad.  Thankfully, there are a lot of great tutorials and videos available online that have helped out a lot with getting through each semester.  

I have reviewed a lot of my top go-to web design resources, and chosen the best three to share that will definitely help you learn the necessary programming concepts and syntax for the world's most popular languages.

Code Academy

After creating a profile, you code along following the directions in each tutorial to learn hands-on, and the website will track your progress and allow you to retry if you get the answer wrong.  After so many retries the tutorial will allow you to read the "help" section, which will explain what the answer should be, and why.

During my first year in the Digital Media department a fellow classmate introduced me to Code Academy to help me learn more about CSS and web design basics.  Code Academy is a GREAT interactive tutorial site that teaches you step-by-step how to code in HTML and CSS to create professional websites.  

The basic HTML & CSS class is perfect for those who are just getting into web development.  This course teaches the user how to create a professional website using modern syntax and CSS3 techniques.  The course begins by teaching you about HTML basics like creating lists and tables before walking you through harder techniques involving floats and basic CSS to create a modern, professional website.  

I've found Code Academy to be pretty helpful in learning certain tricks and tips that were over-looked in school or I had forgotten.  I think the ability to follow along with the tutorials and get in-time feedback for why your code is wrong is really helpful.  I would suggest that if you are a beginner in this field and need a resource that is hands-on, definitely give Code Academy a try.

Treehouse

Treehouse is a video-based tutorial service that has over 100 hours of tutorial videos available that will help even those with no knowledge of web development learn to make a basic website.  There are many tracks available on the site, from Web Design to PHP and Wordpress, but for this blog we will only be focusing on the beginning HTML and CSS tutorials.   Treehouse adds a bit of a "game" to their site, periodically quizzing you to make sure you've been paying attention to the videos and rewarding you with "badges" for correct answers.

The beginners track is in Web Design and contains multiple videos that teach you about HTML and CSS Basics, how to use all the tools needed in software such as Photoshop and Illustrator to create content, and videos focusing on Brand Identity and Design Foundations.  The series is 51 hours long, and contains all the necessary information to get someone ready to begin coding websites.  The next track focuses on Front End Web Development and teaches the user more advanced HTML, CSS, and Javascript techniques, including how to implement Video and Audio into a webpage and create forms.

Treehouse is free to all members for 14 days before charging a $25 monthly subscription fee.  This $25 fee entitles you to all of their "basic" video tutorials, the ability to practice coding in their "challenge engine", and access to members-only forums for coding help and feedback.  There is a Pro subscription available for $49 a month giving users access to more advanced video options, as well as bonus video content from industry professionals.

I've only been using Treehouse for a short while and am currently still on my free trial, so I'm not sure how much is available in the basic subscription once the trial has ended, but so far I am very pleased with the service and believe that for the price, it's definitely worth it to pay for a subscription if you're planning to create professional content in this field.

Lynda.com

Like Treehouse, Lynda.com offers thousands of video-based tutorials on a wide range of subjects, from creating desktop apps to Network Administration.  If you want to learn about it, chances are Lynda has a video for that.  Lynda offers over 3,000 videos focused solely on different aspects of web design, and is a great place to learn new techniques and tricks for making your website great.

One tutorial I believe is imperative for any up-coming web designer to follow would be Chris Concerse's Creating a Responsive Web Design video.  This video follows all steps of website creation from start-to-finish, showing the user how to create design comps, code a basic site in HTML, position elements with CSS, and make the website responsive and easy-to-view on any monitor or mobile device.  This is extremely important to learn, as many viewers use their cell phones and tablets to browse the web.  

Lynda is free for the first 10 days of use, and then requires a subscription sign-up to continue viewing their content.  The Basic month-to-month package is $25, and gives the user unlimited access to all courses and videos.  The Premium package is $37.50 per month and offers unlimited access as well as the ability to download project files used in each video tutorial to make it easy to follow along.  If you are currently enrolled in school, ask your advisors about access to Lynda, as many schools are partners with the site and are offer the service for free to students.

Lynda is a GREAT resource for learning practically anything you could want to know on a variety of subjects.  Their content is professionally made and easy-to-follow, and the ability to download the tutorial files to follow-along with is great.  I would say that Lynda is definitely worth checking into if you are at all interested in learning about web development, or any subject, for that matter!






There are many other web resources available for the interested web designer, and I could go on and on about the other great and fun resources I've found over the years, but for now I believe these are the top three contenders for best tutorials available for those in our field. If you're interested in finding more web design resources, check out the links below:

http://www.smashingmagazine.com/

http://www.creativebloq.com/web-design/training-online-resources-812225