Due: Finalize watching CodeAcademy html/css specified demos.
Due: Grid for movies, 3 across, 4 down. Mrs. L has a template if you get stuck.
Due: Plan for MAP-Aditya-MAP and jQuery to visualize specific data. (see pro to)
It would be nice to:
- Show a map and provide a clickable legend that allows the user to see pins drop based on 4 different criteria (see pro to).
- Show an interactive visualization of data that would allow the user to move through time and see variance of change either through a bubble chart, bar chart, or pie chart, etc. The key here is that we would provide the user something to 'play with' at the top that would be engaging and informational.
Google Charts-Aditya look here
Filament Group-this example takes data and updates it via a refresh, might be useful if we want to process data that would be changing over time, such as stats that might change, but we would need to a way to capture those changes into SQL tables/fields.
Week of Jan 20th.
- Please go through the CSS Basic and Box models on the w3schools website. The purpose for this is to provide an understanding of css basics, including integration of external stylesheets into html documents. This exercise assumes that you are at an expert level understanding with html and have created a simple website using html. If you have never created a website, than also review the html tutorial as well under w3schools.
- Identify a library that displays movies in a grid on a webpage using HTML/CSS. When you have found such a library, download it locally to your computer hard drive and look at the associated files and read and understand how all files are integrated.
- To ensure you have a solid foundation, take Aditya/Nima's Mockflow wireframe and prototype the movie play page at the box level, as discussed on w3Schools/CSS instruction.
- By the week's end the goals are:
- Familiarize all players with html markup and css stylesheets.
- Understand how to create a linked relationship in html to external files including .css and .js by explaining where the linked relationship is set within the html and how the directory structure should be set.
- Determine finally the best layout design for the movie list/ play page. The best layout should be based on an understanding of user needs and should consider performance of movie load times.
Resources:
Image Grid (nice demo using html/css to make image grid)
Web Team,
ReplyDeleteFor wireframing, check out Sqetch for Illustrator, a good library, loose designs, nice. It doesn't probably have all of the widgets you will need, but might be a good start. Check out other illustrator libraries-do a google search for "web wireframe, illustrator" and you will get a nice set of results. Find a good and useful library or two that you can use with Illustrator.
For coding, some interesting stuff from Mozilla includes Cloud9, Squad, and also look at Komodo, ShiftEdit, and CodeRun. My favorite is phpDesigner, but it only runs on PC. You will need a tool that will allow you to write html5, css, javascript, jquery and other popular libraries, php - mySql for communication with server. I think the only server requirement is for the forum, so this is the area requiring php/mySQL and a database for storing forum threads.
ReplyDeleteFor data visualization-check out flowing data-
ReplyDeletehttp://flowingdata.com/2008/10/15/united-states-poverty-rates-from-1980-to-2007/
(Aditya-particularly you would find some of the mapping useful)
Aditya-please investigate the idea of obtaining a dataset from the US Census Bureau reg. poverty to see what might be mined, extracted and displayed. The US Census seems to be a great source for stats.
ReplyDeleteto get the information for the documentaries in the different groups, tell them to fill out this: https://docs.google.com/document/d/1JTOYqsE1-K2cJRKm1jR231Vr28LXvg0ITHNl-g4Bk0U/edit?usp=sharing
ReplyDelete