Lecture B3 Style : Algorithmic Thinking Computing and Art : Nature, Power, and Limits CC 3.12: Fall 2007
Functionalia Instructor Chipp Jansen, chipp@sci.brooklyn.cuny.edu Course Web Page http://www.sci.brooklyn.cuny.edu/~chipp/cc3.12/ HW B (Both Parts 1 and 2) DUE Wednesday Oct. 3, 11:59 pm
Office Hours Extra Help My Office Hours : Mondays 12:30 to 1:30 - basement Ingersoll 0317N Bridges Student Resource Center : 0317N Monday 1:30 to 5pm Tuesday 1:30 to 3:30 Wednesday 1:30 to 3:30 Thursday 12:45-1:45, 2:15-3:15
Functionalia Today: HTML Review Style Sheets Algorithmic Thinking
HTML Review Questions about the Lab 1 - and what to do? tags - paragraph, header, bold, etc... lists links images What are comments?
HTML Review Questions about the Lab 1 - and what to do? What are comments? Comments are notes to yourself and others. They are ignored by the web-browser, and they are not visible on the page. How do you write comments in HTML? <!-- This is a comment -->
Style Sheets CSS = Cascading Style Sheets Allows you to control the look-and-feel for your webpages. - Font of Text - Color of Text - Exact Layout of elements.
Two ways: Adding Style to your Page 1. Embedded - use a style tag and put the style rules in the head tag <style type="text/css"> body { color: black; background: white; } </style> ex17.html 2. Linked - create a separate text file that contains the style rules and link to it. <link type="text/css" rel="stylesheet" href="style.css"> and the text file contains the style rules (no style tag) : body { color: black; background: white; } ex18.html
Style Rules body { color: black; background: white; } SAME AS: body { color: black; background: white; }
Style Rules body { color: white; background: black; } rules are written right after each other p { } color: yellow; ex19.html
Style Rules body { color: white; background: black; } names of the tags that are selected by that rule p { } color: yellow;
Use curly-braces to enclose style specifcation body { color: white; background: black; } opening curly-brace closing curly-brace p { } color: yellow;
Attributes and their values are given body { color: white; background: black; } attribute name attribute value p { } color: yellow;
Add Margins - left/right/top/bottom body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; } p { text-indent: 2em; margin-top: 0; ex20.html ex21.html margin-bottom: 0; }
em { font-style: italic; Font Styles bold bolder lighter font-weight: bold; } strong { text-transform: uppercase; uppercase lowercase font-weight: bold; } ex22.html
Font Styles body { font-family: Verdana, sans-serif; } Garamond Times New Roman ex23.html
Divisions Divisions (div) allow for styling blocks of HTML. borders colors naming (class) different divisions div.box { border: solid; border-width: thin; width: 100%; } ex24.html
Unvisited Links Links :link { color: green; } Visited Links :visited { color: purple; } When a Link is clicked a:active { color: red; } When the mouse hovers over the link a:hover { color: blue; } ex25.html
Colors there are some named colors (black, silver, gray, white, maroon, red, purple, magenta, green, lime, olive, yellow, navy, blue, teal, aqua,...) all colors have a six-digit hexadecimal definition: 2 digits each for Red, Green and Blue RGB color table browser safe or web safe colors accommodate older systems that only show up to 256 colors (at one time), so each RGB can only be one of the following: 00, 33, 66, 99, C C, F F (in hex) ColorNames Link
body tag: no style sheet - style the OLD way! <body bgcolor="white" text="black" link="navy" vlink="maroon" alink="red"> where link for unvisited links, vlink for visited links, alink for the color when you click on the link (before you release the mouse) font tag: <font face="sans-serif" color="red" size="5">... </font> ex26.html
what is an algorithm? a step-by-step sequence of instructions for carrying out some task examples of algorithms outside of computing: cooking recipes dance steps proofs (mathematical or logical) solutions to mathematical problems in computing, algorithms are synonymous with problem solving
How to Solve It, by George Polya 1. understand the problem 2. devise a plan 3. carry out your plan 4. examine the solution example: find the oldest person in the class (besides me)
Analysis of Algorithms often, there is more than one way to solve a problem, i.e., there exists more than one algorithm for addressing any task some algorithms are better than others which features of the algorithm are important? speed (number of steps) memory (size of work space; how much scrap paper do you need?) complexity (can others understand it?) parallelism (can you do more than one step at once?)
Big-Oh Big-Oh notation O(N ) means solution time is proportional to the size of the problem (N) O(log2 N) means solution time is proportional to log2 N see examples in Reed page 142
Classic Algorithm: Search sequential search binary search search the Manhattan phone book for Al Pacino : how many comparisons do you have to make in order to find the entry you are looking for? equality versus relativity which will tell you more? which will help you solve the problem more efficiently? can you take advantage of the fact that the phone book is in sorted order? (i.e., an ordered list ) what would happen to your algorithm if the phone book were in random order?
Algorithms and Programming programming languages provide a level of abstraction that is more understandable to humans than binary machine language (0 s and 1 s) assembly languages (in the early 1950 s) provided abbreviations for machine language instructions (like MOV, ADD, S TO) high-level languages (introduced in the late 1950 s) provided more programmer- friendly ways for humans to write computer code (e.g., FORTRAN, LISP)
Machine Language
Assembly Language
C++ Example #include <iostream.h> main() { cout << "Hello World!"; return 0; }
JavaScript <html> <body> <script language=javascript> //says the language is javascript document.write("hello World!"); //prints Hello World! //stop JavaScript Code </script> </body> </html>
Program Translation - translates assembly or high-level languages into binary machine language - two methods: interpretation: reads and translates statements one at a time; doesn t optimize across an entire program; doesn t store executable statements just runs them; error checking only happens at run time, run time can be slow, but there s no compile time compilation: reads and translates entire program, and stores result as an executable file; can optimize; can perform compile time error checking; run-time is fast, but there is compile time
Compile-time vs. Compile Time compile-time (noun): the process of compiling a program from an assembly or high-level language into binary machine language and storing it on the computer s hard disk compile time (adj noun): the amount of time it takes a compiler to translate (or compile ) a program
Run-time vs. Run Time run-time (noun): the process of executing a compiled, stored program run time (adj noun): the amount of time it takes a program to run this is where Big-Oh comes in
Errors errors: can be found at compile-time and at run-time error checking : is done at compile-time
TO DO Homework B (part 1 and 2) - part 2 will be given in Lab on Thursday. READ: Reed, Chapter 8