/bootcamp-ui

Learning basics of modern Web UI development

#HTML5 Boot Camp

##The future of Web Applications is here! ####Are you ready for it?

###Index

  1. Objective

  2. Who Should Attend

  3. Duration

  4. Technical Assistance

  5. Performance Measurement

  6. Handling advanced Developers

  7. Materials

  8. General Guidelines

  9. Learning Days

  10. Your First Project Starts Now!

###Objective

This course teaches the basics of modern Web UI development. We want to help you create the best of breed user experiences, gaming, and mobile applications.

→ index

###Who Should Attend

The training will start at a low level, and does not require in depth knowledge of the platform in question. Desirable participant profile: trainees and outside Globant candidates. A basic knowledge on HTML, CSS, and JavaScript is desired, though.

→ index

###Duration

Five weeks total.

Three weeks for guided learning and two weeks for app development.

→ index

###Technical Assistance

You can contact other bootcamp participants or any available tutor if you need technical assistance. We will create one chat for boot camp members only, and another one for boot camp members and tutors when boot camp starts.

###Performance Measurement

  1. Code review after each practice and sprint

  2. Checkpoint completion after Learning stage with your assigned tutor

→ index

###Handling Advanced Developers

Developers that move faster than average can go ahead and complete as much exercises as wanted.

→ index

###Tools

  1. At least, three different browsers installed on the developer machine. Example, Chrome, Firefox, and the Android browser using Android's emulator.

  2. The IDE to use is SublimeText.

  3. Skype Account + headset (audio calls)

  4. Create your own GitHub account. Follow this guideline to setup your account.

  5. Install your own NodeJS server.

  • Download NodeJS
  • Install http-server globally, by running npm install -g http-server
  • To start the server, from a command line interface, run http-server in the directory where you will clone the startup repo
  • Open your web browser and point to localhost:PORT (the http-server should have outputted the number of PORT you should use)
  1. Fork this repo to use as a base to host the project code.

→ index

###General Guidelines

The boot camp is organized in the following way:

  1. The first three weeks will be used for intensive self learning. Each topic will have reading and practices parts. Tutors will be available to answer technical questions on a given chat room.

  2. The next two weeks will be used to develop an application following a life process.

  3. The project manager will coordinate learning days encouraging team communication in daily meetings.

  4. The project manager will gather information regarding individual progress so we can look for alternative assistance where needed.

  5. The project manager will lead the boot camp sprints as if it were a real project using SCRUM agile methodology.

  6. Two boot camp chats will be created for feedback and technical assistance:

    1. Bootcamp HTML - ALL Every person participating in the bootcamp is present here (students, tutors and PMs). Here is the place to ask for technical assistance!

    2. Bootcamp HTML - Assistants Here you will reach just your boot camp fellows for asking question sharing knowledge.

  7. Team play is encouraged but the work will be evaluated per person.

  8. Sprint duration will be 1 week.

  9. The instructions will be vague as they generally are in real life projects. You must look for support and guidance from your PM, teammates and tutors.

  10. All code and documentation must be in English.

  11. Code must adhere to Globant’s UI HTML, CSS and JavaScript coding guidelines.

→ index

###Learning Days###

Each day you will grab the fundamentals of the key building blocks for the next generation mobile apps; yeah, web apps! Web apps powered by the latest, and coolest toolkits, and techniques.

On each learning day you will have to:

  1. ####Read:#### We will provide you with documentation related with current sprint content so you can have a background reference, guide and examples to complete the following practice.

  2. ####Practice:#### You will implement the previously gathered knowledge in simple coding activities. Most important task numbers are listed in the "Key Points" section for each day and they should get most of your attention; if you feel you don’t have enough time to complete all tasks, start with these ones when possible.

  3. ####Commit:#### You will commit all your code on a daily basis, when you finish your practice.

###Introduction

At high level you could see the keys as:

technologies logos

HTML describes the content semantics and structure of a web page. It was designed as a markup language, if you know XML, you could consider HTML as a subset of XML with a predefined semantic.

On the other hand, CSS allows to define the look and feel of the content. It's used to set colors on HTML elements, customize sizes, define the layout of the document content, among others. (e.x. "The following list of elements must be shown as a menu", "The main title of the page should use this particular font").

JavaScript is a programming language that runs in all Web Browsers. Using JavaScript we can create full-fledge web applications.

Now that you know which are the three pilars of a web application's UI, it's time to dive into them.

#Topic 1: HTML & CSS Basics

