Build your first web app with friends

WWW.ANAK.IT

Build Your First Web App

with Friends

Presented by:

Abdul Qoyyuum Bin Haji Abdul Kadir

Dated: 05/07/2014

ANAK I.T BRUNEI DARUSSALAM | WWW.ANAK.IT

Before We Begin

Download/Install the following applications:

● Brackets.io - www.brackets.io

● Dropbox - www.dropbox.com

While you are downloading these applications

and installing them, let’s move on.

www.brackets.io

www.dropbox.com


Short Discussion: Why

Programming?

1. Teaches us how to think logically.

2. Teaches us how to fix (debug)

3. To make money


About Qoyyuum

● Developed and

designed Websites

and Webapps for 5

years in the Web

Industry

● Managed web

projects for 2 years


Objectives

● Turn your CV into an online CV

● Design your online CV pretty!

● Make it interactive.


The Setup

1. Download or copy the setup zip file

2. Put the folder on your desktop (or anywhere

accessible on your machine)

3. Point your Brackets.io to that folder by

“Open Folder” option in the File menu.

4. Resize your Brackets.io screen to the left.

5. Click on the Live Preview button (the

lightning bolt located on the top right of the

Brackets window), and resize to the right.


Workspace SetupSetup your workspace to something like this.


HTML Tagging: Skeleton


HTML Tagging: Paragraph

<p> is Paragraph tagging


HTML Tagging: Pictures

<img src=... /> is to search for images


HTML Tagging - a

<a href … > is to create hyperlinks


HTML Tagging - Headings

<h1> is the

biggest heading

<h2> is the

second biggest.

<h3>, <h4>, <h5>

and <h6>, are

other big

headings


HTML Tagging - Table (1)

<table>

</table>



<table>

<tr>

</tr>

<tr>

</tr>

</table>



<table>

<tr>

<td>

</td>

</tr>

</table>


HTML Tagging - Table (4)Make borders by adding the border=1. And just

to make it look pretty, add cellpadding and

cellspacing to 0.


HTML Tagging - List (1)

<ul>

<li>...</li>

<li>...</li>

</ul>


HTML Tagging - List (2)

<ol>

<li>....</li>

<li>....</li>

</ol>


CSS

CSS stands for

Cascading

StyleSheet.

It makes your CV

pretty.

Let’s start by linking

an existing CSS to

your CV.


CSS (1)


CSS - Page WrapAdd the following

after the <body>

tag:

<div id= “page-

wrap>

And then close it

before the

</body> tag:

</div>


What does id = Page

Wrap do?

1. Click anywhere on the <div id = “page-

wrap”>

2. Right-click and select “Quick Edit”. OR

3. Press CTRL+E.

4. To close it, press CTRL+E again or click on

the X icon next to the “style.css” word.


Move Your Picture!

Let’s move it to the right by adding an id to the

pic.

… id = “pic” />


Classing up the ObjectiveLet’s class up the objective by wrapping the

entire objective paragraph with id= “objective”


Clear both sides

There are 2

kinds of clear

types used in

CSS here. One

in div and one in

dd. dd is a

HTML5 tag

used for

description of an

item.


Table to dt & dd

Let’s try using the dt and dd. Replace all the

table work we did in Experience section of the

CV with dt and dd.

Also at the same time, replace all h2 tags of

each section heading to dt tags.


HTML Tag - Span

<span> tag is used to create a visual effect. It

doesn’t work on its own but together with CSS,

it's beautiful.


Clean-up

Back to using dt and

dd. They are similar

to how tables work

but more towards

article writing.

<dt>Define

Term</dt>

<dd>Define

Description</dd>


End

ResultYou

should

have

something

like this.

WWW.ANAK.IT

IntermissionBRB in 15 min


Javascript

Javascript is the core of functionality and

interactivity. It enables visitors/users to interact

with your static page.

So let’s add some interactivity with your CV by

adding a basic AI.


Interview AreaWe will need to setup where the Interview area

will be in our CV. Copy the code below

everything in your CV but before the last </div>:


Add JS File1. Create a new file and name it “interview.js”

2. In your cv.html’s after the Interview section

