{"id":523,"date":"2023-03-16T18:13:29","date_gmt":"2023-03-16T18:13:29","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/is270s23\/?p=523"},"modified":"2023-04-18T20:14:04","modified_gmt":"2023-04-18T20:14:04","slug":"week-3","status":"publish","type":"post","link":"http:\/\/miriamposner.com\/classes\/is270s23\/2023\/03\/16\/week-3\/","title":{"rendered":"Week 3"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Web-Building &amp; UX<\/h3>\n\n\n\n<p><em>You\u2019ll learn enough HTML and CSS to hand-code your own website, and we\u2019ll take a peek at the fields of UX and UI.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Read, view, and listen<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/theconversation.com\/a-nostalgic-journey-through-the-evolution-of-web-design-98626\" target=\"_blank\">A Nostalgic Journey through the History of Web Design<\/a>&nbsp;(article, 4 min.)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.usability.gov\/what-and-why\/user-experience.html\" target=\"_blank\">\u201cUser Experience Basics\u201d<\/a>&nbsp;and&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.usability.gov\/what-and-why\/user-research.html\" target=\"_blank\">\u201cUser Research Basics\u201d<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.darkpatterns.org\/\" target=\"_blank\">\u201cDark Patterns\u201d<\/a>&nbsp;(explore the website and list of dark patterns)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/design-justice.pubpub.org\/pub\/3h2zq86d\/release\/1\" target=\"_blank\">\u201cDesign Values: Hard-Coding Liberation?\u201d<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<p><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code<\/a><\/p>\n\n\n\n<p>(If you already have a code editor you like, you can skip this. If you don\u2019t know what a code editor is, download VS Code!)<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Create an account<\/h4>\n\n\n\n<p><strong><a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Github<\/a><\/strong><\/p>\n\n\n\n<p><em>This is so that you\u2019ll be able to publish your website via Github Pages. If you prefer not to sign up for Github, you can skip this; just know we may not be able to publish your site during classtime.<\/em>&nbsp;<em>If you already have a Github account, you can use that<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">In-Class Activities<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Networks &amp; Protocols Review<\/h5>\n\n\n\n<p><a href=\"https:\/\/app.peardeck.com\/student\/toljpmpyk\" target=\"_blank\" rel=\"noreferrer noopener\">In-class slides<\/a><\/p>\n\n\n\n<p>You can ask questions on <a href=\"https:\/\/app.sli.do\/event\/iCu6xBbcWV42ppoZXueLer\" target=\"_blank\" rel=\"noreferrer noopener\">this page<\/a>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">HTML &amp; CSS<\/h5>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.dropbox.com\/s\/z181uk2c1tjq3hn\/html%20css%20reference%20handouts.zip?dl=1\" target=\"_blank\">HTML and CSS reference handouts<\/a><\/p>\n\n\n\n<p>We\u2019ll walk through the following tutorials today. (You almost certainly won&#8217;t make it through all of them, and that&#8217;s OK! Feel free to continue on your own time if you&#8217;d like.)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/1kqKj28BPctLcWE9Fdfnx50ENcFzMunK7d-Y6rDU6Qck\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Create your first website with HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/1um7uBk0_POIaQRyorAggjXuDu83IcJzVhUw8QY_617c\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Paint that page with CSS<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.google.com\/presentation\/d\/1H-wfYgYpEZ9Try2kFLN_LEKcC2OUN0LEuu2-BE_Pt5g\/edit?usp=sharing\" target=\"_blank\">More advanced CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/1uUKhLGa13t-5rskWrX4cHm1e_xZ7QTJglT_PS1j8lKw\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Publish your site with Github Pages<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/docs.google.com\/presentation\/d\/180_OrEOt6Qf-CUwrbOCmB5du5swdjVeE2zms1HWeXS4\/edit?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">Make a fancy site with Mural<\/a><\/li>\n<\/ul>\n\n\n\n<p>Do you find it easier to follow videos? Watch me walk through these tutorials on video:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/share.descript.com\/view\/VP3aq6Aa5Gi\" target=\"_blank\">Create your first website with HTML<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/share.descript.com\/view\/VnWANUpSr4K\" target=\"_blank\">Paint that page with CSS<\/a><\/li>\n\n\n\n<li>More advanced CSS<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">Do you already know HTML &amp; CSS? <\/h5>\n\n\n\n<p>That\u2019s great! First of all, take a look around you and make sure none of your classmates needs help.<\/p>\n\n\n\n<p>Next, consider using the next hour or so to investigate some frameworks and technologies with which you\u2019re unfamiliar. I suggest:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/gohugo.io\/\">Hugo<\/a>&nbsp;or&nbsp;<a href=\"https:\/\/jekyllrb.com\/\">Jekyll<\/a>&nbsp;(static-site generators that can be used with GitHub Pages;&nbsp;<a href=\"https:\/\/programminghistorian.org\/en\/lessons\/building-static-sites-with-jekyll-github-pages\">here is a helpful Jekyll tutorial<\/a>)<\/li>\n\n\n\n<li><a href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a>&nbsp;(a modern, grid-based web framework in very wide use for front-end web design)<\/li>\n\n\n\n<li><a href=\"https:\/\/d3js.org\/\">D3<\/a>&nbsp;(a JavaScript library for data visualization; I suggest beginning with&nbsp;<a href=\"https:\/\/alignedleft.com\/work\/d3-book\">Scott Murray\u2019s book<\/a>)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Web-Building &#038; UX<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[4],"tags":[5],"class_list":["post-523","post","type-post","status-publish","format-standard","hentry","category-readings","tag-readings","entry"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}