FTP (file transfer protocol)
– uploading web files to the server using FTP (file transfer protocol)
-we will use a free Mac ftp client called Cyberduck Mac, Cyberduck PC is also available.
-Filezilla is also good, free and cross-platform
Steps:
- Open ftp software
- “Open Connection”
- Enter the following info:
servername: dtc-wsuv.org
username: first initial + last name + the year (’18”), all in lowercase, no spaces or symbols + @dtc-wsuv.org (so, “Sam Jones” would be “sjones18@dtc-wsuv.org”)
password: sent to your wsu email, can’t be changed! - If successful, you should be in your personal server directory that has the same name as your username. Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
- Please upload folders with the following in all lowercase: “blackbird” for the blackbird project, “recipe” for the recipe project, etc. You can always change the folder and file names on the remote server, as you would on your desktop.
- Make sure that your default page for the project is “index.html”
- Check how everything looks on the live absolute URL:
http://dtc-wsuv.org/sjones18/blackbird/ - If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!
- Email me that URL (wluers@wsu.edu)
Text Editors
- TextWrangler (Mac, recommended for this class)The program “Text Wrangler” on the Macintosh computer makes it quite easy to write and edit XHTML code for your webpages. It is much easier to use than “Note Pad” on the Windows side. However, there can be a problem when you create code using “Text Wrangler” and then try to edit it using “Note Pad.” To be able to work with your code at both school and home, using both “Text Wrangler” and “Note Pad,” follow these steps:
- Select “Preferences” > > > “Text Files”
- Select the “Default Line Breaks: Windows (CRLF)” setting (not default)
Now, you should be able to create code at school using “Text Wrangler” on a Macintosh computer, save it onto your portable storage device, take it home, open it with “Note Pad” on a PC, and work with no trouble
- NOTEPAD ++
Web Design / Basics
- Castro Website: Book Examples
- Tutorials – Online Training – lynda.com
- W3 SchoolsThe largest web developer’s site on the net. All the web-building tutorials you will need, and all free. Study what you want, learn what you need, in an accessible, handy format.
- html5-cheat-sheet
Cascading Style Sheets (CSS)
Designing with the Grid
- Five Simple Steps to Designing with a Grid
- Web Page Layout Grid | Smiley Cat Web Design
- Designing With Grid-Based Approach | How-To | Smashing Magazine
- A List Apart: Articles: Thinking Outside the Grid
- Fibonacci number – Wikipedia, the free encyclopedia
- Grid Calculator
Photoshop
- Design Website with Photoshop
- Design A Clean And Fresh Company Website In Photoshop | PV.M Garage
- Adobe Dreamweaver Tutorial | Image Slice in Photoshop
- 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts
Public Domain Images
- Flickr: Creative Commons- Free Pictures
- Flickr: The Commons
- Wikipedia:Public_domain_image_resources
- NYPL Digital Gallery | Home
Testing and Debugging
- The W3C Markup Validation Service
- Check Browser Compatibility, Cross Platform Browser Test – Browsershots
Tools & Widgets
Javascript Galleries, Lightbox & Effects
- 40 Free Javascript Image Galleries
- jquery-plugins-for-awesome-image-galleries
- 20-jquery-plugins-for-scrolling-effects
- Video LightBox – Embed video to your website with beautiful Lightbox effect!
- Videobox
- Lightview
- Lightbox 2
Typography
- Web Safe Fonts
- @font – importing fonts
- Font Squirrel
- Google Fonts
- Typetester
- Six type faces
- Lorem Ipsum – All the facts – Lipsum generator
- Entity Code – A Clear and Quick Reference to HTML Entities Codes
- Best Practices of Combining Typefaces – Smashing Magazine
- Typedia: A Shared Encyclopedia of Typefaces
- The Grammar Cheat Sheet | Retinart
- Ask H&FJ: Four Ways to Mix Fonts
- Good Web Fonts for Online Text
- With beautiful type comes great responsibility
- MyFonts: Webfonts & Desktop Fonts
- web-safe-fonts
- crash-course-in-typography
Color
- Color Contrast Check
- HSL Color Picker
- kuler
- Hexadecimal Color Codes
- Color Theory for web designers
- Canva- color
Video Capture
Video Compression
HTML5/CSS3
- 22 Handy HTML5 & CSS3 Tools, Resources And Guides | Graphic and Web Design Blog
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using | Nettuts+
- 70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers
- Safari and HTML5 Video and Audio
Personal Portfolio Websites
- 50 Fresh Portfolio Websites for Your Inspiration « Smashing Magazine
- Online portfolios for photographers, artists and creative professionals
- Creative Portfolio: Designer and artist online portfolios
- 20 Inspiring Personal Portfolio Sites You Should Explore | FreelanceFolder
- Best Web Site Designs
Narrative Design
- Manovich: Database as a Symbolic Form
- YouTube – Ira Glass on Storytelling #1
- Use of Narrative in Interactive Design – Boxes and Arrows: The design behind the design
- A List Apart: Articles: Beyond Usability and Design: The Narrative Web
- Visible Narratives: Understanding Visual Organization – Boxes and Arrows: The design behind the design
Interactive “stories”:
- The Whale Hunt
- My boyfriend came back from the war (1996)
- Ricebowls.org
- Little Red Riding Hood Retold – YouTube
- Distance to Mars
Electronic Literature:
- Red Riding Hood, by Donna Leishman
- Inanimate Alice, by Kate Pullinger
- Electronic Literature Collection Volume One
- Electronic Literature Collection Volume Two
Scroll Narratives:
- Snowfall (nytimes)
- Killing Kennedy
- A Game of Shark and Minnow – Who Will Win Control of the South China Sea?
- Paris 3D
- Jess & Russ
- noonedeservestodie.org
- Dangers of Fracking
- Inception Explained – An interactive animated infographic
- Bellroy
- You Waste A Lot Of Time At Work
- Collaborative Fund
- The Production Kitchen
- Distance to Mars
Past Student Narrative Projects:
- The Making of Elegy for Seaweed
- City of Bridges
- LCSG: Our Story in Pictures
- Eufrosinia Kersnovskaya
- Eagle Eyes
- Rushkoff Time Narrative
- Design Made Easy
- Narrative Project: Place
- The Lost Streamliners | Home
- Big Girl Baking
- Tracking El Chupacabras
- Parrots
- Saturn’s Moon TITAN
- The Evolution of Zombie
- Crystal Millard Portfolio
- bluebeard
- Scissors
- The History of Video Games
- 6 Things I Like About Great Britain
- Meet My Inner Demons
- The Evolution of Archery
- narrative
- The Run