computer b course intro - gpa high school

20
COMPUTER B: CODING COURSE OVERVIEW & INTRO MR. SNOWBERGER

Upload: jekkilekki

Post on 22-May-2015

112 views

Category:

Education


1 download

DESCRIPTION

Here are some of the basics you'll need to know for the GPA Computer B course.

TRANSCRIPT

Page 1: Computer B Course Intro - GPA High School

COMPUTER B: CODINGCOURSE OVERVIEW & INTRO

MR. SNOWBERGER

Page 2: Computer B Course Intro - GPA High School

NEW THINGS FOR THIS SEMESTER

1. All computers have Deep Freeze

1. Nothing you install will stay

2. Nothing you save will remain

2. All students have Google Drive (with new email)

1. You all have 30GB FREE

2. SESO – Save Early, Save Often

3. All phones will be collected

1. (And occasionally returned for projects)

Page 3: Computer B Course Intro - GPA High School

COURSE BREAKDOWN

WEBSITE CODING

• Essential (2-3)

• HTML5 (1)• CSS3 (1)

• Potential (1+?)

• PHP?• JavaScript?• WordPress?

SMARTPHONE APPS

• Harvard Online

• Android Apps (6)• iDevice Apps (6)• App Stores (1)

http://cs76.tv/2012/spring/

Page 4: Computer B Course Intro - GPA High School

GRADING BREAKDOWN

CODING PROJECTS

• Website (40)

• Initial work (20)• Weekly progress (2)• (Total = 2*12 ~ 20)

• Smartphones (110)

• Android (50)• iDevices (50)• App Stores (10)

TESTS/HOMEWORK

• Midterm (30)

• Final (40)

• Homework (30)

• Weekly question (2)• (Total = 2*16 ~ 30)

• Bonus Points (1-1)

• For outside work

Page 5: Computer B Course Intro - GPA High School

AND PARTICIPATION (50)

ATTENDANCE

• Expected

• All topics build upon each other.

• Miss too many, you can’t finish.

• Not graded

• (Included in Participation grade)

PARTICIPATION

• In-class

• No sleeping• No surfing while

lecturing• No games/videos

• Weekly

• Blog progress report

• Homework question• Graded weekly

Page 6: Computer B Course Intro - GPA High School

TOOLS• Pre-installed

• Lightshot (screenshots = press PrtSc)• Filezilla (file uploads, if necessary)

• To-be-installed

• Notepad++ (web programming)• Eclipse (Java + Android SDK)• Xcode and iOS SDK for Windows

• Possibly?

• WAMP (for running a local Apache server)• WordPress (if we get into WordPress dev)

Page 7: Computer B Course Intro - GPA High School

SOFTWARE DEVELOPMENT KIT

BY THE WAY, WHAT IS SDK?

Page 8: Computer B Course Intro - GPA High School

WEBSITE CODING

FROM HTML5 TO CSS 3

Page 9: Computer B Course Intro - GPA High School

WHY LEARN (WEBSITE*) CODING?• It’s fun.*

• It’s the easiest form of coding to begin with.*

• It’s quickly becoming an essential computer skill (coding is becoming the new literacy).

• Coding jobs in the US will grow by 30% (twice the normal rate) by 2020.

• “It teaches you how to think.” – Steve Jobs

Page 10: Computer B Course Intro - GPA High School

WHY CODE?

http://www.code.org/

http://www.youtube.com/watch?v=nKIu9yen5nc

Page 11: Computer B Course Intro - GPA High School

WHAT’S THE DIFFERENCE?

HTML: STRUCTURE CSS: STYLE

http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Page 12: Computer B Course Intro - GPA High School

WHAT ARE THE BASIC PARTS OF A WEBSITE?

1. Header

2. Navigation

3. Sidebar

4. Body

5. Footer

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Page 13: Computer B Course Intro - GPA High School

BASIC OPTIONS

LAYOUT

1. One-column

2. Two-column

3. Three columns

4. Multi-column

5. Horizontal

6. Mobile

WIDTHS (THE 3 F’S)

1. Fixed

2. Fluid

3. Flexible

• Widescreen (max)• Regular screen• Tablet• Phone (min)

Page 14: Computer B Course Intro - GPA High School

LAYOUT EXAMPLES

Page 15: Computer B Course Intro - GPA High School

FLEXIBLE WIDTH (AKA RESPONSIVE)

Page 16: Computer B Course Intro - GPA High School

CHECK OUT THESE EXAMPLES

1. Korean Tourism Organization

1. http://english.visitkorea.or.kr/enu/index.kto

2. My Korean Learning Website

1. http://www.keytokorean.com/

3. TalkToMeInKorean.com

1. http://www.talktomeinkorean.com/

4. Smashing Magazine Web Design

1. http://www.smashingmagazine.com/

Page 17: Computer B Course Intro - GPA High School

WEBSITE LANGUAGE

HTML5

Page 18: Computer B Course Intro - GPA High School

MOST BASIC “TAGS”• <!DOCTYPE>

• <html>

• <meta />

• <head>

• <body>

• <header>

• <footer>

• <nav>

• <aside>

• <div>

• <title>

• <h1…h6>

• <p>

• <a>

• <em>, <i>

• <strong>, <b>

• <blockquote>

• <img />

• <br />

• <!-- -->

Page 19: Computer B Course Intro - GPA High School

MORE COMPLEX ELEMENTS• Forms (multiple tags)

• Lists (for example)

• Ordered List <ol>• Unordered List <ul>• List Item <li>

• Tables (7 tags)

• Media (multiple tags)

Page 20: Computer B Course Intro - GPA High School

LET’S MAKE SOMETHING