ipt.byu.edu/studio/ 01/09/11 Have faith! in programming ...

colonteeSoftware and s/w Development

Nov 4, 2013 (4 years and 8 months ago)




Have faith! in programming

Fundamentals of computers:

Url = web address = uniform resource locator

Where people can locate a

Ipt.byu.edu or

They're both the same thing. We like looking for the words,
the computer likes looking at the

10 = big= what network network=group of computers

A slash / in a url means it's a folder = directory

There's a default file for a website


your homepage you want people to remember

.php or.html is the

language it's written in so the computer knows how to interpret it.

Html = Hypertext markup language

Markup is the same as telling someone how to highlight something.

You need a start and stop, telling what type, color, …

Another thing to do in link or an
chor to another page

Tag for a ling is with an <a> to tell it where to start. To end, use the same tag
with a slash before it </a>

There are attributes to tags, you have to tell it to do what you want it to do =

See <a href="smartypants.html".


will look in same folder in this site

This is an a tag (element) . href is the attribute. You can have multiple attributes
ust like a person has multiple attributes.

A break is <br/> You put that in to do a return or break one line. Breaks are
ptions, so you just need one

A paragraph is <p> and that will put in two returns.

A computer has to be taught a language to understand it. Your browser is the interpreter. It might
not be able to interpret all languages.

Even in the same languages ther
e are different interpretations for the same words. Internet
explorer had interpreted it differently usually. But they still have a little different interpretation,
just like when people give words a little different connotation.

A server is a computer

There is a way to make your computer a

Relative addres

5 houses down

You have to put the language extension on the end if you're looking for a page, otherwise the
computer will think it's looking for another file within a file

byu.edu/dummy/smartypants so need ipt.byu.edu/dummy/smartypants.html

Ftp = file transfer protocol

You want to write and refer to everything in a relative address on stuff you've created, because then
you don’t have to change each address of every
page/file and you just change the big neighborhood
address that you moved to CA.

Robert Francis


4085 Gramercy Ave.

House, Street

Ogden, UT 84403

City, state



We start small and go bigger

Websites start big and
get more specific


Do five tutorials by Wed. Post on our blog

A website is a folder with a bunch of related files

A webpage is a bunch of pages that a browser knows how to interpret.

Photoshop tutorials from psd.tutsplus.com/sessions/photoshop

This is photoshop cs5

pick 5 that have an assignment. 5
15 minutes. The later ones get closer to a
half hour.

You can download photoshop for a free 30 day trial, which is long enough for us to do these

Our lab is 150MKB or



Binary is the 0s and 1s

which is all the computer works off of

on or off.

00000010 is 2 in decimal system

00000011 is 3

10001010 is 138









1024 megabytes is usually sold when you get 1 GB


books or learning

Go through library and you get these books for free online

Safari tech books.

Probably in html or javascript or css

Search for html beginner

Click on book to see what it has, read description, look at table of contents, see
a sample chapter
and then look on amazon and see reviews.

Head First HTML with CSS & XHTML

great book to learn and not boring.

but not on safari

Books explain the why better than video tutorials.

Look on studio


good for learning fl


good for beginners

Text editor on windows is textpad or notepad, notepad++ is awesome and free

Look on what he put on our studio site.



integrated development environment

Dreamweaver is one


it supports your

To download a text editor


Purpose is to structure text with text

Basic components of html






are inside carats <>

Good habit is to close your tag immediately


Then return 4 times and close it with a /


Then in between do your stuff. Use tabs for me to be able to keep track of stuff visually.



<title> This is what will show up as the name of my site




Welcome to my web page



You save the file and

save it as an html file and save it in a file I can keep on my desktop to have
access to it and keep it together.

To preview in a browser, open a browser



The document (website) I just created. A website is really just a bunch of documents.

There are different levels of headings, indicated by <h1>




<title> This is what will show up as the name of my site




<h1>Welcome to my web page</h1>



When programming always think:

This is what I

This is what I should do to get it

What do I expect to have happen

What did happen?

The tag to do a picture is



Source is where to find what you want to put in your stuff.

Download a file

Save image as png and save it to my web folde
r (so I can move my whole web folder)

Save in a file of images

Its tag is <src=""> </src>

So it would be

<img src="images/my picture name.png"> </img>

To change size:

Done in order of width and height (Default is pixels)

<img src="images/my picture
name.png" width="200" height="400"> </img>

It will make your picture equal size if you just enter the width.

We are supposed to turn in pictures of things we did on tutorials. Tell him what we learned and
did with the pics and stuff.

Look over resource

Work on idea for a project (what I did on 564)


