moving to new URL

Hey Gang,

We are moving over to a new blog.  Please follow us here from now on.

Thanks!

Hey guys,

Here are some cool resumé ideas to get you going.

These three are actually just demo's of existing, built WordPress themes. I wouldn't use them myself (build your own!!) but they have good ideas design-wise:

http://www.elegantthemes.com/demo/?theme=MyResume
http://www.mojo-themes.com/item/aurel-resume-cv-premium-template/demo/
http://themeforest.net/item/precision-premium-vcard-wordpress-theme/full_screen_preview/1922457

These two really push the boundaries of what people consider "resumés":

http://phildub.com/?original=1
http://www.rleonardi.com/interactive-resume/

Remember, the only limitation of a resumé is that it needs to tell people about yourself! Don't let yourself get sucked into thinking you need to make it look like a traditional paper version. You're building a web site resumé - build a web site!

Class on Monday, Jan 15th.... The Online Resume...It's alive!

A word resume is handy to print out and hand to prospective employers, but the online resume is where everyone is looking.  The online resume is a great way to show, your skills as a web developer, while providing pertinent information about you.  It's important to describe your skills, but showing is even better.

Today we started the exercise of generating on online resume for you to keep and expand upon.  The resume is a great way to practice your HTML/CSS/Javascript/JQuery skills.  We decided on the spot to follow a similar format to one of our NWC instructors Kris Childs resume, as follows:

Header of Name and contact information centered on the browser, Name larger more standout font and contact info a little more subtle.  Informative sections with title and more info that expands and collapses.  The collapsing sections starts out hidden (css display:none) and when the title of the section is click by the mouse the information expands with a flowing jQuery expand (slideToggle()).  Sections we came up with were Summary, Technical Skills, Experience, Education, and Extra Curricular.

The class was very productive and all of you were able to get a layout started with functioning onclick events on the sections.  This shows that things are starting to sink in and you are becoming web developers.  To be able to put this together in an hour shows great progress.  Let's continue building on this foundation make a resume that pops and you are proud of.  Start digging into CSS styles that are beyond what we have shown you, and jQuery transitions.  Use Mother Google and get some tips with research (GTS).  Please post links to your plunk's so we can see progress as you add functionality.

Remember resumes need to be clear and concise, and an online resume needs to be attractive and show skills.  Employers want to know you have a clue and you can communicate, and this goes a long way to a second look.

Fun with Ajax and Flickr

Ever notice how sometimes a web page reloads and sometimes it doesn't after searching, submitting or other web-type functions?  The pages that don't reload and have more of the desktop application feel, use a technology called AJAX.  It stands for Asnychonous Javascript and XML, and it makes the Internet a much better place.

Today we are going to use AJAX to display some images from Flickr search.  Flickr provides a great API (Application Programming Interface) to access it's pictures and meta data about them.  We are going to use JQuery, and this URL to do most of the work:  http://api.flickr.com/services/feeds/photos_public.gne?tagmode=any&format=json&tags=mountains.

