WEB DEVELOPMENT: BREAKING IT DOWN By Chen Hui Jing / @hj_chen - - PowerPoint PPT Presentation

▶
web development breaking it down
SMART_READER_LITE
LIVE PREVIEW

WEB DEVELOPMENT: BREAKING IT DOWN By Chen Hui Jing / @hj_chen - - PowerPoint PPT Presentation

Dec 01, 2023 141 likes •599 views

GENERAL ASSEMBLY WEB DEVELOPMENT: BREAKING IT DOWN By Chen Hui Jing / @hj_chen GENERAL ASSEMBLY INTERNET BASICS WHAT IS THE INTERNET? The entire network of networks that connect all the world's devices to each other facebook.com Data is

slide-1
SLIDE 1

WEB DEVELOPMENT: BREAKING IT DOWN

By /

GENERAL ASSEMBLY

Chen Hui Jing @hj_chen

slide-2
SLIDE 2

INTERNET BASICS

GENERAL ASSEMBLY

slide-3
SLIDE 3

WHAT IS THE INTERNET?

The entire network of networks that connect all the world's devices to each other

slide-4
SLIDE 4
slide-5
SLIDE 5

nielsen.com facebook.com ISP

Data is broken up into packets Routers direct packets around the internet

slide-6
SLIDE 6

INTERNET ≠ WORLD WIDE WEB

Internet World wide web Estimated year of

  • rigin

1969 1993 Name of first version ARPAnet NSFnet Comprises Network of devices, copper wires, fibre-

  • ptic cables and wireless networks

Files, folders & documents stored in various computers Governed by Internet Protocol (IP) Hypertext Transfer Protocol (HTTP) Dependency None, everything else depends on it The internet Nature Hardware Software

Source: Diffen

slide-7
SLIDE 7

PROTOCOLS

A protocol is an agreed set of rules and standards that allow devices to communicate with each other.

Internet Protocol (IP) To route information to the proper address Hypertext Transfer Protocol (HTTP) For the transmission of web pages over the internet Transmission Control Protocol (TCP) To create packets, reassemble them, make sure none were lost in transmission Simple Mail Transfer Protocol (SMTP) For computers to send email Post Office Protocol (POP) For computers to receive email File Transfer Protocol (FTP) For copying files over a network from one computer to another

slide-8
SLIDE 8

ABOUT WEB DEVELOPMENT

GENERAL ASSEMBLY

slide-9
SLIDE 9

WHAT IS WEB DEVELOPMENT?

The process of building websites

slide-10
SLIDE 10

A clear mind

HOW TO GET STARTED?

Your computer

This image is pure CSS. Modified from this by Will Paige brilliant codepen

slide-11
SLIDE 11

Javascript

Code credit:

C

Code credit:

Assembly

Code credit:

CODE IS NUMBERS, LETTERS AND SYMBOLS

Regardless of what programming language you use, all code can be read in any text editor.

close: function () { this.ul.setAttribute("hidden", ""); this.index = -1; $.fire(this.input, "awesomplete-close"); },

Lea Verou

#include "8cc.h" static int count_leading_ones(char c) { for (int i = 7; i >= 0; i--) if ((c & (1 << i)) == 0) return 7 - i; return 8; }

Rui Ueyama

ctable segment para public 'DATA db 9 dup(' ') db 9,10,' ',12,13 db 13 dup(' ') db 27 db 4 dup(' ') db ' !"#$%&',39,'()*+,-./0123456789:; db 'ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`'

Happy codings

slide-12
SLIDE 12

PROGRAMMING FOR THE WEB

GENERAL ASSEMBLY

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17

HYPERTEXT MARK-UP LANGUAGE (HTML)

GENERAL ASSEMBLY

slide-18
SLIDE 18

HYPERTEXT MARK-UP LANGUAGE (HTML)

Structures the document and tells browsers what a certain element's function is Content is "marked-up" using tags Tags usually (but not always) come in pairs, The opening tag, closing tag and everything in between is a HTML element

