WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS

Size: px
Start display at page:

Download "WEB DEVELOPMENT IMMERSIVE HTML & WEB FUNDAMENTALS"

Transcription

1 HTML & WEB FUNDAMENTALS

2 TOPICS How the Web Works The Development Process Separation of Concerns Work Flow Habits Getting to know HTML elements Validation 2

3 HOW THE WEB WORKS Request/Response Rendering in the browser Local / Remote Frontend / Backend Development 3

4 REQUEST / RESPONSE 4

5 CONVERSATION: PASSING HTML, CSS, & JS 5

6 RENDERING IN THE BROWSER Each browser has its own rendering engine to interpret and display the markup 6

7 RENDERING IN THE BROWSER Top to bo8om, le: to right 7

8 LOCAL / REMOTE 8

9 FTP (FILE TRANSFER PROTOCOL) Things you will need to connect: Ftp Address User login Password Should be provided by your host company or server admin. 9 INTRODUCTION TO WEB DEVELOPMENT

10 DEVELOPMENT Front end (client-side) HTML CSS Javascript Back end (server-side) Ruby PHP Python PERL C++ Node.js 10

11 DEVELOPMENT PROCESS Work Cycle Planning Stages 11

12 A TYPICAL WEB DEVELOPMENT CYCLE User- Experience (UX) InformaCon Architecture (IA) Design Development 12

13 1 UX " Who is our target audience? How do we know if the user is hitting their goals? What are the most important features of this site? 13

14 1 UX " Business Needs User Needs Ideal Experience Best PracCces 14

15 2 IA " A model or blueprint for the site Resulting in deliverables such: wireframes flow diagrams sitemap 15

16 2 IA : The Blueprint" Sitemaps & Flow Diagrams Establish flow and order Wireframes & Content Define the user interaccon and ease the handoff process to the creacve team 16

17 SMALL SITE 17

18 LARGE SITE 18

19 HAND DRAWN 19

20 BRAINSTORMING 20

21 FUNCTIONAL 21

22 MINIMAL 22

23 IPHONE 23

24 3 DESIGN Wireframes become design comps 24

25 3 DESIGN Each wireframe template, becomes a comp template Homepage Blog 2 column top 1 column bo8om 2 column top 2 column bo8om 25

26 4 Comps become graphics & real text FRONT END DEVELOPMENT general- assembly- logo.png Real Text: General Assembly offers classes, and events at the interseccon of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned praccconers, we offer a robust curriculum focused on 26

27 5 BACK END DEVELOPMENT Interacts with database and executes commands accng as a controller that mediates between the database model and the front end users view. If we go to and search for a pair of shoes, the visual display of the images, the price and the green bu8on "Add To Cart" is all part of the front- end. Now, when I click "Add To Cart" and this an item is moved to my shopping cart in the backend there is some logic wri8en that says something like: "The user just clicked a bu8on, so add this item temporarily to the database and remember this item for the user." The backend takes care of the accons and the direccons of how and where to store data. 27

28 SEPARATION OF CONCERNS HTML = structure (content) CSS = style Javascript = behavior 28

29 SITE ORGANIZATION 29

30 HTML BASICS Syntax Document Structure Content Tags Element Display 30

31 SYNTAX 31

32 SYNTAX 32

33 BASIC DOCUMENT STRUCTURE <html> <head> Document metadata </head> <body> Document contents </html> </body> 33

34 CONTENT TAGS Heading Elements <h1>largest Heading</h1> <h2>... </h2> <h3>... </h3> <h4>... </h4> <h5>... </h5> <h6>smallest Heading</h6> 34

35 CONTENT TAGS Text Elements <p>this is a paragraph</p> <br> (line break) <hr> (horizontal rule) <pre>this text is preformatted</pre> 35

36 CONTENT TAGS Text Elements Logical Styles <em>this text is emphasized</em> <strong>this text is strong</strong> <code>this is some computer code</code> 36

37 DEPRECATED TAGS L <b>bold</b> <i>italic</i> <u>underline</u> <s>strike through</s> <menu>creates a menu</menu> <center>centers content</center> <applet>creates an applet</applet> <font>font style</font> 37