##1. HTML

For an introduction to HTML please see WebPlatform.

W3C's HTML5 specification can be found here: http://www.w3.org/TR/html5/

Through the rest of this section you will create a basic HTML document. After finishing this section you will:

  • be able to create HTML documents that displays text, images, tables, lists
  • understand how to structure HTML documents, and what the basic building blocks are
  • understand best practices to write valid, accessible, and semantic HTML markup.

###Exercises

  1. The Basics of HTML:
    1. Create a basic .html file with a header displaying "Hello World".
    2. Change the header to "My todo list".
    3. Add a list of "todo items" for your daily chores.
    4. Create another .html file. Create a table for your expenses.
    5. Create another .html file. Add an image, a video, and a sound.
    6. Create a "sign up" form with fields for: first name, last name, email, birthday, a dropdown to choose your favourite sport, and a text-area to include a small bio for the user. Add a button at the end to submit the form, and another one to clear the form. Add relevant validation rules for all fields (like required fields, valid email).
    7. Test your HTML files in at least Firefox, Chrome, IE, and Chrome for Android or iOS Safari.
  2. Doctypes & Metatags:
    1. Learn how to write valid, and semantic markup:
    2. Add doctype to the previously created HTML documents. See what happens if you remove it.
    3. Add metatags to the document.
    4. Add the meta viewport tag. Check what happens in a mobile browser with or without it.
    5. Validate your markup: W3C Validator
    6. Finally, check out The HTML5 Boilerplate, to see a best-practice HTML document.
  3. Accessibility

By now, you should have several html files with different examples of how to create lists, tables, add images, headers, etc. All the markup is syntactically valid, is semantic, passes the HTML validator, and is accessible.

##2. CSS In this section you will learn how to use CSS to modify the look & feel, and the layout of HTML documents.

For a short introduction to HTML & CSS please go to: http://learn.shayhowe.com/html-css/

W3C's CSS specifications can be found here.

###2.1 Basics

Exercises

  1. Create a basic index.html file (example provided).
  2. Create an empty style.css file and link it to the index.html using the link tag.
  3. Learn why is a best-practice to use a reset stylesheet here. Then include normalize.css before linking your style.css.
  4. Add a basic page structure using HTML as depicted by the following picture:

alt text

###2.2 Selectors and properties Learn how to create CSS rules. alt text

Exercises: 1. Add background to the header, footer, aside and nav. 2. Add a global font definition (at html element) with a value of 14px, using a font-family you like. 3. Center the header and footer text.

###2.3 Specificity Learn about CSS Specificity (basically how rules override one each others) http://www.w3.org/TR/CSS21/cascade.html#specificity

Exercises:

  1. Experiment with specificity right now using CSS3 selectors http://specificity.keegan.st/
  2. Now add the following classes to the document created in section 2.1:
    • To <header> add class .header
    • To <footer> add class .footer
    • To <section> add class .content
    • To <nav> add class .navigation
    • To <aside> add class .sidebar
  3. Using the new added classes figure out how to override:
    • .header must have a font size of 46px
    • .footer must have a font size of 10px
    • .content must have a font size of 14px
    • .navigation must have a font size of 12px
    • .sidebar must have a font size of 10px
  4. If the class attribute finishes with r (example header, footer), the background must be magenta.
  5. If the class attribute contains an a (example nav) but do NOT finish with r, the background must be blue.
  6. How could you add weight to the global font definition to win over the classes added by point 3?
  7. Imagine there is a declaration like class=”oh-no-inline-styles” style=”background:red” and you need to change the background to green without changing the inline style. How could you accomplish this?

###2.4 The Box Model

###2.5 Layout

####2.5.1 The display property

Exercises

  1. Now modify your CSS to reach something similar to the initial layout asked.

####2.5.2 Layout systems

  • Learn how to create your own layout system Grid Systems
  • Learn how to float elements CSS Floats
  • Learn about CSS units
  • Using your own layout system, implement an HTML page based on the following mock-up (only desktop). alt text
  • If the user hovers one of the boxes, a new box must be shown. The new box must include text describing the section that box represents. In addition, it must be positioned at the top of the parent box, and must have a transparent background.

###2.6 Media queries

#Topic 2: JavaScript Intro and jQuery

##Reading:

  1. Beginners: Eloquent JavaScript basic tutorial (in case you need it!)

  2. Beginners: Have fun with Codecademy (more experienced devs might find it fun!).

  3. Recommended: jQuery Fundamentals

  4. Explore jQuery documentation

  5. JavaScript Prototypes: http://www.slideshare.net/Dmitry.Baranovskiy/demystifying-prototypes-6183470

