Notes for Web Dev Intro for Students By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 http://www.granneman.com ## Slide 8 https://en.wikipedia.org/wiki/Markup_language ## Slide 9 Markup is not programming ## Slide 10 This is AppleScript, so yes, this is programming ## Slide 11 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 12 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 13 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 14 https://en.wikipedia.org/wiki/File:W3C_Icon.svg ## Slide 15 https://en.wikipedia.org/wiki/HTML#HTML_versions_timeline https://en.wikipedia.org/wiki/HTML#HTML_draft_version_timeline: “October 1991: HTML Tags, an informal CERN document listing 18 HTML tags, was first mentioned in public” HTML draft: https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt (June 1993) ## Slide 16 https://web.archive.org/web/20060819035802/http://www.adobe.com/macromedia/proom/pr/2005/unveiling_flashplatform.html ## Slide 17 HTML developed for documents, not programs/apps or page layout & design http://www.w3.org/Proposal.html Tim Berners-Lee, “WorldWideWeb: Proposal for a HyperText Project”, November 12, 1990 ## Slide 18 HTML developed for documents, not programs/apps or page layout & design http://www.w3.org/Proposal.html Tim Berners-Lee, “WorldWideWeb: Proposal for a HyperText Project”, November 12, 1990 ## Slide 19 Notice that Application is central to this group, not documents! https://en.wikipedia.org/wiki/File:WHATWG_logo.svg ## Slide 22 https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/ ## Slide 23 https://html.spec.whatwg.org/multipage/ ## Slide 24 https://www.w3.org/Style/CSS/current-work No CSS at the WHATWG website ## Slide 26 https://caniuse.com, 2020-09-08 ## Slide 27 https://caniuse.com/?search=grid ## Slide 28 https://caniuse.com/?search=grid ## Slide 29 https://caniuse.com/?search=grid ## Slide 30 https://caniuse.com/?search=grid ## Slide 31 https://caniuse.com/?search=grid ## Slide 32 https://caniuse.com/?search=grid ## Slide 36 https://medium.freecodecamp.org/why-you-should-care-about-supporting-older-browsers-39bbc28fb7fd ## Slide 39 Viewport != screen size, except on mobile devices, where every app is full screen ## Slide 43 Last legacy Edge was 19; new Chromium-based Edge starts at version 79 (nicknamed Edgium, because it’s Chromium-based) https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/ ## Slide 44 https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 ## Slide 46 https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium * Vivaldi (2016): aimed at power users * Brave (2016): privacy-focused, with Brave Attention Tokens * Blisk (2016): aimed at web developers, featuring device simulations * Epic (2013): privacy-focused & aimed at Indian users * Amazon Silk (2011): developed by Amazon for Kindle Fire ## Slide 47 StatCounter. “Browser Market Share Worldwide”. Statcounter Global Stats, https://gs.statcounter.com/browser-market-share#monthly-200901-202201. Web. 23 January 2022. ## Slide 49 https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/ https://en.wikipedia.org/wiki/Microsoft_Edge ## Slide 51 Spyglass ➝ IE (Mac & UNIX version killed) ➝ Edge (EdgeHTML) ➝ Edge (Chromium) ## Slide 52 Mosaic ➝ Mozilla (Mosaic Killer) Netscape ➝ Mozilla ## Slide 53 Konqueror (KHTML) ➝ Safari (WebKit) ➝ Chrome ➝ Chrome () ➝ Chromium-based browsers (Brave, Vivaldi, Opera, Edge, Yandex) ## Slide 62 https://en.wikipedia.org/wiki/Protocol https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol ## Slide 92 Diagram by Jans Carton ## Slide 93 Note: A background color is set on the Document, which is inherited by the other nodes in the document except for the Sidebar, which has a different background color that is then inherited by everything in it A default font is set on the Document, which is also inherited, except for the Sidebar, which reduces the size of the font Headers have a different font to set them apart from the body text Diagram by Jans Carton ## Slide 94 Diagram by Jans Carton ## Slide 95 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 96 Exceptions: Some HTML elements are conveniences for avoiding writing CSS (e.g., , , ) or for structure (
& ) Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition) Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior ## Slide 101 To see the Develop menu in Safari, you must first open Safari Preferences > Advanced, & then check Show Develop menu in menu bar Using the Inspector does not show you the source by default; it shows you a representation of the DOM — more on that in CSS Overview ## Slide 103 https://www.nytimes.com; accessed July 27, 2019 ## Slide 104 https://www.nytimes.com; accessed July 27, 2019 ## Slide 105 https://www.nytimes.com; accessed July 27, 2019 ## Slide 106 http://codepen.io/websanity/pen/xmuyH ## Slide 107 http://codepen.io/websanity/pen/xmuyH ## Slide 108 http://codepen.io/websanity/pen/xmuyH ## Slide 109 http://codepen.io/websanity/pen/xmuyH ## Slide 110 http://codepen.io/websanity/pen/xmuyH ## Slide 112 http://codepen.io/websanity/pen/xmuyH ## Slide 113 http://codepen.io/websanity/pen/xmuyH ## Slide 114 http://codepen.io/websanity/pen/xmuyH ## Slide 117 https://html.spec.whatwg.org/multipage/syntax.html#void-elements ## Slide 121 https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element ## Slide 122 https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element ## Slide 123 https://www.w3.org/TR/html5/forms.html#the-input-element ## Slide 124 https://www.w3.org/TR/html5/forms.html#the-input-element ## Slide 126 Order does matter to humans, so figure out what works for your team & stick to that ## Slide 130 SGML: Standard Generalized Markup Language; see https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language ## Slide 131 https://en.wikipedia.org/wiki/Quirks_mode ## Slide 133 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid#Doctype ## Slide 134 https://www.granneman.com/webdev/coding/dtds/ ## Slide 137 https://en.wikipedia.org/wiki/Mojibake ## Slide 142 http://en.wikipedia.org/wiki/ASCII ## Slide 143 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 145 Unicode 13: “This is a list of Unicode characters; there are 143,859 characters, with Unicode 13.0, covering 154 modern and historical scripts, as well as multiple symbol sets.” ; 2020-08-05 “Version: 1.0.0; Date: October 1991” , 2020-08-05 1,112,064: , 2020-08-05 Version 11 “As of version 11.0, Unicode contains a repertoire of over 137,000 characters covering 146 modern and historic scripts, as well as multiple symbol sets.” https://en.wikipedia.org/wiki/List_of_Unicode_characters “In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).” https://en.wikipedia.org/wiki/Noto_fonts ## Slide 146 “Unicode 14.0 represents emoji using 1,404 characters spread across 24 blocks”: Wikipedia contributors. “Emoji”. Wikipedia, The Free Encyclopedia, 17 Jan. 2022, https://en.wikipedia.org/w/index.php?title=Emoji&oldid=1066179514. Web. 23 Jan. 2022. “Unicode 13.0 represents emoji using 1,367 characters spread across 24 blocks”: https://en.wikipedia.org/w/index.php?title=Emoji&oldid=970907448, 2020-08-06) ## Slide 147 https://en.wikipedia.org/wiki/Emoticon#Japanese_style ## Slide 148 https://en.wikipedia.org/wiki/Emoticon ## Slide 149 https://en.wikipedia.org/wiki/Emoticon ## Slide 150 http://www.fileformat.info/info/unicode/block/index.htm ## Slide 151 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 152 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 153 https://www.dampfkraft.com/ghost-characters.html https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 154 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 155 https://www.dampfkraft.com/ghost-characters.html ## Slide 156 2020: “UTF-8 is by far the most common encoding for the World Wide Web, accounting for over 95% of all web pages, and up to 100% for some languages, as of 2020.“ , 2020-08-05 2009: , 2020-08-05 2018: “UTF-8 has been the dominant character encoding (the ‘mandatory’ Unicode encoding) for the World Wide Web since 2009, and as of October 2018 accounts for 92.5% of all web pages (some of which are simply ASCII, as it's a subset of UTF-8) and 95.0% of the top 1,000 highest ranked web pages.” https://en.wikipedia.org/wiki/UTF-8 ## Slide 157 http://www.utf8everywhere.org ## Slide 158 “In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).” https://en.wikipedia.org/wiki/Noto_fonts https://www.google.com/get/noto/ ## Slide 161 https://www.google.com/get/noto/#sans-lgc ## Slide 166 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid#_element_and_charset_attribute ## Slide 168 https://html.spec.whatwg.org/multipage/semantics.html#charset ## Slide 171 https://www.granneman.com/webdev/coding/characterencoding/ ## Slide 174 http://codepen.io/websanity/pen/xmuyH ## Slide 176 http://codepen.io/websanity/pen/vdjfz ## Slide 177 http://codepen.io/websanity/pen/xmuyH Tricked you! There aren’t any differences in the rendered webpage on the right! ## Slide 182 http://codepen.io/websanity/pen/uIzeg?editors=100 ## Slide 202 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 203 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 204 Stefán Jökull Sigurðarson - CCP Ghostrider [@stebets]. “[Animated gif of running baby]”. Twitter, 3 November 2021, https://twitter.com/stebets/status/1456040940053860353. Web. 28 November 2021. ## Slide 206 https://www.youtube.com/watch?v=JJ9x1peCJRg http://justsolve.archiveteam.org/wiki/PC-Write ## Slide 207 http://www.jnkmail.com/stuff/nostalgia/ ## Slide 227 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 230 https://code.visualstudio.com ## Slide 232 https://github.com/Microsoft/vscode ## Slide 239 http://codepen.io ## Slide 240 http://codepen.io/websanity/ ## Slide 242 http://codepen.io/websanity/pen/veJdq ## Slide 243 http://codepen.io/MateiGCopot/pen/BfAhe WebSanity did NOT do this ## Slide 247 NetPositive (BeOS) ## Slide 251 Image: Harris, Scott Duke. “Andreessen launches high-profile venture capital firm”. The Mercury News, 2 July 2009 (updated 14 August 2016). https://www.mercurynews.com/2009/07/02/andreessen-launches-high-profile-venture-capital-firm/. ## Slide 252 Image: ITU Pictures. “1990-01” [Tim Berners-Lee with WorldWideWeb]. Flickr, 11 July 1994. Licensed CC BY 2.0. https://www.flickr.com/photos/itupictures/16662336315/in/photostream/. ## Slide 265 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 267 Bruce McAllister, near Ogden, Utah, April 1974, From the collection of: U.S. National Archives. https://artsandculture.google.com/exhibit/AQfyFcoI. ## Slide 271 https://en.wikipedia.org/wiki/Internet_Explorer_for_Mac_OS_X Gravestone in a cemetery in winter with snow - death white - Petr Kratochvil - FreeStockPhotos.biz - 9185 - CC0 1.0 ## Slide 272 https://www.apple.com/newsroom/2003/06/23Apple-Releases-Safari-1-0/ ## Slide 273 https://www.pxfuel.com/en/free-photo-oymtx ## Slide 280 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 306 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 318 https://addons.mozilla.org/en-US/firefox/ ## Slide 319 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 320 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 325 200 extensions installed! ## Slide 328 https://www.apple.com/safari/, 2014-06-30 ## Slide 330 https://www.apple.com/safari/, 2014-06-30 ## Slide 335 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 336 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 337 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html