Design of Web Applications Web applications: an overview General - PDF document

Design of Web Applications 1 : Overview Global course introduction Design of Web Applications Web applications: an overview General Introduction Why this course? Planned technologies in PWA/DWA More … 3 / 20 − Rémi Emonet − Design of Web Applications General Introduction Logistics Design of Web Applications 1 : Overview Lessons and personal work Global course introduction courses and exercise sessions: ~20h Web applications: an overview practical sessions: ~10h project Why this course? Indicative planning: 1h30 on Tuesdays, 3h on Wednesdays Planned technologies in PWA/DWA Evaluation More … theoretical exam: MCQ + open questions and exercises practical: project report, presentation, and demo Rules of the game be active, participate ask questions interrupt the lesson if necessary Suggest lesson topics and project ideas Course reference on Claroline 6 / 20 − Rémi Emonet − Design of Web Applications General Introduction 7 / 20 − Rémi Emonet − Design of Web Applications General Introduction Web Application? User, Browser (Client), Server What does the wikipedia website do when you do a search? The Browser (firefox, chrome, internet explorer, edge, safari, ...) type wikipedia.com in the address bar displays pages (HTML+CSS+ … ) executes scripts (JavaScript) type “higggs” (3 g) in the search box and click on the → button in response, you get sends requests to the server https://en.wikipedia.org/w/index.php?search=higgs& user actions (links, forms, … ) title=Special%3ASearch&fulltext=Search automated scripts (automatic refresh, etc) The Server receives requests executes code depending on the requests may send back static resources (fixed pages, images, … ) loads and updates data generates response pages sends pages to the client 8 / 20 − Rémi Emonet − Design of Web Applications General Introduction 9 / 20 − Rémi Emonet − Design of Web Applications General Introduction

Design of Web Applications 1 : Overview Why Learning to Build Web Apps? Global course introduction As a web app user understand how things work behind the scene Web applications: an overview feel empowered to build things understand privacy and security implications Why this course? As a software engineer Planned technologies in PWA/DWA more and more applications are web based More … convergence of mobile and web As a scientist (researcher or R&D engineer) generate ad hoc visualizations of results … … … do attractive visualization for communications 10 / 20 − Rémi Emonet − Design of Web Applications General Introduction 11 / 20 − Rémi Emonet − Design of Web Applications General Introduction Design of Web Applications 1 : Overview Technologies From Today and Yesterday Global course introduction Web applications: an overview Why this course? Planned technologies in PWA/DWA More … 12 / 20 − Rémi Emonet − Design of Web Applications General Introduction 13 / 20 − Rémi Emonet − Design of Web Applications General Introduction Technologies in this course Design of Web Applications 1 : Overview In this PWA/DWA course Global course introduction mostly Java techs on the server Web applications: an overview basic client-side techs (HTML, CSS, javascript) client-side framework (AngularJS) Why this course? JEE : Java Entreprise Edition Planned technologies in PWA/DWA a standard for Java servers Java: portability, security, standardization More … JEE web container runtime environment providing services portability between containers JEE platform specification tens of individual specifications (JSR) servlets, JSP, JPA, … Spring (Pivotal) additional framework around JEE Java and Groovy not a standard ⇒ sometimes faster advances JEE and Spring both huge evolve in parallel and interact positively 14 / 20 − Rémi Emonet − Design of Web Applications General Introduction 15 / 20 − Rémi Emonet − Design of Web Applications General Introduction

Learning to Learn (in general) Work regularly (not a big rush before the deadline) repeat exercises practice (don't just re-read things) Be extremely focused limit interruptions work for fixed-duration slots (e.g., 25 minutes) … but make real and regular breaks Let's have … quizzes stretch or have a walk practice sport sleep well 16 / 20 − Rémi Emonet − Design of Web Applications General Introduction 17 / 20 − Rémi Emonet − Design of Web Applications General Introduction Succeeding in this Course Be pro-active in lessons and practical sessions Embrace the proposed technologies Bring your own objectives and ideas Look and ask for complement (me, other students, online, ...) Project Ideas? Practice! Emphasis on some make room on your computer to install things install the required software Technologies? practice regularly 18 / 20 − Rémi Emonet − Design of Web Applications General Introduction 19 / 20 − Rémi Emonet − Design of Web Applications General Introduction Key Points Course Objectives understanding web apps principles and evolution mastering some technologies “full-stack”: both client and server side techs Logistics lessons + practical sessions exam + project Learn to learn efficiently! Course reference on Claroline 20 / 20 − Rémi Emonet − Design of Web Applications General Introduction

form and two links. All together, they form a web page. This is a paragraph with an image, followed by a list and a to infinity and beyond II. second element I. first interesting element Design of Web Applications 2 : Overview Introduction Design of Web Applications HTML and DOM Client-Side Basics Styling and CSS More 4 / 27 − Rémi Emonet − Design of Web Applications Client-Side Basics Design of Web Applications 2 : Overview Client Side Technologies A few langages Introduction HTML (declarative langage): page structure CSS (declarative langage) : styling of elements HTML and DOM Javascript (imperative/functional langage) : behavior Java, PHP, Python, ... : server-side behavior Styling and CSS More go 5 / 27 − Rémi Emonet − Design of Web Applications Client-Side Basics 6 / 27 − Rémi Emonet − Design of Web Applications Client-Side Basics Design of Web Applications 2 : Overview A Simple HTML page (minimal) 1 <!DOCTYPE html> Introduction 2 <html lang="en"> 3 <head> HTML and DOM 4 <meta charset="utf-8"> 5 <title>title</title> 6 </head> Styling and CSS 7 <body> 8 content More 9 </body> 10 </html> HTML Page Structure html root element head for metadata (encoding, title, ...) body for the actual page content HTML Elements head elements: meta, title, style, script body elements: p, h1, h2, … , h6, ul, ol, li, dl, form, input, table, … more body elements: a, em, strong, i, b, … more body elements: div, span, img, video, object, … 7 / 27 − Rémi Emonet − Design of Web Applications Client-Side Basics 8 / 27 − Rémi Emonet − Design of Web Applications Client-Side Basics