Web

SCIE.PRO Week 1 Seminar

What is Web?

Not internet

Is this the web?

Is thisslideshow the web?

Display
- HTML
- CSS
- Javascript
Transfer
- DNS
- URL
- HTTP
ETC
- Browser

Browser and Display is heavily tied together

Displays

 <html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h2>
            Test html
        </h2>
        <p>
            lorem ipsum
        </p>
    </body>
</html>

Test html

lorem ipsum

 body, html {
    margin: 0;
    padding: 0;
}
 
div {
    font-style: italic;
    color: red;
    background: yellow;
}

I'm styled!

 function add(a, b) {
    "use strict"
    console.log(`Adding ${a} ${b}`)
    return a + b;
}

Who designed them?

Mainstream Web Techs

ASP.NET
React
Vue
Angular
Solid
Svelte

PWA
Electron
RN/Flutter/Capacitor

Why learn Web?

Web is influential everywhere
1. Development kits for every platform
2. HTTP/Javascript/XML/you name it
3. RPG Maker - js
Everyone knows it
1. iGem
2. Easy to learn
Handy
1. This slideshow
2. Blog
3. 公众号推文/小程序
4. Create your own miniapp

Toying with the web

https://codepen.io/jokeneversoke/pen/RwgamMX

1

Web SCIE.PRO Week 1 Seminar

{"metaMigratedAt":"2023-06-16T09:20:12.599Z","metaMigratedFrom":"YAML","title":"SCIE.PRO Week 1","breaks":true,"slideOptions":"{\"transition\":\"slide\",\"theme\":\"serif\"}","contributors":"[{\"id\":\"de7ba0fd-4386-4495-835a-430eed3fb304\",\"add\":3055,\"del\":260}]"}

changed 4 years ago 266 views
owned this note

	<html>
	<head>
	<title>Hello World!</title>
	</head>
	<body>
	<h2>
	Test html
	</h2>
	<p>
	lorem ipsum
	</p>
	</body>
	</html>

	body, html {
	margin: 0;
	padding: 0;
	}

	div {
	font-style: italic;
	color: red;
	background: yellow;
	}

	function add(a, b) {
	"use strict"
	console.log(`Adding ${a} ${b}`)
	return a + b;
	}