We need to have a webspace (personal learning environment) ple

Need to upload files or link to other outside files.





You can be a host of a website if
you own a computer and it has the software capabilities to let
you do a host.

Turn on web access.

We can see Peter's computer that he lets us see



your laptop is off, your hosting service turns off.

So you need one that's always on so your site can be on all the time.

You can rent a site.


Bluehost is the hosting service Peter uses for this class.

Some will let you sublet.

Some are free, some are free if you wear their add.


is my address (I still have an address that people can get mail to me). Will probably have
a fee to get to have your own domain.


file transfer protocol


Protocol, Domain, Folder=directory, file

Protocol is the ceremony to get ** to talk to each other




means it's secure





secure shell

geeky, techy guys use

You need to set up an ftp account within your host.

C panel

what a lot of hosts offer for your ftp

They can't start with numbers

You have to name

BYU guest will not allow ftp traffic

You have to use
BYU secure

Local site: = my computer

Host:= where connecting






Port: = place of entry for ftp traffic

You can mostly let the computer worry about where they wan
t to put it.

"Can't connect to server" usually means you've typed in the name wrong

"authentication failed" means username or password wrong

On username you might have to add whole extension

IDE = integrated development provider (Dreamweaver)

If you have local remote, you're probably using ftp. Has transferred stuff to text editor.


Where we grade ourselves. We log in with our e

Send him a picture

Learning Contract

Click on it




ftp clients

an application or program running on my machine


another computer that's connected to the web

We want to get our files from our computer to the web computer

You need the add
ress of the ftp portion of the host, the folder or directory you're getting into,
username, password, port


Mike's question

can you hit refresh or do you have to re
upload every time?

It depends on if the client is set up to be able to re

Google docs does it automatically

but it's on the same computer

If from two different computers, the client has to keep looking at the file every so often to know if
there has been a change.

Peter uses coda

'cause it does that.

Peter's server, when he makes a change, a dot will appear and then he can know/when to

There is a difference between skills ID ers in education and in commercial world need


What's most important skills?

Knowing specific tools wasn't as im
portant as knowledge of

Important to have a fundamental understanding of how the tools work.

The tools change, but the concepts are what we need to adept to whatever the syntax is.

The paradigms under the tech is pretty stable.


Really handy whe
n doing animation

family on mountain chased by bear

When you apply a mask to a layer only the black area shows through (the eye cutouts of the
mask) white areas are opaque

If you cut from original it is destructive, so the mask makes eat easier to modif

original will have a lot of colors, but the cutout will have fewer colors and elements to

Choose a shortcut a day to use/learn

you can google shortcuts

Select all = Ctrl + A

Deselect = Ctrl + D

To delete everything


Need to

look at resources and tutorials to propose what my steps will be.

Or start with what you think you want to do and that will determine your steps.


You can get it free electronically if it's a book byu offers



Safari textbooks

Also can get help in tutorials off of the studio website

The W3schools.com


Have been helpful for newbies

Have the project in mind working towards it, but have a basic level of experience to practice the
exercises on the tutorials and then try
it out on your own thing.

***Ideas for project**

Add pronunciation and record the pronunciation.


Download Notepad ++ = text editor

The first thing to do in a form is to designate a form area



To fill in a form, you're actually using

You also have to tell what kind of input you need

Designate what you want things to be "text", etc. so it doesn't have to guess.

So you say < input type = "submit" name="Enter"/ >

Didn't work

ry coder needs a good reference book

W3schools html reference

"name" is different than what the button is actually named, it's "value"

Or you can now just use


And what you write in here is how the name of the button will appear on your page


"submit" is a special type of button

To have the option to choose yes, or no

Use <option>

There is a <password> field so that when you type the writing won't show and will show the
password dots

The computer still sees your password, it isn't encrypted for it, the value is the same.

Radio buttons

the circle ones that you can only choose one male or female, if you select one, the
other will be deselected. (You can change them to not be circles)

To group them together, give them the same name = "sex" then

<select name="gender">

<input type = "radio" name = "sex" value= "Male" > male </input> <br/>

<input type = "radio" name = "sex" value= "Female" >Fe male </input>

To be able to choose m
ore than one, use check boxes

Buttons are different because value isn't the name that appears, it's the type

When you're having actions occur, you need to tell it to do an action

The big long string of stuff that sometimes comes up in the url is the
value and names of what's in
a form/page.

It starts at the ? (think of the ? As "where") so it's telling you to go to the website where

The two ways to pass something around

Method= "Post"

that won't see your values

Method = "get"

will s
ee your values

