Thursday, October 9, 2014

Web Design - Basic elements of a web page


Download the files for this intro web design lesson from here 

How  web pages render. 

Web pages (or web document) are built using plain text files with special syntax.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>
My First Heading</h1>
My first paragraph.
</body>
</html>

They are stored on web servers whether they be on a physical server, cloud server, or some other hosting system. Web servers wait for requests for documents and assets from web browsers. Assets usually consist of images, javascript files, and CSS files.

When a user points their web browser to a particular web address it creates a request to download the web page document to your browser for processing. If the syntax is correct within the web document then the page is rendered in your browser.

How to create a simple web document

1) Download a copy of notepad++ or sublime text 2
2) Create a new document
3) copy and paste this html text into your document

<!DOCTYPE html>
<html>
<body>
<h1>
My First Heading</h1>
My first paragraph.
</body>
</html>

4) Save it as test.html and double click it to open it in your web browser

Parts of a web document

<!DOCTYPE html>
<html>
<head><title>Page 1</title>
<style >
#header {
    background-color:red;
    color:yellow;
    text-align:center;
    padding:10px;
}
#nav {
    line-height:30px;
    background-color:#999999;
    height:350px;
    width:150px;
    float:left;
    padding:15px;
}
#section {
    width:400px;
    float:left;
    padding:15px;
}
#footer {
    background-color:red;
    color:white;
    clear:both;
    text-align:center;
    padding:15px;
}
</style>
</head>
<body>

  <div id="header">
  <h1>Some header</h1>
  </div>

  <div id="nav">
  Page1<br/>
  Page2<br/>
  Page3<br/>
  </div>

  <div id="section">
  <h1>Page 1</h1>
  <p>
  I'm a paragraph
  </p>
  <p>
  I'm a paragraph too</p>
  </div>

  <div id="footer">
  I'm a footer
  </div>
</body>
</html>

Let's go over the above. Our web page is broken down into main elements  which are separated by tags. We use the div tags to divide a html document so we get the layout we desire. Typically a web document is divided so it has a header, menu or navigation , body and footer. This is totally arbitrary but it is a good design because it allows users to navigate your site easily with a menu and there is enough real estate to brand your website and provide content. The style tag allows us to take advantage of CSS. There are few rules here and they directly pertain to the tags we defined in the body tag. As you probably noticed the div tags have id attributes to distinguish them. These allow us to easily apply CSS to them as above.

Exercise:

Try creating the other 2 pages and link them together. So page 1 through 3 are each can link to each other.



Intro to Bootstrap


Try the following example for bootstrap. Get a copy of it from here : http://getbootstrap.com/getting-started/

<!DOCTYPE html>
<html>
<head><title>Page 1</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

</head>
<body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>

      </div>
    </div>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more ></a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details ></a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-default" href="#" role="button">View details ></a></p>
       </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details ></a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>© Company 2014</p>
      </footer>
    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


</body>
</html>

Exercise: try sprucing up the layout we created before using bootstrap. 

Wednesday, June 25, 2014

Pregnancy Quiz Vocab App

Released a new android quiz app to the google play market!

It features over 100 multiple choice questions to help get you ready for your pregnancy.

Content for this quiz app, comes from the Women's Health government website.

Go to the google play store to get the Pregnancy Quiz Vocab App today :)


 




Friday, March 28, 2014

How to set up a test cas server on windows


Set up tomcat 


1)  install tomcat

2) download cas from http://www.jasig.org/cas

3) Extract the download and copy the war file from the modules folder to webapps folder in your tomcat root

4) Create a self-signed certificate with keytool (or get a certificate)

keytool -genkey -keyalg RSA -keysize 2048 -keystore c:\path\to\keystore.jks -alias mykey -validity <days>

Replace <days> with number days the certificate will be valid for.

Answer all the questions and put in a keystore password. This will be used in the tomcat configuration later.
Certain password characters like ampersands may need to be escaped in the tomcat config

4) Edit your server.xml

Add the following line under the <server ..> tag

    <Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true"
                   maxThreads="150" scheme="https" secure="true"
               clientAuth="false" sslProtocol="TLS"  keystorePass='<password here>' keystoreFile="C:/path/to/keystore.jks"/>

5) restart Tomcat and the war should installed

Config CAS


6)  Open the webapps/cas-server-webapp-version/web-inf/deployerConfigContext.xml file

Comment out the bean

SimpleTestUsernamePasswordAuthenticationHandler

like this

<!--<bean
class="org.jasig.cas.authentication.handler.support.SimpleTestUsernamePasswordAuthenticationHandler" />-->

7)

Add the generic authentication method:

<bean class="org.jasig.cas.adaptors.generic.AcceptUsersAuthenticationHandler">
   <property name="users">
      <map>
            <entry key="testuser" value="test" />
</map>
</property>
</bean>


Under the authenticationHandlers tag.

8) Copy the cas-server-support-version.jar to webapps/cas-server-webapp-version/web-inf/lib folder

9) Restart tomcat

10) you should be able to login by going to the following url:

https://server-ip:8443/cas-server-webapp-version/login



Tips for the CAS clients to avoid redirect loops


CAS clients are pretty particular about the ssl certificates. If the certificate is not trusted by the web application using your CAS server you may get redirect loops.

To avoid this buy a certificate or put your self-signed certificate in the trusted store on the computer where the web server is.


Helpful links

To set up CAS you have a good knowledge of SSL, tomcat and java keystores, especially if you want to do proxy authentication. There are many links below that can shed some light on these concepts and related issues.