38 CONTENT TAGS Unordered list <ul> <li>first item</li> <li>next item</li> </ul> 38

39 CONTENT TAGS Ordered list <ol> <li>first item</li> <li>next item</li> </ol> 39

40 CONTENT TAGS Definition list <dl> <dt>first term</dt> <dd>definition</dd> <dt>next term</dt> <dd>definition</dd> </dl> 40

41 IMAGES File Types Resolution & Color Mode Compression Attributes 41 INTRODUCTION TO WEB DEVELOPMENT

42 COMMON FILE TYPES GIF (Graphics Interchange Format) JPG (JPEG) (Joint Photographic Experts Group) PNG (Portable Network Graphic) BMP (Bitmap) SVG (Scalable Vector Graphic) 42 INTRODUCTION TO WEB DEVELOPMENT

43 LOSSY VS LOSSLESS Lossless data compression makes use of data compression algorithms that allows the exact original data to be reconstructed from the compressed data Lossy data compression does not allow the exact original data to be reconstructed from the compressed data. 43 INTRODUCTION TO WEB DEVELOPMENT

44 GIF (GRAPHIC INTERCHANGE FORMAT) Lossless compression that simplifies color pallette to reduce file size. Best for sharp edged graphics with smaller range of colors. (ex: text, simple logos, and icons) Not good for complex gradients or millions of colors (ex: photos) 44 INTRODUCTION TO WEB DEVELOPMENT

45 JPG (JOINT PHOTOGRAPHIC EXPERTS GROUP) Lossy compression that reduces file size by loss in image fidelity. Best for photographs and paintings of realistic scenes with smooth variations of tone and many colors. Not as sharp at depicting text, and icons as GIF or PNG. 45 INTRODUCTION TO WEB DEVELOPMENT

46 PNG-8 (PORTABLE NETWORK GRAPHIC 8 BIT) Lossless data compression that was meant to replace GIF. PNG-8 works well with text, icons, and logos with sharp edges and simplified color palettes. Creates much larger file sizes on photos than JPGs. 46 INTRODUCTION TO WEB DEVELOPMENT

47 PNG-24 (PORTABLE NETWORK GRAPHIC 24 BIT) A higher 24 bit version of PNG. Excellent results for images with transparency, which makes it work well for UI buttons. Good at both sharp edged simplified palettes and large color range gradients. Will create a larger file size than JPG for photos however. 47 INTRODUCTION TO WEB DEVELOPMENT

48 BMP (BITMAP) Left over from the days of oldver vesions os OS2 and Windows, Bitmaps for web use dithering, pattern or noise inclusion to reduce file size. Good for making retro web 1.0 graphics. Not ideal for maintaining clarity in web images at reasonable file sizes. 48 INTRODUCTION TO WEB DEVELOPMENT

49 SVG (SCALABLE VECTOR GRAPHIC) Lossless format that can optionally be defined as vector points instead of pixels allowing scaling. Good for scalable graphics. Has limited support in older versions of Internet Explorer 8 and below. 49 INTRODUCTION TO WEB DEVELOPMENT

50 CHOOSING IMAGE RESOLUTION There are only 72 pixels per inch on your screen. Web = 71 dpi (ppi) Print Newspaper = 100 dpi (ppi) Print Magazine = 300 dpi (ppi) 50 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

51 CHOOSING COLOR MODES Our screens display colors in RGB. Web = RGB (Red, Green, Blue) Print = CMYK (Cyan, Magenta, Yellow, Black) 51 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

52 IMAGE TAG <img src= myimage.jpg" alt="alternate Text" title= Display Title width= 800" height= 600" /> 52 [NAME OF PROGRAM] CERTIFICATE PROGRAM [DATE OF LECTURE]

53 LINKS Attributes (href, target) Relative vs Absolute Types (url, named anchor, mailto) 53 INTRODUCTION TO WEB DEVELOPMENT

54 LINK TAGS <a href=" is a Link</a> <a href=" <img src="url" alt="alternate Text"> </a> <a </a> A named anchor: <p id="tips">useful Tips Section</p> <a href="#tips">jump to the Useful Tips Section</a> 54 INTRODUCTION TO WEB DEVELOPMENT

