22
ISE 390 Dynamic Web Development Introduction

ISE 390 Dynamic Web Development

  • Upload
    vern

  • View
    33

  • Download
    0

Embed Size (px)

DESCRIPTION

ISE 390 Dynamic Web Development. Introduction. Who am I?. Richard McKenna E-mail: [email protected] Phone: 631-632-9564 Office: CS Room 1436 Office hours: MW12pm – 1pm and by appointment Personal Link: http://www.cs.stonybrook.edu/~richard. Course Homepages. - PowerPoint PPT Presentation

Citation preview

Page 1: ISE 390 Dynamic Web Development

ISE 390Dynamic Web Development

Introduction

Page 2: ISE 390 Dynamic Web Development

Who am I?Richard McKenna E-mail: [email protected]: 631-632-9564 Office: CS Room 1436 Office hours:

MW 12pm – 1pmand by appointment

Personal Link: http://www.cs.stonybrook.edu/~richard

Page 3: ISE 390 Dynamic Web Development

Course Homepages

• http://www.cs.stonybrook.edu/~ise390– Syllabus– schedule (lecture slides, hw, etc …)– etc.

• http://blackboard.stonybrook.edu– grades

Page 4: ISE 390 Dynamic Web Development

Course Description• This course examines the technologies used for developing dynamic

Web content. With an emphasis on HTML5 and the most recent Cascading Style Sheet versions, students learn about how modern Web content is laid out and brought to interactive life using these and other technologies. As part of this process, students develop Web pages using various technologies and make them publicly available online. Other technologies examined include PHP, JavaScript, and Perl. In addition, the course will examine and use available libraries that build upon these technologies to make Web pages more interactive. An example of such a library would be Google's Map API using JavaScript. The course will also cover the services back-end technologies like JavaEE and .NET can provide to Web sites. Finally, this will all lead to the services cloud computing can provide.

Page 5: ISE 390 Dynamic Web Development

Course Topics• Web page construction using HTML 5

• Employing CSS to layout content and stylize components

• Using front-end scripting languages like JavaScript in Web development

• Using Web APIs like Node.js, Google Maps, Facebook, and jQuery to enhance front-end functionality

• How PHP and Perl can be employed to dynamically generate Web content

• Heavyweight content creation using application servers like JavaEE and .NET

• Cloud computing

Page 6: ISE 390 Dynamic Web Development

Course Goals• Students should become proficient in Web page development using HTML 5

• Students should learn how to employ CSS to layout content and stylize component

• Students should learn about the role of JavaScript in Web development and learn some basic uses

• Students should learn how PHP and Perl can be employed to dynamically generate Web content.

• Students should get some experience in using a Web API for extending JavaScript capabilities, for example, using Google's Maps API

• Students should get acquainted with the terminologies and capabilities of more heavyweight Web technologies for dynamic content creation like JavaEE and .NET

• Students should learn what cloud computing is, broadly how it works, and what services it can provide

Page 7: ISE 390 Dynamic Web Development

My Goals

• Make you HTML 5/ CSS/JavaScript/X.js Experts

Page 8: ISE 390 Dynamic Web Development

Lab Facilities

• CS Windows Lab– http://www.cs.stonybrook.edu/facilities/windowslab

– CS 2114, CS 2120, CS 2126, & CS 2129– all registered students have accounts

• Sparky– request Web account– http://it.stonybrook.edu/services/sparky-unix

Page 9: ISE 390 Dynamic Web Development

Your Best Friends

• W3Schools• www.w3schools.com

• W3C Validator• http://validator.w3.org

• NetBeans’ Java EE & Java Web Learning Trail• Netbeans.org/kb/trails/java-ee.html

Page 10: ISE 390 Dynamic Web Development

How are grades computed?

• 5 HW Assignments 40 % • Final Exam 40 %• Class Participation 20%

100 %

Page 11: ISE 390 Dynamic Web Development

ACADEMIC DISHONESTY

• All work you submit for homework, projects, or exams MUST be your own work.

• If you cheat or aid someone in cheating, you will automatically fail this course and be brought up on charges of academic dishonesty without warning.

• NO EXCEPTIONS WILL BE MADE!

Page 12: ISE 390 Dynamic Web Development

The HW PlanHW 1 – HTML 5

HW 2 – HTML 5 and CSS

HW 3 – JavaScript

HW 4 – Web APIs

HW 5 – Perl & PHP

Page 13: ISE 390 Dynamic Web Development

Can you describe these things?• HTML 5• URL• HTTP• CSS• JavaScript• Node.js• PHP• Perl• JavaEE• .NET• Cloud

Page 14: ISE 390 Dynamic Web Development

What's a Web framework?

Page 15: ISE 390 Dynamic Web Development

Web frameworks for many platforms

• Java• ASP .NET• Python• Cold Fusion• Perl• PHP• Ruby

Page 16: ISE 390 Dynamic Web Development

Important Framework Features

• MVC

• Push vs. Pull

• Ajax Capabilities

• JavaScript generation

• Frameworks using Frameworks

– ex: Ruby on Rails uses jQuery

Page 17: ISE 390 Dynamic Web Development

What's the point?

• Use JavaScript without writing it

• Use rich, capable front-end components

Page 18: ISE 390 Dynamic Web Development

• We’ll look at this one later

• Developed by Çağatay Çivici

– a.k.a. Optimus Prime

• Lots of rich components

– http://www.primefaces.org/showcase/ui/home.jsf

Page 19: ISE 390 Dynamic Web Development

Common Java Frameworks

1. Spring MVC (23%)2. Struts 1.x (15%)3. Apache Axis (15%)4. Apache Xerces (14%)5. Hibernate (12%)6. JDOM (12%)7. Java Applet (8.1%)8. Apache Velocity (7.9%)9. Apache ORO (7.0%)10. JAX-WS (6.5%)

Source: VeraCode Bloghttp://www.veracode.com/blog/2012/01/top-ten-java-frameworks-observed-in-customer-applications/

Page 20: ISE 390 Dynamic Web Development

Team Quiz

• Get into teams of 2

• Together, take the HTML Quiz:

• www.w3schools.com/html/html_quiz.asp

Page 21: ISE 390 Dynamic Web Development

10 MINUTE BREAK

Page 22: ISE 390 Dynamic Web Development

Now Let’s Learn HTML

• Let’s follow the w3schools tutorial together

• Use the Try it yourself feature

• www.w3schools.com/html/default.asp