Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

 

 

Intro to the Web 412-HTG-03

Course Resources

Topic 12: using jQuery and Lightbox together

Both jQuery and Lightbox use $.

To use both together without conflict, change the $ in jQuery to something else using the following code: (note that $jQ can be anything)

var $jQ = jQuery.noConflict();

Now, when writing your jQuery file use $jQ wherever you would normally use $

// JavaScript Document
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){
//function on links <a>
$jQ("a").click(function(event){
//add a class to your html
//<p class="hideMe">
$jQ(".hideMe").hide("slow");
event.preventDefault();
});
});//end document ready function

 

Topic 11: Engaged Page

Continue working on your Engaged Page.

You should already have:

  • original photos you have taken
  • your written text

Take a moment:

  • check out the brainstorms below
  • share / comment and help each other out

You should work on:

  • doing Photoshop quick fix for your original photos
  • creating a banner
  • defining your site colour scheme
  • deciding on a layout and create the necessary html5 and css pages
  • figure out how you can use jQuery or Lightbox to better communicate your message
  • edit, proofread and fine-tune your message

 

Topic 8: autumn Design Festival

Design Festival is an excellent resource for creative design ideas. This month they have autumn-themed photos, backgrounds and colour schemes.

note for Wednesday's class:

  • finish updating your web tech project
  • read other projects
  • intro to jQuery
    • install jQuery in a folder at the same level as intro to web:
    • root
      • intro_to_web
      • js
        • jquery-1.6.4.min.js
    • do javaScript readings
    • work on javaScript projects

    note for Monday's class:

    • web tech site general feedback
    • site corrections and revisions
    • read others
    • intro to jQuery
    • do javaScript readings
    • work on javaScript projects

Topic 6: project management

Here are some ideas for you to follow up on:

  • your text should be completed by now
  • share your text with your partners and ask for feedback, editing and proofreading
  • decide on a design for both your banner (.psd) and your .css file and share these with your partners
  • create a page with a good name and title, upload and sharee the link with your partners (and add it to your Google Doc)
  • take a photo and write a caption that helps communicate your idea
  • make sure that your page has all the elements as per the assignment details

 

Topic 5: Photoshop

Photoshop Quick Fix:

  • crop for composition
  • adjust colours using levels
  • touch-ups
  • save as .psd (Photoshop document)
  • save for web (.jpg or .png)
  • download (my_fam.jpg)

banners

  • download web_tech_flash_banner.psd
  • download brushes.zip (10mb)
  • extract all to the following location:
    C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Brushes
  • be sure to restart Photoshop if it is already open
  • to select a new brush, right-click the page with the brush tool, then click on the arrow in the top right-hand corner
  • Pro Tip: use layers to be able to adjust opacity of different brushes later

 

Topic 2: HTML5, text, links and images

Practice using W3Schools online tutorial (Intro ... Images)

Learn This:

  • well formulated HTML5
  • <p>
  • <h1>
  • <a href="">
  • <img src="">

I should find your assignment at the following address:

  • http://micromedia.vaniercollege.qc.ca
    /home/s[student_number]/intro_to_web/    index.html (or index.htm)

example site

 

Getting Connected...

You can refer to the following to help configure Dreamweaver to connect to your web server.

login info

 

Bonus: Interview with Max Luzuriaga
(a 15-year-old web designer)

Topic 1: Web Technologies

  • essentials
    • html (hypertext markup language)
    • css (cascading style sheets)
    • javascript
    • .xml (extensible markup language)
  • database tools
    • mySQL (structured query language) & .php (hypertext pre-processor)
    • Microsoft SQL & .asp (active server pages)
  • web plug-ins
    • Flash & ActionScript
    • Java
    • Quicktime
  • development technique
    • AJAX (asynchronous javascript and .xml)
    • jSON (javascript object notation an .xml alternative)
  • CMS (content management system)
    • Drupal
    • Joomla
    • Word Press
  • frameworks & libraries
    • Ruby on Rails
    • MooTools
    • jQuery
  • the cloud
    • dropBox
    • iCloud (coming soon)
    • Google Docs (and Gmail too)

Web 2.0 (Do not choose these for your topic)

    • Facebook
    • YouTube
    • Flickr
    • 500px.com
    • Wikipedia
    • Wiki Leaks

Read the following articles:

HTML5 Primer
HTML5 Tutorials (W3Schools)
Wikipedia: Web 2.0

You may also refer to the following:
Tim 0'Reilly on Web 2.0

Topic 1.5: connecting to the web

  • phone & cable with a modem
    (also, cellular, satellite, microwave)
  • via ethernet or wi-fi (bluetooth?)
  • ISPs in Quebec

accessing a web page

  • enter a URL (i.e. www.vaniercollege.qc.ca)
  • your IP and request is forwarded to a DNS
  • DNS looks up IP address of requested URL
  • request is forwarded to the appropriate web server
  • pages and files are passed back to your IP (computer's location)

launching a new web site

  • register a domain name (DNS)
  • buy a web hosting service
  • set up a web server with a static IP
    (not advertising... but GoDaddy.com and BlueHost.com are two of the more popular [although not perfect] registrars and hosts)

Traceroute example (.pdf)