XHTML – Class Two

tborzecki — Tue, 15 May 2012 16:32:32 +0000

We continued the lesson today with the following topics:

Advanced hyperlinks, such as in-page links
Image optimization and tags

Web Resources

Web Developer Toolbar - a toolbar that adds all kinds of useful web-development tools
Firebug - a plugin that adds additional debugging functionality, especially useful for JavaScript

Files from Class 2

Class 2 Files (zip)

XHTML – Class One

tborzecki — Wed, 02 May 2012 00:39:09 +0000

Today we covered much ground, from introductory background on the web to some of the basic markup tags in XHTML. The tags we have gone over so far were:

, , , , </li> <li><h1-6>, <p>,<strong>,<em></li> <li><a> tags for external links as well as mailto links</li> <li>unordered, ordered and definition lists</li> </ul> <h3>Web Resources</h3> <ul> <li><a href="http://lipsum.com" target="_blank">Lipsum.com</a> – Lorem Ipsum dummy text</li> <li><a href="http://validator.w3.org" target="_blank">W3C Validator</a> – Official W3C HTML Validator</li> <li><a href="http://www.w3schools.com/" target="_blank">W3Schools</a> – HTML & CSS reference site</li> <li><a href="http://www.20thingsilearned.com/en-US" target="_blank">20 Things I learned About Browsers and the Web</a> - Online book that goes over the web and web browsers, produced by the Google Chrome team</li> </ul> <h3>Presentation Slides</h3> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/wddm/imag-596/intro-to-web.pdf" target="_blank">Intro to Web</a> - History of the Web and overview of the technology</li> </ul> <h3>Files from Class 1</h3> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/imag894/class-1.zip" target="_blank">Class 1 Files (zip)</a></li> </ul> </article> <article> <h1>WDDM Class 8</h1> <p>tborzecki — Tue, 17 Apr 2012 12:54:14 +0000</p> <p>In today’s class we will be exploring a few topics:</p> <ol> <li>Browser testing, and troubleshooting techniques</li> <li>IE Conditional Comments and other ways to target specific browsers</li> <li>JavaScript basics and using jQuery</li> </ol> <h3>Online Resources:</h3> <ul> <li><a href="http://www.quirksmode.org/css/condcom.html" target="_blank">Quirksmode IE Conditional Comments</a> - For writing IE-specific Stylesheets</li> <li><a href="https://browserlab.adobe.com/en-us/index.html" target="_blank">Adobe Browser Lab</a> - For testing in many browsers simultaneously (requires Flash Player)</li> <li><a href="http://browsershots.org/" target="_blank">Browsershots</a> - For testing in many browsers simultaneously</li> <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" target="_blank">Firefox Web Developer Toolbar</a> - Adds many useful testing tools to Firefox</li> <li><a href="http://getfirebug.com/" target="_blank">Firefox Firebug Plugin</a> - Adds additional tools to Firefox, particularly JavaScript debugging information</li> <li><a href="http://www.charlesproxy.com/" target="_blank">Charles Web Debugging Proxy</a> - Another utility for capturing information between the browser and server</li> <li><a href="http://jquery.com/" target="_blank">jQuery</a> - A very popular JavaScript library that eliminates much of the annoyance of working with JavaScript, and thus makes writing JS code much easier</li> <li><a href="http://html5boilerplate.com/" target="_blank">HTML 5 Boilerplate</a> - Customizable starter code for an HTML 5 website</li> <li><a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" target="_blank">Paul Irish Conditional Classes</a> - Allows you to use a single stylesheet for all your IE browser fixes.</li> </ul> </article> <article> <h1>Class 12 – Last Class</h1> <p>tborzecki — Wed, 04 Apr 2012 16:48:34 +0000</p> <p>Today we are concluding the course with a work period. Since there have been several questions asked repeatedly, take a look at the list below and make sure your question isn’t answered here:</p> <h3>FAQ</h3> <p>Q: How do I create a horizontal navigation, including spacing and positioning</p> <p>A: See the files from class 11 below.</p> <p>Q: How do I set up a gallery layout and/or lightbox.</p> <p>A: See the files from class 11 below.</p> <p>Q: When I change something in my stylesheet it affects other pages than the one I’m trying to style. How do I fix that?</p> <p>A: Use a unique id name for the elements you are trying to change on specific pages, so that they don’t conflict with the other pages.</p> </article> <article> <h1>WDDM Class 3</h1> <p>tborzecki — Tue, 03 Apr 2012 12:56:34 +0000</p> <h3>Example Site</h3> <p>A demo version of the website we will be building can be found below:</p> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/wddm/imag-596/css-basics/" target="_blank">CSS Basics</a></li> </ul> </article> <article> <h1>WDDM Class 2</h1> <p>tborzecki — Tue, 03 Apr 2012 03:11:10 +0000</p> <p>Today we began with some basic CSS code. Some of the topics:</p> <ul> <li>Different ways to apply CSS code</li> <li>Attaching style sheets</li> <li>Fonts and Colours</li> <li>Using a CSS Reset</li> </ul> <h3>Resources</h3> <ul> <li><a href="http://meyerweb.com/eric/tools/css/reset/reset.css">Eric Meyer CSS Reset</a> – Wipes out all of the default browser styling.</li> <li><a href="http://www.colourlovers.com/" target="_blank">Colour Lovers</a> – A colour and colour palette sharing community.</li> <li><a href="http://kuler.adobe.com/" target="_blank">Adobe Kuler</a> – An official Adobe colour sharing community.</li> <li><a href="http://color.cranf.net/" target="_blank">ColorSynth Axis</a> – Another, older but very cool colour tool.</li> <li><a href="http://www.google.com/webfonts" target="_blank">Google Font Directory</a> – Hundreds of pre-converted free embeddable web fonts, hosted on Google’s servers.</li> <li><a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel</a> - Another font site that features hundreds of free web fonts, as well as a converter tool that allows you to generate your own (licensed) web fonts.</li> </ul> </article> <article> <h1>Class 11 – Finishing Up</h1> <p>tborzecki — Wed, 28 Mar 2012 12:48:19 +0000</p> <p>Today we will be completing the example website. The task list of what we MUST go over today is as follows:</p> <ul> <li>CSS Image Replacement – Applying a graphic to replace a heading with CSS code</li> <li>Positioning Examples – Using a completely different method of placing elements with CSS, in order to achieve different effects.</li> <li>More Pages – Adding additional pages, based on the home page we have built</li> <li>CSS Reset – Creating a “blank canvas” to begin styling on, using the <a href="http://meyerweb.com/eric/tools/css/reset/reset.css" target="_blank">Eric Meyer CSS Reset</a></li> </ul> <div>If we have time today we will also go over:</div> <ul> <li>CSS3 Effects – Using the newest version of CSS to add visual effects to your page</li> <li>Lightbox and jQuery plugins – how you can use javascript to add animation and interactivity to your website</li> </ul> <h3>Files Needed for Today’s Class:</h3> <div> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/ahss3080/class-11-files.zip">Class 11 Files (All Sections)</a></li> </ul> <h3>Final Assignment in PDF Format</h3> <div> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/ahss3080/final-website-execution.pdf">Final Website Execution</a></li> </ul> </div> </div> </article> <article> <h1>WDDM Class 1</h1> <p>tborzecki — Tue, 27 Mar 2012 18:36:57 +0000</p> <p>In today’s lesson, we covered some of the basic HTML tags, as well as document structure. There was a brief lecture about the history of the Web, as well as differences between the web in the 90′s and now.</p> <p>Here are some of the links shown in class:</p> <ul> <li><a href="http://lipsum.com" target="_blank">lipsum.com</a> – Lorem ipsum filler text generator.</li> <li><a href="http://validator.w3.org" target="_blank">W3C HTML Validation Service</a> – Checks your HTML markup for errors.</li> <li><a href="http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html" target="_blank">World’s First Website</a> – The original webpage from which the entire web started.</li> </ul> <h3>Presentation Slides</h3> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/wddm/imag-596/intro-to-web.pdf">Intro to Web</a> – A brief explanation of the history and high level overview of the workings of the web.</li> </ul> </article> <article> <h1>Class 10 – Finishing up and Advanced Topics</h1> <p>tborzecki — Wed, 21 Mar 2012 12:55:21 +0000</p> <p><del>Today we will complete the final elements missing from the example website. Here is a list of topics that will be covered (assuming there is enough time to cover them):</del></p> <p>As it turns out, there is no access to the network drive today so we will postpone the following lessons until next class:</p> <ul> <li>CSS Image Replacement – Applying a graphic to replace a heading with CSS code</li> <li>Positioning Examples – Using a completely different method of placing elements with CSS, in order to achieve different effects.</li> <li>More Pages – Adding additional pages, based on the home page we have built</li> <li>CSS Reset – Creating a “blank canvas” to begin styling on, using the <a href="http://meyerweb.com/eric/tools/css/reset/reset.css" target="_blank">Eric Meyer CSS Reset</a></li> <li>CSS3 Effects – Using the newest version of CSS to add visual effects to your page</li> </ul> <h3>Files from Class</h3> <p>The files from last class can be downloaded here:</p> <ul> <li>Class 9 Files – Unfortunately it seems the file server is down, so I can’t put up the files from last class</li> </ul> <div> <h3>Design Resources</h3> <p>There are plenty of decent quality free stock photography websites. Here is a site that lists 250 of them, some of the links are dead since it is an older list. My favourite is #2 on this list:</p> <ul> <li><a href="http://mediamilitia.com/250-free-stock-photography-sites/" target="_blank">250+ Free Stock Photography Websites</a></li> </ul> <div>The following websites will help you create a colour scheme or palette:</div> <div> <ul> <li><a href="http://www.colourlovers.com/" target="_blank">Colour Lovers</a></li> <li><a href="http://kuler.adobe.com/" target="_blank">Adobe Kuler</a></li> <li><a href="http://color.cranf.net/" target="_blank">ColorSynth Axis</a></li> </ul> <div>Embeddable web fonts can be found here:</div> <div> <ul> <li><a href="http://www.google.com/webfonts#ChoosePlace:select" target="_blank">Google Font Directory</a></li> <li><a href="http://www.fontsquirrel.com/" target="_blank">Font Squirrel (a bit more advanced)</a></li> </ul> <div>Some background image resources:</div> <div> <ul> <li><a href="http://subtlepatterns.com/" target="_blank">Subtle Patterns</a></li> <li><a href="http://www.stripemania.com/" target="_blank">Stripe Mania</a></li> <li><a href="http://www.cgtextures.com/" target="_blank">CG Textures (not necessarily ready for tiling)</a></li> </ul> </div> </div> </div> </div> </article> <article> <h1>Class 9 – Finishing Mockups</h1> <p>tborzecki — Wed, 14 Mar 2012 13:16:25 +0000</p> <p>In today’s class we continued to finish up both the Photoshop Mockup as well as saving the files for web and devices. Knowing which kind of web image to save the your graphics as is very important and can be broken down as such:</p> <ul> <li>JPEG – great for large images with lots of colours and no transparency, such as photos.</li> <li>GIF – great for images with very few colours and limited or no transparency, such as tiles and other layout images.</li> <li>PNG-24 – great for images that have necessary transparent areas, such as logos with drop-shadows and other partial-transparency effects.</li> </ul> <h3>Part 1 of the Final Assignment</h3> <p>As discussed in class, the first part of the final website has been assigned. This is the planning and designing stage of the website, and it will be due on April 8th along with the completed final website. <strong>Please be sure to read the entire outline before beginning, as it is filled with useful information and remember to carefully read all the requirements as they will tell you how I am marking the projects</strong>.</p> <p><em><strong>IMPORTANT: </strong></em><strong>Any final websites submitted without a corresponding Photoshop Prototype will receive and automatic grade of zero. The prototype is proof that you did in fact design the website and is an extemely important part of the design process.</strong></p> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/ahss3080/final-website-prototype.pdf">Final Assignment Part 1 – Photoshop Prototype</a></li> </ul> <h3>Files from last class</h3> <ul> <li><a href="http://thomasborzecki.ca/wp-content/uploads/custom/ahss3080/class-8-files.zip">Class 8 Files</a></li> </ul> </article> </main></body></html>

Thomas Borzecki

XHTML – Class Two

Web Resources

Files from Class 2

XHTML – Class One