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 Exam Purdue 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 University C) CS177 Exam Purdue University D) 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(" >>> 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(" c.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 " °" following the temp temploc = weather.find(" °",curloc) tempstart = weather.rfind(">",0,temploc) print "Current temperature:",weather[tempstart+1:templ oc] 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 sound def 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: 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 : starts a paragraph and ends it. identifies the start of a h1 heading and 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 … Finally, we have the body enclosed in … All of the heading and the body nests within a … 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 tag can also be used to set colors. These are actually setting RGB values ! 27

Color Coding in HTML Visit this site to get a brief idea. 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 16 n 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 in hex is E6. 31

Emphasizing your text 32

Examples of Styles 33

Breaking a line 34 Line breaks are specified as

Adding an Image 35 Like break, it is a standalone tag.

36 Final QUESTIONS???