CM143 - WEB - DCU Moodle Archive 2010

Download Report

Transcript CM143 - WEB - DCU Moodle Archive 2010

CM143
<html>
<head>
<body>
- WEB
<title>CM143-WEB</title></head>
<!--publishing online user consideration
functionality <em> Page Layout live sites
HTML Images User Considerations
Planning <br> Navigation <h1> CSS
Architecture File Management Cascading
Style Sheets Usability Accessibility
Metatags <body> Open Source SEO
Search Engine Optimisation -->
</body>
</html>
CM143
- WEB
Introduction | Page Elements | Files | FTP
Who?
MMA1 ( that’s you!) and
Declan Tuite
00 353 1 700 8368
[email protected]
Room C2117
CM143
- WEB
Introduction | Page Elements | Files | FTP
What?
Producing websites.
Code focused not software. (HTML/XHTML/CSS)
Navigation
Looking at page structure.
Site Architecture
Usability
SEO
Accessibility
Getting media online.
User Consideration
CM143
- WEB
Introduction | Page Elements | Files | FTP
Where?
Here, DCU Labs & anywhere. (WWW)
You can develop, edit and upload from
DCU
Home
internet café
any WiFi enabled area ( Starbucks / McDonalds)
No shortage of software / Tools
Not only tools as in DCU but many open source tools also.
CM143
- WEB
Introduction | Page Elements | Files | FTP
When?
Here, Now and lots of work outside class too!
Approx 1.5 – 2hrs needed each week outside class / lab
times
Overview of Weeks
Weeks 1-5 Basics:
Getting pages lives
Linking – pages => sites
Images ( how to get live and appropriate use)
CSS – Cascading Style Sheets – formatting / look and feel
Weeks 7-12 Detail and Higher level:
Asessability, Usability, SEO
Multiple platforms: Print, TV , Handheld
Embedding media - More on images
CM143
- WEB
Introduction | Page Elements | Files | FTP
How?
Lectures: Principles, Demos & Q + A
Lab Sessions: Basic Skills and Demos
Independent Learning: time ( approx 1.5 – 2hrs per week)
Assignments: x 2
1st: Groups of 2 ‘Character Site’
2nd: Merged with CM144 groups of 3
“All work produced by students will be presented and
maintained as live sites, which will be both viewable and
accessible by the public.”
Lots of trial and error – but with thinking!
CM143
- WEB
Introduction | Page Elements | Files | FTP
Page Elements: Objects
Surface Items:
Text Images Space!! Color Links (text/image) Forms
Beneath the surface:
Html -Hypertext Markup Language
Scripts (Javascript etc)
CSS
Embedded Objects:
Flash Movies, Shockwave, Video, Applets
Audio
CM143
- WEB
Introduction | Page Elements | Files | FTP
Page Elements: Human Consideration
User Experience:
Aesthetics
Usability
Clarity
Conforming to user expectations ( or not)
Writing Quality
Image Quality
CM143
- WEB
Introduction | Page Elements | Files | FTP
Files
Graphics Still:
-JPEG – good if you have gradients ( photos ‘real’)
-GIF – good for line drawings / illustrations
-PNG – has ‘alpha layer’ – transparency option.
Structure and Style:
-HTML can either be .htm or .html
-CSS Cascading Style sheets.
Embedded files:
Moving images: SWF, Mov, Mpg……
Video: MPG, MOV, FLV….
Interactive: SWF, Applet, DCR, ………….
CM143
- WEB
Introduction | Page Elements | Files | FTP
Files - viewing
Browsers ( a player for web files?) – lots of browsers
-Firefox
-Internet Explorer
-Chrome
-Safari
-Opera
-SeaMonkey
-Camino
Not all agreeing on just how to implement HTML, CSS etc.
CM143
- WEB
Introduction | Page Elements | Files | FTP
Files – viewing -Lots of machines and screens.
Platforms:
PC, Mac, Handheld, Print……….(TV, Screen readers…)
Resolution:
the maximum number of pixels that can be displayed on a
monitor, expressed as
(number of horizontal pixels) x (number of vertical pixels)
800X600
1024×768
1280 x 960
1600 x 1200
Connections:
Broadband, Dial-up, WiFi, WiMax, Cable….
Speeds count!!!
CM143
- WEB
Introduction | Page Elements | Files | FTP
FTP – getting it live
File Transfer Protocol
Or
Copying from your machine to the server.
………………….a DEMO…………………..
CM143
- WEB
Introduction | Page Elements | Files | FTP
FTP – getting it live
Important notes:
You need your users name and password
You need a client
( in PC labs in DCU we us ‘WSCP’ / in Mac ‘Fetch’)
You need to convert that address so that you can get to it
through a browser and send the URL to others ( friends,
very proud mom/dad etc.)
…………DEMO……………..