##Extra documentation:

##Practice:

  1. Open your IDE, create a new file text, save it as index.html. Add the correct doctype, and a few tags with random content. Add jQuery's latest version.

  2. Add a stylesheet to the index.html. Use the stylesheet to center the text of all section elements of the page.

  3. Add a hidden section with the following text inside: "Hello world".

  4. Add a button below the section to your index.html.

  5. When the page has finished loading the section must fade in.

  6. Add a textbox with the class "alias", and put the cursor inside it right after the section fades in.

  7. Attach an event to the created button which calls a function that gets a response from http://bootcamp.aws.af.cm/welcome/yourname

  8. Write the response to the section element.

  9. Show section content in red when a server error occurs.

  10. Take some free air and then create a function to highlight your name in the server response content. Call it right after setting the response inside the div.

  11. AJAX: get the response from https://api.spotify.com/v1/search with parameters data "q = 'Rolling Stones', type = 'album'" First log the service response in Chrome's console to analyze data (see provided link on Chrome console), then display albums inside another section in the right side of the screen. The article element must be used to contain the album data. For each album show: name, type, image, release_date, and a link to spotify for that album.

  12. Add an input type="text", and reuse the code for exercise 11, so the user can perform search for any artist albums.

  13. Validate your page using W3C validator: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

###Key Points:

1, 5, 7, 11, 13

###Mobile Test:

Test your code in a mobile device or in Android emulator.

