introduction
play

Introduction Client Side Web Application Development George - PowerPoint PPT Presentation

Aug 13, 2022 •217 likes •634 views

Introduction Client Side Web Application Development George Corser, PhD Once upon a time... People wanted access to documents ... remotely from anywhere (so they invented network communications) ... without depending on a specific network

  1. Introduction Client Side Web Application Development George Corser, PhD

  2. Once upon a time... People wanted access to documents … ... remotely from anywhere (so they invented network communications) ... without depending on a specific network (so they invented the Internet) ... with hyperlinks to other documents (so they invented the Web and HTML) 2 http://www.littledetails.co.uk/advanced-seo-services/seminar-presentation-010610-hypertext-links.php

  3. Once upon a time... People wanted documents … ... with consistent formatting (so they invented CSS) ... with programmable components (so they invented JavaScript, and web “ applications ”) ... with faster page loading (so they invented AJAX) 3

  4. ...and they lived somewhat happily ever after! They want more and more and more … They keep creating more tools! Hence the post-apocalyptic hellscape of the modern Web 4

  5. Jefg Bezos: A WebAppDev Story ● 1964 - Born 1986 - Graduated Princeton, ● worked on Wall Street ● 1994 - Founded Amazon as an online bookstore (who buys books anymore?) ● 1997 - Millionaire ● 1999 - Billionaire ● 2017 - Centi-billionaire ($100+BB) 5

  6. Jefg Bezos: over 50% of earnings from AWS “Amazon says AWS [ Amazon Web Services ] revenue jumped 46 percent in third quarter. Amazon's cloud business grew 46 percent in the third quarter. AWS' $2.1 billion in operating profit accounted for 56 percent of total operating earnings .” (CNBC.com, 2018) Summary... ● Bezos made a $1 million, then $1 billion from, an online bookstore web app . ● Finally he made a $100 billion from a platform for web apps ! 6 https://www.cnbc.com/2018/10/25/aws-q3-results.html

  7. Jesse Vollmar: A MobileAppDev Story ● 2011 - Graduated SVSU 2012 - Founded FarmLogs.com ● ● 2017 - Received $37 million in venture capital, through Series C Mobile is the new Web! Sources: https://www.svsu.edu/csis/ouralumni/ https://agfundernews.com/farmlogs-raises-22m-series-c-with-naspers-as-ceo-vows-never-to-sell-to-agribusiness.html 7 https://farmlogs.com/about/

  8. Importance of Client Side WebDev Client Side web developers enhance user experience, including not only look-and-feel but also speed . A 1-second delay in page response can result in a 7% reduction in conversions. (Source: Aberdeen Group) It’s not just about the money, it’s also about the user experience, and about the advancement of humankind. 8 https://datadome.co/bots-kill-website-performance/

  9. Agenda Client Side Web Application Development Quick Course Overview ● ● Operational Considerations Audience ● ● Outcomes Prerequisites ● ● Definitions Importance ● ● Scope Let’s Go! ● 9

  10. Client Side Web Application Development 10

  11. Quick Course Overview The Internet Web Hosting HTML and The Web CSS Bootstrap (JS) jQuery (JS) JavaScript Angular (JS) Professional ..and beyond! Practice 11

  12. Operational Considerations ● This online course is more convenient than in-person courses, yet still offers the same hands-on assistance (office hours), unlike MOOCs. ● Fast pace . The Spring semester goes twice as fast as Fall. Be prepared. ● Timed exams, and timed programming assignments , are brief, but they begin precisely at class start time. Don’t be late! Maybe set a timer on your phone. Final oral exam/presentation will be one-on-one, in-person or over Skype, ● during last week of class. Clear your schedule and lock in your time early because rescheduling may be difficult. See syllabus for specific details . 12

  13. Audience ● This course is for people who already possess basic programming skills , in any computer programming language (maybe one semester of programming) ● This course is for people who want to learn how to build simple web applications , i.e. programs that run in web browsers ● This course is for people who want the convenience of an online course, coupled with the in-person support of a course at a brick-and-mortar university 13

  14. Outcomes What is the purpose of this course? ● The purpose of the course is to prepare undergraduates for entry-level jobs in front-end web development ● JavaScript . You can think of this as a JavaScript programming course. What will students know after they complete this course? ● How to apply, at a basic level, mainstream front-end languages and JS frameworks : HTML, CSS, Bootstrap, JavaScript, jQuery and Angular. 14

  15. Prerequisites ● Skills: Basic programming in any language -- Data types, control statements (if/else, switch/case), loops, methods/functions, arrays, classes/objects ● Computer: Preferably a 3-monitor PC , one monitor for text editing, one for web browsing and a third for watching videos and reading PDF instructions. ● Textbook. None. No paper textbooks . All materials are online. Online accounts: Anonymous email address (optional) . You might want to ● create a “junk” gmail account because you might want to access free tools that require login/registration by email. 15

  16. Definitions What is “ client side web application development ”? Client Side ● Web Application ● Development ● 16

  17. Definitions - Client Side ● Client side (aka, front-end) means running in a browser ● Sometimes it appears that a website is running on a local device, when in fact it is accessing a server Client-Server Model 17

  18. Definitions - Web Application Web Application Website Web apps are “dynamic” (not the same info every Web sites are “static” and/or display the same time clicked) and user-specific (often allowing users to data for no matter which user clicks enter data, like a “regular” application) 18

  19. Definitions - Development Customer Designer Mockups, Specs Layouts Front-end Operational Backups Developer Code 19

  20. Definitions - Development “Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design ; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization.” “Web development can range from developing a simple single static page of plain text to complex web-based internet applications (web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server-side scripting , web server and network security configuration, and e-commerce development.” Source: Wikipedia 20

  21. Importance Why study web application development? And which topics are most critical? Most Popular Languages ● User Experience ● Jobs ● 21

  22. Importance - Most Popular Languages, 2018 JavaScript always #1 on GitHub Source: https://octoverse.github.com/projects.html 22

  23. Importance - User Experience - Look and Feel Sometimes users want slick interfaces Source: https://codepen.io/aardrian/pen/NmoQdN 23

  24. Importance - User Experience - Functionality Sometimes users want no-frills functionality 24

  25. Importance - User Experience - Page Load Time Users demand speed Source: https://www.websitemagazine.com/blog/5-reasons-visitors-leave-your-website 25

  26. Importance - User Experience - SEO Search Engine Optimization ● Keyword research and selection ● Benchmark ranking report ● Keyword mapping / assignment ● Site design consultation / analysis ● Web pages Content Optimization ● Internal keyword link architecture / optimization ● HTML optimization ● Creation of spider food site map ● Google site map installation ● Advanced Link Popularity Research / Analysis ● Analyze competitor back links ● Create list of recommended sites to acquire links from ● Inbound and reciprocal Link Building are our Specialty ● Create optimized 'Link to Us' page ● URL submissions to relevant, free search engine directories ● Create RSS feed ● RSS directory submissions ● Monthly search engine ranking reports ● Monitor SERP for Google, Yahoo and MSN ● Re-optimization (as needed) http://www.ebizindia.net/seo-process.html 26

  27. Importance - Jobs - Likelihood of WebDev What percentage of programming jobs are web developer jobs? 37.8% of 2018 StackOverflow survey ● respondents are front-end developers Note: Numbers don’t sum to 100% because ● respondents may hold multiple roles Maybe there’s a 37.8% chance of doing some front-end WebDev Source: https://insights.stackoverflow.com/survey/2018 27

  28. Importance - Jobs - Average Salary of WebDev Source: https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm 28

  29. Importance - Jobs - Potential Salary of WebDev $85,000 - $115,000 Source: https://www.careerbuilder.com/jobs-web-developer-in-auburn-hills,mi? (Accessed: May 9, 2019) 29

  30. Importance - Jobs - Impact of WebDev One programmer can improve productivity of many other workers ! 30

  31. Scope Browsers ● WebDev Technologies ● Roadmap ● 31

  32. Scope - Browsers Web applications may perform differently on different browsers, so it’s important to know which browser(s) your users will be using. 32 Source: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  33. Scope - WebDev Technologies 1. HTML 2. CSS 3. Bootstrap 4. JavaScript 5. jQuery 6. Angular 33

Recommend

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION

TRAINING COURSE ON SOCIAL PROTECTION & FORMALIZATION TRINIDAD AND TOBAGO MARCH 15, 2017 INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION INTRODUCTION Design of the NIS Assistance from the

547 views • 23 slides
INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

INTRODUCTION Introduction 2/42 INTRODUCTION Alternations I am giving bread to the

Patterns of variation in the expression of case and agreement Andrs Brny Leiden University Centre for Linguistics 9 November 2019, BaSIS Workshop a.barany@hum.leidenuniv.nl INTRODUCTION Introduction 2/42 INTRODUCTION

1.37k views • 42 slides
Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures

Introduction Introduction Introduction Introduction Outline Motivation Failures Definition and concepts Process and product properties Principles SE Approaches Motivation Software and the economy The economies of

1.03k views • 49 slides
Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1

Introduction Introduction Introduction Nationwide Cause for Concern 1 https://www.cdc.gov/std/stats17/infographic.htm Introduction Epidemiology in Western Colorado CPHE Surveillance Data Report, May 2018 Chlamydia Epidemiology in Western

977 views • 39 slides
DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every

DAQ introduction Purpose of this talk : (1) Introduction for those who have not been in every meeting (2) Some ideas of diagrams for section 7.1 (Introduction) of TP. Giles Barr 25 Jan 2018, Pembroke College On DUNE, the reality is there is a

474 views • 10 slides
INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT

ADVANCED COMPUTER SECURITY INTRODUCTION cf. Schneider, Chapter 1 INTRODUCTION THEY ARE OUT TO GET YOU INTRODUCTION WHAT IS SECURITY? A systems security policies describe What the system is supposed to do Store and provide access

479 views • 16 slides
Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL

Overview Introduction to SMIL Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout World Wide

387 views • 14 slides
14 Introduction Introduction Bad guys can put malware into Example: hosts

14 Introduction Introduction Bad guys can put malware into Example: hosts

Introduction Introduction source Encapsulation ISO/OSI reference model message M application segment H t H t M transport network datagram H n H n H t M presentation: allow applications to frame link H l H n H t M interpret

583 views • 4 slides
Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL

Previous Lecture Introduction to SMIL 2 Introduction to W3C and XML Introduction to SMIL Writing a SMIL file Adding Media Objects Martin Halvey Clipping media files January 2008 Timing and Synchronising Layout

322 views • 8 slides
Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL

Introduction Zynq Lecture 1 Andreas Habegger Introduction Zynq Introduction Zynq Introduction Zynq PS vs. PL Processing System Processor Peripherals Data Buses AXI Bus Conclusion BTE5380 - Embedded Systems Octobre 2014 Andreas Habegger

1.81k views • 30 slides
2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04

2018.06 01 SMILE5 Introduction S E 5 02 Alpha Cloud M I L 03 Company Introduction 04 Project References S E 5 PART.1 SMILE5 Introduction M I L Introduction STORION-SMILE5 Residential Energy Storage System Inverter 5kW Output Input

1.06k views • 25 slides
Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an

Introduction to CICS Course introduction Course introduction What is CICS? What is an application server? Why use an application server? Course introduction Services provided by CICS How CICS applications are defined Scaling CICS to meet

1.84k views • 146 slides
Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic

Network Visualization Introduction Presented by Shahed Introduction Introduction Basic building blocks Node Links (relationship between nodes) Spatial information Network data

584 views • 9 slides
Introduction Introduction (1) Main argument of the paper: universities are not only

Introduction Introduction (1) Main argument of the paper: universities are not only

Le jugement des pairs comme outil de management des universits Peer-review as a management tool Christine Musselin (CSO, Sciences Po et CNRS) Avril 2013, Lirrsistible ascension du capitalisme acadmique Introduction Introduction (1)

590 views • 28 slides
Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Introduction Introduction to storage and to storage and filesystems filesystems Introduction

Moreno Baricevic Gilberto Daz Axel Kohlmeyer Stefano Cozzini ULA ICTP CNR-IOM DEMOCRITOS Merida, VENEZUELA Trieste, ITALY Trieste, ITALY Introduction Introduction to storage and to storage and filesystems filesystems Introduction

1.19k views • 51 slides
JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of

JABLOTRON JA-100 introduction November 2011 Introduction Todays goals First introduction of the brand new JA-100 alarm system Visions Basic architecture System components Setting Help us with final validations You are the FIRST ones

1.69k views • 111 slides
1 Introduction Introduction Communication System Baseband an adjective that describes

1 Introduction Introduction Communication System Baseband an adjective that describes

Introduction Introduction Physical Layer Mobile network Global ISP Provides the means to transmit bits Basic Concepts of from sender to receiver, Data Transmission Defines the mechanical, electrical, and Home network timing

463 views • 7 slides
Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical

INFOGR Computer Graphics Jacco Bikker - April-July 2015 - Lecture 1: Introduction Welcome! Todays Agenda: Topic Introduction Course Introduction Team Practical Details Assignments Field Study State of

869 views • 62 slides
Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction

Virtual and Augmented Reality Introduction (00) RNDr. Martin Madaras, PhD. madaras@skeletex.xyz Introduction Introduction Who am I? What do I do here? 2 About me Short research bio: - 2014 - finished PhD at FMFI UK - 2014 2016 -

1.3k views • 39 slides
PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience

PRESENTATION The Introduction What is the Introduction ? The introduction prepares the audience for your presentation. It tells them what your presentation is about, why it is important, and finally, what to listen for in your speech. Get the

505 views • 3 slides
How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer

Introduction to Beamer Hafida Benhidour How to make a presentation with L A T EX? Introduction to L A T EX Introduction to Beamer Introduction to Beamer Hafida Benhidour Department of computer science King Saud University November

732 views • 49 slides
Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Shenzhen Cuilu jewelry Co., Ltd was founded in 1996 and its a large private enterprise

Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Introduction Introduction - - Brief Brief Introduction Introduction of of Cuilu Cuilu Group Group Shenzhen Cuilu jewelry Co., Ltd

147 views • 14 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

735 views • 34 slides
Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org

V olunteer C ommunications N etwork (V-C-N.org) Introduction to ICS- -214 214 Introduction to ICS Official Unit / Incident Log - A V-C-N.org Academy Course - 2012-02.24-2208 262: Introduction to ICS-214 : V-C-N.org : Slide: 1 V olunteer C

558 views • 18 slides

More recommend