<p>This is an example of a paragraph element</p>

slide-19
SLIDE 19

HISTORY OF HTML

Invented by Tim Berners-Lee in 1989 as a means for easy linking of references in research papers using hypertext Created the Hypertext Transfer Protocol (HTTP) for retrieving text from other documents via hypertext links Specifications were introduced as a guide for standardisation among browser vendors

slide-20
SLIDE 20

STRUCTURE OF HTML DOCUMENT

<!DOCTYPE html> <html> <head> <title>Example page</title> </head> <body> <h1>Hello world</h1> </body> </html>

slide-21
SLIDE 21

DOCUMENT TYPE ELEMENT

Appears just above the <html> tag Tells the browser to render the HTML in standards mode Let's validation software know which version of HTML to validate against Advised to use the HTML5 doctype

<!DOCTYPE html>

slide-22
SLIDE 22

<html> ELEMENT

Represents the root of an HTML document Encouraged to specify a language attribute Language attribute aids speech synthesis (screen readers), translation tools and other language-related functionality

<html lang="en"> // HTML code for web page </html>

slide-23
SLIDE 23

<head> ELEMENT

Contains instructions for the browser and meta data for the website Title and description are what shows up on search engine results Stylesheets are also declared here

<head> <meta charset="utf-8"> <title>Your site title</title> <meta name="description" content="A short description of your website"> <meta name="author" content="Your name"> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head>

slide-24
SLIDE 24

<body> ELEMENT

Represents the main content of the document Should only be one <body> element on a web page

<body> <header> <img src="img/logo.png" alt="Site logo"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <h1>Page header</h1> <p>Some content in a paragraph. Brownie tiramisu toffee sweet roll sesame snaps halvah. Fruitcake donut pie ice cream jujubes danish dragée. Bear claw jelly dessert lemon drops bonbon donut. Sugar plum sugar plum candy canes ice cream powder tootsie roll sweet. Sugar plum biscuit macaroon fruitcake cookie cupcake jelly-o cupcake. <main> </body>

slide-25
SLIDE 25

FORMATTING YOUR WEB PAGE

<address> <article> <footer> <header> <h1> <h2> <h3> <h4> <h5> <h6> <hgroup> <nav> <section> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <main> <ol> <p> <pre> <ul> <caption> <col> <colgroup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <button> <datalist> <fieldset> <form> <input> <keygen> <label> <legend> <meter> <optgroup> <option> <output> <progress> <select> <details> <dialog> <menu> <menuitem> <summary> <abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr> <area> <audio> <map> <track> <video> <embed> <object> <param> <source> <canvas> <noscript> <script> <del> <ins>

slide-26
SLIDE 26

SEMANTICS AND ACCESSIBILITY

To make the web easier to use and access, and available to everyone Encompasses all disabilities, including visual, auditory, physical, speech, cognitive and neurological disabilities Benefits people without disabilities as well Accessible websites benefit from search engine

  • ptimisation (SEO)
slide-27
SLIDE 27

BASIC ACCESSIBILITY CHECKLIST (1/2)

Page title: To adequately and briefly describe the content of the page Image text alternatives: To make visual information accessible Headings: To provide meaningful hierarchy for facilitation of navigation Contrast ratio: To have sufficient luminance contrast ratio, for people with different requirements Resize text: To ensure visibility and usability as text size increases

slide-28
SLIDE 28

BASIC ACCESSIBILITY CHECKLIST (2/2)

Keyboard access & visual focus: To provide full functionality through a keyboard, and visible focus with logical order Forms, labels & errors: To have proper labels, keyboard access, clear instructions, and effective error handling Multimedia alternatives: To have alternative formats for audio and visual impaired Visit to understand more about this important aspect of the web Web Accessibility Initiative (WAI)

slide-29
SLIDE 29

CASCADING STYLE SHEETS (CSS)

GENERAL ASSEMBLY

slide-30
SLIDE 30

