UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Lecture 12 CSS Web2.0 Search UNIVERSITY OF MASSACHUSETTS AMHERST • CMPSCI 120 Fall 2010 Announcements Exam #1 graded Exam #2 rescheduled now tentatively 11/10 Project #2 due November 9th
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Lecture 12
CSSWeb2.0Search
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Announcements
Exam #1 gradedExam #2 reschedulednow tentatively 11/10
Project #2 due November 9th
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html, CSS, Javascript
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Styling backgroundsCSS background properties are used todefine the background effects of anelement.CSS properties used for backgroundeffects:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Some Examples
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Block vs inline elements
Examples of block elements:<h1><p><div>
An inline element only takes up asmuch width as necessary, anddoes not force line breaks.<span><a>
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html <span> and <div> tags
The <span> element is the genericinline element.The <div> element is the genericblock element.Defines a “box” of html
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.
</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. Quisque tristique placerat mi sitamet condimentum. Nulla sed augue nulla. Proin euismodcondimentum ornare.
</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.
</p>
p.small {font-variant: small-caps}
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.
</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. <span>Quisque tristique placeratmi sit amet condimentum.</span> Nulla sed augue nulla.Proin euismod condimentum ornare.
</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.
</p>
p.small {font-variant: small-caps}
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html <span><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesquesuscipit mattis commodo. Sed elementum egestas laoreet.Phasellus diam felis, semper at rutrum vitae, pellentesqueeleifend eros.
</p><p class="small">Morbi augue lorem, lobortis dapibus dictum id, laoreet necrisus. Nullam et nisl diam. <span class=“red”>Quisquetristique placerat mi sit amet condimentum.</span> Nulla sedaugue nulla. Proin euismod condimentum ornare.
</p>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligulasemper. Curabitur adipiscing blandit augue, et commodo leofacilisis ac. Phasellus vulputate, neque ut lobortis elementum,tellus quam convallis odio, in sollicitudin arcu felis adipiscingmassa.
</p>
p.small {font-variant: small-caps}
Example
span.red {color: #ff0000}
span.bigchange {color: #00ff00;font: italic 900 18px "times new roman";}
Example
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Added Interest
Change the cursor
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
html <div><div class="important"><p>Suspendisse dapibus posuere ante quis rhoncus. Pellentesque suscipit
mattis commodo. Sed elementum egestas laoreet. Phasellus diamfelis, semper at rutrum vitae, pellentesque eleifend eros.
</p></div><div class="centerimportant"><p>Morbi augue lorem, lobortis dapibus dictum id, laoreet nec risus. Nullam
et nisl diam. Quisque tristique placerat mi sit amet condimentum.Nullased augue nulla. Proin euismod condimentum ornare.
</p></div>Vivamus suscipit lorem ut ipsum vestibulum eu molestie ligula semper.
Curabitur adipiscing blandit augue, et commodo leo facilisis ac.Phasellus vulputate, neque ut lobortis elementum, tellus quamconvallis odio, in sollicitudin arcu felis adipiscing massa.
</p>
div.important {color: #ff0000}
div.centerimportant {color: #0000ff;text-align: center;}
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
CSS positioning propertiesallow you to position an element
can also place an element behind another, andspecify what should happen when an element'scontent is too big.
elements can be positioned using the top, bottom, left,and right properties.however, these properties will not work unless theposition property is set first also work differently depending on the positioningmethod.
four different positioning methods.Static PositioningFixed PositioningRelative PositioningAbsolute Positioning
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
PositioningStatic Positioningdefaultalways positioned according to thenormal flow of the page and not affectedby the top, bottom, left, and rightproperties.
Fixed Positioningpositioned relative to the browser windowand will not move even if the window isscrolled:Position an element relative to thebrowser window
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
More positioning
Relative Positioningpositioned relative to its normal position.Position an element relative to its normalposition
Absolute Positioningpositioned relative to the first parentelement that has a position other thanstatic. If no such element is found, thecontaining block is <html>:Position an element with an absolutevalue
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Positioning Images
ExamplesSet the top edge of an image usinga pixel valueSet the bottom edge of an imageusing a pixel valueSet the left edge of an image usinga pixel valueSet the right edge of an imageusing a pixel value
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
CSS Floating
an element can only be floated leftor right, not up or down.will move as far to the left or rightas it can.elements after the floating elementwill flow around it, but elementsbefore the floating element will notbe affected.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
CSS Floating Examples:A simple use of the float propertyAn image with border and margins thatfloats to the right in a paragraphAn image with a caption that floats to therightLet the first letter of a paragraph float tothe leftCreate an image gallery with the floatpropertyCreating a horizontal menu
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
<div> positioningAbsolutethe basis for the distance is the sitesbordersif you have it 10 pixels from the top it willbe exactly 10 pixels from the top of thepage.
Relativebased on the bottom of the last thingplaced on your site
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Absolute
div.absoluteposition {position:absolute;bottom:10;left:20;right:20;border:2;border-color:red;border-style:dashed;}
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Relative
div.relativeposition {position:relative;top:40px;left:50px;width:400px;border:3;border-color:green;border-style:dashed;}
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Floatingdiv.floatingposition {float: right;width:100px;border:3;border-color:blue;border-style:dashed;}
Creating a homepage without tables
Example
Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Styling Text
“Decorating” texttext-decoration:
overlineline-throughunderlineblinknone
Aligning texttext-align:
centerleftright
Setting text casetext-transform:
uppercaselowercasecapitalize
Indenting texttext-indent: 1cm
Some Examples
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
All-in-oneThe font shorthand property sets all the fontproperties in one declaration.The propertiesthat can be set, are (in order):
font-style, font-variant, font-weight, font-size/line-height, font-family
normalitalicoblique
normalsmall-caps
normalboldbolderlighter100200300400500600700800900
xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%
family-namegeneric-familyinherit
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Styling Lists
The CSS list properties allow youto:Set different list item markers forordered listsSet different list item markers forunordered listsSet an image as the list itemmarker
http://www.w3schools.com/css/css_list.asp
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Styling LinksLinks can be styled with any CSSproperty (e.g. color, font-family,background-color).Special for links are that they can bestyled differently depending on whatstate they are in. The four links statesare:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user mousesover ita:active - a link the moment it is clicked
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
The CSS Box Model
All HTML elements can beconsidered as boxes.In CSS, the term "box model" isused when talking about designand layout.The CSS box model is essentially abox that wraps around HTMLelements, and it consists of:margins, borders, padding, and theactual content.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
The CSS Box ModelMarginClears an area around the border. The margindoes not have a background color, it iscompletely transparent
BorderA border that goes around the padding andcontent. The border is affected by thebackground color of the box
PaddingClears an area around the content. The paddingis affected by the background color of the box
ContentThe content of the box, where text and imagesappearnd images ap
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
CSS Box Model
width:220px;padding:10px;border:5px solid gray;margin:0px;
do the math:220px (width)+ 20px (left and right padding)+ 10px (left and right border)+ 0px (left and right margin)= 250px Example
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Calculating
The total width of an element shouldalways be calculated like this:Total element width = width + leftpadding + right padding + left border +right border + left margin + right margin
The total height of an element shouldalways be calculated like this:Total element height = height + toppadding + bottom padding + top border+ bottom border + top margin + bottommargin
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Styling
CSS Border PropertiesCSS OutlinesCSS MarginCSS Padding
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
CSS Display
can hide an element can by setting thedisplay property to "none" or thevisibility property to "hidden” these two methods produce differentresults, visibility:hidden hides anelement, but it will still take up thesame space as before.How to hide an element (visibility:hidden)How to not display an element(display:none)How to make a table element collapse
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Adapted fromWeb 101:Third Edition by Wendy G. Lehnert & Richard L. Kopec Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Web 2.0 Taking Charge
Human beings are highly socialand are drawn to communicatingmedia. > 53 million American adultshave used the internet to blog,communicate, post images,share files, or contributecontent
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
World according to xkcd 2007
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
World according to xkcd 2010
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Web 2.0People are the key component of Web2.0 and contribute content in variouswaysVideo files (YouTube)Audio files (podcasts)Personal commentary (blogs, onlineforums)Scholarly information (wikipedia)Categorizing (del.icio.us)
Email is losing ground as the mostpopular internet application to socialnetworks
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Social NetworkingBoyd and Ellison (2007) define social networks as “…web-based services that allow individuals to….construct a public or semi-public profile within abounded systemarticulate a list of other users with whom they share aconnectionview and traverse their list of connections and thosemade by others within the system. The nature andnomenclature of these connections may vary from siteto site.”
From Rob Gibson,Ed.D.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Social Networking in eLearningSocial Networking in eLearningSocial Networking Factoids
Social networks now represent thefastest growing Internet segment –3x the rate of overall Internetgrowth. (2009)
Social networking sites are growingat the rate of 47% annually,reaching 45% of total web users.(2006)
Social networking and blogging arenow the 4th most popular onlineactivities, according to Nielsen’srecently released Global Faces andNetworked Places report. (2009)
From Rob Gibson,Ed.D.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
What Are Search Engines?
huge databases of web page files (and/orindexes) that have been assembledautomatically by machinetwo types of search engines:individual -- compile their own searchabledatabases on the webmetasearchers -- do not compiledatabasessearch the databases of multiple sets ofindividual engines simultaneously
Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Examples
http://www.ask.com/http://www.bing.com/http://www.google.com/
http://www.kartoo.com/http://www.iboogie.tv/ http://www.dogpile.com/
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml
How Do Search Engines Work?compile their databases by employing"spiders" or "robots" ("bots") to crawlthrough web space from link to link,identifying and perusing pages.sites with no links to other pages may bemissed by spiders altogetheronce the spiders get to a web site, theytypically index most of the words on thepublicly available pages at the siteweb page owners may submit their URLsto search engines for "crawling" andeventual inclusion in their databases.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
How Do Search Engines Work?when you search the web using asearch engine, you're asking theengine to scan its index of sites andmatch your keywords and phraseswith those in the texts of documentswithin the engine's database.you are NOT searching the entireweb as it exists at this moment,but a portion of the web, capturedin a fixed index created at anearlier date(s)
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml
What Are The Pros And Cons? Pros:
provide access to a fairly largeportion of the publicly availablepages on the Web, which itself isgrowing exponentially but "How Big Is the Internet?"
best means devised yet forsearching the web.
Cons: the sheer number of wordsindexed by search enginesincreases the likelihood that theywill return hundreds of thousandsof responses to simple searchrequests. they will return lengthy documents in
which your keyword appears onlyonce!!
many of these responses will beirrelevant to your search.
search engines are best atfinding unique keywords,phrases, quotes, andinformation buried in thefull-text of web pages.
the line between searchengines and subjectdirectories is blurring
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml
Are all Search Engines the same?
search engines use custom software programsto search their indexes for matching keywordsand phrases, presenting their findings to youin some kind of relevance rankingsome may be similar, but no two search enginesare exactly the same in terms of size, speed andcontentno two search engines use exactly the sameranking schemesnot every search engine offers you exactly thesame search optionsSearch engines vary substantially on the amountof the internet and the topics crawled, stored andindexed
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Are all Search Engines the same?your search is going to be different on every engine youuse!!difference may not be a lot, but it could be significantestimates put search engine overlap at approximately60 percent and unique content at around 40 percent.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
How Do Search Engines Rank Web Pages?
the set of rules used to rank pages vary from oneengine to anotherthe goal is to return the most relevant pages at thetop of the list
search engines:look for the location and frequency of keywords andphrases in the web page document and, sometimes, inthe HTML META tagscheck out the title field and scan the headers and textnear the top of the documentsome of them assess popularity by the number oflinks that are pointing to sites; the more links, thegreater the popularity, i.e., value of the page.
Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
When do you use search engines?
best at finding unique keywords, phrases,quotes, and information buried in the full-textof web pagesalso useful in retrieving tons of documents. Ifyou want a wide range of responses to specificqueries, use a search enginesearch engines vs. subject directoriessearch engines no longer limit themselves to asearch mechanism alone.they are partnering with subject directories, orcreating their own directories, and returningresults gathered from a variety of other guidesand services as well.
Bare Bones 101: A Basic Tutorial On Searching The Web http://www.sc.edu/beaufort/library/pages/bones/bones.shtml