1

CS 177 Week 12 Recitation Slides

Advanced Text Techniques and Making Text for the Web + (some examII questions)

2

Q21. Suppose you have the following string:

str = "Purdue University"

Which of the following statements will produce the same result of str.find("e")?

A) str.find("e",6)

B) str.find("e",0,len(str))

C) str.rfind("e")

D) str.find("x")

B)

3

Q22. Consider the following list:myList = ["A", "B", "C", "D", "A"] what is the output of the following statements?>>> myList.remove("A")>>> print myList A) ['B', 'C', 'D']B) ['A','B', 'C', 'D', 'A']C) ['B', 'C', 'D', 'A']D) []

C)

4

Q23. Suppose that the file myFile.txt contains the following:CS177 ExamPurdue University And you have the following function read()def read(): file = open("myFile.txt", "rt") content = file.read() print content What is the output of the call to the function read()? A) ['CS177 Exam\n', 'Purdue University']B) CS177 Exam Purdue UniversityC) CS177 Exam Purdue UniversityD) myFile.txt CS177 Exam Purdue University

B)

HyperText Transfer Protocol (HTTP)

HTTP defines a very simple protocol for how to exchange information between computers.

It defines the pieces of the communication. What resource do you want? Where is it? Okay, here’s the type of thing it is (JPEG, HTML, whatever), and

here it is.

And the words that the computers say to one another: Not-complex words … like “GET”, “PUT” and “OK”

5

6

Uniform Resource Locators (URL)

URLs allow us to reference any material anywhere on the Internet. Strictly speaking, any computer providing a protocol is

accessible via a URL. Just putting your computer on the Internet does not mean that all

of your files are accessible to everyone on the Internet. URLs have four parts:

The protocol to use to reach this resource, The domain name of the computer where the resource is, The path on the computer to the resource, And the name of the resource.

7

Opening a URL and reading it

>>> import urllib

>>> connection = urllib.urlopen("http://www.ajc.com/weather")

>>> weather = connection.read()

>>> connection.close()

8

Getting the temperature live

def findTemperatureLive(): # Get the weather page import urllib #Could go above, too

connection=urllib.urlopen("http://www.ajc.com/weather")

weather = connection.read() connection.close() #weatherFile = getMediaPath("ajc-

weather.html") #file = open(weatherFile,"rt") #weather = file.read() #file.close()

# Find the Temperature curloc = weather.find("Currently") if curloc <> -1: # Now, find the "<b>&deg;" following the

temp temploc =

weather.find("<b>&deg;",curloc) tempstart = weather.rfind(">",0,temploc) print "Current

temperature:",weather[tempstart+1:temploc]

if curloc == -1: print "They must have changed the page

format -- can't find the temp"

9

Running it

>>> findTemperatureLive()

Current temperature: 57

10

Using text to map between any media

We can map anything to text. We can map text back to anything. This allows us to do all kinds of transformations:

Sounds into Excel, and back again Sounds into pictures. Pictures and sounds into lists (formatted text), and back again.

11

Mapping sound to text

Sound is simply a series of numbers (sample values). To convert them to text means to simply create a long

series of numbers. We can store them to a file to manipulate them

elsewhere.

12

Copying a sound to text

def soundToText(sound,filename):

file = open(filename,"wt")

for s in getSamples(sound):

file.write(str(getSample(s))+"\n")

file.close()

13

Reading the text back as a sounddef textToSound(filename):

#Set up the sound

sound = makeSound(getMediaPath("sec3silence.wav"))

soundIndex = 1

#Set up the file

file = open(filename,"rt")

contents=file.readlines()

file.close()

fileIndex = 0

# Keep going until run out sound space or run out of file contents

while (soundIndex < getLength(sound)) and (fileIndex < len(contents)):

sample=float(contents[fileIndex]) #Get the file line

setSampleValueAt(sound,soundIndex,sample)

fileIndex = fileIndex + 1

soundIndex = soundIndex + 1

return sound

14

We simply decide on a representation: How do we map sample values to colors?

def soundToPicture(sound): picture = makePicture(getMediaPath("640x480.jpg")) soundIndex = 0 for p in getPixels(picture): if soundIndex == getLength(sound): break sample = getSampleValueAt(sound,soundIndex) if sample > 1000: setColor(p,red) if sample < -1000: setColor(p,blue) if sample <= 1000 and sample >= -1000: setColor(p,green) soundIndex = soundIndex + 1 return picture

