Modern Web Development

•

0 likes•485 views

This presentation offers a quick and not remotely comprehensive overview of modern web development, and that means mostly front-end web development.

Technology

Modern Web
Development
Technologies
Troubles
Tricks

Technologies
HTML5 CSS3 JavaScript

noun adjective verb

backbone aesthetics functionality

HTML5

: markup language

• Easy
• Rich
• Semantic

HTML5
Easy
1 doc type <!doctype html>

no type declaration <script>...</script>

no quotes <p class=bold>

HTML5
Rich
video and audio local storage

canvas geolocation

drag and drop content editing

HTML5
Semantic

• better tags (article, footer, figure)
• microdata (event, org, person)

CSS3
: style sheet language

• media queries
• animation
• gradients
• text columns

JavaScript
: scripting language

• object-oriented
• prototypes
• client-( and server-)side

Troubles
*

• Browsers
• Speed
• Mobile

* In a fun, positive sense

Troubles
Browsers

• Incompatibility (i.e., IE sucks)

• Dimensions (e.g., desktop, mobile)

• Tech > Spec (i.o.w., W3C is sloooow)

Troubles
Speed

• SelfishScript
• Re$ource$
• Physical . . . . . . . . . . . . . . distance

Troubles
Mobile

• Slow connections
• Slow processors
• No JavaScript

Tricks

• Be responsive
• Be unobtrusive
• Improve load time
• Use high-level tools

Tricks
Be responsive
• Media queries
(media types, dimensions, orientations)

• Percentages
(scale)

• Ems
(relative; browser as base)

Tricks
Be unobtrusive

Separate...
• Content HTML
• Presentation CSS
• Behavior JavaScript

Tricks
Improve load time
• Asynchronous loading
• async/defer in HTML5
• ControlJS, on-demand JS
• Minimize resource calls
• Minify code
• Compress code

Tricks
Use tools

• CSS (e.g., Blueprint)
• JavaScript (e.g., jQuery)
• CSS + JS (e.g., LESS)

What's hot

Web designing course contentTrainme Softtech

Web Building Blocksjoegilbert

YMC Season 4 - Day6theymc

Sr front end web developer Ln11Aakash Desai

How Does the Internet Work? (Wix she codes; branch)Dina Goldshtein

Rhetoric and Flexible Content with DrupalRobert Carr

CE-9506_Session02Johnny Bilotta

Standards and guides in web designshaundickie

Using Wordpress as a Content Management SystemCalvin Robertson

CSSAnusha sivakumar

Developer skillswebger

CSS FrameworksMario Hernandez

Introduction to Web Development - CSSSadhanaParameswaran

How does the Internet Work?Dina Goldshtein

The web contextDan Phiffer

Next Generation UIvmalinouski

CSS Grideystein

MODERN WEB DEVELOPMENTDang Jian

Approaches to Responsive Wen Design & DevelopmentKeyideas Infotech Private Limited

HTML5 le langage de World Wide WebKhaled Garbaya

What's hot (20)

Web designing course content

Web Building Blocks

YMC Season 4 - Day6

Sr front end web developer Ln11

How Does the Internet Work? (Wix she codes; branch)

Rhetoric and Flexible Content with Drupal

CE-9506_Session02

Standards and guides in web design

Using Wordpress as a Content Management System

CSS

Developer skills

CSS Frameworks

Introduction to Web Development - CSS

How does the Internet Work?

The web context

Next Generation UI

CSS Grid

MODERN WEB DEVELOPMENT

Approaches to Responsive Wen Design & Development

HTML5 le langage de World Wide Web

Similar to Modern Web Development

HTML5: IntroductionGuillermo Paz

HTML5: An OverviewNagendra Um

Web dev-101Andrew Pottenger

Women Who Code, Ground FloorKatie Weiss

Web design training , Web Design Training In KolkataW3webschool

Trendsetting: Web Design and BeyondAndy Stratton

An Introduction to Microsoft EdgeChris Love

Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper

web developmentRamanDeep876641

Be faster then rabbitsVladislav Bauer

WEB DEVELOPMENT.pptxsilvers5

Talk Paris Infovis 091207132953 Phpapp01(2)johnnybiz

