Web Development World

Web Development World “Plumbing on the Internet” By Katherine Chuang

Common knowledge: The sky is blue

Actually: The sky is blue when it’s sunny

But rain, smog, lighting, perspective, etc.

Mario is a plumber who travels through the sewer tunnel
system in a well known video game.

Man made world has rules and conventions

Internet: The Information Superhighway a telecommunications infrastructure or system (as
of television, telephony, or computer networks) used for widespread and usually rapid access to information

The Information Superhighway https://youtu.be/SFJHHbue_Aw

Early AOL Commercial (1995) https://youtu.be/1npzZu83AfU

Global Network connected by the speed of light

Basically a bunch of networked machines Our job as “plumbers”
is to make sure data passes through correctly, consistently, etc.

The “Layers” of the Internet. 2 well known models

Application Development “Web Development” is generally the application layer

HTML / CSS / Javascript / Etc https://twitter.com/js_tut/status/1189926784470519808 Disclaimer: this
is one person’s opinion (not a general fact)

Another person’s perspective

Luncheon Kingdom - Super Mario Odyssey (2017) In 2017, Nintendo
came up with a new storyline for Mario. He has to save Princess Peach with various new challenges in The Luncheon Kingdom. Application development is very much like working as a Chef in a restaurant. Challenging, terrifying, yet exciting. Presentation will henceforth feature an expert in the dining industry, Mr. Ramsey →

Stacks and layers... Maybe like a stack of pancakes? HTML
CSS Javascript SEO Database etc

Nah, web development is a means to an end I
like this analogy of a dim sum meal. Application development includes providing: 1) Various widgets are possible. 2) Use of containers for delivering widgets. 3) End user can access any combination of widgets. 4) End user may lack technical literacy.

The browser is like the diner’s table

There is a sense of organization To maintain high quality
service and product oﬀerings, follow specs: • World Wide Web Consortium (W3C) Speciﬁcations • Semantic HTML Etc.

The minimalist HTML structure read by browser HTML Specs https://www.w3.org/TR/html52/
<html> <head>   </head> <body>  </body> </html>

Structure ←→ layout

Presentation is everything to the end user

UX Design, Graphic Design, etc. are like plating techniques

Grid Layout From print design https://www.interaction-design.org/literatur e/article/the-grid-system-building-a-solid-de sign-layout

90’s: the time before grid layout

Frameworks, Libraries, etc.

Better to learn the techniques rather than products

Otherwise… you get what you get

Professionals manage to provide consistency across all conditions Before After

Document Type Definition (DTD) <!DOCTYPE ...> Should be declared as
the first line of a file. To define the markup language.

Backus Naur Form (BNF) • A compact way to represent
the grammar of computer languages • Many speciﬁcations use this format to describe legal syntax Example: sandwich ::= lower_slice [ mustard | mayonnaise ] lettuce? tomato? [ bologna | salami | ham ] {2,4} cheese + top_slice

DevTools Chrome DevTools https://developers.google.com/web/tools/chrome-devtools Firefox DevTools https://developer.mozilla.org/en-US/docs/Tools CanIUse https://caniuse.com/

The stakes are high

What is the cause of a webpage error? Could be
at any level

BTW… Each browsers render a different default

HTTP Status Codes • Grouped into categories • Links: ◦
https://www.iana.org/assignments/http-status-codes/ ◦ https://httpstatuses.com/

Server side errors - Include a message to end user

Could be a hardware issue

End user may not have same expectations as you

Remember that someone will inspect your code • Comment your
code. • Write clean code. Further advice: • https://css-tricks.com/diﬀerent-ways-to-format-c ss/ • https://developers.google.com/style/html-format ting

Community of Practice - Find your support group Web Design
Blogs • https://www.smashingmagazine.com/ • https://alistapart.com/ • https://codepen.io/spark/ • CoDrops • CSS-Tricks “Plumbing” (Backend blogs) • https://devops.com/ • http://highscalability.com/ • Superhero.js • https://scotch.io/ • http://www.echojs.com/

Cascading Style Sheets (CSS) • Used for describing the presentation
of a document written in HTML • Enables separation of presentation and content • In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself. ◦ Selectors may apply to all elements of a specific type, e.g. the second-level headers h2 ◦ elements specified by attribute, in particular: ▪ id: an identifier unique within the document ▪ class: an identifier that can annotate multiple elements in a document ▪ elements depending on how they are placed relative to others in the document tree.

CSS Speciﬁcity depends on the HTML structure

CSS Rules Speciﬁcity) Tree-Based Inheritance

CSS Pre-processors Tools that allow you to generate CSS from
preprocessor’s syntax. • May have added features that don’t come with CSS • Helps with maintaining large scale CSS structure https://sass-lang.com/ http://lesscss.org/

CSS Frameworks How to use: 1. Link to the style
sheets <link rel="stylesheet" href="css/bootstrap.min.css" > 2. Use their CSS classnames (see next slide) Some of the ones available • Bootstrap https://getbootstrap.com/ • Bulma https://bulma.io/ • Material Design https://material.io/ ...and more

Style Guides Examples: • http://styleguides.io/ • https://developer.android.com/design

Thank you ~ Questions? Katherine Chuang Lecturer, Department of Computer
& Information Science Brooklyn College of CUNY [email protected]

Web Development World

Web Development World

More Decks by Kat Chuang

Other Decks in Technology

Featured

Transcript