Before we get started, we need to talk briefly about cross site scripting attacks.  What ???  Who cares about those, we just want to display some images from Flickr.  Well, unfortunately, since hackers find it easy to launch these types of attacks against javascript, we have to jump through a few more hoops if we are going to make an AJAX request from the client side (from Javascript, rather than PHP, C#, etc..).  It turns out this type of request is a bit easier if you are doing it from the server side, but we can still get the results we want.

Here is the plunk from class this evening.  We will be expanding upon it in our remaining classes.  

Functions, variables and JSON.

Sorry this blog is so late!

Here is the plunk we should have gotten to by the end of the class.  We got most of the way there..
http://plnkr.co/edit/LbTLe8ya65xyjYOUPIsN?p=preview

So in the class, we got introduced to JSON, (Javascript object notation, which is the "new" XML, a way to pass data between OS platforms, programming languages, etc..).  We fiddled around a bit trying to capture JSON from Amazon.com and from assisted-living-communities.com using the Fiddler tool.
Fiddler acts as a proxy and captures all of the data that flows between your browser and websites.  The left pane in Fiddler shows all of this traffic and when you click on each line, and then click on the "inspectors" tab on the opposite pane, you can see the details of what was passed.  This ONLY can view HTTP traffic, not HTTPS.  If someone (a hacker) can place themselves between you and the webserver you are using, they can see all of your HTTP traffic with a tool like Fiddler.  This is a man-in-the-middle attack.  Scary!

Within the "inspectors" tab, certain requests have JSON (lower right pane).  If the request has JSON, go to the "raw" tab and copy the syntax that looks like stars off similar to :  [{"Images":[{"Id":"812","ThumbUrl":"http://www.choiceadvisory.com/images/listingimages/wa/812_images/thumb_812_0.jpg","Caption":"The Viewpointe on Queen .. etc..  Captured JSON data can be found in the data.js file in the plunk above.  After we capture this data, we can just assign it to a variable.

var data = Your_captured_JSON.

Who cares??

Well, this is how you might work with a "back end" developer.  She will tell you, "the JSON I will make available via my web service will look like this".  So, while she is still working, you can begin development on the front end.  When she is done, you get the JSON from her web service (programatically) instead of just putting it in a js (javascript) file.

There are comments throughout the plunk to get you more familiar with global variables, functions, page loads, etc..  Please post any questions.

For homework:
- The prev(ious) button doesn't work properly yet!  The page blows up when you are at the end of the properties and hit next.  Make the next button work.  There are hints in the scripts.js file on how to do this.
- Make some more attributes of properties appear on the page.  We at least need city, state and zip before we can launch this thing.
- Put latitude and longitude in the debug area for later use.  Maybe we could sell a map to the client of where these properties are.

Code Management & Homework assignment

Go Hawks!
Go Stanford (2 years in a row in Rosebowl!!!!)

Yesterday (Thursday 12-12-13) we talked about Code Management. 1st, we talked about a directory structure for your code. There are no hard-and-fast rules here, but for straight ahead client-side web development a common file structure is as shown below:

-ProjectDirectory (html files go here)
  -css sub directory
  -img sub directory
  -js sub directory

If we had a simple site named SpringsteenFanPage with a single index.html page, a css, js, and img file, the directory structure could look like this:

-SpringsteenFanPage
    -css
        |
        - stylesheet.css
    -js
        |
        - app.js
    -img
        |
        - logo.png
        - bruceEarlyDays.jpg
        - bruceCurrent.jpg
        - EStreetBand.png
 -index.html


After the brief discussion on File Structure, I asked you to look at the file structure for the HTML5 Boilerplate project on GitHub. There are a lot more files here, but the structure matches what I've listed above.

https://github.com/h5bp/html5-boilerplate

When then talked about version control systems. I'm not going to explain version control systems in the blog. Instead, I'm giving all of you a homework assignment of watching 4 short videos that explain Version Control and Git. Git is one of the most popular version controls systems in use today. It is what all the cool kids use.

HOMEWORK (you will need to GTS! to complete these assignments--feel free to post questions here if you need help).

0. Create a GitHub account if you haven't already

1. Install latest Git on your development machine

2. Watch Git videos here: http://git-scm.com/videos

3. Do this 15 minute Git online tutorial: http://try.github.io/levels/1/challenges/1

4. Download https://github.com/h5pb/html5-boilerplate

5. Create your own Git Repository named “Html5Boilerplate”

6. Edit index.html to say “Hello World from YearUp!”

6. Add all files to your repository

7. commit and upload

8. Post link to your repository

Learning HTML5 Boilerplate will server you well in creating your own client side web projects.

BTW, here is a good resource with online tutorials for learning software development skills: https://www.codeschool.com/. 

Go Hawks!

Go Stanford!!!

Hour of code

Here is an initiative sent to me by a friend that looks really interesting.  Check it out if you get a chance.  http://code.org/