Using Web Standards to create Interactive Data Visualizations for the Webphilogb

Case Study: Building a Conference Website with Drupalcspin

025444215.pptxRiyaJenner1

Introduction to Browser DOMSiva Arunachalam

Web design-workflowPeter Kaizer

Rockstar Graphics with HTML5Dave Balmer

Introduction to HTML language Web design.pptxlekhacce

Future-Proof Responsive Web Design #RWDDigital Surgeons

Similar to Modern Web Development (20)

HTML5: Introduction

HTML5: An Overview

Web dev-101

Women Who Code, Ground Floor

Web design training , Web Design Training In Kolkata

Trendsetting: Web Design and Beyond

An Introduction to Microsoft Edge

Responsive Web Design - Web & PHP Conference - 2013-09-18

web development

Be faster then rabbits

WEB DEVELOPMENT.pptx

Talk Paris Infovis 091207132953 Phpapp01(2)

Using Web Standards to create Interactive Data Visualizations for the Web

Case Study: Building a Conference Website with Drupal

025444215.pptx

Introduction to Browser DOM

Web design-workflow

Rockstar Graphics with HTML5

Introduction to HTML language Web design.pptx

Future-Proof Responsive Web Design #RWD

Recently uploaded

Architecting Cloud Native ApplicationsWSO2

Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

Why Teams call analytics are critical to your entire businesspanagenda

FWD Group - Insurer Innovation Award 2024The Digital Insurer

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

DBX First Quarter 2024 Investor PresentationDropbox

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021

Recently uploaded (20)

Architecting Cloud Native Applications

Vector Search -An Introduction in Oracle Database 23ai.pptx

How to Troubleshoot Apps for the Modern Connected Worker

presentation ICT roal in 21st century education

Why Teams call analytics are critical to your entire business

FWD Group - Insurer Innovation Award 2024

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

DBX First Quarter 2024 Investor Presentation

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Finding Java's Hidden Performance Traps @ DevoxxUK 2024

AWS Community Day CPH - Three problems of Terraform

WSO2's API Vision: Unifying Control, Empowering Developers

Boost Fertility New Invention Ups Success Rates.pdf

Six Myths about Ontologies: The Basics of Formal Ontology

Modern Web Development

1. Modern Web Development Technologies Troubles Tricks

2. Technologies HTML5 CSS3 JavaScript noun adjective verb backbone aesthetics functionality

3. HTML5 : markup language • Easy • Rich • Semantic

4. HTML5 Easy 1 doc type <!doctype html> no type declaration <script>...</script> no quotes <p class=bold>

5. HTML5 Rich video and audio local storage canvas geolocation drag and drop content editing

6. HTML5 Semantic • better tags (article, footer, figure) • microdata (event, org, person)

7. CSS3 : style sheet language • media queries • animation • gradients • text columns

8. JavaScript : scripting language • object-oriented • prototypes • client-( and server-)side

9. Troubles * • Browsers • Speed • Mobile * In a fun, positive sense

10. Troubles Browsers • Incompatibility (i.e., IE sucks) • Dimensions (e.g., desktop, mobile) • Tech > Spec (i.o.w., W3C is sloooow)

11. Troubles Speed • SelfishScript • Re$ource$ • Physical . . . . . . . . . . . . . . distance

12. Troubles Mobile • Slow connections • Slow processors • No JavaScript

13. Tricks • Be responsive • Be unobtrusive • Improve load time • Use high-level tools

14. Tricks Be responsive • Media queries (media types, dimensions, orientations) • Percentages (scale) • Ems (relative; browser as base)

15. Tricks Be unobtrusive Separate... • Content HTML • Presentation CSS • Behavior JavaScript

16. Tricks Improve load time • Asynchronous loading • async/defer in HTML5 • ControlJS, on-demand JS • Minimize resource calls • Minify code • Compress code

17. Tricks Use tools • CSS (e.g., Blueprint) • JavaScript (e.g., jQuery) • CSS + JS (e.g., LESS)

18. Questions?

Modern Web Development

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Modern Web Development

Similar to Modern Web Development (20)

Recently uploaded

Recently uploaded (20)

Modern Web Development