{"id":90,"date":"2022-01-03T19:49:32","date_gmt":"2022-01-03T19:49:32","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/is270w22\/?page_id=90"},"modified":"2022-01-21T15:19:02","modified_gmt":"2022-01-21T15:19:02","slug":"3-jan-21","status":"publish","type":"page","link":"https:\/\/miriamposner.com\/classes\/is270w22\/readings\/3-jan-21\/","title":{"rendered":"3: Jan. 21"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"week3\">Week 3: Jan. 21, 2022<\/h2>\n\n\n\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\"><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><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><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><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><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Install<\/h4>\n\n\n\n<p><strong><a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atom<\/a><\/strong><\/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 Atom!)<\/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:\/\/bruinlearn.ucla.edu\/courses\/76668\/files\/7058423?module_item_id=4112587\" target=\"_blank\" rel=\"noreferrer noopener\">How the Internet Really Works<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/bruinlearn.ucla.edu\/courses\/76668\/files\/7715424?module_item_id=4536743\" target=\"_blank\" rel=\"noreferrer noopener\">Sample PCAP file<\/a> (same as last week)<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dropbox.com\/s\/ff9vsg6skaixvyz\/Snoop%20on%20network%20activity%20with%20Wireshark.pdf?dl=0\" target=\"_blank\" rel=\"noreferrer noopener\">Last week&#8217;s Wireshark exercise<\/a><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">HTML &amp; CSS<\/h5>\n\n\n\n<p>We&#8217;ll walk through the following tutorials today:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/app.peardeck.com\/student\/tjkysmrlb\" target=\"_blank\" rel=\"noreferrer noopener\">Create your first website with HTML<\/a><\/li><li><a href=\"https:\/\/app.peardeck.com\/student\/taefvbpir\" target=\"_blank\" rel=\"noreferrer noopener\">Paint that page with CSS<\/a><\/li><li><a href=\"https:\/\/app.peardeck.com\/student\/tjrwidcdy\" target=\"_blank\" rel=\"noreferrer noopener\">More advanced CSS<\/a><\/li><\/ul>\n\n\n\n<p>Do you find it easier to follow videos? Watch me walk through these tutorials on video:<meta charset=\"utf-8\"><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/share.descript.com\/view\/VP3aq6Aa5Gi\" target=\"_blank\">Create your first website with HTML<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/share.descript.com\/view\/VnWANUpSr4K\" target=\"_blank\">Paint that page with CSS<\/a><\/li><li>More advanced CSS<\/li><\/ul>\n\n\n\n<p>Do you already know HTML &amp; CSS? <a href=\"http:\/\/miriamposner.com\/classes\/dh201w21\/tutorials-guides\/web-development\/i-already-know-html-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Try this instead<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Week 3: Jan. 21, 2022 Web-Building &amp; UX 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&hellip; <a class=\"more-link\" href=\"https:\/\/miriamposner.com\/classes\/is270w22\/readings\/3-jan-21\/\">Continue reading <span class=\"screen-reader-text\">3: Jan. 21<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":18,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":0,"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/pages\/18"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/classes\/is270w22\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}