Resources

Here you will find resources related to the Web Design and Development. Some are more directly related to the content of our course than others.

Resource
  • Final Resource: Images

    December 9, 2012Christopher SteinHere is the information from the grading rubric Images are used in a way that: Enhances the beauty of the site Is in unity with the rest of the design and the content Generally you have all done pretty well with images. The main error on the midterm was not including an alt property with each images. That is very important. This page has some basic information on adding images: http://webdesign.blogs.peopleio.net/page-elements/images/ This page has some information on how to do the basic layout of thumbnails for an image gallery: http://teachingmultimedia.com/mmp240/midterm/photogallery.html
  • Final Resource: Typography

    December 9, 2012Christopher SteinFinal Resource: TypographyLessons from the Midterm For the final project typography there are a few things you all should focus on based on what I saw on the midterm: Measure Matters Measure refers to the length of a line of text. You only want 45-75 or so characters in a line. A large number of you had more than that in your midterms. The common culprit is running a line of text across the entire width of the page. Adding HTML elements and CSS classes that allow your text to be styled. It is impossible to style text in different ways if it is all in one big element. Each piece of text that needs a different style needs to have a different element around it. Also you need to use divs or or article or section elements to group pieces (like title img description) that you want to treat as a group. Create a visual hierarchy that allows people to quickly scan your content and find what they’re looking for. Make sure there is space between your text and boundaries like lines, bg color changes or image edges. Existing Resources There are a number of Typography Resources on THIS PAGE Make sure to read through that in addition to the current page CSS3 This wasn’t a requirement on the midterm project and technically isn’t on the final project. However you should really start using it as another way to improve your typography. CSS3 ME Choosing Fonts Big Sites There are a lot of fonts on these sites, not all are great. Google Web Fonts Font Squirrel Da Font (be careful, not all fonts here are freely licensed for web font use. Read the licenses.) Fonts.com (Have to pay $ for many, but there is a free program that requires you to put JavaScript on your site that shows a badge and may include advertising, see pricing, and the license agreement) Specialty Sites These are places that only have a few fonts but they are high quality. League of Moveable Type Lists and Articles with Good Fonts If you’re stuck trying to figure out what to do, then look through these sites for some suggestions and inspiration. You don’t have to read all; click through and see what makes the most sense to you. Awesome Fontstacks This is one I just found. It is a tool that helps you build a font stack and then helps you with finding the web fonts for downloand and gives you the CSS to use. Many of them use Font Squirrel fonts so you may want to watch my video on how to download and use them. If you’re really lazy or uninspired then check out their prebuilt font sets. Best Web Fonts Top 10 Open Source Web Fonts Combining Fonts Best Practices for Combining Typefaces Good Web Fonts Articles These articles explain different aspects of typography. Smashing Magazine Typography Articles They have a lot of good resources, many below are from there. The Perfect Paragraph This article is about what you need to know to make a perfect paragraph. It turns out it is really a nice lesson on typography in general, and, even better, it shows examples with CSS so ...
  • Final Resource: Overall Visual Design

    December 3, 2012Christopher SteinThere aren’t a lot of direct resources right now on this one but here is the article I refer to in the requirements: http://www.sitepoint.com/article/principles-beautiful-web-design Some other key points to keep in mind: Make sure that the overall tone of the design fits in with the content of the site. on each page there are different kinds of content. The two main ways to show users these different sections of content is to separate them using space, line, color, alignment and typography. Be consistent with your design choices. For example, a link is one color and style on one page it should also be so on the other pages. And here are the notes from the grading rubric: The design looks good but also focuses attention to content. Users can recognize each page belongs to the same site. Users can easily distinguish one area of the page from another as their eyes scan the page.
  • Final Resource: Web Fonts

    December 3, 2012Christopher SteinFinal Resource: Web FontsWeb Fonts (applied to the page with the @font-face selector in CSS) are one of the more exciting things to happen in the last couple of years to web design. They allow you to use more of the fonts you want and if the user doesn’t have them then their browser can automatically download it. Basic Information Here is a page with some basic information on @font-face and Web Fonts http://webdesign.blogs.peopleio.net/design/typography/font-face/ Google Web Fonts The easiest way to add them is with Google Web Fonts. Here is a video on how to do that: http://www.youtube.com/watch?v=XK4jifUJ75 Some more links about Google Web fonts and more on on our Typography Resources page. Other Web Font Sources Two other sources are Font Squirrel Da Font While Da Font has a lot, be careful. They are not all free and vary in quality. and there are a lot more. Many of the pros use font services like Typekit and Fontdeck (a rticle on them) You can also add your own fonts manually. It is important that you CHECK THE LICENSE before you do this. The next video will show you how you create a web font from a downloaded font but it’s still your responsibility to make sure that you can do it.For example the Adobe fonts, like Adobe Garamond, are NOT licensed for export (unless you buy the license separately). For many of these kind of fonts you will have to use a paid service like Typekit. This video shows how do download and set up a font (downloaded from Da Font and compiled using Font Squirrel).
  • Final Resource: Grids

    December 3, 2012Christopher SteinFinal Resource: GridsGrid Structure is worth 10 points Here are the notes from the grading rubric: A grid is used with both valid and semantic HTML and CSS applied. Grid properly applied to HTML CSS for grid properly linked Content fits inside the grid (intentionally breaking grid for visual effect is OK) You can use the same 960 grid system, http://www.960.gs, we used in class, or you can pick your own system. You just need to use one and I need to see it in use. 960 Grid System This page on the system has many of the same resources as on the current page, but it also goes into more detail about downloading the 960.gs. 960 Grid System Resources Here are more resources: Overview: http://youtu.be/ynkcejrTb20 Using Columns, the Box Model and Float in the 960 Grid System http://www.youtube.com/watch?v=QbShYaK4sf8 960 GS Hands On: http://youtu.be/r2QFh87lShg, uses this zip start.zip Using full width backgrounds: http://youtu.be/3Cif6eCxAi8 CSS BEHIND THE GRID SYSTEM Many of you are not sure on the CSS underlying the Grid System so watch the screencasts that help explain that more clearly. There are three of them and they go from basic CSS (also one I linked to in the CSS section here) to using the 960 grid system. CSS and the Box Model CSS and Positioning with Float More Info Read this tutorial to help you understand 960.gs better if you are having problems http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ CUSTOM GRIDS Here is some information on creating a custom sized grid that uses the same grid classes as the 960.gs (so you can use the size and number of cols you want and still keep what you’ve learned about applying the 960 grid classes). These screencasts show how to use the Variable Grid system to create a grid with the widths and number of columns of your choosing. There are a number of tools out there that help with this but the cool thing about this one is that it writes a CSS file for you that uses the exact same classes as the 960.gs grid system. That way you can use everything your learned about the .container and .grid_x and .alpha and .omega classes but using your own grid dimensions. YouTube Custom Grid Tutorial httpvh://www.youtube.com/watch&v=P7iwf84aTgA These links are to the screencast broken up into three parts. They are also the straight video files so you can right-click and download them. To see the tutorial as one movie watch the YouTube video CustomGridsTutorial_1_CalculatingTheGrid CustomGridsTutorial_2_ApplyingTheGrid CustomGridsTutorial_3_AddingMoreStyles There are a few other tools and links used in the tutorial. All of them are listed here: http://gridulator.com/ http://www.spry-soft.com/grids/ http://webdesign.blogs.peopleio.net/page-elements/forms/ http://griddle.it/ https://github.com/nathansmith/960-Grid-System/raw/master/code/css/min/reset.css
  • Final Project Resources

    November 26, 2012Christopher SteinThis post lists resources for your final project. Due Date The final project is due on Monday, December 17 You must be in class on that day. It counts as the final for this clas and is a required day. You can’t be late with this project. I have to get the grades in right after it’s done. If something happens and you’re having trouble finishing then be in contact with me about it. Requirements Document Read it. This is the official requirements document for the final project. It lists what is required with an explanation and grade breakdown. I will use it to grade your projects. MMP240FinalGradingRubric_FA12.pdf The rest of this page is based on the requirements document HTML This requirement has to do with the HTML you write for the page. View Full Resource CSS This requirement is about the CSS that yo write for the project. View Full Resource Linked CSS stylesheet There is not much to say here. All of your CSS should be in a .css file and linked to your HTML. Also you should have one main stylesheet where the bulk of the CSS that you write is located. You can, and should, have other sheets like the reset stylesheet and the grid stylesheet. Grid View Full Resource @font-face Web Fonts View Full Resource Visual Design: Overall View Full Resource Visual Design: Typography Visual Design: Images Interaction Design Content: Quality and Attribution Content: Structural Requirements Search Functionality Map or Calendar Form Extra Credit: Templates Extra Credit: JavaScript
  • Final Resource: CSS

    November 26, 2012Christopher SteinCSS is worth 10 points. Again I’m looking to see if the CSS is: VALID: There are no errors in the way you wrote the CSS. Web Developer Toolbar also has link to validation (if the page is uploaded) and you can get this through software like Dreamweaver. SEMANTIC: Here I’m mainly looking to see if your CSS class and ID names make sense. They should be general and describe the kind of content that’s being styled and as much as possible not refer to specific design things like Color, Alignment and Size. For example WRONG: .blueTitle{color:blue;} RIGHT: .sectionTitle{color:blue;} This way if you make changes to the design the CSS class and ID names stil make sense. I won’t take off a bunch of points for the following items but they are important in the long run and if someone is looking at you CSS will help differentiate the pros from the amateurs. ORGANIZED: Start with general styles. Usually tags like body, h1..h6, p and so forth. Then There are ids and classes that could appear on every page such as #header, #navigation, #footer, .maincontent, .subtitle And finally you can have sections for classes that are specific to certain pages of the site. Use comments /* comment here */ to help organize the different areas listed above. EFFICIENT: Sometimes when you’re first starting it’s tempting to put classes on everything. Most of the time you can get by with giving id to divs that contain a section and then styling the section. For example if I have a sidebar where I need to style the h2 and p elements differently than the rest of the page (maybe a different color or font-size or whatever) then instead of giving classes or IDs to the h2 and p elements I can just use the ID for the section: <div id=”sidebar”> <h1>lorem ipsum</h1> <p>dolor sit amet</p> </div> #sidebar h1{ color:#fff; } #sidebar p { color: #eee; } LINKS: Writing CSS Selectors: http://webdesign.blogs.peopleio.net/basics/css/css-selectors/ CSS3 CSS3 is not required but something I know you’re all interested in and so here is some information on it. http://www.teachingmultimedia.com/mmp240/css3/ Tools that let you write/edit CSS3: http://css3please.com/ http://css3.me/ http://www.css3generator.com/
  • Final Resource: HTML

    November 26, 2012Christopher SteinHTML is worth 5 points. The two main things I’m looking for here are if you HTML are: VALID This means that you didn’t make any mistakes in how you wrote the tags. The easiest way to check for this is to 1) Have a proper Doctype, 2) run your HTML through a validator. The Web Developer Toolbar in Firefox has a way to do this (you have to have uploaded the document first, it doesn’t work on local files), and software like Dreamweaver also have validity checking tools. You should use HTML5 doctype for yor final project. w3c validator\ SEMANTIC This refers to whether or not you have the correct tag around content. Semantics is about the meaning and I’m looking to see if you titles have h1, h2 etc tags and the copy has p tags, lists have list tags etc. One of the big issues many of you had with the midterm was using <br /> elements to add spacing. The only reason they should be used is inside of a <p></p> element if you need to break to the next line. An address is a good example <p>199 Chambers St. <br/> Room N681 <br/> Media Arts & Technology Department <br/> New York, NY 10007 </p> If you find yourself adding to make space then remove them and use CSS. Often you will need to add a class or id to an element if you need something special like extra space at the end of a page <p>lorem ipsum</p> <p>lorem ipsum</p> <p>lorem ipsum</p> <p class="lastP">lorem ipsum</p> Then you could style it so each paragraph has space after but the last one has extra space: p{ margin-bottom:25px } p.lastP {margin-bottom:50px} ##LINKS to More Information: Writing Basic HTML http://webdesign.blogs.peopleio.net/basics/html The HTML5 Boilerplate This provides a blank page with many of the modern add-ons used by web developers. http://html5boilerplate.com/
  • CSS3 Resources

    November 19, 2012Christopher SteinThis site has general info on CSS3 and also examples http://www.css3.info http://www.css3.info/preview/   CSS3 generators http://css3.me/ http://css3please.com/   This site has great resources on which browser supports what (not just CSS). http://caniuse.com/   TEXT-SHADOW http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects http://www.midwinter-dg.com/permalink-7-great-css-based-text-effects-using-the-text-shadow-property_2011-03-03.html   BOX-SHADOW http://youtu.be/SaXFDl5mRDY   BACKGROUND PATTERN GENERATORS pattern – http://bgpatterns.com/ stripes – http://www.stripegenerator.com/ tartan – http://www.tartanmaker.com/ dots – http://www.pixelknete.de/dotter/   BUTTON GENERATORS http://css-tricks.com/examples/ButtonMaker/ http://www.webarti.com/best-CSS3-button-maker/  
  • Shortcuts

    November 12, 2012Christopher SteinLearning Keyboard Shortcuts can drastically reduce the amount of time you spend typing HTML, CSS, JavaScript, PHP or whatever. Learn them. Use them. Enough said. Some shortcuts are universal: Ctrl+N = New file Ctrl+S = Save Ctrl+O = Open Ctrl+W = Close Ctrl+C = Copy Ctrl+V = Paste Ctrl+Z = Undo Ctrl+Y = Redo Alt+S = Save As Zen Coding is a set of shortcuts that speed up web development. They can be added to many editors and IDEs including Sublime Text, Notepad++, Komodo Edit, Dreamweaver and more (view a big list on the Wikipedia page). It’s more of a shorthand way of writing code than a keyboard shortcut. Here is a good intro: http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/ The shortcuts vary slightly from browser to browser. In Sublime text you hit tab to expand. html:5 + tab = a blank html5 page Sublime Text is a great editor and has many shortcuts of its own. Here are some Sublime Text 2 Shortcuts - Auto Complete for HTML: type tag then hit Tab - Ctrl+Enter = Make new line from any point on previous line - Ctrl+ Click = give you multiple selectors - Ctrl + D = Select the next instance of selected word - Ctrl+P = Find Anything - Ctrl+p + @ = in JS it shows functions, in HTML it shows IDs, in CSS it show all selectors - Ctrl+P + : = Go to line number you type after the : - Shift + Alt + 1 = 1 Pane - Shift + Alt + 2 = 2 Pane - Shift + Alt + 3 = 3 Pane  
view all Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!