Html is not a programming language, it's a scripting language

Javascript is a programming language

you can say, give me all the values that were in that one


Design specs are due next Wed.

need to present 5
7 min

blueframe/wire frame of product will be

Tells purpose/pitch on what it will be


General approach/category/genre of tool making

blog, wiki, network, database/information

Flow and function = bulk of frame work

Flow: Linear

tutorial that you need t
o do one before you can do next


mock up of what it will do, how are they going to work?

Did powerpoint that simulated what it would do

Show blueprints


Take blueprint and put it on PLE

then go to others and give ideas and get feedba




the outside of your project


goal of website is to provide CSS file and create it without changing HTML

Good demo on how you can really change the look of a page with the exact same html

A paragraph <p>

is different than a line break, 'cause it has a closer </p> and gives 2 returns and
has a line break after

<li> = item in the list

<ul> = unordered list

<div = division of webpage = box that gets its own line, one of the most basic without many

<h2> = another level header

Different ways to add CSS

add as an external file, embed in file or embed in actual title

CSS = cascading style sheets

Whatever the most recent thing is takes precedence

internal most recent thing takes
precedence over

Start general and go specific

Peter doesn't like embedding right in

'cause that's part of structure and there's no modularity

But you could enter


Whatever in here will be seen as CSS instead of html


These in CSS are called elements or selectors instead of tag

To change background color

Use the squiggle bracket for CSS