55 RELATIVE VS ABSOLUTE <a href=" is an absolute url Link</a> VS <a href= about.html">this is a relative url Link</a> Relative urls, link to content inside the same site and provides a file path relative to the relationship between the two files. Whether internal to the site or on an external domain, absolute urls provide the full http url in the file path. 55 INTRODUCTION TO WEB DEVELOPMENT

56 ELEMENT DISPLAY 56

57 META DATA Keywords Descriptions OGP (open graph protocol) 57 INTRODUCTION TO WEB DEVELOPMENT

58 KEYWORDS Comma seprated list of terms to improve search engine optomization. <meta name="keywords" content="wikipedia,encyclopedia" /> 58 INTRODUCTION TO WEB DEVELOPMENT

59 DESCRIPTION Paragraph description of your site page. Google displays first 69 characters of the description in the search results under the site title and url. <meta name="description" content=" " /> 59 INTRODUCTION TO WEB DEVELOPMENT

60 OGP (OPEN GRAPH PROTOCOL) Enables any web page to become a rich object in a social graph. <meta property="og:title" content="blue Valentine"/> <meta property="og:type" content="movie"/> <meta property="og:url" content=" <meta property="og:image" content="/images/facebookthumb.jpg"/> 60 INTRODUCTION TO WEB DEVELOPMENT

61 W3C VALIDATION h8p://validator.w3.org/ 61

62 62 INTRODUCTION TO WEB DEVELOPMENT

38 Essential Website Redesign Terms You Need to Know

38 Essential Website Redesign Terms You Need to Know 38 Essential Website Redesign Terms You Need to Know Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you re getting ready

More information

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013

MassArt Studio Foundation: Visual Language Digital Media Cookbook, Fall 2013 INPUT OUTPUT 08 / IMAGE QUALITY & VIEWING In this section we will cover common image file formats you are likely to come across and examine image quality in terms of resolution and bit depth. We will cover

More information

Web Design Foundations (2015-16)

Web Design Foundations (2015-16) Course Description Web Design Foundations is a course that prepares students with work-related web design skills for advancement into postsecondary education and industry. The course is intended to develop

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

CompuScholar, Inc. Alignment to Tennessee Web Design Foundations Standards

CompuScholar, Inc. Alignment to Tennessee Web Design Foundations Standards CompuScholar, Inc. Alignment to Tennessee Web Design Foundations Standards Tennessee Course Details: Course Name: Primary Career Cluster: Course Code: Credit: Grade Level: Teacher Resources: Web Design

More information

MMGD0203 Multimedia Design MMGD0203 MULTIMEDIA DESIGN. Chapter 3 Graphics and Animations

MMGD0203 Multimedia Design MMGD0203 MULTIMEDIA DESIGN. Chapter 3 Graphics and Animations MMGD0203 MULTIMEDIA DESIGN Chapter 3 Graphics and Animations 1 Topics: Definition of Graphics Why use Graphics? Graphics Categories Graphics Qualities File Formats Types of Graphics Graphic File Size Introduction

More information

ART 170: Web Design 1

ART 170: Web Design 1 Banner Design Project Overview & Objectives Everyone will design a banner for a veterinary clinic. Objective Summary of the Project General objectives for the project in its entirety are: Design a banner

More information

GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak

GKG3013 Web Design. Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak GKG3013 Web Design Jong Sze Joon& Auzani Zeda Mohamed Kassim Faculty of Applied and Creative Arts Universiti Malaysia Sarawak Learning Unit 3 Web Design Basics Unit Learning Objectives The aim of this

More information

Web Publishing Guidelines

Web Publishing Guidelines An Artist s Digital Toolkit Allan Wood, for educational use only Web Publishing Guidelines Setting Up Files for the Web When creating files to be used for the Web, the measurement settings should be in

More information

A Basic Summary of Image Formats

A Basic Summary of Image Formats A Basic Summary of Image Formats Merciadri Luca Luca.Merciadri@student.ulg.ac.be Abstract. We summarize here the most used image formats, and their respective principal applications. Keywords: image formats,

More information

designed and prepared for california safe routes to school by circle design circledesign.net Graphic Standards

