SCIE.PRO Week 1

# Web *SCIE.PRO Week 1 Seminar* --- What is Web? Note: Not internet ----  <span style="background:white"> Is this the web? </span> ----  <span style="background:white"> Is this the web? </span> ----  <span style="background:white"> Is this the web? </span> ----  <span style="background:white"> Is this the web? </span> ---- Is {*this*|slideshow} the web? --- - Display - HTML  - CSS  - Javascript  - Transfer - DNS  - URL  - HTTP  - ETC - Browser  Note: Browser and Display is heavily tied together --- ### Displays ---- ```htmlmixed= <html> <head> <title>Hello World!</title> </head> <body> <h2> Test html </h2> <p> lorem ipsum </p> </body> </html> ``` <div class="fragment"> <h2> Test html </h2> <p> lorem ipsum </p> </div> ---- ```css= body, html { margin: 0; padding: 0; } div { font-style: italic; color: red; background: yellow; } ``` <div style="font-style:italic;color:red;background:yellow;" class="fragment"> I'm styled! </div> ---- ```javascript= function add(a, b) { "use strict" console.log(`Adding ${a} ${b}`) return a + b; } ``` --- ## Who designed them? ---- ![](https://i.imgur.com/rVntrkv.png) --- ## Mainstream Web Techs ---- - ASP.NET  - React  - Vue  - Angular  - Solid  - Svelte  ---- - PWA - Electron - RN/Flutter/Capacitor --- ## Why learn Web? Note: 1. Web is influential everywhere 1. Development kits for every platform 2. HTTP/Javascript/XML/you name it 3. RPG Maker - js 2. Everyone knows it 1. iGem 2. Easy to learn 3. Handy 1. This slideshow 2. Blog 3. 公众号推文/小程序 4. Create your own miniapp --- ## Toying with the web https://codepen.io/jokeneversoke/pen/RwgamMX