Body {

color: green;

Color: #ffffff (=white) in the hexidecimal code


2 places for C 2 for M 2 for Y no K


You can shorthand white to just fff

000000 = black


You have to end line with a ;

An ID is only for one element on a webpage

Elements can belong to as many classes you want

The way to style a class is with a .

The way to style an ID is with

a #

You can put a border around your main text

.content {

Border: 5px dashed #fff


Google CSS reference or w3schools to get different attributes

**to apply

save as .html

Go to where file is and "Open with" browser

Then when you make a change,

save in your html doc and then go to site on browser and hit
refresh and it will apply the changes

To add more space between your borders, use the box model


Border: 5 px dashed;

Width: 50%;


That will make your content and border 50% of wha
tever your screen size is.

Between border and content is padding


Border: 5 px dashed;

Width: 50%;

Padding: 50 px (that will do all around)

top: 5 px (if you don’t want as big of a padding on the top as the sides)

bottom: 10 px


There's a shortcut you can use if you know the order Top, Right, Bottom, Left (clockwise)

Padding: 5px 50px 10px 50px

Or it can also pair them together so you could do 5px 50px will make top and bottom 5 px and left
and right 50 pixels

If you want
two content elements side by side, you move things according to top left corner

You could give a different id, id=second

And then up in style in CSS, use a pound sign and the word spelled out #second

You can do it relative or absolute


Position: ab

Top: 20px

Left: 350px


To change font, it's called font

Your browser will go with its default, so if you want to designate a new one do

family; the name of the one you want, then put another option if the browser doesn't know
first one, and so on separated by commas


The standard we are using in html was established in 1999.

In the past couple years push by browsers to be compliant with html 5


A border is an attribute of an element.

The first thing read is
external files.

Next is embedded style tags

Next is style attribute on individual tags

This is bad because it can only be used in the one file and is part of.


is a selector because it tells what area we want to affect. So any body

tag will be affected

Diff between classes and IDs

ID is one and a class can be many

And element consists of certain parts.

The space between elements is called the margin. IE has finally given in on how it interprets the
box model is the width of

an element goes up to the borders, not the margin.

Screen = viewport

Absolute is according to viewport (with some exceptions)

If you want the first paragraph in each section to be a certain way, create a class and give qualities
to the class


If it has to do with numbers, the computer is good at figuring that out, so you wouldn't have to
distinguish it by naming it "first".

Genealogy is important in CSS

what your parent element

.content p:first
child {


Will select the first
paragraph that's in the class of content, so all your first paragraphs will
be changed instead of having to designate each paragraph as being first.

Or you can use nth
child(with the number you want) to effect the look without having to change
the html a
t all.

All tags are either block or inline. Block means it gets its own line.


em = emphasis

The <span> on the footer just applied to the text on the footer

A <div> applied to the whole line.

Div isn't very meaningful

that's why you have
to put IDs or classes on them.

But now you can make them more semantic = the meaning. If you want a footer, just call it a
footer, don't make it have to be called different IDs with other different characteristics.

Every html tag is a value meal with p
built components.

<a> (link)

It's elements are that it will default blue, underlined, visited
>color change to purple, inline

<h1> (header)

Inline, larger, black, bolded

<div> (division)


You can make changes and you can also add something

not on the menu.

You can make a Pam tag

right now the browser doesn't know what that means.

<pam>some stuff in here.</pam>

Defaults to inline , plain text

You can define it in the up above area

Pam {





You have to use CSS to talk semantically

almost all programs are using CSS

allows you to mix
and match and customize.

Pseudo classes are identified by a colon

#mainLinks a:


Mashups are making other pages part of yours

take a google

map and put it on

If using stuff from another website you should ask and/or give credit


There is a push for a semantic web instead of the old tags for things because your webpage will be
delivered on different devices

ipad, phones. So yo
u might want to learn the new way so it can be
uniform and adaptable.

Imperative = a command

"Seek, ask, knock and search" combined come up more than repent or remember. The Lord wants
us to look for answers! And ponder

apply to your own situation,
how can you use it? Go to an
authority for your answers. But don't just ask! "took no thought save it was to ask me". YOU HAVE
TO TRY!!! Then ask again for more understanding.

Coders are more strict

they really want you to try first.

You can't learn
it just by reading, you have to try.

Most of us will be using php =hypertext preprocessing instead of javascript

codecademy.com is
another resource for learning javascript.

I have to have a server to be able to provide my website (a bunch of document
s), webpage (a
document), file (directory that is in between/s)

I will need a database.

My server has to have it set up.

I need server space that can get on a grid and a database = for
this I need a host. And I need php=scripting language (=logic)

You w
ant these separate

logic, data, structure, and style= parts/kinds of programming

You want to "sandbox" your development

make your own little area where you experiment and
if I ruin it, it won't be ruined on the server so everyone can see it. So I hav

To turn my computer into a server.







server, MySQL
database, php
server side logic

Nice people have set this up for us, so we don't have to do it individu

The links are on the studio.

Go online and download it (I want WAMP for windows)

Go to the readme for WAMP in my documents

it tells info of where I'm
going to want to put my documents for my website. I have to put it there, because
where WAMP is going to look so it needs it to be there to work.

Htdocs is like my version of the www folder

When I try it, my url will say localhost=my actual computer. 8888 is typical local
webport something

My WAMP will be stored in programfiles

8086 (per Robert)

This is different from what we've been doing, 'cause we've only been able to do text which
is okay without, but for databases and php, I need the WAMP thing installed and it will
install my ability to do those for me.

Gives better fe
el for how it will act on the real server

Php is started with <?php


When I use relative

I just tell it to look for my files on the "localhost" and I won't need to
know where stuff is stored.

When we post on our PLE, include code file, so he can
see it.

Make my standard font/header I want as an image.

Look up the 3 column css tutorial on how to make it.

Call my columns by Header, BOM Books, Content, BOM People, etc. as my tags

I need to test my program on different browsers.


k time



Organized information

for lots of information and indexed


is a database


extensible markup language

Jason object

like a rolodex card

Name: peter

Age: 33

Gender: M

Excel has the following: MySql calls them

Cells (cell)

Rows row

different values



categories of information

Sheets table

Documents Database

It's a relational database

Peter always starts his databases on a scratch paper

e info needed. YOU WANT TO DO THIS


an unofficial standard

Be consistent with your own in naming your databases vs fields vs etc

Upper Camel case


Or you can use

lower camel


Or use un


"Might this repeat?" If you have one datum in multiple places, it's usually identifying
information and it should have its own table.

Php goes with mysql. Javascript

is another logic program, but it doesn't talk the same language as

You have to have an interface/editor = WAMP

Primary key

unique identifier of rows within a single table.

Foreign key

a field that is connected to another table (like points pos
sible is in the assignments
table) you don't tell database it's a foreign key, I have to know it is one.

To link

they need to be in same database/document


gets certain info out of a database and shows/manipulates as you tell it.


ichotomous value

yes/no, here/not here



is a question forum

People are nice and help out newbies all the time.

Remember to use the grave accent (on the tilda key) instead of a single quote!!


asynchronous javascript

and xml

reloading part of a web page

makes web apps act like

Functions are followed by parenthesis


Arrays are useful in programming

ordered lines

Any time you're typing out a task repeatedly, use a loop



list, a cue, stack, index, map, dictionary, hash, ordered collection

they're kind of flavors
of arrays

An indexed array has a number and a value

An associative array

associating a value with a "key" (Ammon is the key and 23 November
1956 is the value
we gave to him)

In order to have php work, your server has to be on and your php in a folder where it says to
your computer that anything in here is being served.





"my name is Peter <br/>";

//to create

a simple indexed array, use the "array" command and then a list


("Peter", "Robert", "Jenifer", "Ammon", "Mike", "Pam", "Vera");
this is
a string to the computer

Print "Hello, my name is " . $names [1];


Echo= print

Create a variabl
e and precede it with a $ sign.

Sometimes you have to tell them what type your variable is like $age:number=67,

But not with php

You can use single or double quotes, but you have to keep the same

Print "my age is" .

us a . To concattinate (connect

things together)

In php arrays start at 0

"The first person in the names array is" .$names[0];
brings up the first person in your list

() indicate a function or command

$birthdays= array (

"Peter" => "4 April 1978",

"Robert" => "6 July 1968",

"Jen" => "2 November 1973");

Print "Mike's birthday is".

$birthdays ["Mike"].;

I have to link and rewrite my databases. My database doesn't talk to html.



In php variables need a $ in front of it

iTunes is a multidimension
al array

arrays within arrays

$playlist = array(


"artist" => "Peter Frampton",

"title" => "Do you feel…",

"time" =>3.5



"artist" => "Beatles",

"title" => "Help",

"time" =>3

"children" => array("Jan","jose","Jed","Stephen","Jenifer")



Print $playlist[0]["artist"] to get Peter Frampton

Print "Current song:" .$laylist [1]["title"].

Should give you Help

Print "Current child:" .$playlist [1]["children"][2]. Should give you Jed



For (i=0;i<=100; i++);{ This says to

count from 1 to 100, counting by ones. The starting point,
the truth condition (what to do), how much to increase.

Alert (i);


$books=array ("1 Nephi", "2 Nephi",…);

Print "Here are the books of Mormon";

For ($i=0;$i<15;$i++) {

Print $books


If you don't know how many items are in your list:

For ($i=0;$i<count ($books); $i++) {

Print $books [$i]."<br/>";


Foreach ($books as $BOM) {

Print $BOM<."<br/>";


My server folder "localhost" is my wamp www folder.


to work on file.

To test when server, go to localhost/Myweb/file.php

to see in browser

If link to a folder, if php is in my

Teaching, Another category for Source

self, quote, Lord,

can write as html and then when echo


if save as html and have all teachings in one block then write css, that self is blue, other is purple

Or Text <span class = self?

Then write function to make array of IDs and where there are commas and then from that do a

Doing before (not in php)

Get person row

Get teachings ID col val

Break value into array of IDs

For (ID in array )}

If (id("Source = "prophet")… echo (<spanclass="prophet"> id ["text"] </span>

Else if (id(Source") = 'good guy'..

Else if …

Echo ju
st the thing itself in case it didn't have column, (id('text")

Depending on formatting you might call it list <span>.

Teaching ID

might not need

Person ID

TID PID text source and then pid would match person

Put the teaching in an array for each ea
ching if that source is prophet echo in (when printing
on page you put a class on whatever element you're printing out and for whatever elmenet
you give it a class and then CSS would be


Prophet {color: blue;}


As you are working toward
finishing your projects, some have asked about the final exam.

Here is the type of
task you’ll need to be able to complete to perform well on the final:


Identify viable sources for finding answers to programming questions


Identify viable online training s
ites for learning more programming or scripting


Explain what a web site is


Explain what a server is


Explain how to get files from a development computer to a server so the files can be hosted online


Describe the purpose/use of each of the following languag
es: HTML

a scripting language and the structure,


Given a url, identify: (a) the domain, (b) the directory, (c) the file containing the page being looked at, and (d)
any variables passed in the URL


Edit a picture in photoshop using masks


Given a simple web page (e.g., Title, content, menu, footer), recreate that web page using HTML


Style a simple web page using CSS


Given a simple MySQL database, run a query to select a specific set of information


Given your programming (i.e., logic) langua
ge of choice (e.g., javascript, php, lua):


create a variable,


use said variable in a function that you define.


Use loops to complete a repetitive task (e.g., displaying a list of items returned from a MySQL query)

Pasted from <

Instructional critique

us evaluating the instruction materials I used.

due final exam day

No longer than 2 pages more than a paragraph . Critique Peter too.

Demo video

so projects last beyond course

so he can put on youtube so he can have our stuff
forever, because if we made a link we might change it.

Use jing

can download and it will capture our screen and make a video.

send to Peter and he
will upl
oad to a youtube channel.

Critique someone's project else

Do presentation for class


I critique Pam

due Monday before present

Apr. 9

() are used in functions

use this

when I use this function put the required things in these

[] are used to access values in an array

find this

{} are used for indicating what actions are to take place

do this



We have t
o make a video