New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here

Comptr Art & Design II

by: Oswaldo Schmeler DVM

Comptr Art & Design II VCD P374

Oswaldo Schmeler DVM
GPA 3.84

Barton Tyner

Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Barton Tyner
Class Notes
25 ?




Popular in Course

Popular in Visual Arts

This 0 page Class Notes was uploaded by Oswaldo Schmeler DVM on Sunday November 1, 2015. The Class Notes belongs to VCD P374 at Indiana University Purdue University - Fort Wayne taught by Barton Tyner in Fall. Since its upload, it has received 13 views. For similar materials see /class/233540/vcd-p374-indiana-university-purdue-university-fort-wayne in Visual Arts at Indiana University Purdue University - Fort Wayne.

Similar to VCD P374 at IPFW


Reviews for Comptr Art & Design II


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 11/01/15
Sp ri ng 2009 VCD 74 Computer Art and Design ll Introduction to the World Wide Web Web Pages and Web Browsers Notes forJanuary 12 2009 Topics World Wide Web Web Standards Semantic Structure Why Web Standards What Is aWeb Page The Most Basic Web Page What Is an HTML Tag The Twelve Rules of XHTML HTML Elements Validation File Naming Conventions On the Server Side of Things Hypertext Links World Wide Web Global readwrite information space containing documents images multimedia and Webibased applications The Web is not the same as the Internet which includes not only the Web but email and other online services Hypertext format which allows for connections between documents links or hyper lin s Resource Identifiers used to locate particular resources on the network Clientiserver Model Client software or client computer that requests resources or serve ices from a server Markup Language Special characters and code that embed text into structures that cre ate semantic meaning HTTP Hypertext Transfer Protocol required for transmitting documents on the World Wide Web eg httpwwwipfwedu Origins of the World Wide Web VCD P374 Computer Art and Design ll Spring 2009 Tim Berners Lee inventor of the World Wide Web Early 19905 Sp ri ng 2009 VCD 74 Computer Art and Design ll BernerseLee married hypertext to the Internet Nonproprietary free universal technology Growth of the World Wide Web Netscapeihelped popularize the World Wide Web ca 1996 Development of new technologies helped the Web evolve beyond text and flat images Javascripticlientiside scripting Plugiins Flash Shockwave Quicktime Java Applets Serveriside Technologies Common Gateway Interface CGI Perl Java Server Pages Active Server Pages ASP ColdFusion PHP AJAX Asynchronous Javascript and XML7key technology driving today s Web 20 sites How the Web Works Caching A user types a URL Uniform Resource Locator The Domain Name System DNS resolved an IP address eg 1491 642355 with a domain eg wwwipfwedu A Web browser makes an HTTP request to a server for a particular page The server returns the page to the client Web browser The Web browsers renders the page pulling together the resources for that page eg images CSS Javascript multimedia etc Browsers store local versions of resources downloaded from Web pages including HTML pages images CSS files Javascript files etc A browser that requests a previously visited page will only download cached files that have been updated on the server Caching helps improve speed of Web page requests Web Standards World Wide Web Consortium W3 Ciwwww3org Web Standards Projectiwwwwasporg Three Pillars of Web Standards 1 Structure VCD P374 Computer Art and Design ll Spring 2009 HTM LiHyperteXt Markup Language Sp ri ng 2009 VCD 74 Computer Art and Design ll XHTMLiEXtensible Hypertext Markup Language XMLiEXtensible Markup Language 2 Presentation CSSliCascading Style Sheets 1 CSS2iCascading Style Sheets 2 CSS3iCascading Style Sheets 3 current browser support limited 3 Behavior ECMAScript Javascript DOMiDocument Object Model Semantic Structure Use tags for intended purposes Don t use tags for presentational effects ie use CSS to control how HTML elements are presented in a Web document Semantic markup shows content hierarchy Why Web Standards Advantages Forward compatibility Works in current modern browsers and future standardsicompliant browsers o OSrindependent Increased accessibility 0 Content not cluttered up with presentational hacks tables for design tags used for intended purposes Portability 0 One content source 0 Many devices Browsers printer screen projector personal device assistants PDASD 0 Multiple designs for one site Markup remains simple and logical Sites easier to maintain Better document structure Enhances Search Engine Optimization SEO Disadvantages CSS designs sometimes difficulty to deploy Old browsers don t render CSS sites well Browser support can vary HTML Markup Language used to create Web documents Tags are containers used to specify document structure Attributes are added to tags to specify additional information or modify the tags ace tions VCD P374 Computer Art and Design ll Spring 2009 Sp ri ng 2009 VCD 74 Computer Art and Design ll Tags must be properly nested XHTML XHTML is HTML that follows the stricter syntax and rules of XML Extensible Markup Language XHTML l 0 o TransitionaliEasier to validate code 0 StrictiDifficult to validate code 0 Framesetilntended for sites using frames yuck XHTML l l o Strict onlyiDifficult to validate code What Is aWeb Page An electronic document that has a file name and a file extension eg mypagehtml abouthtm AWeb document that is available on aWeb server A basic Web pages consists of 0 a doctype 0 an lthtmgt tag 0 a ltheadgt tag 0 a lttitegt tag 0 a ltbodygt tag The Doctype Short for Document Type Declaration Must appear first in a Web page The doctype declares at what level of XHTML a document adheres to The lth nlgt Element The element that defines a page as an HTML page The ltheadgt Element The ltheadgt element contains information about the page The lttitlegt Element The lttitlegt tag contains the title of the page The title of a document appears in the top left ofthe browser and is the text that is most often used as the pagetitle in search results ltmetagt Elements ltmetagt elements contain additional information about the page Examples include description and keywor s The ltbodygt Element The ltbodygt element contains everything that one sees on the page itself VCD P374 Computer Art and Design ll Spring 2009 4 Spring 2009 VC D 74 Computer Art and Design II The Most Basic Web Page Steal this code ltlDOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quothttp wwww3orq TR xhtmll DTD xhtmllirran ifi naT drdquotgt lthtml xmln5quothtt wwww3or 1999 xhtmlquotgt ltheadgt lttitlegtUntitled Documentlttitlegt ltheadgt ltbodygt ltbodygt lt htmlgt What Is an HTML Tag An XHTML element has an opening and a closing tag A tag begins with an opening angled bracket lt the tag name and a closing angled bracket gt 39 A tag may contain attributes For example lta hrefquothttpwwvmyahoocomquotgt60 toYahoolltagt The a short for anchor is the HTML element the href is an attribute the URL is the content for the href attribute Double quotes contain the attribute content Go to Yahoo is the content that would appear in the page as a hyperlink The ltagt closes the element VCD P374 Computer Art and Design ll Spring 2009 Spring 2009 VC D 74 Computer Art and Design ll HTML Elements Essential Elements lthtmgt All HTML pages begin and end with opening and closingthe lthtmlgt tag ltheadgt The ltheadgt tag contains important information about the document lttitegt Specifies the title of the document Every page should have a unique title ltmetagt The ltmetagt tag provides important information about the page such as description or keywords ltbodygt Defines the beginning and ending ofthe document s body what is visible in the browser Blocklevel Text Elements Headings and Paragraphs lth1gt through lth6gt Headings Designate headings and subheadings of a document Should be used in natural order pgt Use the ltpgt tag for paragraphs ltblockquotegt Use the ltblockquotegt tag for quoting text from other sources ltaddressgt Used for designating page ownership or authorship ltdivgt Used to delineate sections of a document Lists Take advantage of the inherent nature of lists for organizing content In HTML there are three types of lists Unordered Lists Use unordered lists for listing content items that have no specific order VCD P374 Computer Art and Design ll Spring 2009 6 Spring 2009 VC D 74 Computer Art and Design ll Tags ltugt ltHgt Ordered Lists Use ordered lists to show sequence or hierarchy Tags ltogt ltigt Definition Lists Use definition lists to declare a list of terms with definitions or annotations Tags used ltdlgt ltdtgt ltddgt Inline Text Elements ltabbrgt Used for abbreviations ltacronymgt Used for acronyms ltcitegt Used to cite works ltcodegt Used to designate code ltdegt Used to indicate content intended for deletion ltemgt Used to place emphasis on text content ltinsgt Used to show inserted text content ltkbdgt Used to indicate keyboard input ltsampgt VCD P374 Computer Art and Design ll Spring 2009 Spring 2009 VC D 74 Computer Art and Design ll Used to indicate sample content ltspangt Used to indicate grouped inline content ltstronggt Used to provide strong emphasis of content ltsubgt Used for creating subscript characters ltsupgt Used for creating superscripted characters ltvargt Used for denoting variables Blocklevel Page Elements ltbr gt Used to create line breaks without the extra spacing of the ltpgt tag Use sparingly ltnobr gt Used to run tegtltt together lthr gt The lthrgt tag is used to create lines to break up page sections This use of this tag is waning somewhat due to use of CSS borders Tables Use tables to structure tabular data Tags lttablegt ltcaptiongt lttrgt ltthgt lttdgt Comments lt1quot Here is an example of commented text This would appear only in code and would not be rendered in the Web page Comments are helpful for making notes to yourself and others 77gt VCD P374 Computer Art and Design ll Spring 2009 Spring 2009 VC D 74 Computer Art and Design ll Frames Avoid using Image Maps Waning in use due to advanced support of CSS Validation W3CVaidators at httpwwww3org W3C MarkupValidatoriFor validating HTML W3C ChecklinkValidatoriFor validating links W3C CSS ValidatoriFor validation CSS syntax File Naming Conventions Avoid using character spaces in filenames Avoid special characters in file names Use proper file extensions Lowercase filenames Use keywords for file names On the Server Side of Things Popular Server Software 0 Apache 0 Internet Information Server IIS Root directory 0 Topimost directory of aWeb site Index files root file of a directory and often referred to home pages 0 indexhtm O defaulthtm o homehtm less common Hypertext Links Thetag for making hyper links is the ltagt tag anchor tag Absolute URLs For linking to URLs outside the current domain Must use the http protocol Example lta hrefquothttD ahoo indianafo lb quot Fort Wayne Sportsdagt VCD P374 Computer Art and Design ll Spring 2009 9 Spring 2009 VC D 74 Computer Art and Design ll Rootereative Paths For linking to documents within the current domain Paths show the complete directory path without the domain and the http protocol Rootirelative paths always begin with a forward slash Example lta hrefquotaboutcompanystaffhtmlquotgtOur Staffltagt Documentereative Paths For linking to documents within the current domain Paths reflect relative location of documents in relation to one another The designation means llup one level Example lta hrefquotaboutcompanystaffhtmlquotgtOur Staffdagt or lta hrefquotstaffhtmlquotgtOur Staffdagt Linking within a Document Named anchors 0 Example lta namequotservicesquotgt Linking to a named anchor O ltahrefquotservicesquotgtServicesltagt Linking anchor in another document 0 Example lta namequotindexhtmlservicesquotgtServicesltagt Email Linking mailto protocol is required Example lta hrefquotmailtotynerbipfweduquotgtEmail meltagt Targeting Windows 7 lank Launches page in a new window Example lta hrefll ttpwwwgooglecom targetquot7blankquotgtGoogleltagt For Further Learning HTML Dog Companion Site httpwwwhtmldogcom W3Schools at httpwwww3schoolscom7Excellent online tutorials and information W3C HTML SpecificationiThe highly technical but official source on HTML VCD P374 Computer Art and Design ll Spring 2009 10 Sp ri ng 2009 D 74 Computer Art and Design ll Web Image Optimization Notes for January 26 2009 Before You Optimize Images for the Web Always begin with maximum resolution image Web graphics are lowiquality Allows you to keep original highiquality work Clean up image imperfections Dust scratches red eye Noise Make necessary adjustments Color balance Saturation Levels Contrast Adjustments for consideration Gaussian blur for backgrounds helps increase optimization in JPEGs Apply unsharp mask to sharpen areas Downsize image to production size after above steps are considered Maximize cropping Minimize dimensions Always save originals Save original artwork as Photoshop files psd Preserve any layers text layers etc for reuse or recreation of graphics Export image under Save for Web and devices jpg or gif When designing or editing Web graphics always view at actual pixel size 72dpiithe screen resolution of Web pages Factors Determining Graphic File Size Dimensions Finish size Height and width Resolution Pixel densit Pixels per inch 72dpi 300dpi 600dpi 1200dpi 2450dpi Color Amount Range of color Smoothness of continuous tones Sharpness Text Hard edges High contrast VCD P374 Computer Art and Design ll Spring 2009 Sp ri ng 2009 VCD 74 Computer Art and Design ll Web Graphics Dimensions Always in pixels Image Mode Work in ROB mode red blue green channels Resolution Always save images at 72 pixelsinch dpi JPEG Pronounced Jayipeg Joint Photographic Experts Group 247bit 8 bits per ROB channelil 677721 6 colors per pixel Lossy compression High compression ratio Achieve through loss of image quality Image loss takes advantage of limitations of the human eye Loss of detail Ise Areas with less detailed are smoothed No layers Suitable image types Photographs Images with continuous tones Images with many colors Types ofJPEGs Baseline JPEG Topitoibottom scan Progressive JPEG 375 progressive scans File size slightly larger than baseline JPEGs llPsychological factor for load time Challenges of using Sharp edges lose quality Larger file sizes than GIFs Weightedselective optimization inimizes image loss for sharp areas Ideal for photos with selective focus sharp subject blurred background Good solution for photographs with text In Photoshop layers and channels can be used to preserve sharpness GIF Pronounced Giff or Jif Graphics Interchange Format 87bit7256 colors per pixel VCD P374 Computer Art and Design ll Spring 2009 Spring 2009 VC D 74 Computer Art and Design ll LZW compression Higher compression Based on indexed color palette Suitable image types Images with sharp edges Images with low tonal ranges Line art Logos Text art Incidental Graphics BuIIets Buttons Icons Gradients Background images and tiles Transparency option Background transparency through alpha channel Matting Helps smooth the transition between foreground layer and background Ia er Matte color should match target background color in Web page Minimize bitidepth Minimize dithering Consider interlacing similar concept to progressive JPEG above Use weighted optimization Animated GIF Individual GIFs embedded in one file Each layer counts as an individual file thus greatly increasing file size Includes information fortiming and Iooping Each layer can be thought of as a frame in a movie Use selectively and sparingly Background Tile GIF Tiles in the background Seamless edges create illusion of continuity Filter gt Other gt Offset Pronounced l Ping Portable Network Graphics Not as wellisupported in Web browsers as GIF or JPEG Great format for saving files VCD P374 Computer Art and Design ll Spring 2009 Springzoos VCD P 4 Computer Art and Design ll 487bititrue color Compression Transparency Indexed Alpha channelebased Image Sources stockgtltchngihttpjwwwsxchu StockXpertihtthwwwstockxpertcom FamFamFa 39 n 1 r m iStockPhotoihttp www istockphotoco m VCD P374 Computer Art and Design ll Spring 2009 4


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Allison Fischer University of Alabama

"I signed up to be an Elite Notetaker with 2 of my sorority sisters this semester. We just posted our notes weekly and were each making over $600 per month. I LOVE StudySoup!"

Bentley McCaw University of Florida

"I was shooting for a perfect 4.0 GPA this semester. Having StudySoup as a study aid was critical to helping me achieve my goal...and I nailed it!"

Parker Thompson 500 Startups

"It's a great way for students to improve their educational experience and it seemed like a product that everybody wants, so all the people participating are winning."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.