Hint: A good option to test your code in a mobile device is to use Genimotion Android Emulator [http://www.genymotion.com/], which is one of the most fast and easy mobile emulators to install.

###Commit:

Commit your practice code.

→ index

#Topic 3: Design Patterns and OOP in JavaScript

##Reading:

  1. Understand JavaScript Prototypes: http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

  2. Understand JavaScript OO: http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

  3. Read this article about JavaScript design patterns by Addy Osmani

##Extra documentation:

##Practice:

  1. Create a Movie object:

    Movie
    -attributes : hashmap
    + play()
    + stop()
    + set(attr:string, value)
    + get(attr:string)

  2. Instantiate some of your favorite movies and play with them in the console.

  3. Add a MovieObserver class that listens for "playing" and “stopped” events.

  4. Publish "playing" event on Movie.play(). You should be able to do something like this in the console:

    var terminator = new Movie();
terminator.set('title', 'Terminator');
// ...
terminator.play(); // output: Playing Terminator...

  5. Publish "stopped" event on Movie.stop().

  6. Log to console when each event is fired.

  7. Refactor Movie class as a Module keeping your previous code for reference.

  8. Create a DownloadableMovie that extends from Movie adding a download method. Here you will have to set the correct prototype to DownloadableMovie.

  9. Create a mixin object called Social with the methods: share(friendName) and like().

  10. Apply the mixin to Movie object and play with the console output. You should be able to do something like this in the console:

    var ironman2 = new Movie();
ironman2.set('title', 'Iron Man 2');
// ...
ironman2.share('V. Rivas'); // output: Sharing Iron Man 2 with V. Rivas

  11. Create an Actor class and create some actors from one of your favorite movies.

  12. Show how you would add an array of actors to a Movie object.

###Key Points:

3, 4, 8, 10

###Commit:

Commit your practice code.

→ index

#Topic 4: NodeJS, NPM, and JavaScript Modules There are three ways to write modules in JavaScript: AMD, CommonJS, and ES6 Modules. In this topic, you will learn how to write CommonJS modules. CommonJS is the module format used by NodeJS, and through the use of browserify they can be used in a browser. ES6 modules will be the standard way to write JavaScript in the future, once the major browsers finish to add that feature.

##Reading:

  1. For a good introduction to JavaScript Modules Modules::Eloquent JavaScript

  2. Read about AMD, CommonJS, and ES6 Modules Writing Modular JavaScript

  3. Read on how to use Browserify Browserify Handbook

##Practice:

  1. Create a new directory for this topic, and add a package.json. Tip: use npm init.

  2. Install browserify globally in your environment. Tip: npm install -g browserify .

  3. Create the same Movie class as in the previous practice, but inside a CommonJS module. Tip: use module.exports.

  4. Create a Director class inside a module and set it as a dependency on the Movie module. Tip: use require.

  5. Create a movies.js file using browserify. Add that script to an index.html. Check that it works opening it in the browser.

  6. Add name:string, a quotes:array properties, and a speak() method to Director; calling speak() will return director’s quotes.

  7. Add a Director to a Movie. Implement the following API:

var alien = new Movie();
var ridleyScott = new Director(‘Ridley Scott’);
ridleyScott.set('quotes', ['Cast is everything.', 'Do what ...']);
alien.set('director', ridleyScott);
alien.get('director').speak(); //output: Ridley Scott says: 'Cast is...'

  1. Add jQuery as a module.

  2. Using jQuery show Director quotes.

###Key Points:

2, 3

###Commit:

Commit your practice code.

→ index

#Topic 5: MVC - Backbone

##Reading:

  1. Read about the MVC design pattern

  2. MVC Architecture for JavaScript Applications

  3. Learn the basics of Backbone.js; https://github.com/addyosmani/backbone-fundamentals

  4. Learn about Handlebars.js

  5. Become familiar with Jasmine syntaxis to write testing specs. Learn how to use Jasmine to test Backbone.js applications: http://addyosmani.github.io/backbone-fundamentals/#jasmine

##Practice:

  1. Write one Handlebars template to show the details of a movie (name, year, description or plot, genre, etc). Use imdb or Netflix for inspiration.

  2. Create a second template to render a list of movies.

  3. Using Backbone, create a movie listing with your favorite movies. Data shall be persisted in localhost.

  4. Show movie details in a separate details view.

  5. Allow to add / edit / remove movies from the list.

  6. Add Jasmine tests for the different views and models.

Tips:

  • Create a Model that represents a movie.
  • Create a Collection to represent a list of movies.
  • Create one view to render a movie, and another to render a list of movies.

###Key Points:

1, 2, 3

###Commit:

Commit your practice code.

→ index

#Topic 6: MVC - AngularJS

##Reading:

  1. Ultimate guide to learn Angular.js in one day.

  2. Read Angular.js's Developers Guide.

  3. Check your code to comply with Angular.js's Best Practices.

  4. Check your code to avoid Angular.js's Anti-patterns

  5. Learn how to create unit tests for your angular.js applications https://docs.angularjs.org/guide/unit-testing

##Practice:

  1. Create a movie listing with your favorite movies. Data shall be persisted in localhost.

  2. Show movie details in a separate details view.

  3. Allow to add / edit / remove movies from the list.

  4. Configure Karma and write tests for the controllers of your application.

Tips:

  • Learn how to use ng-repeat (to render a list of movies).
  • Use templateCache to access your templates.
  • Write a controller to add/edit/remove the movies. Create another controller to show details.
  • Use ng-router to access the movie listing as a default route. Create a route for the details view.

###Key Points:

1, 2, 3

###Mobile Test:

Test your code in a mobile device or in Android emulator.

###Commit:

Commit your practice code.

→ index

#Topic 7: HTML5 APIs

##Reading:

  1. Take a glimpse into HTML5 APIs: http://www.html5rocks.com/en/

    1. Storage APIs: http://www.html5rocks.com/en/features/storage

    2. Graphic APIs: http://www.html5rocks.com/en/features/graphics

    3. Connectivity APIs: http://www.html5rocks.com/en/features/connectivity

    4. Drag & Drop API: http://html5doctor.com/native-drag-and-drop/

    5. File APIs: http://www.html5rocks.com/en/features/file_access

  2. Now, take a deep dive into HTML5: http://diveintohtml5.info/ (optional)

  3. Use http://playground.html5rocks.com/ to play a little bit with them.

##Practice:

  1. Create a page with a textarea and a save button. Save textarea content's when the user clicks on save. Use both localStorage and IndexedDB.

  2. Add a clear button to erase saved content.

  3. Add drag and drop support to load text files.

  4. Open a web socket and test it against this echo service.

  5. Create a web page with a canvas element. Upon page load draw basic geometric figures with random colors and strokes.

  6. Using the Canvas API animate a rectangle's position on the screen. Make sure not to use setTimeout but requestTimeFrame to perform the animation.

  7. Create a web page with a SVG element to show a vector graphic. Make sure you understand when is better to use SVG instead of bitmaps, and viceversa.

###Key Points:

1, 3, 6

###Commit:

Commit your practice code.

→ index

#Your First Project Starts Now! [Twitter Based App] (https://github.com/nicolasronsmansglobant/Bootcamp-UI-final-project)

→ index

Thanks for reading!