Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Final file #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Final file #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
533dedb
Realizar Cambios
Jul 6, 2015
4999d5b
Archivo Final
Marcos-Rodriguezz Jul 6, 2015
2a14029
Update README.md
MRodriguezz Jul 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
# QA-automate-your-page
####Visit my page: http://mrodriguezz.github.io/QA-automate-your-page.
36 changes: 36 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
body {
font-family:Arial;
color: #000000;
background: #ffffff;
text-align: left;
margin: 15px;
padding:25px
}
/*The class header contains the properties of shapes and margins
of letters and picture header page*/
.header {
font-size: 40px;
text-align: center;
border-radius: 20px;
background: #000000;
color: #ffffff;
}
/*Subheader class contains the properties of styles, colors,
shadows and margins of the box content of the page*/
.subheader {
font-size: 25px;
font-family: sans-serif;
box-shadow: 0 0 1em #0000ff;
margin: 10px;
padding:10px;
border-radius: 20px
}
/*The text class contains properties of styles, shadows
and margins of the box content of the page*/
.Text{
box-shadow: 0 0 1em #0000ff;
margin: 15px;
padding:35px;
border-radius: 20px
}

65 changes: 65 additions & 0 deletions html_generator.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
# -*- coding: utf-8 -*-
#arrays store data displayed when generating code
#and showing console information
notes = [['Python and Computer Science Intro', '''Sometimes it can be
difficult to know where to start with a computer program as there is
so much to complete. First you must break down the problem into smaller
pieces and tackle each as their own entity. With code you can precicely
describe the steps required to solve the problem and these steps can be
completed by a computer! A computer is just a machine that can be
programmed, and it can do almost anything so long as a program is
written that can tell it what to do!

At first it may seem strange that we need new languanges in order to
tell a computer what do to, but this is due to a number of inherant
problems with languages such as English; primarily they are too ambiguous
and verbose! So there are a number of programming languages out there to
learn that will enable a person to write instructions, or a "program",
that will tell a computer what to do.'''],

['Debugging', '''When using example code always test it to make sure
it works properly to begin with. If you have problems and need to debug
your own code, just comment it out to begin with so when you get it
working you will be able to see where you went wrong to begin with and
learn from it. Sometimes is is also helpful when debugging code to
introduce print statements so that you can see what variables are set
to at various points throughout your code. This can help identify
where the problem is.

'Debuigging Strategy:'
1) Examine error messages when programs crash
2) Work from example code
3) Make sure examples work
4) Check (print) intermediate results
5) Keep and compare old versions''']]
#the functions used in the code show what is the
#title, the Descripsion and content stored in the arrays, so console display content
def generate_information_HTML(information_title, information_description):
html_text_1 = '''
<div class="concept">
<div class="concept-title">
''' + information_title
html_text_2 = '''
</div>
<div class="concept-description">
''' + information_description
html_text_3 = '''
</div>
</div>'''
all_html_text = html_text_1 + html_text_2 + html_text_3
return all_html_text

def return_HTML_Information(notes):
all_html = ''
num = 0
for item in notes:
information = notes[num]
information_html = generate_information_HTML(information[0], information[1])
all_html = all_html + information_html
num = num+1
return all_html

print return_HTML_Information(notes)



