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>°" following the
temp temploc =
weather.find("<b>°",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???