Questions from the assignment
- Do we really finish this coding assignment in two weeks? 😱
- putting icon inside button vertically aligning text to image
- I don't know why texts keep overlapping when I used grid
Social Media Check-in
- Is Snapchat still a thing?
- Is Facebook still a thing? How much time to you spend on FB per day?
- How about Instagram and Twitter?
- Behance?
"Mid" semester reports went out
- If you have any questions, please talk to me
In class review
- Day Chae :: Design | Writing | Coding
- Yuran Won :: Design | Writing | Coding
- Lihua Jin :: Design | Writing | Coding
- Ifah Pantitanonta :: Design | Writing | Coding
- Hyeona Kim :: Design | Writing | Coding
- Grace Oh :: Design | Writing |
- Yunfei Xie :: Design | Writing | Coding
- San Yoon :: Design | Writing | Coding
- Amina Cheng :: Design | Writing | Coding
Introducing: Javascript, jQuery, Slideshows
- Introducing
- From W3School's page introducing JavaScript:
- HTML to define the content of web pages
- CSS to specify the layout of web pages
- JavaScript to program the behavior of web pages
- Another way to put it: if you want anything to move or change on the page, you generally need to use JavaScript
- There is a Code Academy course on JavaScript, but we're not going to go there...yet...
- Unlike HTML and CSS, JavaScript is a "real" programming language. It has conditional statements (if/then), control statements (loops and functions) and data structures (variables, arrays, and objects oh my).
- A "full stack" frontend web designer must know HTML, CSS, and JavaScript.
- Luckily, libraries exist that make it easy to use JavaScript without having to know it. Just like a car "abstracts" the mechanics of driving (how the engine works, axles, gears, carburetor, exhaust system, etc.) into steering wheel and "drive, park, reverse", jQuery abstracts much of the mechanics of JavaScript into a format you can more easily understand.
Creating a Slideshow
- In LiveWeave, under Library > add jQuery (latest). Notice this all this does is add a <script> tag in the <head> part of your HTML, much like how you've been adding a different kind of external resource: your Google Fonts
- Here are Google results for "jquery slideshow", I'm gonna go with bxslider
- Let's try the the easy way first
- The easy way is great, but to really understand how this works, let's also try the manual way
- We need to follow the install instructions carefully, though we need to make some adjustments for our LiveWeave environment...
- Essentially Step 1 tells us to download a zip file that contains javascript files, css files, and html files
- When we open the zip file we see lots of things, but our focus should be on the
src and dist folders
src is the source code. This is what is meant by "open source." You are free to modify the code of bxslider to fit your specific needs, it's all right there!- Normally we do not need to modify the source code and we're just interested in the "release code" or the "distribution code," which is in the dist folder
- The "dist" code is exactly like the "src" code except it is compressed (so it loads faster). You can verify that by comparing file sizes.
- src > js > jquery.bxslider.js: 65KB
- dist > jquery.bxslider.min.js: 24KB ("min" stands for "minimized"
- We need to look at and interprete the instructions. It's telling us that we need to include three things into our HTML
- jQuery (done)
- the bxslider javascript file (jquery.bxslider.min.js)
- the bxslider CSS file (jquery.bxslider.css)
- Copy the contents of the CSS file into the LiveWeave CSS pane
- Copy the contents of the JavaScript file (the min version) into the LiveWeave JavaScript pane (the browser may hang as you do this but it will come back to life after a minute or two)
- Proceed to Step 2: Create HTML Markup
- Copy the HTML markup and paste into your LiveWeave HTML pane
- Replace the <img> links with images you've uploaded to imgur. Note: they should all be the same size!
- I'm using:
- Proceed to Step 3, copy that code and paste it at the top of the LiveWeave JavaScript pane
- That's it! LiveWeave sketch here
- Bonus: using the configurations here and the examples here, can you figure out how to get the slideshow to auto-start?
Introducing wireframes
- The purpose of wireframes is to clearly depict the organizational structure of the content on a web page
- The purpose of a sitemap is to represent the organizational structure of the entire website on one page
- Wireframes are purposefully devoid of styling and design so that both client and designer can focus solely on content
- Wireframing is a necessary step in web development because coding is very expensive, both in terms of time and price per hour. Wireframing is cheap and fast and is a good way to get clients on board with basic ideas before launching into design and coding.
- Resist the temptation to put real content in your wireframes. Body copy text and headlines should be represented as lines, like so.
- Each type of page is considered a template. For example, on SVA.edu the DIC page and the Orientation page share the same template even though the content is different. The Undergraduate landing page, however, is a different template. In this case you do not need two different wireframes to represent the the DIC page and the Orientation page, but you do to represent the DIC/Orentation page and the Undergraduate landing page.
- Wireframes should be annotated
- These SVA.edu wireframes
- Here's a wireframe example from last year's class (starting on page 13)
Coding Assignment
Deliverable: Liveweave URL
- Finish coding your design for the About the Lab page
- Include a slideshow that uses jQuery and bxslider
- Don't forget to include the jQuery library in your Liveweave sketch (Library > jQuery)
Design Assignment
Deliverable: Publicly accessible PDF
- Using your content inventory document as a guide, create a sitemap of the entire Genspace site.
- This should represent every page that will be on the site, from the homepage to the Contact page.
- Rename your Content Strategy document: Genspace Redesign. That document will now have two sections: Sitemap and Content Strategy.
- This is a good example from one of last year's students. (lots of boxes with "x"s in them)
- Some things to keep in mind:
- On each wireframe page, it is generally helpful to include a miniature version of the sitemap, highlighting the current page (for example)
- If you want to indicate that there are different types of pages in your sitemap, you need a legend to explain what the different graphic representations mean, like page 2 of this sitemap.
- Remember, every single rectangle on your sitemap needs to have a wireframe page associated with it. That means that the navigation categories need to have a wireframe page explaining their content. It also means that you do not need to list out each program/service, but instead can use a "template" program/service page.
Submitting Your Work
Due Monday, 11/19 @ 10AM
Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.
Cool Links