web systems i itws 2110 & csci 4961 - fall 2013 7/27/13web systems i - fall 20131

Web Systems I - Fall 2013 1

Web Systems I

ITWS 2110 & CSCI 4961 - Fall 2013

7/27/13


Who?Instructor: Richard M. Plotka

Office location: Amos Eaton Room 133Telephone number: (201)-214-6061Office hours: Mondays 6-8 PM, Thursdays

2:30-3:30 PME-mail address: [email protected] : shen.lung LinkedIn & FB & G+ : [email protected]

Teaching Assistant: Karthik AbimanyuTA office location: ITWS Lab – Lally 205TA office hours: Wed 2:00-4:00pmTA e-mail: [email protected] 7/27/13

mailto:[email protected]

mailto:[email protected]


What? Where? Web Systems I : ITWS 2110 & CSCI4961

Lally Hall Room 104

7/27/13


When? How?Mondays and Thursdays from 4:00 PM to

5:50 PMNew format – 2 1:50 classes – separate lab is

no more!Mondays : Lectures (generally)Thursdays : Labs (generally)Labs must be submitted by midnight before

next Thursday class.Labs will be done individually, but you may

collaborate with your group : more on this...Homework2 Quizzes – No FinalTerm Project – group presentations : more on

this ...7/27/13


Introduction to the courseSyllabus

Course Structure

Requirements/Expectations

Course Content

Term Project

Groups

7/27/13


Introduction to the courseCourse Structure

LecturesLabs/HomeworkQuizzesFinal ProjectsDiscussion Board

7/27/13


Expectations Come to class prepared

Participate

Contribute to your groups/teams

Laptops a must. We will be loading and configuring software tools to facilitate the labs, homework and quizzes

Collaboration vs. Plagiarism – Ethics – give credit where credit is due

Remember – Individual assignments (quizzes) are not collaborative – but will be open Internet.

7/27/13


ContentHow Web servers work

Data on the Web (HTML ,XHTML, XML, JSON)

Presentation on the Web (CSS, JavaScript, jQuery, AJAX)

Front-end development workflow

Back-end (server-side) programing (PHP, MySQL)

Back-end development workflow

Tying it all back together (Web Services, APIs, Security, etc)

7/27/13


We will touch onModern Web architecture

Development tools and technologies

Development methodology

Software versioning

Entrepreneurship

7/27/13


ToolsTools

Applications or browser add-ons which aid in the development process

Good tools tend to stick around, bad ones disappear quickly.

All tools and technologies evolve We will cover the technologies, but also what they

are intended to do

7/27/13


Some tools we will use in this class

AMP – (Apache, My SQL, PHP) – common suite of applications which allow for web application deployment – but the theory used here is applicable to other web suites.

Chrome

Chrome developer tools

7/27/13

Term Project Assignment Google. Facebook. Reddit. Many of the ubiquitous websites we

use today have one thing in common: a small team of dedicated individuals decided to put their skills to the test and bring their vision from concept to completion. Now, it's your turn.

Rather than developing a project according to a spec that we provide, you will be providing the concept for a new website that meets a general set of guidelines as a project proposal (by the time this proposal is due, you will have the skills you need to begin development, along with a plan on how to proceed).

Term Project Assignment Your proposal must provide:

The name of your team, and the names of its members (Teams have been randomly assigned in groups of 5).

Summary of your proposed project Description of each type of user and stakeholder, and how the

site generates value for each A summary of the technologies you intend to use Any functional and non-functional requirements An estimated project schedule A site map demonstrating the basic structure of your site Two wireframes of pages that help to demonstrate the

intended functionality

Term Project Proposals: Due Monday, November 4, 2013, 11:59:59pm

Term Project Assignment At minimum, your project must meet the following

requirements:

Functional (not necessarily identical) in the following browsers... Chrome (latest) Firefox (latest) Safari (latest) Internet Explorer (7, 8, 9)

Compatible with PHP 5.3, MySQL 5.x, Apache 2.2. Other stacks must be approved in advance.

Term Project Assignment Your application must make use of the following in a non-trivial way...

Valid semantic markup (HTML 4.01 Strict, XHTML 1.0 Strict, HTML5)

Valid CSS (browser prefixes excepted)

Client-side scripting (JavaScript)

Server-side programming (PHP)

Database Connectivity

Your application must support the notion of authentication and authorization (logging in and user roles/permissions).

Your application must provide an easy means for administrative users to maintain it, without knowledge of the underlying technology.

Your application must be easy to install, maintain and extend by future developers

Your site must address all seven of the facets of user experience as discussed in class. Things like making the experience visually desirable and ensuring find ability do count!

Term Project Assignment Resubmitting Proposals

If your proposal received less than full credit and has issues that need to be addressed, your team may resubmit one week after receiving it with the appropriate changes. The proposal will be re-graded, and the new grade will replace the old.

