With all the jabber and laws trying to control what people see on the web it’s a good time to point out this script by Greg Leuch and fffff.at Now you too can censor the internet with the Ctl+F’d Bookmarklet.
Tag Archives: CSS
Web apps for learning code online
Here are some web-based interactive code environments for learning markup or programming via tutorials or just practicing or showing examples.
I’ve know about W3Schools’ Tryit Editor ever since I first learned Javascript on their site. Edit code on the left and click to try it on the right.
CssDesk allows you to create, test, and share HTML/CSS markup within an online editor. Good for quick demos.
Codecademy is a full-on interactive “shell” and step-by-step tutorial for learning Javascript. The UI returns results and shows errors, and users can earn badges and points as they move through the tutorials.
The ProcessingJS website offers an IDE for writing and running Processing code within the browser. Great for workshops where installing software is not an option.
While not really focused on teaching, ScraperWiki’s PHP scraper creation environment actually let’s you run server-side code. It even let me run this statement which I thought was rather impressive.
$str = file_get_contents('http://owenmundy.com','');
$arr = explode("\n",$str);
print $arr[100];
ScraperWiki also offers a Ruby and Python tool too. Very cool.
WEB_1: CSS Zen Garden: Achieving Enlightenment
Create a concept and design for csszengarden.com and code it using their sample XHTML file.
- You may download and save the sample.html file from their website to work with but do not alter the html code.
- Use examples from the site to inspire your theme but do not steal a design or CSS file.
- The design should be well-considered, accessible, and use validated CSS.
- Your project should have some theme and title in the style of other accepted csszengarden designs.
Upload your project and link to it from your profile page.
WEB_2: Separation: The Web Designer’s Dilemma
Welcome to Web 2!
Please read Separation: The Web Designer’s Dilemma by Michael Cohen for Monday. Post your responses here and come to class prepared with questions!
Random bits: Anonymous Twitter Machine, The Yes Men, Calma, Scott Thomas, Conrad Shawcross, and Mike Rugnetta and Patrick Davison
00pd.com by Patrick Davison with Twitter API
TEMPORAL : The Art of Stephan Doitschinoff (aka Calma) from Jonathan LeVine Gallery on Vimeo.
Scott Thomas, who authored the book Designing for Obama, was the Design Director for President Barack Obama’s historic political campaign, in which branding, design, and the web worked together to build a base of like-minded constituents. In this excerpt from last spring’s 99% conference in New York, Thomas likens the campaign to “building an airplane in flight” and discusses the creative’s need for triage and the importance of keeping things simple.
http://flavorwire.com/42153/daily-dose-pick-the-99#media
Loan Words by Mike Rugnetta and Patrick Davison
WEB_1: The Medium is the Message
This assignment will challenge you to work as a group to reproduce a printed work onine while simultaneously exploring the concepts of media theory.
Working in groups and as a class, recreate online the famous text/design collaboration of Marshall McCluhan and Quentin Fiore, “The Medium is the Massage.” Working in groups of 3-4 scan, type, and code in HTML/CSS sections of the book which you are assigned.
Begin the process by creating Photoshop mockups. Mimic the design of the book as close as possible by scanning original images and considering typography. Code the mockup in XHTML/CSS keeping in mind the following guidelines
- Use real text whenever possible
- Use web-safe fonts
- Hand code (do not use DW Design View)
- Each spread must be hyperlinked to the previous and next page spread in your group.
- Each series of group pages must link to the previous and next group’s portion so that a user will be able to click through the entire book.
- Make sure to check your HTML and CSS files using the W3C Validator.
Regarding group work
- You are all responsible for your group’s portion of the project
- You will receive a group grade, and disperse the points within depending on the amount you agree each earned. Consider this a scaled down version of self-governance and accountability.
Due in class on Monday, October 19.
Freud’s ‘Mystic Writing Pad’ and Neil on ‘Designing Web Interfaces’
Sigmund Freud, A Note upon the “Mystic Writing Pad” (1925)
freud-sigmund-the-mystic-writing-pad
Theresa Neil, Designing Web Interfaces: 12 Standard Screen Patterns
Usability readings
Become a better artist/designer
The most important part of becoming a better artist/designer is looking at good art/design. There are plenty of web “portals” to help you in this endeavor by filtering the best work into a single space.
I’ve been watching the work posted at these sites for years. Click through the pages of links to websites, portfolios, etc. and identify the work that stands out to you. How do they work? What catches your eye? How do they solve design problems that you are currently dealing with?
All design
http://designiskinky.com/
http://www.qbn.com/
Web design
http://patterntap.com/
http://www.webcreme.com/
http://www.designbygrid.com/
http://www.css-website.com/
http://bestwebgallery.com/
feed://feeds.feedburner.com/zinnidesign/PSFEED
Others that came up in class.
Feel free to post additional ones
Michael Cohen, Separation: The Web Designer’s Dilemma
The major reason to separate presentation from the rest of the page is simple: to simplify any change from a slight design adjustment to a full-fledged redesign. To achieve complete separation of the presentation, we must isolate everything specifically and solely geared towards style.
—Michael Cohen, Separation: The Web Designer’s Dilemma
Art, Design, Code 
You must be logged in to post a comment.