and before the </div>, add the script.


BIOS

A regular webapp functions just like what a

BIOS would do. BASICally, takes the INPUT,

processes it, then gives the OUTPUT. This

repeats for as long as the SYSTEM is still

working.


Quick Planning

function takeInterview() {

// This will take the questions keyed in for validation.

}

function processInterview(i_question) {

// This will process the question with your list of

// expected questions to match with your answers.

}

function outputInterview(x_answer) {

// This will give the answer correctly through the processed Interview.

}


Ways to store questions

There are 2 ways:

1. Use a database and connect to it

2. Use Javascript and create an Array


Creating Functions(1)We are going to take this slowly by first

creating a function that takes the question as

an input.

function takeInterview() {

var i_question =

document.getElementById(“question”).value;

}


Creating Functions(2)Our next function gives the answer.

function answerInterview(x_answer) {

document.getElementByID(“answer”).innerHT

ML = x_answer;

}


It’s a Parrot

Let’s see if you got it. Is it talking like a

parrot?


Creating Functions (3)Since we only have the question and there’s

nothing processed, it just outputs what we

typed. Let’s create another function that

processes the question. Put this function in the

middle of the Input and Output functions.


Send Question for

ProcessingSince our Input goes directly to Output, we

need to redirect it. Back to your takeInterview

function and add this one line of code.


Response Test & Debug

Is it saying our default answer? If not, try

debugging it with console.log.

1. Right-click and “Inspect Element” in your

browser.

2. Select “Console”

3. Type console.log(i_question) and press

Enter.

4. Try console.log(x_answer) and press Enter.


How do we respond to

specific questions?So you’re input, process and output is working

but how do you process different inputs for

different outputs?

Input1 = “How are you?”

Input2 = “How much is your

rate?”

Input3 = “What’s your

favorite color?”

Input4 = “Can I have your

number?”

??Process??

Output = “I am fine”

Output = “$1,500 please”

Output = “....”


Remember?Mentioned about storing pre-defined

questions?

Let’s use the Array function to store them

instead of an actual DB.

An array looks like this.var array = {

“how are you” : “I am fine”,

“how old are you” : “I am 5 years old”,

“etc” : “etc”

};Question Answer


Q&A Series(1)

Now that we have a working function, let’s think

about some questions and answers. Inside the

Pre-set-up files, there’s a file called “common-

questions.txt”. Open that up and think up of

some answers.

It doesn’t have to be real answers as you can

edit them afterwards. You have 2 minutes.


Q&A Series(2)

Let’s take 3 questions out of all those common

questions and set up our answers next to them.

Create another JS file and name it myDB.js


Q&A Series (3)

Create a

variable

called

“dictionary”

and start

creating an

array of

question and

answers.


Link this dictionary

Since its in a separate js file, we have to link

this into the cv.html file. Add it before the

interview.js.


Question Matching

Back in

interview.js and

inside the

processIntervie

w() and

inbetween

x_answer and

return, add an IF

condition.


But our default answer?

Yeah, it went

missing and

became undefined.

We need to bring

that back by

wrapping our last

“return x_answer”

into the else of the

IF statement.


Our Final Interview.JS


Our Webapp Result


Add MORE!

Go ahead and more

questions to the

myDB.js file and try

more of them out.

If you find something

wrong, debug it!


Save and Upload to

Dropbox!

1. Login/Register to Dropbox

2. Upload your folder to your Dropbox Public

folder.

3. Share the public URL to your

friends/family/potential employers/your

school teacher/etc.

4. Get feedback, improve it and apply for jobs!


What you can do with

HTML5 & CSS3 & JS?

Examples of HTML5 & CSS3:

● Post-it Notes -

http://cdn.tutsplus.com/net/uploads/legacy/77

1_sticky/step5.html?_ga=1.75595793.528516

078.1403958594#

● HTML5 Browser Game -

http://browserquest.mozilla.org/

http://cdn.tutsplus.com/net/uploads/legacy/771_sticky/step5.html?_ga=1.75595793.528516078.1403958594

http://browserquest.mozilla.org/

Internet

Build your first web app with friends