Saturday, March 1, 2014

GIT 101

I apologize in advance. I'm a lot more familiar with svn.

In the process of playing with git, I put together some steps on how to accomplish some basic git tasks. The main goal is to set up a repository on a server and get your developer stations synching with it.

Git is a little bit of a change from svn and make take a little getting used to.

How to set up a git repository and configure for ssh on LInux.

From the command line: (you can check by typing whereis git )
If you don't already have git installed

1) Download git

 wget --no-check-certificate https://github.com/git/git/archive/master.zip

2) unzip git-master
3) cd git-master
4) make
5) make install
6) make sure git is in your path
May want to edit your ~/.bashrc or whatever loginscript you have to edit your path.
Or you can just create a link to it in one of your bin folders : /bin, /usr/local/bin, etc.

To create a repository on the server

1) Make sure git is in your path
Create a new git folder for your projects.
mkdir git
2) cd git
3) create a new project directory
mkdir project1.git
4) cd project1.git
5) git init --bare


To push your code onto the remote repository
1) git remote add origin ssh://username@server_ip/home/pathto/git/project1.git
2) git push


To get the project onto another machine and commit changes
1) git clone ssh://username@server_ip/home/pathto/git/project1.git
2) git remote add origin ssh://username@server_ip/home/pathto/git/project1.git
3) git add whatever_file_you_changed_or_added
4) git commit -m "message here"
5) git push

To update your local copy 
1) git pull origin master
This calls git fetch and merge to get the  latest changes.

Other commands
To see your git commit log :
git log


For windows you may want to install the google code project msysgit

Reference links

* http://code.google.com/p/msysgit/
* http://stackoverflow.com/questions/5136381/how-do-i-add-a-remote-git-repository-to-an-ubuntu-server
* http://gitref.org/creating/#init

Wednesday, May 29, 2013

How to manually add entity to edmx

Recently had to add entities manually to edmx file since using the "update model from database" feature kept erasing mappings.

The edmx was originally generated using Huagati edmx tool :  http://www.huagati.com/dbmltools/ which I didn't have.

Steps to manually table to edmx:

Note: you should have some entities in your edmx file already so you can follow their naming conventions and patterns.

1) Open the edmx file with a xml editor
2) navigate to the SSDL section and add a new EntitySet tag under EntityContainer
3) also in SSDL within EntityContainer, create a new EntityType tag
the property tags will match the column names for the database table


4) In CSDL, under EntityContainer, create an EntitySet tag
5) Now add the EntityType also under EntityContainer
6) Save and open in the designer so you can add the mappings in (map model to database fields).

Environment I used:

Visual Studio 2012
Entity Framework 5

Good references: 


Sunday, April 28, 2013

Convert xml formatting using python

Need a script to convert from one xml formatting to another.


For instance,

Change this:

<subSection name="tag1" title="tag 1 title" >
</subSection>

To:

<subForm name="tag1form" title="tag 1 title" >
<section name="tag1" >

</section>
</subForm>


I tried doing this with bash but it didn't seem feasible since I wanted to change the name of xml attribute values. sed at first was the obvious choice.

Here was my attempt with sed but it's not done:



#$1 input file

while read line
do
echo $line | sed -e 's/subSection/<subForm/g'  -e 's/<\/subSection/<\/subForm/g'
done < $1

A quick and dirty solution seemed more likely in python:


#usage python convert_xml.py source_file.xml > converted_file.xml

import sys
import re

formNameMatch = re.compile('[nN]ame= *["\'][a-zA-Z0-9_\-]+["\']')

def ProcessXML(file):
f = open(file,'r')
for line in f.readlines():
ProcessLine(line)

def ProcessLine(line):

if re.search(r'<subSection',line):
if re.search(r'subSections',line):
line = re.sub(r'subSections','subForms',line)
print line
return

line = re.sub(r'subSection','subForm',line)

nameMatch = formNameMatch.search(line)
if nameMatch != None:
name = nameMatch.group(0)
nameForm = re.sub(r'"$','Form"',name)
nameForm = re.sub(r'\'$','Form\'',nameForm)
line2 = formNameMatch.sub(nameForm,line)
print line2
print " <sections>"
print " <section ",name," >"

else:
print "ERROR!!!"
elif re.search(r'<\/subSection *>',line):
print " </section>"
print " </sections>"
line = re.sub(r'subSection','subForm',line)
print line
elif re.search(r'<\/subSections>',line):
print re.sub(r'subSections','subForms',line)
elif re.search(r'multiSubSection',line):
line = re.sub(r'subSection','subForm',line)
line = re.sub(r'SubSection','SubForm',line)
nameMatch = formNameMatch.search(line)
if nameMatch != None:
name = nameMatch.group(0)
nameForm = re.sub(r'"$','Form"',name)
nameForm = re.sub(r'\'$','Form\'',nameForm)
line2 = formNameMatch.sub(nameForm,line)
print line2
else:
print line


def main(*args):
if len(args) != 2:
print "must supply file to process"
return
ProcessXML(args[1])

if __name__ == "__main__":
main(*sys.argv)



Wednesday, March 20, 2013

New update to Common Sense Tips App - view categories

Have you lost touch with reality and need a boost in common sense? This app may be for you. It downloads common knowledge regarding different subjects which you go page through. You can even add your own! Also, you can look up more info on the tip if you are curious. Use this tool as a daily source of common source. New!!! Now you can view tips by category!



See common sense tips app here on the market !

Select the category you want to view tips for