CASCADING STYLE SHEETS (CSS)

Tells the browser how to display a certain element Follows the general ruleset:

  • 1. Select the HTML element to be styled
  • 2. Specify the properties of the element to be styled
  • 3. Give the values we want each property to have
slide-31
SLIDE 31

STRUCTURE OF A CSS RULE

The selector identifies which HTML elements the rule will be applied to The curly braces contain the property-value pairs, separated with semi-colons The properties define the style of the selected element The values are dependent on the property, and indicate the value of the properties to be set

selector { property1: value; property2: value; property3: value; }

slide-32
SLIDE 32

TYPES OF CSS SELECTORS

Element: matches all the elements of that name on the page Class: matches all the elements with the specified class attribute, e.g. <div class="example"> ID: matches the element with the specified id attribute, e.g. <div id="example">

p {} .example {} #example {}

slide-33
SLIDE 33

0-∞

Inline styles

0-∞

IDs

0-∞

Classes, attributes and pseudo- classes

0-∞

Elements and pseudo- elements 0, 0, 0, 1 0, 0, 2, 1 0, 1, 1, 1

CSS SPECIFICITY

ul { // CSS properties } .class-1 .class-2 p { // CSS properties } #id-1 .class-3 div { // CSS properties }

slide-34
SLIDE 34

JAVASCRIPT

GENERAL ASSEMBLY

slide-35
SLIDE 35

JAVASCRIPT

A cross-platform, object-oriented scripting language Can run directly in the browser, does not need to be compiled first Allows greater control of web page behaviour Is a full-fledged programming language, with

  • perators, control structures and statements
slide-36
SLIDE 36

BRIEF HISTORY OF JAVASCRIPT

Invented in 10 days by Brendan Eich of Netscape Was taken to the European Computer Manufacturers Association (ECMA) for standardisation in 1996 Currently on the 6th edition, known as ECMAScript 2015, or ES6

slide-37
SLIDE 37

Client-side Javascript Provides a means of controlling the browser and its Document Object Model Examples are form validation, load more buttons, image galleries and so on Server-side Javascript Usually refers to Provides a customised response based on user (client) requests For example, displaying your profile information after you logged in

CLIENT-SIDE VS SERVER-SIDE

node.js

slide-38
SLIDE 38

WHAT IS AN API?

Stands for Application Programming Interface A means for your web page to access data from another source Usually a URL, that when accessed, returns data in a standardised format (often, JSON)

slide-39
SLIDE 39

EXAMPLE WEATHER API

// 20160211134054 // http://api.openweathermap.org/data/2.5/weather?id=1880251&appid=44db6a862fba0b067b1930da0d769e98 { "coord": { "lon": 103.8, "lat": 1.37 }, "weather": [ { "id": 803, "main": "Clouds", "description": "broken clouds", "icon": "04d" } ], "base": "stations", "main": { "temp": 302.15, "pressure": 1010, "humidity": 74, "temp_min": 302.15, "temp_max": 302.15

slide-40
SLIDE 40

WEB APIS

Give the browser and server the ability to perform many tasks DOM is actually an API that allows access and modification of the web page Device APIs let web developers access hardware features Communication APIs let devices, applications and web pages talk to each other, e.g. web notifications, push etc.

slide-41
SLIDE 41

RESOURCES

GENERAL ASSEMBLY

slide-42
SLIDE 42

TO FIND OUT MORE...

(online course) (online course) (website) by (book) by (book) Dash Codeacademy Mozilla Developer Network (MDN) HTML & CSS: Design and Build Web Sites Jon Duckett Eloquent Javascript Marijn Haverbeke

slide-43
SLIDE 43

SIGN UP FOR GA COURSES

(full-time) (part-time) (part-time) (part-time) Web Development Immersive Front-end development Javascript development Back-end development Various classes and workshops

slide-44
SLIDE 44

GENERAL ASSEMBLY http://www.chenhuijing.com @hj_chen @hj_chen @huijing