Here’s one:

- Greater than 1000 is red

- Less than 1000 is blue

- Everything else is green

15

Any visualization of sound is merely an encoding

16

Lists can do anything!

def soundToList(sound):

list = []

for s in getSamples(sound):

list = list + [getSample(s)]

return list

Going from sound to lists is easy:

17

Pictures to Lists

def pictureToList(picture):

list = []

for p in getPixels(picture):

list = list + [[getX(p),getY(p),getRed(p),getGreen(p),getBlue(p)]]

return list

Why the double brackets? Because we’re putting a sub-list in the list, not just adding a component as we were with sound.

Running pictureToList

>>> picture = makePicture(pickAFile())

>>> piclist = pictureToList(picture)

>>> print piclist[0:5]

[[1, 1, 168, 131, 105], [1, 2, 168, 131, 105], [1, 3, 169, 132, 106], [1, 4, 169, 132, 106], [1, 5, 170, 133, 107]]

18

Can we go back again? Sure!

def listToPicture(list): picture = makePicture(getMediaPath("640x480.jpg")) for p in list: if p[0] <= getWidth(picture) and p[1] <= getHeight(picture): setColor(getPixel(picture,p[0],p[1]),makeColor(p[2],p[3],p[4])) return picture

We need to make sure that the X and Y fits within our canvas, but other than that, it’s pretty simple code.

19

What is HTML???

Language which specifies the format of the text on the world wide web.

a.k.a. Hyper Text Markup Language. Was originally created with the intent of identifying

logical parts of a document (example: header, body etc). Now, HTML is also used to control formatting of the web

page as you see it on the browser.

20

A Markup Language

A markup language means that text is inserted into the original text to identify parts.

In HTML, the inserted text (a.k.a. tags) are delimited with angle brackets <> .

Example of tags : <p> starts a paragraph and </p> ends it. <h1> identifies the start of a h1 heading and </h1> ends

it.

21

22

Parts of a Web Page

Start with a doctype right at the start of the webpage to announce the type of the page (i.e. is it HTML, or XHTML, or CSS etc).

Then comes a heading for the webpage which is enclosed in <head> … </head>

Finally, we have the body enclosed in <body>…</body> All of the heading and the body nests within a <html> …

</html> set of tags.

The Simplest Web Page

23

Creating and Editing HTML Files in JES

24

Creating and Editing HTML Files in JES (continued)…

25

Save the file using an extension of “.html” (or “.htm” if your computer only allows three characters as extension) to indicate that the file is HTML.

Here is the html page associated with the previous code.

What if you forget the DOCTYPE Or an ending tag?

The Browsers are forgiving i.e. the page might still display correctly but this cannot be guaranteed.

The Browsers are smart and have developed to deal with common user errors, but its guess may still be wrong.

Easy solution: get the HTML syntax right.

26

Other tags commonly used

The tags we discussed previously did basic tasks like demarcating and identifying sections.

These tags can do a lot more than that ! For example, the <body> tag can also be used to set

colors. <body bgcolor = “#ffffff” text = “#000000” link =

“#3300cc” alink = “#cc0033” vlink = “#550088”> These are actually setting RGB values !

27

Color Coding in HTML

Visit this site to get a brief idea. http://html-color-codes.info/ The color coding scheme used for HTML is

hexadecimal based. Hexadecimal is base 16 (remember that binary is base

2 and decimal is base 10). Therefore, possible values for a hexadecimal digit is

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

28

Color Coding in HTML (contd)…

One digit can represent 16 values. Therefore, n digits can represent ??? Remember, each of R, G and B takes 256 values. This takes 2 digits for each component. Therefore, each color is specified by 6 digits

For example #a236cf

29

Red

Green

Blue

Color Coding in HTML (contd)…

One digit can represent 16 values. Therefore, n digits can represent 16n values. Remember, each of R, G and B takes 256 values. This takes 2 digits for each component. Therefore, each color is specified by 6 digits

For example #a236cf

30

Red

Green

Blue

A Tiny Tutorial on Hexadecimal

Remember how we converted a decimal to binary by dividing by two repeatedly.

For converting to hexadecimal, instead divide by 16. Lets find the hexadecimal value for 230. 230 in hex is E6.

31

Emphasizing your text

32

Examples of Styles

33

Breaking a line

34

Line breaks are specified as <br\>

Adding an Image

35

Like break, it is a standalone tag. <image src = “flower1.jpg” />

36

Final QUESTIONS???