cs 641, haik sahakian mobile webwebpage.pace.edu/gs78016p/mobilewebdev/week5/homework-wee… · use...
TRANSCRIPT
![Page 1: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/1.jpg)
CS 641, Haik Sahakian
Mobile Web Development
Readings and AssignmentsWeek 4
![Page 2: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/2.jpg)
Readings
![Page 3: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/3.jpg)
Readings❖ JavaScript at 17. Brendan Eich, the inventor of JavaScript and the
ex-CTO of Mozilla, talking about JavaScript’s history and where the language is headed. This talk is entertaining and complicated, and I suggest you watch it in small groups. 25 minutes. https://www.youtube.com/watch?v=Rj49rmc01Hs
![Page 4: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/4.jpg)
Readings❖ Code Monster. If you’re new to programming, make sure you
complete the Code Monster tutorial. It’s the fastest way I know to learn programming. http://www.crunchzilla.com/code-monster
❖ If you already know programming (in Java for example), you can skip this.
![Page 5: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/5.jpg)
Readings❖ If you need practice with image editing, watch the videos in the previous
assignment and practice the tasks (selecting, replacing, cropping, adjusting color values, saving) before next class.
![Page 6: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/6.jpg)
Readings❖ If you want the CSS Grid example from class, it’s uploaded at
http://webpage.pace.edu/hsahakian/examples/ultracorporation/
![Page 7: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/7.jpg)
Readings❖ The Window Object. Optional. If you’re new to the window
object, this is a good tutorial on how to access the window object and what it does. 20 minutes. http://www.afterhoursprogramming.com/tutorial/JavaScript/Window-Object/
❖ Window Object Reference. It’s useful to see all the properties and methods available in a browser’s window object. 3 minutes. http://www.w3schools.com/jsref/obj_window.asp
❖ Events. Optional. If you’re new to JavaScript events, this video will be helpful. 8 minutes. https://www.youtube.com/watch?v=OHYFNDzlDTE
![Page 8: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/8.jpg)
ReadingsTwo quick tutorials, on events and objects in JavaScript. Please read the pages and experiment with the examples provided.
❖ Events:http://www.w3schools.com/js/js_events.asp
❖ Objects: http://www.w3schools.com/js/js_objects.asp
The W3Schools JS Tutorial page, that these 2 links are a part of, is an excellent place to learn about the JavaScript language, or to look up parts of it that you have questions about. Most pages come with examples that you can modify and run in-place.
![Page 9: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/9.jpg)
Assignment
![Page 10: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/10.jpg)
Assignment❖ Turn the portfolio you sketched last week into a web page. Your
portfolio may be the first web page a potential employer sees, so it should look clean and professional.
❖ Use CSS to generate the visuals when possible (rather than images).
❖ Place descriptively named classes on your HTML tags so that you can easily adjust the styling of your page(s) later.
![Page 11: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/11.jpg)
Assignment❖ Ensure your page looks good on both mobile and desktop. It should be
responsive in layout. Use the techniques we’ve learned in class to switch from one layout to another as the browser size changes.
❖ Only use images that you have created yourself, like photos you’ve taken, icons you’ve drawn, or screenshots of your own programs. Do not use any images from the web.
❖ To enhance visual design, choose a font and color palette that you like, use CSS’s border, margin, corner-radius, gradient, and shadow (be careful with over-using shadow) settings to style your page, and look at the examples at the end of this document for inspiration.
![Page 12: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/12.jpg)
AssignmentTo get a good grade, your portfolio must:
❖ Use CSS Grid for a multi-column layout on desktop
❖ Be responsive and have a one-column layout on mobile
❖ Only use images that you’ve created yourself
❖ Not use the CSS float style
![Page 13: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/13.jpg)
Example of a Responsive Web Portfolio Site
![Page 14: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/14.jpg)
http://ianlunn.co.uk/
Ian Lunn’s Portfolio
I’m including Ian Lunn’s site in this document again as it’s such a good example of a responsive portfolio.
![Page 16: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/16.jpg)
Commercial Responsive Portfolio Sites
![Page 17: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/17.jpg)
http://www.squarespace.com/templates/
SquareSpace’sPortfolio ExamplesSquareSpace is a paid service to let non-programmers create web sites. It’s excellently done, and the portfolio section of their site has good examples for inspiration. SquareSpace’s sites tend to be very image-forward.
![Page 18: CS 641, Haik Sahakian Mobile Webwebpage.pace.edu/gs78016p/MobileWebDev/Week5/homework-wee… · use any images from the web. To enhance visual design, choose a font and color palette](https://reader036.vdocument.in/reader036/viewer/2022071101/5fda75a1e688303c397a78fa/html5/thumbnails/18.jpg)
http://www.wix.com/website/templates/html/portfolio-cv/1
Wix’s Portfolio ExamplesWix is another paid service to let non-programmers create web sites. Their portfolio section is similarly good, and is more text-heavy.