1 / 24

MOBILE WEB DESIGN

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

toya
Download Presentation

MOBILE WEB DESIGN

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MOBILE WEB DESIGN by Sean McCarthy Pete Mcllwee Advisor DR. JEFFREY RUFINUS

  2. 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

  3. 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

  4. 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.

  5. 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

  6. Mobile Website

  7. 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.

  8. 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

  9. 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 non-HTML/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

  10. Detection Code for Redirection

  11. 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.

  12. QR CODES BASICS

  13. 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     .    E    D   U 12     28      42     32      18     13      14     23     14   27    42   14   13   30

  14. 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

  15. 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

  16. 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

  17. 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

  18. Algorithm for Error Correction STEP 2:Nextwe 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

  19. 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

  20. 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

  21. 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.

  22. Masking patterns

  23. Masking patterns cont.

  24. REFERENCES • http://www.webpagefx.com/design-build-mobile-web-site.html •  http://www.mobileawesomeness.com/ • http://www.w3schools.com/html/html_xhtml.asp  • http://www.testiphone.com/ • http://www.thonky.com/qr-code-tutorial/

More Related