Term Project Presentations: In Class, December 2nd & 5th, 2013 During the last week of classes, teams will demonstrate their

projects for the rest of the class, fielding questions from the instructors, TAs and fellow students about the site and its underlying implementation. Signups for presentations will occur in the order in which proposals are approved (so the team that gets their proposal approved first may choose their presentation time slot first).

Presentations are limited to 15 minutes, and should include a brief introduction to the project, the specifics of the underlying implementation, and a brief demonstration of its functionality.

Term Project Assignment Completed Term Project & Documentation - Due Thursday, December 5,

2013, 11:59:59 PM

In addition to all of the code, your team must provide documentation for future developers of the site. This documentation must provide a complete breakdown of the various different components of your site and how the project is organized. An equally skilled developer should be able to reference this documentation to determine where and how to make changes to different aspects of the site if necessary. This documentation should also include any installation and configuration instructions - we will be following it when grading your projects.

Finally, the final submission should include a listing of each team member's contributions to the project (in Word, OpenOffice, or plain text format) called CREDITS.

Grading All team members will receive the same grade for the project. Team members who do not significantly

contribute to the project will not receive a grade.

Project Proposal – 20% Functionality, UX and Overall Execution - 30% Quality of Code & Markup - 30% Documentation - 10% Final Presentation - 10%

Term Project - DatesTeams of 5 persons have been randomly

assigned

Teams submit proposal by Nov 4th.

Teams make Term Project Presentations on Dec 2 and Dec 5

Teams submit Term Project Final Report on Dec 5


GroupsRandomly assigned

Work in teams to define and create term project

Suggest you work together for labs

7/27/13


GroupsGroup Members

1 Lauren Angelini, Corey Bryne, Robert Howard, Madhuri Vastare, Piyyuan Xian, Jianing Zhang

2 Timothy Callahan, Joshua Goldberg, Evan MacGregor, Candice Poon, Scott Sacci

3 Taylor Davis, Nurgul Kantarbayeva, Taha Mehdi, Hayley Schluter, Yi Xie

4 Albert Armea, Alexander Kumbar, Megan Matiz, Christopher Paradis, Kevin Zheng

5 Daniel Bruce, Ryan Gerstein, Justin Jones, Calvin Leung Huang, Aaron Sedlacek

6 Altan Gulen, Jed Kundi, Holly Loomer, Sakawkarn Piywitwanich, Andrew Wright

7 Michael Agnew, Jennifer Chan, Jesse Freitas, Jonah Gruber, Matthew Hamlin

7/27/13


Let’s get started

7/27/13

What is Web Development?All of the work involved in the planning,

development and maintenance of systems designed to operate over Hypertext Transfer Protocol (HTTP)

This is very broad


Web Development is Multidisciplinary

A full team is often involved in the development of a website

Involved from Planning, development, delivery and maintenance – beginning to end

What are some of the disciplines involved in Web Development?

7/27/13


Disciplines... System Administration

Socket Programming

Data Modeling

Information Architecture

Content Strategy

Usability Engineering

Database Administration

Analytics

Information Security

Information Design

Content Creation

Search Engine Optimization (SEO)

Server-side Programming

Client-side scripting

Network Administration

Quality Assurance

Marketing

Visual Design

Project management

Systems programming

Data Science/Big Data

Network performance

Data Performance

Subject Matter Expertise

7/27/13


It is ComplicatedMany disciplines involved to get it right

Many Players/Stakeholders involved (Project management, business, technology, end users, etc...)

Many tools to choose from – always changing

Many competitive technologies to choose from – very dynamic

Many different platforms – different experiencesMac vs Windows vs linux iOS vs Android vs ?

7/27/13


Disruptive TechnologyWhat is disruptive technology (or disruptive

innovation)?

7/27/13


Disruptive TechnologyInnovations cause disruption

What is disruptive innovation? A disruptive innovation is an innovation that helps

create a new market and value network, and eventually goes on to disrupt an existing market and value network, displacing an earlier technology” http://en.wikipedia.org/wiki/Disruptive_innovation

What gets disrupted? Social Economic Cultural Political Ethical

7/27/13

http://en.wikipedia.org/wiki/Disruptive_innovation


Examples of Disruptive Innovation

7/27/13


Examples of Disruptive Innovation

Cable TV New economy for non-network content prviders Duck Dynasty?

High Speed Internet Old Dial-ups disappear Cable companies struggle to keep up with Fiber

iPod/iPhone/iPad/iTunes? Pay a subscription fee to hold your music

Google Play Music? Pay a subscription fee to get any music you want

7/27/13


Questions?

7/27/13

web systems i itws 2110 & csci 4961 - fall 2013 7/27/13web systems i - fall 20131

Documents