designed and prepared for california safe routes to school by circle design circledesign.net Graphic Standards Graphic Standards Table of Contents introduction...2 General Usage...2 Logo lockups: color...3 LOGO LOCKUPS: GRAYSCALE...4 Minimum Staging Area...5 Minimum Logo Size...6 Type Family...7 Color Palettes...8

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

Links. Blog. Great Images for Papers and Presentations 5/24/2011. Overview. Find help for entire process Quick link Theses and Dissertations

Links. Blog. Great Images for Papers and Presentations 5/24/2011. Overview. Find help for entire process Quick link Theses and Dissertations Overview Great Images for Papers and Presentations May 26, 2011 Web Tips Definitions Using the Michigan Tech logo Photography 101 Great images from others Great images you create PDF conversion Final words

More information

Image Resolution. Color Spaces: RGB and CMYK. File Types and when to use. Image Resolution. Finding Happiness at 300 dots-per-inch

Image Resolution. Color Spaces: RGB and CMYK. File Types and when to use. Image Resolution. Finding Happiness at 300 dots-per-inch Image Resolution Color Spaces: RGB and CMYK File Types and when to use Image Resolution Finding Happiness at 300 dots-per-inch Rules to remember Text should be 400dpi at the final size in the layout. Images

More information

Digital Imaging and Image Editing

Digital Imaging and Image Editing Digital Imaging and Image Editing A digital image is a representation of a twodimensional image as a finite set of digital values, called picture elements or pixels. The digital image contains a fixed

More information

How to Manage Your Eservice Center Knowledge Base

How to Manage Your Eservice Center Knowledge Base Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

Logo Standards Guideline

Logo Standards Guideline Logo Standards Guideline TABLE OF CONTENTS Nurturing The Brand 1 Logo Guidelines 2 Correct Usage 2 Color Guidelines 6 How to Use the Provided Logo Files 9 Glossary 10 NURTURING THE BRAND THE FOLLOWING

More information

ACE: Illustrator CC Exam Guide

ACE: Illustrator CC Exam Guide Adobe Training Services Exam Guide ACE: Illustrator CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks

04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via

More information

Essential Graphics/Design Concepts for Non-Designers

Essential Graphics/Design Concepts for Non-Designers Essential Graphics/Design Concepts for Non-Designers presented by Ana Henke Graphic Designer and Publications Supervisor University Communications and Marketing Services New Mexico State University Discussion

More information

Smithsonian Institution Archives Guidance Update SIA. ELECTRONIC RECORDS Recommendations for Preservation Formats. November 2004 SIA_EREC_04_03

Smithsonian Institution Archives Guidance Update SIA. ELECTRONIC RECORDS Recommendations for Preservation Formats. November 2004 SIA_EREC_04_03 SIA Smithsonian Institution Archives Guidance Update November 2004 ELECTRONIC RECORDS Recommendations for s SIA_EREC_04_03 Highlights Highlights of SIA_EREC_04_03, an update on electronic record preservation

More information

Scanning and OCR Basics

Scanning and OCR Basics Scanning and OCR Basics Scan Text Documents into Word 2003 using OCR Software 1. Place the document to scan face down on the flatbed scanner. 2. Launch Microsoft Word 2003 for Windows. 3. Select Acquire

More information

Comparison of different image compression formats. ECE 533 Project Report Paula Aguilera

Comparison of different image compression formats. ECE 533 Project Report Paula Aguilera Comparison of different image compression formats ECE 533 Project Report Paula Aguilera Introduction: Images are very important documents nowadays; to work with them in some applications they need to be

More information

Adjusting Digitial Camera Resolution

Adjusting Digitial Camera Resolution Adjusting Digitial Camera Resolution How to adjust your 72 ppi images for output at 300 ppi Eureka Printing Company, Inc. 106 T Street Eureka, California 95501 (707) 442-5703 (707) 442-6968 Fax ekaprint@pacbell.net

More information

Optimizing graphic files

Optimizing graphic files Optimizing graphic files Introduction As soon as I started using web-authoring tools, I realized that I should be careful to use graphics on the web. Well-designed graphics usually make the web site more

More information

SOMERS POINT BRAND IDENTITY STYLE GUIDE

