computer b course intro - gpa high school
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/1.jpg)
COMPUTER B: CODINGCOURSE OVERVIEW & INTRO
MR. SNOWBERGER
![Page 2: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/2.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/3.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/4.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/5.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/6.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/7.jpg)
SOFTWARE DEVELOPMENT KIT
BY THE WAY, WHAT IS SDK?
![Page 8: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/8.jpg)
WEBSITE CODING
FROM HTML5 TO CSS 3
![Page 9: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/9.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/10.jpg)
WHY CODE?
http://www.code.org/
http://www.youtube.com/watch?v=nKIu9yen5nc
![Page 11: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/11.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/12.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/13.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/14.jpg)
LAYOUT EXAMPLES
![Page 15: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/15.jpg)
FLEXIBLE WIDTH (AKA RESPONSIVE)
![Page 16: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/16.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/17.jpg)
WEBSITE LANGUAGE
HTML5
![Page 18: Computer B Course Intro - GPA High School](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/18.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/19.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022080210/555f1e56d8b42abe748b46ee/html5/thumbnails/20.jpg)
LET’S MAKE SOMETHING