215 changes: 215 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html>
<head>
<!--Use of meta tags for special characters-->
<meta charset="UTF-8">
<!--CSS file called-->
<link rel="stylesheet" href="css/style.css">
<title>Automate Your Page</title>
</head>
<body>
<!--The header, all headers class are major titles in the project-->
<div class= "header">Contents</div>
<!--Subheader class is the one that contains all the content in the pictures entered in my project-->
<div class= "subheader">
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ul>
<li><a href="#PythonIntro">Python and Computer Science Intro</a></li>
<li><a href="#VariablesFunction">Variables, Strings and Functions</a></li>
<li><a href="#Lists">Lists</a></li>
<li><a href="#ProblemSolving">Problem Solving</a></li>
</ul>
</div>
<!--The header, all headers class are major titles in the project-->
<div class= "header">
Python and Computer Science Intro
</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<p>Sometimes it can be difficult to know where to start with a computer program as there is so much to complete. First you must break down the problem into smaller pieces and tackle each as their own entity. With code you can precicely describe the steps required to solve the problem and these steps can be completed by a computer! <b>A computer is just a machine that can be programmed</b>, and it can do almost anything so long as a program is written that can tell it what to do!</p>
<p>Remember that a program really is nothing more that a very specific set of instruction.
</p>
<p> At first it may seem strange that we need new languanges in order to tell a computer what do to, but this is due to a number of inherant problems with languages such as English; primarily they are too ambiguous and verbose! So there are a number of programming languages out there to learn that will enable a person to write instructions, or a "program", that will tell a computer what to do.</p>
<p>Python is a relatively each programming lanugage to start learning and that is what we are going to do next. Writing code in Python means it can be understood by anybody who knows the Python language, but for a computer to understand it the python code must me translated into something a machine can understand. That is what the Python <b>interpreter</b> does, which incidentally is also a <b>program</b>. Python like any other lanuague has a highly defines structure and grammer, which means you must write your code exactly how the Python interpreter expects (or understands it). This of course removes the problem of amiguity.</p>
</div>
<!--The header, all headers class are major titles in the project-->
<div class= "header">Variables, Strings and Functions</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<h1>Variables</h1>
<p>Using a Veriable you can create a name and assign a value to that name. The value of the variable can change depending on what you assign to it, and that assignement may change during code execution i.e. "variables can vary". You use the name of the variable within your code statements, and the execution result will look at the value currently held by that variable. You assign a variable by: Name = Expression.</p>
<p>Also remember that when working with programming languages, "=" does not mean equal to. Instead it means "asssignment"! In addition, common practice suggests that variables should never start with a Capital letter.</p>
</div>
<!--The header, all headers class are major titles in the project-->
<div class= "header">
Strings
</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<h1>Strings</h1>
<p>Strings are one of the most important data types in computer languages. That is why we dedicate a whole chapter to working with strings in Python.</p>
<p>Strings are derived data types. A string in Python is a sequence of characters. Strings are immutable. This means that once defined, they cannot be changed. Many Python methods modify strings. For example the replace() method. They do not modify the original string. They create a copy of a string, which they modify and return to the caller.</p>
</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<h1>Input, Function, Output</h1>
<p>Functions are "self contained" modules of code that accomplish a specific task. Functions usually "take in" data, process it, and "return" a result. Once a function is written, it can be used over and over and over again. Functions can be "called" from the inside of other functions.</p>
<p>Functions <b>"Encapsulate"</b> a task (they combine many instructions into a single line of code). Most programming languages provide many built in functions that would otherwise require many steps to accomplish, for example computing the square root of a number. In general, we don't care how a function does what it does, only that it <b>"does it"!</b></p>
<p>When a function is "called" the program <b>"leaves"</b> the current section of code and begins to execute the first line inside the function. Thus the function <b>flow of control"</b>" is:</p>
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ol>
<li>
<p>The program comes to a line of code containing a <b>"function call"</b>.</p>
</li>
<li>
<p>The program enters the function (starts at the first line in the function code).</p>
</li>
<li>
<p><b>All instructions</b> inside of the function are executed from top to bottom.</p>
</li>
<li>
<p>The program leaves the function and goes back to where it started from.</p>
</li>
<li>
<p>Any data computed and <b>RETURNED</b> by the function is used in place of the function in the original line of code.</p>
</li>
</ol>
<h2>Why do we Write Functions?</h2>
<ol>
<li>
<p>They allow us to conceive of our program as a bunch of sub-steps. <b>(Each sub-step can be its own function. When any program seems too hard, just break the overall program into sub-steps!)</b></p>
</li>
<li>
<p>They allow us to reuse code instead of rewriting it.</p>
</li>
<li>
<p>Functions allow us to keep our variable namespace clean (local variables only "live" as long as the function does). In other words, function_1 can use a variable called i, and function_2 can also use a variable called i and there is no confusion. Each variable i only exists when the computer is executing the given function.</p>
</li>
<li>
<p>Functions allow us to test small parts of our program in isolation from the rest. This is especially true in interpreted langaues, such as <b>Matlab</b>, but can be useful in <b>C, Java, ActionScript, etc.</b></p>
</li>
</ol>
<h2>Steps to Writing a Function</h2>
<ol>
<li>
<p>Understand the purpose of the function.</p>
</li>
<li>
<p>Define the data that comes into the function from the caller <b>(in the form of parameters)!</b></p>
</li>
<li>
<p>Define what data variables are needed inside the function to accomplish its goal.</p>
</li>
<li>
<p>Decide on the set of steps that the program will use to accomplish this goal. <b>(The Algorithm)</b></p>
</li>
</ol>
<!--The h2 tag, I use to put the subtitles in the document-->
<h2>Inputs</h2>
<!--The text class contains all text or paragraphs in the document entered-->
<p>Input usually means the data entered by the end-user of the program. When you use Microsoft Word, you are playing the role of the end-user (sometimes shortened to just plain 'user'). When you play a video game, you are its <b>'end-user'</b>.</p>
<p>Python has two key functions to deal with end-user input, one called raw_input() and one called input(). When a program is running and these functions are called, the system will freeze, waiting for the end-user to enter something.</p>
<p>When the user enters something and hits 'enter', a string is returned from these functions. So on execution of the statement:</p>
<p><b>result = raw_input()</b></p>
<p>Python will wait for the end-user to enter something. If the user types in abc, then the variable result will have 'abc' in it.</p>
<p>Generally, we want to prompt the user for input. You can do this by adding a parameter to the 'raw_input()' call. If you were asking a person's name, you'd write the statement:</p>
<p><b>name=raw_input('please enter your name:')</b></p>
<!--The h2 tag, I use to put the subtitles in the document-->
<h2>Outputs</h2>
<!--The text class contains all text or paragraphs in the document entered-->
<p>is what the program produces. For command-line programs, it's just whatever is printed on the screen. Of course for programs with graphical user interfaces, the output is much more complex.</p>
<p>In Python, the <b>print</b> statement is used for command-line output:</p>
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ul>
<li>
<p><b>print 45</b> #just prints the number 45</p>
</li>
<li>
<p><b>print 'my mother said'</b> #prints the words without the quotes</p>
</li>
</ul>
</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<!--The h2 tag, I use to put the subtitles in the document-->
<h2>Loops If and While</h2>
<p>A <b>"While"</b> Loop is used to repeat a specific block of code an unknown number of times, until a condition is met. For example, if we want to ask a user for a number between 1 and 10, we don't know how many times the user may enter a larger number, so we keep asking <b>"while the number is not between 1 and 10"</b>. If we (or the computer) knows exactly how many times to execute a section of code <b>(such as shuffling a deck of cards)</b> we use a for loop.</p>
<h2>Why While Loops?</h2>
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ol>
<li>
<p>Like all loops, <b>"while loops"</b> execute blocks of code over and over again.</p>
</li>
<li>
<p>The advantage to a while loop is that it will go (repeat) as often as necessary to accomplish its goal.</p>
</li>
<li>
<p>Generic Syntax:</p>
</li>
</ol>
<p><b>while ( condition is true )
<!--Some characters are reserved in HTML.-->
&nbsp;&nbsp;&nbsp;&nbsp;do something<br>
&nbsp;&nbsp;&nbsp;&nbsp;% Note: the "something" should eventually result<br>
&nbsp;&nbsp;&nbsp;&nbsp;% in the condition being false<br>
end</b></p>
<h2>The IF statement</h2>
<p>In order to write useful programs, we almost always need the ability to check conditions and change the behavior of the program accordingly. Conditional statements give us this ability. The simplest form is the if statement, which has the genaral form:</p>
<p><b>if boolean expressions:<br>
<!--Some characters are reserved in HTML.-->
&nbsp;&nbsp;&nbsp;&nbsp;statements</b></p>
<h2>A few important things to note about if statements:</h2>
|<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ol>
<li>
<p>The colon <b>(:)</b> is significant and required. It separates the <b>header</b> of the <b>compound statement</b> from the <b>body</b>.</p>
</li>
<li>
<p>The line after the colon must be indented. It is standard in Python to use four spaces for indenting.</p>
</li>
<li>
<p>All lines indented the same amount after the colon will be executed whenever the <b>BOOLEAN_EXPRESSION</b> is true.</p>
</li>
</ol>
<p>Here is an example:</p>
<p><b>food = 'spam'<br>
if food == 'spam':<br>
<!--Some characters are reserved in HTML.-->
&nbsp;&nbsp;&nbsp;&nbsp;print('Ummmm, my favorite!')<br>
&nbsp;&nbsp;&nbsp;&nbsp;print('I feel like saying it 100 times...')<br>
&nbsp;&nbsp;&nbsp;&nbsp;print(100 * (food + '! '))</b></p>
<p>The boolean expression after the if statement is called the condition. If it is true, then all the indented statements get executed. What happens if the condition is false, and food is not equal to <b>'spam'?</b> In a simple if statement like this, nothing happens, and the program continues on to the next statement.</p>
</div>
<div class= "Text">
<h2>Debugging!</h2>
<p>When using example code always test it to make sure it works properly to begin with. If you have problems and need to debug your own code, just comment it out to begin with so when you get it working you will be able to see where you went wrong to begin with and learn from it. Sometimes is is also helpful when debugging code to introduce print statements so that you can see what variables are set to at various points throughout your code. This can help identify where the problem is.<p>
<h2>Debuigging Strategy:</h2>
<ol>
<li>Examine error messages when programs crash
<li> Work from example code
<li> Make sure examples work
<li> Check (print) intermediate results
<li> Keep and compare old versions
</ol>
</div>
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<div class= "header">
Lists
</div>
<!--The text class contains all text or paragraphs in the document entered-->
<div class= "Text">
<p>A list (called an array in other programming languages) is a tool that can be used to store multiple pieces of information at once. It can also be defined as a variable containing multiple other variables. A list consists of a numbers paired with items. Each item can be retrieved by its paired number. List blocks can be found in the Data blocks palette.</p>
<h2>Items</h2>
<p>Items can be added to or deleted from a list manually or by programming. Holding down shift and pressing enter on a list results in an entry above the previously selected entry. new They can also be added by right clicking the list, clicking <b>'import'</b>, and selecting a plain .txt or Comma Separated Values file. Each line in the file will be an item in the list. They can also be exported in the same way.</p>
<!--The label lists utliza to give an order to the connections and helps the code more understandable and orderly-->
<ul>
<li>
<p><b>list1 = [] #A new empty list</b></p>
</li>
<li>
<p><b>list2 = [1, 2, 3, "cat"] #A new non-empty list with mixed item types</b></p>
</li>
</ul>
</div>
</body>
</html>