Click here to view the Power Point presentation for this project.
advertisement
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/
