computer b course intro - gpa high school
Post on 22-May-2015
112 Views
Preview:
DESCRIPTION
TRANSCRIPT
COMPUTER B: CODINGCOURSE OVERVIEW & INTRO
MR. SNOWBERGER
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)
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/
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
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
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)
SOFTWARE DEVELOPMENT KIT
BY THE WAY, WHAT IS SDK?
WEBSITE CODING
FROM HTML5 TO CSS 3
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
WHY CODE?
http://www.code.org/
http://www.youtube.com/watch?v=nKIu9yen5nc
WHAT’S THE DIFFERENCE?
HTML: STRUCTURE CSS: STYLE
http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
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/
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)
LAYOUT EXAMPLES
FLEXIBLE WIDTH (AKA RESPONSIVE)
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/
WEBSITE LANGUAGE
HTML5
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 />
• <!-- -->
MORE COMPLEX ELEMENTS• Forms (multiple tags)
• Lists (for example)
• Ordered List <ol>• Unordered List <ul>• List Item <li>
• Tables (7 tags)
• Media (multiple tags)
LET’S MAKE SOMETHING
top related