SOMERS POINT BRAND IDENTITY STYLE GUIDE SOMERS POINT BRAND IDENTITY STYLE GUIDE WHAT IT IS The new Somers Point logo will be the single most recognizable icon used to represent our City. WHY IT MATTERS Our logo immediately identifies our brand.

More information

How To Create A Website In Drupal 2.3.3

How To Create A Website In Drupal 2.3.3 www.webprophets.com.au PO Box 2007 St Kilda West Victoria Australia 3182 Phone +61 3 9534 1800 Fax +61 3 9534 1100 Email info@webprophets.com.au Web www.webprophets.com.au Welcome to the Drupal How to

More information

Websites for Small Business. Copyright 2005 Three Rivers Internet

Websites for Small Business. Copyright 2005 Three Rivers Internet Websites for Small Business Why your business needs a website Today, over 60% of Americans use the Internet. We use it to communicate, to learn, to shop and to buy. It is just as important in our lives

More information

How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For

How To Change Your Site On Drupal Cloud On A Pcode On A Microsoft Powerstone On A Macbook Or Ipad (For Free) On A Freebie (For A Free Download) On An Ipad Or Ipa (For How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit

DREAMWEAVER BASICS. A guide to updating Faculty websites Created by the Advancement & Marketing Unit DREAMWEAVER BASICS A guide to updating Faculty websites Created by the Advancement & Marketing Unit Table of content Tip: Click on the links below to go straight to the desired section The W (Web Services)

More information

CREATING WEB PAGES USING HTML INTRODUCTION

CREATING WEB PAGES USING HTML INTRODUCTION CREATING WEB PAGES USING HTML INTRODUCTION Web Page Creation Using HTML: Introduction 1. Getting Ready What Software is Needed FourSteps to Follow 2. What Will Be On a Page Technical, Content, & Visual

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Chapter 10: Multimedia and the Web

Chapter 10: Multimedia and the Web Understanding Computers Today and Tomorrow 12 th Edition Chapter 10: Multimedia and the Web Learning Objectives Define Web-based multimedia and list some advantages and disadvantages of using multimedia.

More information

REVISED JUNE 2011. PLEASE DISCARD ANY PREVIOUS VERSIONS OF THIS GUIDE. Graphic Style Guide

REVISED JUNE 2011. PLEASE DISCARD ANY PREVIOUS VERSIONS OF THIS GUIDE. Graphic Style Guide REVISED JUNE 2011. PLEASE DISCARD ANY PREVIOUS VERSIONS OF THIS GUIDE. Graphic Style Guide 1 Introduction 2 Logo Fonts 4 Logo Color 6 Logo Size & Clear Space 8 Logo Composition 10 Logo Application 16 Corporate

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission

Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified

More information

Creating a website using Voice: Beginners Course. Participant course notes

Creating a website using Voice: Beginners Course. Participant course notes Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an

More information

Pizza SEO: Effective Web. Effective Web Audit. Effective Web Audit. Copyright 2007+ Pizza SEO Ltd. info@pizzaseo.com http://pizzaseo.

Pizza SEO: Effective Web. Effective Web Audit. Effective Web Audit. Copyright 2007+ Pizza SEO Ltd. info@pizzaseo.com http://pizzaseo. 1 Table of Contents 1 (X)HTML Code / CSS Code 1.1 Valid code 1.2 Layout 1.3 CSS & JavaScript 1.4 TITLE element 1.5 META Description element 1.6 Structure of pages 2 Structure of URL addresses 2.1 Friendly

More information

Adobe Certified Expert Program

Adobe Certified Expert Program Adobe Certified Expert Program Product Proficiency Exam Bulletin Adobe Photoshop CS4 Exam # 9A0-094 ACE Certification Checklist The checklist below will help guide you through the process of obtaining

More information

LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES

LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES Updated 3/15/2013 4:07 PM LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES The League of Women Voters logo, like our name, is our identity. It conveys the full collective power of the LWV mission to the public,

More information

Web Design I. Introduction. This first exercise will cover the following concepts: Tutorial Topics

Web Design I. Introduction. This first exercise will cover the following concepts: Tutorial Topics Web Design I Web Enhancement XHTML/CSS Tutorial One Getting Started With the Internet Introduction Tutorial Topics This is the first of a series of tutorials to assist students enrolled in the XHTML/CSS

More information

Web Development. How the Web Works 3/3/2015. Clients / Server

Web Development. How the Web Works 3/3/2015. Clients / Server Web Development WWW part of the Internet (others: Email, FTP, Telnet) Loaded to a Server Viewed in a Browser (Client) Clients / Server Client: Request & Render Content Browsers, mobile devices, screen

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group

Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group Graphic Design Basics Shannon B. Neely Pacific Northwest National Laboratory Graphics and Multimedia Design Group The Design Grid What is a Design Grid? A series of horizontal and vertical lines that evenly

More information

Print Services User Guide

Print Services User Guide Print Services User Guide Understanding Artwork for Print 1 Preferred Formats: Preferred formats should contain only vector-based graphics and text, and/or high-resolution images. Low resolution images

More information

PaperlessPrinter. Version 3.0. User s Manual

PaperlessPrinter. Version 3.0. User s Manual Version 3.0 User s Manual The User s Manual is Copyright 2003 RAREFIND ENGINEERING INNOVATIONS All Rights Reserved. 1 of 77 Table of Contents 1. 2. 3. 4. 5. Overview...3 Introduction...3 Installation...4

More information

Tips for optimizing your publications for commercial printing

Tips for optimizing your publications for commercial printing Tips for optimizing your publications for commercial printing If you need to print a publication in higher quantities or with better quality than you can get on your desktop printer, you will want to take

More information

To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing.

To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing. Web Training Course: Web Editing - How to use the Content Management System (CMS). Version 1.0 Draft October 2006 Version 1.1 March 2007 Version 1.2 April 2007 Course Rationale: The University is currently

More information

ACADEMIC TECHNOLOGY SUPPORT

ACADEMIC TECHNOLOGY SUPPORT ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...

More information

UNIVERSITY OF CALICUT

UNIVERSITY OF CALICUT UNIVERSITY OF CALICUT SCHOOL OF DISTANCE EDUCATION CCSS UG (SDE) V SEMESTER OPEN COURSE INTRODUCTION TO MULTIMEDIA (For the UG candidates with core course other than BMMC) QUESTION BANK 1. Compression

More information

JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT. Test Code: 3750 Version: 01

JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT. Test Code: 3750 Version: 01 JOB READY ASSESSMENT BLUEPRINT WEB DESIGN - PILOT Test Code: 3750 Version: 01 Specific Competencies and Skills Tested in this Assessment: Internet Basics Describe the process of information exchange between

More information

NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK

NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 1 NURSING 3225 NURSING INQUIRY WEB SITE DEVELOPMENT GUIDE BOOK Nursing 3225 Web Dev Manual Page 2 N3225: Nursing Inquiry Student Created Group Website Addresses (1 of 2)

More information

Your Own Web Page: Quick and Dirty

Your Own Web Page: Quick and Dirty Your Own Web Page: Quick and Dirty A Special Language for the Web In the early 1990 s web pages were mostly described using a special purpose language, called Hyper- Text Markup Language, HTML HTML provides

More information

WORKING WITH REALVIEW WELCOME TO REALVIEW

WORKING WITH REALVIEW WELCOME TO REALVIEW WELCOME TO REALVIEW This guide outlines how to supply different materials for the digital version of your publication. Some of the specifications in here may not be relevant to your publication depending

More information

Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x

Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x Official JSN Epic PRO v2.0 Configuration Manual version for Joomla! 1.5.x This documentation included in the JSN Epic PRO Pack is release under Commercial Proprietary license and not intended for public

More information

Software Requirements Specification For Real Estate Web Site

Software Requirements Specification For Real Estate Web Site Software Requirements Specification For Real Estate Web Site Brent Cross 7 February 2011 Page 1 Table of Contents 1. Introduction...3 1.1. Purpose...3 1.2. Scope...3 1.3. Definitions, Acronyms, and Abbreviations...3

More information

Missing cat website HTML&CSS. The Mission:

Missing cat website HTML&CSS. The Mission: Missing cat website HTML&CSS 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.

More information

Macromedia Dreamweaver 8 Developer Certification Examination Specification

Macromedia Dreamweaver 8 Developer Certification Examination Specification Macromedia Dreamweaver 8 Developer Certification Examination Specification Introduction This is an exam specification for Macromedia Dreamweaver 8 Developer. The skills and knowledge certified by this

More information

Job Ready Assessment Blueprint. Web Design. Test Code: 2750 / Version: 01. Copyright 2011. All Rights Reserved.

Job Ready Assessment Blueprint. Web Design. Test Code: 2750 / Version: 01. Copyright 2011. All Rights Reserved. Job Ready Assessment Blueprint Web Design Test Code: 2750 / Version: 01 Copyright 2011. All Rights Reserved. General Assessment Information Blueprint Contents General Assessment Information Written Assessment

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

Title: Front-end Web Design, Back-end Development, & Graphic Design Levi Gable Web Design Seattle WA

Title: Front-end Web Design, Back-end Development, & Graphic Design Levi Gable Web Design Seattle WA Page name: Home Keywords: Web, design, development, logo, freelance, graphic design, Seattle WA, WordPress, responsive, mobile-friendly, communication, friendly, professional, frontend, back-end, PHP,

More information

SCANNING, RESOLUTION, AND FILE FORMATS

SCANNING, RESOLUTION, AND FILE FORMATS Resolution SCANNING, RESOLUTION, AND FILE FORMATS We will discuss the use of resolution as it pertains to printing, internet/screen display, and resizing iamges. WHAT IS A PIXEL? PIXEL stands for: PICture

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

CMS Basic Training. Getting Started

CMS Basic Training. Getting Started The (Content Management System), was designed to allow most people in an organization to contribute to or edit their website(s). Utilizing a set of templates and stylesheets, users can add or edit information

More information

Image Optimization GUIDE

Image Optimization GUIDE Image Optimization GUIDE for IMAGE SUBMITTAL Images can play a crucial role in the successful execution of a book project by enhancing the text and giving the reader insight into your story. Although your

More information

What Resolution Should Your Images Be?

What Resolution Should Your Images Be? What Resolution Should Your Images Be? The best way to determine the optimum resolution is to think about the final use of your images. For publication you ll need the highest resolution, for desktop printing

More information

IT3504: Web Development Techniques (Optional)

IT3504: Web Development Techniques (Optional) INTRODUCTION : Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

WordPress and HTML Basics

WordPress and HTML Basics WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress

More information

Office of Creative Services. Tuck Visual Identity. A reference guide to Tuck s logos and visual identification standards

Office of Creative Services. Tuck Visual Identity. A reference guide to Tuck s logos and visual identification standards Office of Creative Services Tuck Visual Identity A reference guide to Tuck s logos and visual identification standards Tuck Visual Identity Guide Table of Contents Introduction.....................................................1

More information

ACE: Dreamweaver CC Exam Guide

ACE: Dreamweaver CC Exam Guide Adobe Training Services Exam Guide ACE: Dreamweaver CC Exam Guide Adobe Training Services provides this exam guide to help prepare partners, customers, and consultants who are actively seeking accreditation

More information

Checklist of Best Practices in Website

Checklist of Best Practices in Website Checklist of Best Practices in Website An educational guide for anyone responsible for website performance and search engine optimization. Specialists in Direct & Digital Marketing Checklist of Best Practices

More information

Support/ User guide HMA Content Management System

Support/ User guide HMA Content Management System Support/ User guide HMA Content Management System 1 Contents: Access Page 3 Editing Pages Page 4 Adding/Editing Text Page 7 Adding/Editing Images Page 9 Adding/Editing Files Page 11 Adding a Page Page

More information

Creating Print-Ready Files

Creating Print-Ready Files A GUIDE TO Creating Print-Ready Files Our People. Your Vision. Let s Create. What is a Print-Ready File? A print-ready file allows a printer to produce your project quickly and efficiently. At Kopytek,

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

IT3503 Web Development Techniques (Optional)

IT3503 Web Development Techniques (Optional) INTRODUCTION Web Development Techniques (Optional) This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development

More information

Fundamentals of Web Design (One Semester)

Fundamentals of Web Design (One Semester) Fundamentals of Web Design (One Semester) In this course students are introduced to the basics of web page design. Topics include information about the World Wide Web, copyright and e Commerce as well

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information

The following guidelines will help ensure that our identity is used properly and effectively.

The following guidelines will help ensure that our identity is used properly and effectively. Logo Style Guide All uses of the Colleges and Institutes Canada logo must comply with the Identity Style Guide and be approved by Communications and Information Services. Please send a PDF or JPG to the

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Advanced Web Design COURSE OUTLINE

Advanced Web Design COURSE OUTLINE Advanced Web Design COURSE OUTLINE 1. Course Title: Advanced Web Design 2. CBEDS Title: Other visual communications/graphics course 3. CBEDS Number: 5798 4. Job Titles: Web Design Technicians Desktop Publishers

More information

Responsive Web Design Creative License

Responsive Web Design Creative License Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.

More information

Teacher Assessment Blueprint. Web Design. Test Code: 5934 / Version: 01. Copyright 2013 NOCTI. All Rights Reserved.

Teacher Assessment Blueprint. Web Design. Test Code: 5934 / Version: 01. Copyright 2013 NOCTI. All Rights Reserved. Teacher Assessment Blueprint Web Design Test Code: 5934 / Version: 01 Copyright 2013 NOCTI. All Rights Reserved. General Assessment Information Blueprint Contents General Assessment Information Written

More information

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK

More information

USING THE INTRO (SPLASH) PAGE

USING THE INTRO (SPLASH) PAGE USING THE INTRO (SPLASH) PAGE Your DIY Template can be used to create multiple websites using the same company name. You can create separate websites for weddings, portraits, art etc. The splash page allows

More information

Lesson 1 Quiz. 3. The Internet is which type of medium? a. Passive b. Broadcast c. One-to-one d. Electronic print

Lesson 1 Quiz. 3. The Internet is which type of medium? a. Passive b. Broadcast c. One-to-one d. Electronic print Lesson 1 Quiz 1. Which technology trend in Web development can be defined as a group of XMLbased technologies that enable computers using different operating systems and software to easily exchange information

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene.

Graphic Design. Background: The part of an artwork that appears to be farthest from the viewer, or in the distance of the scene. Graphic Design Active Layer- When you create multi layers for your images the active layer, or the only one that will be affected by your actions, is the one with a blue background in your layers palette.

More information

Getting Familiar with HTML Email

Getting Familiar with HTML Email Getting Familiar with HTML Email This guide will help familiarize you with the use of HTML in email communications. What is HTML? A. Hyper Text Markup Language. B. Programming language used to create Web

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL

An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL An Emailcenter briefing: Can your customers read your email newsletters? An overview of designing HTML emails for Hotmail, Yahoo, Outlook, Lotus Notes and AOL November, 2004 Emailcenter research has shown

More information

So you say you want something printed...

So you say you want something printed... So you say you want something printed... Well, that s great! You ve come to the right place. Whether you re having us design and edit your work, or you fancy yourself a designer and plan to hand over your

More information

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

Common Online Advertising Terms Provided by ZEDO, Inc.

Common Online Advertising Terms Provided by ZEDO, Inc. 3rd Party Ad Tag 3rd Party Redirect Action Action Tracking Tag Activity Ad Dimension Ad Hoc Report Ad Network Ad Tag Advanced Report Advertiser Advertiser Summary Report Advertiser Type Allocate per Ad

More information

OFFICIAL GRAPHIC STANDARDS MANUAL

OFFICIAL GRAPHIC STANDARDS MANUAL OFFICIAL GRAPHIC STANDARDS MANUAL Published July 2011 by USA Synchro 132 E. Washington Street, Suite 820 Indianapolis, IN 46204. The USA Synchro logo is a trademark of United States Synchronized Swimming,

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Digitisation Disposal Policy Toolkit

Digitisation Disposal Policy Toolkit Digitisation Disposal Policy Toolkit Glossary of Digitisation Terms August 2014 Department of Science, Information Technology, Innovation and the Arts Document details Security Classification Date of review

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information