Click here to view the Power Point presentation for this project.

Report
MOBILE WEB DESIGN
by
Sean McCarthy
Pete Mcllwee
Advisor
DR. JEFFREY RUFINUS
BACKGROUND
•
•
•
•
•
•
About 30% of mobile phone owners, more than 700
million and growing, have browsed the Internet through their
mobile phones
Predicted to become the next predominant Internet
platform
Many consumer-driven companies have already seen
how promising the mobile platform
Most equipped themselves with a mobile Web site
A mobile Website today is not simply a passing fad
Unfortunate disparity when it comes to the number of
consumer focused mobile Web sites that actually load
properly on phones
GOALS
• Look into what language is best used to create
mobile websites
• Create a working mobile website
• Research QR codes and how they work and can
be generated
• Create a QR code for the mobile website
without using a generator
• Research the very intricate topic of mobile web
design
TIMELINE
Early October - Research and familiarize ourselves with the
design language we will be using and also gain an
understanding of the details of creating a mobile.
Late October - Construct a standard simple website that has
the fundamentals of a complete webpage. Make this page
available to be viewed on a mobile phone
November -Formatting to show correctly, efficiently and
appealing to the eyes on a mobile device
December/Early January - Finalize mobile website,
troubleshoot and check that the website works and looks
decent on different types of phones.
TIMELINE CONT.
Late January - Start researching other aspects of web design
including 'apps' and QR Codes.
February - Begin development of a QR Code that when
scanned will show our website. Finalize mobile website.
March - QR Code and implement its use.
End of March/April - Write 25 page paper and finalize project to
be ready for presentation
Mobile Website
XHTML
XHTML is a stricter and cleaner version of HTML.
What Is XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers.
XHTML vs HTML
•
•
•
•
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
XHTML TAGS
• <li> - specifies a list item
• <br> - line break
• <head><body><html> etc, all required for xhtml even if
empty
• <style> - indicates a section of CSS or other nonHTML/XHTML style code
• <iframe> - creates a 'frame' inside the webpage that is able
to load another page within the site
• <a> - references an anchor ; <a href> - an anchor to a link
Detection Code for Redirection
QR CODES
• QR Codes are images that can be scanned by any phone
with a camera and a reader application.
• They are often used on advertisements and usually direct
people to websites or online sales/offers
• Currently quite a few online generators exist where one can
enter any message or data and it will encrypt a QR Code
automatically for you
• Not very much information is available about creating one
from scratch, which is what we wanted to do.
QR CODES BASICS
Algorithm for Creating Code
The first step for creating a QR Code is to create the data that
will be in the encryption space.
For ours, we were using a 21x21 matrix, so we need 208 bits of
data, 104 for the Message, and 104 for the Error Correction
STEP 1:
To begin we took our Message(cs.widener.edu) and converted it
into number values that are associated with QR:
C
S
.
W
I
D
E
N
E
R
12
28
42
32
18
13
14
23
14 27
.
E
D U
42 14 13 30
Algorithm(Continued)
STEP 2:
Next, we pair these numbers using this formula: (45*a)+b
CS
.W
ID
EN
ER
.E
DU
And convert the result to Binary
0111001000111000111100000100110011011101010001101010100100011110111000001001100111
Algorithm(Continued)
STEP 3:
Next, we have to add a few bits to the beginning of our string to
help the scanners recognize our message
Because it is an alphanumeric sequence, we must add 0010 at
the very beginning.
Then we need to convert the length of our original
sequence(14) to binary (1110). We are creating a Version 1
QR, so we need 9 bits for the length recognizer. So we pad the
left with 0's(000001110)
Final Recognizer Code: 0010 000001110
Algorithm(Continued)
STEP 4:
After adding the recognizer code, we pad the end with up to
four 0's if the resulting binary string is less than 104 characters
We then break up the string into 8 bit words(If the last word is
less than 8, pad it with 0's until it is)
STEP 5:
Finally, for a string of 104 characters, there needs to be 13
words of 8 bits each; if there is less than 13 words, we alternate
adding the words 11101100 and 00010001, which will be
ignored by the scanner but are need for length
FINAL MESSAGE BINARY: 00100000011100100011100011110000010011001101110101000
110101010010001111011100000100110011100000011101100
Algorithm for Error Correction
A 104 bit string of basically redundant data is necessary so that
if a portion of the message data is unreadable, the scanner may
still be able to read it.
STEP 1:
First, we convert all of the 8 bit words from the previous step
into base 10 numbers:
32 114 56 240 76 221 70 169 30 224 153
192 236
These numbers will be used as coefficients for a polynomial
which we will manipulate
Message Polynomial:32x25 +114x24 +56x23 +240x22 +76x21
+221x20 +70x19 +169x18 +30x17 +224x16 +153x15 +192x14
+236x13
Algorithm for Error Correction
STEP 2: Next we generate a Generator Polynomial for use in
the manipulation of the message polynomial. For this, I used an
online tool because it is nearly impossible to create by hand and
it is basically arbitrary.
Generator Polynomial: a0x25 +a74x24 +a52x23 +a176x22 +a100x21
+a86x20 +a100x19 +a106x18 +a104x17 +a130x16 +a218x15 +a206x14
+a140x13 +a78x12
STEP 3: We then convert the Message Polynomial into Alpha
Notation using an log/anti log table(we only need the first
coefficient: a5x25
Algorithm for Error Correction
STEP 4: We then take the first exponent of the current
message polynomial and multiply it by the entire
generator polynomial:
a5x25 +a79x24 +a157x23 +a181x22 +a105x21 +a91x20 +a105x19 +a111x18
+a109x17 +a135x16 +a223x15 +a211x14 +a145x13 +a83x12
STEP 5: Next, we convert this new polynomial back into
standard notation: 32x25 +240x24 +213x23 +49x22 +105x21
+163x20 +26x19 +206x18 +189x17 +169x16 +9x15 +178x14
+77x13 +187x12
Algorithm for Error Correction
STEP 6: Finally, we XOR(bit-wise operation) the current
generator polynomial with the polynomial from the last
step(In this case, the original)
We repeat steps 3 through 6 this until the last exponent is x0
The final coefficients of the final polynomial are the 13
error correction blocks:
222 41 98 86 247 201 122 131 159 60 87 59 100
Data Encryption
The final 208 bit binary string is:
00100000011100100011100011110000010011001101110101000110101010010001111011100000100
11001110000001110110011011110001010010110001001010110111101111100100101111010100000
111001111100111100010101110011101101100100
We can then insert bit by bit into the QR template using
masking patterns.
Masking patterns
Masking patterns cont.
REFERENCES
• http://www.webpagefx.com/design-buildmobile-web-site.html
• http://www.mobileawesomeness.com/
• http://www.w3schools.com/html/html_xhtml.as
p
• http://www.testiphone.com/
• http://www.thonky.com/qr-code-tutorial/

similar documents