Brief Description of project: This project will be an interactive Javascript. 1. What do you want to accomplish by doing this project?

Transcription

1 Date: 10/9/2013 Title: History of Web Development Brief Description of project: This project will be an interactive Javascript presentation detailing the history of web development from its early days until the present. Submitted by: Dan Deng 1. What do you want to accomplish by doing this project? I hope to better my understanding of Javascript. I have experience building static web pages but dynamic content has always been more of a challenge. Thus I aim to build a complete web app almost entirely in Javascript. 2. What should your audience be able to do or what benefit is there for your audience after viewing/using your product? My audience will have a better understanding of how web development technologies have changed over the years. After viewing this presentation, a user should have all the resources they need to learn how to build their own dynamic website. 3. Who is your target audience? The target audience is anybody who is interested in computers and the Internet, or anyone who was ever curious about how a website is made. The presentation will be designed for an audience without a technical background. Although the presentation is suitable for an audience of all ages and all genders, it will be tailored for teenagers and college students (ages 16

2 22) to enhance their interest in computers and programming. Such skills are becoming increasingly valuable. 4. What will you be presenting/discussing on your website? Some of the contents of the presentation will overlap with the material taught in this course. This presentation will cover HTML, CSS, and Javascript, including background history on their origin and the difference versions they have gone through throughout the years. Extensive focus will be placed on popular, modern frameworks utilizing those three languages such as Twitter Bootstap and jquery. There will also be conceptual elements presented, such as DOM and the CSS box model. In addition, TCP/IP and HTTP will be broken down and explained, as they are very important to learning how client- server communication works. The presentation will also cover server- side languages like PHP, and how they operate in conjunction with the front- end languages. Lastly, the presentation will also briefly touch up on databases as a way to save information for a website. Notable Internet companies, such as Google, Facebook, Twitter and others will be profiled, and their contributions to the field of web development will be recognized. Notable individuals who have made significant contribution to the Internet and web development, such as Tim Berners- Lee, will also be profiled. The presence of known brands in the presentation will make it much more relatable to a regular audience. Many components of the presentation will be interactive it will have buttons, sliders, input forms, and more. These buttons/sliders will trigger various modals or popovers containing more relevant information.

3 5. What approach will you use? My presentation aims to be more like a game than a lecture. My presentation will be animated similar to a Powerpoint, but it will be powered by Reveal.js, a Javascript framework for making beautiful, slide driven presentations. Reveal.js takes user keyboard input to navigate around the presentation. This way, users can play around with the website until they find something interesting and explore topics in a non- linear fashion. Users will be able to explore certain topics in depth, while just skimming over less interesting topics. User interaction will be handled by Angular.js, a client- side Javascript framework for modeling dynamic documents. It replaces certain HTML/CSS components with Javascript templates. Any server level activity (form submission) will be handled by node.js, a server- side Javascript framework. All pages will have a combination of interactive, visual, and text content. Some text or images may only be displayed after the user presses a button. 6. What is the measure of success for your project? I will incorporate Google Analytics into this website in order to track user activity. Google Analytics will allow me to view which pages are receiving the most hits, and even where users are located. If a large number of hits come from areas near universities, then I know the page is a success. In addition, there will be a brief survey at the end of the presentation garnering user feedback. This survey will self- built using various front- end and back languages. Part of the survey will include the ability to rate your experience on a scale from 1-10.

4 Element list: ~10 HTML/CSS pages Image of Google headquarters Image of Facebook headquarters Image of Twitter logo Image of Tim Berners- lee jquery logo Twitter Bootstrap logo Ruby on Rails logo MySql logo Page of text talking about web development in the past Page of text talking about current web development standards Page of text talking about web development in the near future Page of text profiling important Internet Companies Page of text profiling important individuals Page of text explaining HMTL/DOM Page of text explaining CSS Page of text explaining HTTP Google analytics HTML text forms for user feedback ~15 HTML buttons and tabs

5 Resource List All images: Public domain on the Internet All research will be taken from past class assignments and the public domain on the Internet Reveal.js starter code: js/#/ Angular.js starter code: Google Analytics: Node.js starter code: