1. CM143- WEB CM143-WEB Page Layout live sites HTML Images User Considerations Planning Navigation CSS Architecture File Management Cascading Style Sheets Usability Accessibility Metatags Open Source SEO Search Engine Optimisation -->

2. CM143- WEB Introduction | Page Elements | Files | FTP Who? MMA1 ( that’s you!) and Declan Tuite 00 353 1 700 8368 declan.tuite@dcu.ie Room C2117

3. 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

4. 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.

5. 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

6. 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 1 st : Groups of 2 ‘Character Site’ 2 nd : 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!

7. 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

8. 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

9. 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, ………….

10. 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.

11. 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!!!

12. CM143- WEB Introduction | Page Elements | Files | FTP FTP – getting it live File Transfer Protocol Or Copying from your machine to the server. ………………….a DEMO…………………..

13. 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……………..