rss.xml

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>IST 402</title>
    <link>/rss.xml</link>
    <description>Web Technologies and Activism</description>
    <copyright>Copyright (C) 2021 </copyright>
    <language>en-us</language>
    <lastBuildDate>Wed, 10 Feb 2021 23:35:08 -0500</lastBuildDate>
    <atom:link href="/rss.xml" rel="self" type="application/rss+xml"/>
    <item>
      <title>W4 SEO & A11y</title>
      <link>/item-2f6e07c1-3c7c-49d7-993f-3799dfa13ea6</link>
      <description>
          <![CDATA[ <h3 id="header-bc5b3d65-6131-6cb8-274a-7291fefee156">Scenario</h3>
<ul><li>There are websites on the internet that are not made up to snuff for accessibility and that makes people without screens mad</li>
<li>Beyond mad, it makes them unable to actually use your product / website</li>
<li>This is both bad to do to a human being and stupid; you want their cash regardless of how they use your website!</li>
<li>But if only there were ways of learning how to improve the accessibility and SEO of a website at the same time...</li>
</ul>
<h3 id="header-7ba5b74c-b1ff-d6de-18bc-79dcc0f4d062">Deliverable</h3>
<ul><li>Perform a web.dev / lighthouse and WAVE audit on a website</li>
<li>Review the feedback it gives and identify three areas for improvement from the audit that were things you didn’t know about before</li>
<li>Research (Google) how to solve these things and propose potential solutions to the problems</li>
<li>These problems can be SEO / A11y / Performance related; anything that’s given by the reports that you can interpret, research and then write / do a video about how to resolve</li>
</ul>
<h3 id="header-6869354b-dd1c-46fe-7670-a1e78b49cf4c">Option 1</h3>
<ul><li>Audit a website for a club, small business or other website affiliated with you or important to you in some way</li>
<li>This could also be something you don’t care about, just has to be something that generates meaningful data to analyze</li>
<li>Write on dev.to or hax.psu.edu for this option</li>
<li>If you own the site and can fix it this would make for an even more powerful / actionable way to solve this</li>
</ul>
<h3 id="header-de46fb17-799f-7128-ace9-6626fd21eb30">Option 2</h3>
<ul><li>Audit a specific page in the course website or using hax.psu.edu to make a basic hello-world page</li>
<li>Do your write up in our team’s issue queue <a href="https://github.com/elmsln/issues/issues">https://github.com/elmsln/issues/issues</a>
</li>
<li>By doing this you’ll help our projects (which are big while team is small) and improve your own SEO footprint via github posting / cross posting</li>
<ul><li>next week we’ll get into github so this is a look ahead</li>
</ul>
</ul>
<h3 id="header-89aae1e2-67ac-990c-e170-c5990ec7db37">Submission</h3>
<ul><li>Create the post, link to you video in the post</li>
<li>Submit link to post in <b>#lab4-a11y-seo</b>
 channel on Slack</li>
<li>This is due by Sunday at 11:59pm</li>
</ul>
<h3 id="header-cdd790e1-47ee-740f-6380-1149218a4c3d">Rubric</h3>
<ul><li>Did you run a Lighthouse / web.dev / WAVE audit  (20%)</li>
<li>Did you write / research 3 areas for improvement (40%)</li>
<li>Did you do a video explaining the process / how to use these tools and what they are (40%)</li>
<li>Evaluation is contextual based on which option you pick.</li>
</ul>
 ]]>
      </description>
      <category></category>
      <guid>/item-2f6e07c1-3c7c-49d7-993f-3799dfa13ea6</guid>
      <pubDate>Wed, 10 Feb 2021 23:35:08 -0500</pubDate>
    </item>
    <item>
      <title>W3 JavaScript</title>
      <link>/item-cf20c5a6-e0da-48ea-85b6-1cb50a852928</link>
      <description>
          <![CDATA[ <h3 id="header-3fcab691-d01a-1854-2c21-b94bc94e9383">Scenario<span id="docs-internal-guid-95be3417-7fff-b5de-f865-e110297d2579"></span></h3>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation">You are told IST makes you learn on your own</p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation">That you’ll just Google everything and do it yourself</p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation">Well, this week, thanks in part to a snow cancellation at your teacher’s, kids’ school, you’ll get just that</p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 16pt;" role="presentation">“I didn’t have enough time to make an interesting lab scenario, for which I am truly sorry. Some day, you’ll have kids, and they’ll play video games loudly next to you, and you’ll say ‘Wow… this is distracting… I bet I won’t be able to make a full lab and just like, tell them to teach themselves something of value’”</p>
</li>
</ul>
<h3 id="header-b6c77447-6735-ca73-ff2c-1277dd2283ef"><span>Option 1</span></h3>
<ul style="margin-top:0;margin-bottom:0;">
<li>Try out VueJS</li>
<li>Look over some examples: 
          
      <a href="https://vuejs.org/v2/examples/" style="font-size: var(--hax-base-styles-p-font-size); font-family: var(--haxcms-base-styles-body-font-family); letter-spacing: var(--hax-base-styles-p-letter-spacing);">
            
        https://vuejs.org/v2/examples/</a>
</li>
<li>Run through the “Scrimba” interactive videos in the Introduction </li>
<ul><li><a href="https://vuejs.org/v2/guide/index.html" style="font-size: var(--hax-base-styles-p-font-size); font-family: var(--haxcms-base-styles-body-font-family); letter-spacing: var(--hax-base-styles-p-letter-spacing);">
            
        https://vuejs.org/v2/guide/index.html</a>
</li>
</ul>
<li>Make a very basic Vue component using an aspect of your resume to make a building block</li>
<li>Write up your thought process for selecting how your component should function</li>
<li>Do your video explaining the Vue component you made</li>
<li>When I say “Make a Vue Component from resume” I mean like the top bar that has a photo of you + name + link to your youtube channel</li>
<li>top-area</li>
<ul style="margin-top:0;margin-bottom:0;"><li>title</li>
<li dir="ltr" style="list-style-type: circle; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>image</span></p>
</li>
<li dir="ltr" style="list-style-type: circle; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>link to video</span></p>
</li>
</ul>
<li><span>So take your resume template that</span> <span>has already working css / HTML</span></li>
<li>Apply the concepts of Vue to make a reusable element</li>
</ul>
<h3 id="header-6dad8924-e08b-d066-40aa-ea9e0aa050a4"><span>Option 2</span></h3>
<ul style="margin-top:0;margin-bottom:0;">
  
  <li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">
Use 
      
    <a href="https://open-wc.org/" style="">
       https://open-wc.org/
      </a>
to make a boilerplate project</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">Install the tooling (will need to get NodeJS first)</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">Create a really trolly repo using these two custom elements</li>
<ul><li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">@lrnwebcomponents/meme-maker</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">@lrnwebcomponents/moar-sarcasm</li>
</ul>
<li>Write a blog post detailing how to use these tags in a project and your experience with Web components</li>
<li>Do your video installing and implementing a trolly asset from NPM</li>
<li>Collin (past IST 402) did an excellent tutorial on LitElement from zero to simple card element and explaining the process</li>
<ul><li><a href="https://www.youtube.com/watch?v=8gMDhXWMxRg&t=2s" style="font-size: var(--hax-base-styles-list-font-size,var(--hax-base-styles-p-font-size)); letter-spacing: var(--haxcms-base-styles-body-letter-spacing); font-family: var(--haxcms-base-styles-body-font-family);">https://www.youtube.com/watch?v=8gMDhXWMxRg&t=2s</a>
</li>
</ul>
<li><span>Try LitElement Tutorial takes ~ 30 minutes and I highly recommend it</span></li>
<ul><li><a href="https://lit-element.polymer-project.org/try" style="font-size: var(--hax-base-styles-list-font-size,var(--hax-base-styles-p-font-size)); font-family: var(--haxcms-base-styles-body-font-family); letter-spacing: var(--haxcms-base-styles-body-letter-spacing);">https://lit-element.polymer-project.org/try</a>
</li>
</ul>
<li>Ask questions if you run into them, this is what my team does for a living</li>
</ul>
<h3 id="header-065fdd84-22fe-361d-22f1-3d220e69b092"><span>Option 3</span></h3>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span>Work through a Tutorial on React and then LitElement</span></p>
</li>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: circle; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><a href="https://reactjs.org/tutorial/tutorial.html" style=""><span>https://reactjs.org/tutorial/tutorial.html</span></a>
</p>
</li>
<li dir="ltr" style="list-style-type: circle; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><a href="https://lit-element.polymer-project.org/try" style=""><span>https://lit-element.polymer-project.org/try</span></a>
</p>
</li>
</ul>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>Which made more sense to you? What is similar between the two projects in what you can do (and how)? What’s different?</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>Find other articles explaining the difference between the React </span><span>FRAMEWORK</span><span> and the LitElement </span><span>LIBRARY</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>What’s different between a library and framework (bullet points help)</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:16pt;" role="presentation"><span>Write up ~500 words explaining the above and why it matters.</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:16pt;" role="presentation"><span>Do a video version of the above write up / screencast</span></p>
</li>
</ul>
<ul style="margin-top:0;margin-bottom:0;">
</ul>
<h3 id="header-ddafdef8-d9c5-a28a-61a7-daf7a9bbc1e9">Submission</h3>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span>Create the post, link to you video in the post</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>Submit link to post in </span><span>#lab3-javascript</span><span> channel on Slack</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span>This is due by Wed, Feb 10 at 11:59pm</span></p>
</li>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: circle; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 16pt;" role="presentation"><span>This is because there is no class Next Tuesday</span></p>
</li>
</ul>
</ul>
<h3 id="header-8f6244a4-36a8-0477-25ca-520bb6fa4267">Rubric</h3>
<ul style="margin-top:0;margin-bottom:0;"><li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height: 1.38; margin-top: 0pt; margin-bottom: 0pt;" role="presentation"><span>Did you make a video that demonstrates technique but also illustrates that you tried to install / learn more about one of the three options requested (50%)</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:16pt;" role="presentation"><span>Did you write up how others could get started and use the project like you did (50%)</span></p>
</li>
<li dir="ltr" style="list-style-type: disc; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:16pt;" role="presentation"><span>Evaluation is contextual based on which option you pick.</span></p>
</li>
</ul>
 ]]>
      </description>
      <category></category>
      <guid>/item-cf20c5a6-e0da-48ea-85b6-1cb50a852928</guid>
      <pubDate>Mon, 25 Jan 2021 23:15:57 -0500</pubDate>
    </item>
    <item>
      <title>W13 Final Project</title>
      <link>/item-3865aac5-97b9-4164-bdf3-68c7c0d59ea6</link>
      <description>
          <![CDATA[ <p></p> ]]>
      </description>
      <category></category>
      <guid>/item-3865aac5-97b9-4164-bdf3-68c7c0d59ea6</guid>
      <pubDate>Mon, 25 Jan 2021 23:15:57 -0500</pubDate>
    </item>
    <item>
      <title>SEO & A11y</title>
      <link>/topics/oerschema-1</link>
      <description>
          <![CDATA[ <p>This week we'll be looking at Accessibility and SEO.</p>
<p>This is a "wellness" week which means we'll have a bit lighter lesson, learn a bit about accessibility and SEO, give classmates feedback on their brand.</p>
<p>more about SEO in real life</p>
 ]]>
      </description>
      <category></category>
      <guid>/topics/oerschema-1</guid>
      <pubDate>Wed, 22 Jan 2020 16:54:55 -0500</pubDate>
    </item>
    <item>
      <title>Glossary</title>
      <link>/resources/glossary</link>
      <description>
          <![CDATA[ <p style="width: 100%;">This is a living glossary of terms from students who have taken the course (with some help from me in assembly)</p>
<md-block source="https://raw.githubusercontent.com/btopro/ist402/master/files/glossary.md" style="width: 100%;"></md-block>
 ]]>
      </description>
      <category></category>
      <guid>/resources/glossary</guid>
      <pubDate>Mon, 20 Jan 2020 10:28:13 -0500</pubDate>
    </item>
    <item>
      <title>Links to learn more</title>
      <link>/resources/links-to-learn-more</link>
      <description>
          <![CDATA[ <p>Links to learn more about topics. This is an organic list built by me, past students and current students.</p>
<h2 id="header-044436f7-f6ab-80e2-9a83-8e4da81fb359">Web Development</h2>
<p>Tools</p>
<ul><li><a href="https://code.visualstudio.com/">VSCode</a>
</li>
<li><a href="https://github.com/">Github</a>
 /  <a href="https://desktop.github.com/">Github GUI</a>
</li>
</ul>
<p>Intro to Web Development</p>
<ul><li><a href="https://codepen.io/">CodePen</a>
</li>
<li><a href="https://glitch.com/">Glitch</a>
</li>
<li><a href="https://stackblitz.com/">Stackblitz</a>
</li>
<li><a href="https://webcomponents.dev/">Webcomponents.dev</a>
</li>
</ul>
<h3 id="header-b83cad4c-9bf4-87ba-b371-4d0dd1bcc8cc">Web components</h3>
<ul><li><a href="https://www.webcomponents.org">https://www.webcomponents.org</a>
</li>
<li><a href="https://lit-element.polymer-project.org/">https://lit-element.polymer-project.org/</a>
</li>
</ul>
<h2 id="header-ff0d355a-592b-0ad1-33fb-6ce366aaf86e">Content management systems</h2>
<ul><li><a href="https://drupal.org">Drupal</a>
 / <a href="https://backdropcms.org/">Backdrop</a>
</li>
<li><a href="https://wordpress.org">WordPress</a>
 / <a href="https://www.classicpress.net/">ClassicPress</a>
</li>
<li><a href="https://getgrav.org/">GravCMS</a>
</li>
<li><a href="https://haxtheweb.org/">HAXcms</a>
</li>
<li><a href="https://www.joomla.org/">Joomla</a>
</li>
</ul>
<p></p>
 ]]>
      </description>
      <category></category>
      <guid>/resources/links-to-learn-more</guid>
      <pubDate>Wed, 15 Jan 2020 21:07:23 -0500</pubDate>
    </item>
    <item>
      <title>W4 Improving your digital identity</title>
      <link>/labs/improving-your-digital-identity</link>
      <description>
          <![CDATA[ <p>This week we're going to improve upon our brand through critique and self reflection. We want to get our brands in as good a shape as possible prior to all the hands on labs and topics we'll be engaging in this semester.</p>
<h2 id="header-269a6260-4d70-a51e-cc8a-d6dffd873f11">Critique</h2>
<p>Look to the people around you in class (say hi, scary, I know). Ask what their brand is (ask three people), find it on the <b>#lab-1-brand </b>
Slack<b> </b>
channel to find them on YouTube. Watch their video for the git submission last week. Take note of the following and offer them suggestions on where they can improve:</p>
<ul><li>Brand name / recognition</li>
<li>Style in video / audio quality / space used to record</li>
<li>Usage of social media (if any)</li>
<li>Images in headers and icon form on YouTube/Github/Social Media</li>
<li>Video descriptions, links in the description area</li>
</ul>
<h2 id="header-be5954b0-84ee-1912-656f-567e8eb0c229">Writing</h2>
<p>I want you to produce <b>recommendations for each of the three brands</b>
 you selected on how they can improve their brand (these can be bullet points / short sentences on each of the points above).<b> Take the feedback for each brand and use the "Thread" feature of slack to post the suggestions to them in the #lab-1-brand channel (since everyone posted there already)</b>
</p>
<img src="files/Screenshot from 2020-01-22 17-07-35.png" alt="Shows the UI in slack which has the thread button and what that pops open to look like." style="width: 100%;"/><h2 id="header-a3d87fca-be82-b07c-e3bf-fc517040d429">Video Reflection</h2>
<p>For your video reflection I want you to produce a video explaining one of the topics related to our guest speaker as well as reflecting on the feedback you got from classmates. Start your video by discussing ways you could improve your brand's SEO via these changes as SEO is related to how well google and others can index your content so others can find it.</p>
<p>After you reflect on the feedback and how you plan to implement it, talk about one of these topics below. I've included a list of potential questions to answer throughout your explainer video to help you find things to google / form discussion points..</p>
<ul><li><b>SEO</b>
 - Search engine optimization. How SEO influences you showing up in search engine results? What can you do to improve your SEO? What are some things you can do this semester to ensure you have high SEO when we're done? Finding links that explain the subject either from technical (HTML structure / metadata) or from a marketer perspective.</li>
<li><a href="https://oerschema.org">OERSchema</a>
 - What a schema is, what OER Schema is trying to achieve, and showing an example from the documentation and explaining it. This can be anything related to micro-data, how it interplay with SEO and search indexing, or even privacy concerns associated with being able to associate public data a bit too accurately.</li>
</ul>
<h2 id="header-2e9caccb-cc0e-c954-3176-61f57c6455ea">Rubric</h2>
<ul><li>Did you review three other brands and provide feedback on each? (3 pts)</li>
<li>Did you reflect on your own brand and how to improve it's SEO? (3pts)</li>
<li>Did you communicate effectively about the importance of SEO / OERSchema? (4 pts)</li>
</ul>
<p>When complete, submit a word doc to the <b>#lab-3-brand-review</b>
 channel on slack by Sunday which includes your review of your classmates brands as well as link to your video submission.</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/improving-your-digital-identity</guid>
      <pubDate>Mon, 13 Jan 2020 12:49:31 -0500</pubDate>
    </item>
    <item>
      <title>W9 Spring Break - haha</title>
      <link>/labs/w9-spring-break</link>
      <description>
          <![CDATA[ <grid-plate layout="1-1" responsive-size="xs" breakpoint-sm="900" breakpoint-md="1200" breakpoint-lg="1500" breakpoint-xl="1800" disable-responsive><img src="https://media2.giphy.com/media/1DuPWdQKQOS2Y/giphy.gif" slot="col-2"/><p slot="col-1">The spring break is a lie.</p>
<img src="https://media2.giphy.com/media/7n9TUyn2jYqfC/giphy.gif" slot="col-1"/></grid-plate>
<p></p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/w9-spring-break</guid>
      <pubDate>Mon, 13 Jan 2020 12:45:55 -0500</pubDate>
    </item>
    <item>
      <title>Containers</title>
      <link>/topics/container</link>
      <description>
          <![CDATA[ <p>Slides on containers by me and @hey__mp</p>
<p>Containers are transforming the landscape of the web and what's possible in application development at scale. Companies like Google, Netflix, Uber, Canvas and more are only possible because of the raw power of container and container orchestration technology.</p>
<p>This week we'll explore containers using the web service <a href="https://labs.play-with-docker.com/">Play with Docker</a>
, a great resource that gives you infrastructure for 4 hours at a time without needing to pay anything.</p>
<p>Our guest speaker, former Penn State graduate <a href="https://twitter.com/hey__mp">Michael Potter</a>
 will show us many different use cases for containers using <a href="https://docker.com">Docker</a>
. He'll give you a behind the scenes look at the container infrastructure he's building to deliver high quality online course experiences at Eberly College of Science using an advanced container publishing workflow.</p>
 ]]>
      </description>
      <category></category>
      <guid>/topics/container</guid>
      <pubDate>Tue, 19 Nov 2019 22:56:44 -0500</pubDate>
    </item>
    <item>
      <title>W12 Docker</title>
      <link>/labs/lab-13-docker</link>
      <description>
          <![CDATA[ <p>For lab this week, we'll use directions our guest has put together to deploy different services via docker to better understand Functions as a Service technology as well as a bit of how docker infrastructure works.</p>
<h2 id="header-fb318d99-cfde-f4fa-1d65-cbcdfd792f63">Setting up Ubuntu</h2>
<p>We'll do this in class using <a href="https://labs.play-with-docker.com/">Play with Docker</a>
.</p>
<h2 id="header-241c2cb9-4783-8c8f-76e5-e497cef4d837">Drupal</h2>
<p>We'll do this in class together. Let's <a href="https://github.com/heyMP/ist402-docker/tree/master/labs/4-drupal">setup Drupal</a>
 in Play with Docker. We know what it took to install Drupal on "shared hosting" / Cpanel; now let's get a step closer to how the pro's would be deploying and managing Drupal at scale.</p>
<h2 id="header-6d92ad95-bdec-0430-ba50-2ad8bb6dd167">OpenFaaS</h2>
<p>OpenFaaS is an open source functions as a service platform for building your own function based microservice endpoints. <a href="https://github.com/heyMP/ist402-docker/tree/master/labs/6-openfaas">Follow the directions in this repo</a>
 to setup OpenFaaS on <a href="https://labs.play-with-docker.com/">Play with Docker</a>
.</p>
<h2 id="header-89a8d03f-4925-dd9d-ae3a-b43e50f59a51">Deliverable</h2>
<p>This week I want you to try your hand at one of the following (or combinations in the video). As usual you can solve this how it makes sense to you <b>but I want you to be demonstrating how to install things in Play with Docker and what that looks like. This forms the backdrop for you to talk about why this is transformational.</b>
</p>
<ul><li>Install OpenFaaS in Play with Docker and explain why functions as a service are the future of infrastructure. This could be done showing one of the functions we covered in class and relating it to how Uber spins up a service to track your location and relay it to the drive (as one example).</li>
<li>Find a diagram to explain Docker and the difference between it and Virtual Machine technology, explaining why containers are the future of technology backed businesses. Install Drupal in Play with Docker and get it to the install screen. (It has issues at times getting past this phase as this is just a demo)</li>
</ul>
<h2 id="header-3de98455-e730-ce1d-2e34-2bb4cbe566e0">Submission</h2>
<p>Add your video to the <b>#lab-11-docker</b>
 slack channel.</p>
<h2 id="header-e34fa9b8-704e-50b2-baeb-e85e2e410771">Evaluation rubric</h2>
<ul><li>Did you demonstrate <i>installing an application in Play with Docker</i>
? <b>(5pts)</b>
</li>
<li>Did you explain the importance of Container technology either via the difference between Containers and Virtual Machines or why the Functions as a Service approach is such a big deal, with visuals backing it up? <b>(5pts)</b>
</li>
</ul>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-13-docker</guid>
      <pubDate>Tue, 19 Nov 2019 22:56:24 -0500</pubDate>
    </item>
    <item>
      <title>W13 Accessible Design</title>
      <link>/labs/lab-12-accessible-design</link>
      <description>
          <![CDATA[ <p>You live in the world of Stranger Things. I know, it's hard to envision, it's why it's such a good show. Old people like your instructor, actually remember parts of the 80s and what it was like to not know where people were at all times.</p>
<grid-plate style="width: 100%;" breakpoint-sm="900" breakpoint-md="1200" breakpoint-lg="1500" breakpoint-xl="1800" layout="1-1" responsive-size="xl" hide-ops>  <p slot="col-1">Anyway. A lost art from the 80s was designing for interfaces that were primitive. Often times years would be lost trying to design simple things like joysticks and monitors to present primitive games with only a few options. But, these systems are universally approachable and the constrains put on the technology of the day helped inform this.</p>
  <meme-maker slot="col-2" alt="home video running GIF" image-url="https://media3.giphy.com/media/Z71HSa4vBWlW/giphy.gif" top-text="1 stick, no btnz" bottom-text="best game evrz" imageurl="https://media3.giphy.com/media/Z71HSa4vBWlW/giphy.gif" toptext="home video running GIF" style="width: 75%; margin: 0px auto; display: block;">
    <div>1 stick, no btnz</div>
      <img src="https://media3.giphy.com/media/Z71HSa4vBWlW/giphy.gif" alt="home video running GIF" preload="lazy"/>
    <div>best game evrz</div></meme-maker>
</grid-plate>
<p>Now we live in a world without constraints which often leads to less accessible, less usable experiences. That's where you come in...</p>
<p>Today, we're going to design an interface or interaction that would be heavily steeped in constraints in order to envision more accessible systems. Take an application like twitter, remove the screen, the auto updating and self refreshing interfaces, remove the trolling and memes; how would people be able to leverage twitter effectively. What prompts would make sense on a command line, or on a simple 1999 style website (text box, click to submit data, that's about it).</p>
<p>Twitter is too easy an example which is why I'm spelling it out here: that's because the 140 character limit previously on twitter was because it was envisioned as a way of initially bridging cellphones to contribute to the web. People would "log into twitter" by texting a special number and that text === tweet. Laughable to think about now, but it was the original design and simplicity that was possible via constraint based design.</p>
<h2 id="header-b564170f-73d4-49b1-43c3-32285b5d71cc">Now it's your turn</h2>
<p>Think of an interface you use (inventory management in a game, registering for a course, shopping online).</p>
<p>Now imagine that interface existed as a text-based computer program from the <b>1980s</b>
. How would you communicate visual elements and order items logically? The text-based story to make the initial design.  This will help you think about screen readers first.</p>
<p>Now imagine that the interface existing in the early <b>1990s</b>
 as only HTML. What HTML elements would you need? This will help you think about progressive enhancement (and making sites work without too much javascript).</p>
<p>Make a video explaining how an interface of your choice would look in 1980 and in 1990 and what aspects should carry forward to the modern web.</p>
<h3 id="header-e7335a1c-d0a7-266d-00be-32a90228e7cd">Inspiration</h3>
<p><a href="https://www.youtube.com/channel/UCXA2lepIpHZ24iQU22WgDeA">Squirrel Monkey YouTube Channel</a>
</p>
<video-player iframed="iframed" is-a11y-media="is-a11y-media" is-youtube="is-youtube" lang="en" media-title="What if Dropbox existed in the 80s" preload="metadata" source="https://www.youtube.com/watch?v=hu87s_BA7_Y" source-type="youtube" sticky-corner="top-right" youtube-id="hu87s_BA7_Y" schema-resource-id="#4bc09838-e59e-6789-8a79" resource="#4bc09838-e59e-6789-8a79" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " accent-color="grey" style="width: 75%;" sources="[]" tracks="[]" crossorigin="anonymous"></video-player>
<h2 id="header-4189caf3-43a6-1d14-b674-cb11dda03489">Deliverable</h2>
<p>Create a new HAXcms / CMS site of your choice, create page(s) named for the technology / interface you are going to imagine in the 80s and 90s (1 for each).</p>
<p>Write a paragraph about the technology / link to media associated with it so everyone knows exactly what it is. Then write a a few paragraphs about how this process and interface could be translated to 80s, command prompt style technology. Then write the same narrative but if you were to be able to design and visualize this using 90s technology or basic html / Netscape Navigator style web.</p>
<p>Record a 5 minute video explaining the technology <i>and limiting factors</i>
 that would be taken into account if it was replicated in the 80s or 90s context. This could be done talking over very rough mock ups / user flow diagrams in <a href="https://draw.io/" target="_blank">draw.io</a>
 or with fun memes / related concepts like the Squirrel Monkey folks do.</p>
<p>Embed this / add a link to your HAXcms / CMS of choice site and submit it to the <b>#lab12-a11y-design</b>
 channel in Slack.</p>
<h2 id="header-ff646963-db24-998e-f021-1db17ad9e15b">Rubric</h2>
<p>Did you pick a technology to bring to a 80s/90s concept and submit to the channel? (2pts)</p>
<p>Does your written user story make sense for the 80s? (2pts)</p>
<p>Does your written user story make sense for the 90s? (2pts)</p>
<p>Did you explain how this would work effectively in your video? (4pts)</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-12-accessible-design</guid>
      <pubDate>Tue, 12 Nov 2019 19:07:04 -0500</pubDate>
    </item>
    <item>
      <title>Accessible Design</title>
      <link>/topics/accessible-design</link>
      <description>
          <![CDATA[ <p>Slides for class from Nikki's lecture
</p>
<p>Today we're going to have a guest lecture by Nikki Massaro-Kauffman (<a href="https://twitter.com/nikkimk">@NikkiMK</a>
, <a href="https://www.linkedin.com/in/nikkimk/">LinkedIn</a>
), User Experience and Accessibility lead on all things HAXTheWeb. Nikki joined the ELMS:LN project through College of Arts and Architecture Office of Digital Learning at the end of 2017 and has been instrumental in the team's move to Web Components for all development work.</p>
<p>Nikki is an incredible resource for all things usable accessibility and user experience design and is a key reason for the rise in visibility of HAX and ELMS related projects. She's also the Director of the Board Of Directors at <a href="https://www.highedweb.org/">Higher Education Web</a>
.</p>
 ]]>
      </description>
      <category></category>
      <guid>/topics/accessible-design</guid>
      <pubDate>Tue, 12 Nov 2019 18:50:27 -0500</pubDate>
    </item>
    <item>
      <title>Past student work</title>
      <link>/resources/past-student-work</link>
      <description>
          <![CDATA[ <p style="width: 100%;">Here are some examples of past student work to check out!</p>
<md-block source="https://raw.githubusercontent.com/btopro/ist402/master/files/spring2020.md" datahaxray="Markdown" dataeditable="" style="width: 100%;"></md-block>
<h2 id="header-f94895c5-10ef-4887-c011-7ad7adac9faa">Fall 2019</h2>
<lrn-table title="IST 402 Links to past topics" csv-file="files/courselinks.csv" description="For class we had to create our own HAxcms micro-sites and do video overviews talking about the experience with this advanced CMS technology." resource="#4f4f810b-b3fe-c40c-028c" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " schema-resource-id="#4f4f810b-b3fe-c40c-028c"></lrn-table>
 ]]>
      </description>
      <category></category>
      <guid>/resources/past-student-work</guid>
      <pubDate>Tue, 05 Nov 2019 12:27:12 -0500</pubDate>
    </item>
    <item>
      <title>Accessibility</title>
      <link>/labs/lab-11-accessibility</link>
      <description>
          <![CDATA[ <p>Web accessibility is just one piece of the accessibility pie but we're attuned to its importance. The next thing though is how do we use tools to help build more accessible things and remediate what we already have?</p>
<h2>Prelab / in class doing</h2>
<p>Let's install the <b>WAVE Evaluation Tool</b>
 and <b>Lighthouse</b>
 plugins for Chrome / Firefox.</p>
<p>Let's work through some accessibility issues in a code pen to get some basics down</p>
<p>Codepen: <a href="https://stackblitz.com/edit/a11y-issues?file=index.html" style="font-family: var(--haxcms-base-styles-body-font-family, &quot;Noto Serif&quot;, serif); letter-spacing: var(--haxcms-base-styles-body-letter-spacing, 0.5px);">https://stackblitz.com/edit/a11y-issues?file=index.html</a>
</p>
<p>Let's check out these websites and read through the <b>Lighthouse score and WAVE </b>
to understand issues and see what real reports look and feel like</p>
<ul><li><a href="https://revenuedata.doi.gov/">https://revenuedata.doi.gov/</a>
 - Government website built in React</li>
<li><a href="https://psu.edu">https://psu.edu</a>
 - Penn state (dun, dun, dunnnnnn)</li>
<li><a href="https://btopro.com/">https://btopro.com/</a>
 - personal blog hosted on gh-pages</li>
<li><a href="https://oer.hax.psu.edu/hlp5129/sites/fish-ai-in-video-games/reflection-future-push">https://oer.hax.psu.edu/hlp5129/sites/fish-ai-in-video-games/reflection-future-push</a>
 - Classmate's HAXcms site<br/></li>
<li><a href="https://archive.org/index.php">https://archive.org/index.php</a>
 - Internet Archive</li>
</ul>
<h2>Lab Scenario</h2>
<p>You are a consultant bring brought in to help out a web team organized by someone with <b>your exact name</b>
, that has a site builder with <b>the same name</b>
, and oddly a developer also with... the <b>same name</b>
 (weird..)! You work at A11y for All inc (great company name...) and you are here because of concerns by the web team that past projects were not correctly audited for performance and accessibility.<span> (WTF?! WHY DIDN'T THE INSTRUCTOR TELL US TO AUDIT OUR STUFF ALONG THE WAY).</span></p>
<p>Your CEO, Admiral Akbar is <i><b>piiiiiiiiiiiist</b>
</i>
</p>
<meme-maker alt="its a trap GIF by Star Wars" image-url="https://media3.giphy.com/media/3ornka9rAaKRA2Rkac/giphy.gif" top-text="No audits?" imageurl="https://media3.giphy.com/media/3ornka9rAaKRA2Rkac/giphy.gif" toptext="its a trap GIF by Star Wars" style="width: 75%; margin: 0px auto; display: block;"></meme-maker>
<p>"It's ok though CEO Akbar", you assure the CEO, "you're paying our exorbitant rates to solve this problem for you. We'll even teach your team how to solve these problems to avoid issues in the future!"</p>
<a11y-gif-player src="https://media0.giphy.com/media/AjYsTtVxEEBPO/giphy.gif" src-without-animation="https://media4.giphy.com/media/AjYsTtVxEEBPO/480w_s.jpg" alt="A classic face palm, not correctly doing research on these DURING development" schema-resource-id="#6886b2f0-4130-3125-9846" resource="#6886b2f0-4130-3125-9846" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 50%; margin: 0px auto; display: block;"></a11y-gif-player>
<h2>Lab what to do</h2>
<ul><li>Audit any of the past CMS projects using <b>Lighthouse</b>
 and <b>WAVE</b>
</li>
<li>If there's anything simple in content that you can fix, remediate it, but the goal here is understanding how to interpret the reports and explain how the problems found can be remediated.</li>
<li>Use your past HAXcms site to add a page of content with screenshots of your lighthouse scores</li>
<li>On that page, put your video explaining the following..</li>
</ul>
<h2>Video what to cover</h2>
<p>For your video I want you to <b>explain how you ran an accessibility and performance audit of a website</b>
. This can be one of the websites your worked on in class OR (and probably more meaningful) perform this audit on a club, organization or other website that's associated with you or that you can actually have an impact on by running this audit and providing feedback.</p>
<p>Make sure to explain what the audit is, why it's important, and then a bit about how the site can leverage the scores to make improvements. Don't just say "it needs to improve accessibility" take at least one of the points and explain what a remediation would look like in order to improve. This can be from the WAVE or Lighthouse feedback.</p>
<h2>Submission Rubric</h2>
<p>Ran reports and posted screenshots to HAXcms site <b>(4 pts)</b>
</p>
<p>Recorded a video accurately explaining what the reports generate and how they are useful <b>(6 pts)</b>
</p>
<p><b>10 point lab</b>
</p>
<p>Post link to page in HAXcms site with the video included in<b> #lab11-accessibility</b>
</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-11-accessibility</guid>
      <pubDate>Wed, 30 Oct 2019 17:21:25 -0400</pubDate>
    </item>
    <item>
      <title>Accessibility</title>
      <link>/topics/accessibility-1</link>
      <description>
          <![CDATA[ <p>My slides from class</p>
<a11y-gif-player src="https://media1.giphy.com/media/26u4eMlvKoTn7DfvG/giphy.gif" src-without-animation="https://media3.giphy.com/media/26u4eMlvKoTn7DfvG/480w_s.jpg" alt="Wheel chair user slowly being lowered by kegs down a ramp" schema-resource-id="#bc676c7d-31ce-58d0-f485" resource="#bc676c7d-31ce-58d0-f485" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " style="width: 75%; margin: 0px auto; display: block;" tooltip="Toggle animation"></a11y-gif-player>
 ]]>
      </description>
      <category></category>
      <guid>/topics/accessibility-1</guid>
      <pubDate>Wed, 30 Oct 2019 17:21:25 -0400</pubDate>
    </item>
    <item>
      <title>W9 Drupal again</title>
      <link>/labs/lab-9-drupal-again</link>
      <description>
          <![CDATA[ <p>Drupal was both challenging and many wanted to learn more. As it's a much more complex system then the other CMSs we're covering, we're going to dedicate an additional class period JUST to doing more with Drupal.</p>
<p>For this lab we're going for technique and comprehension of what's happening with Drupal and in a use-case that's treating our website like an API.</p>
<p>We're going to build on the last lab where we started making a course schedule. Let's imagine that we're building a course scheduling system that is actually usable by humans (stretching your imagination, I know but stick with me, it's possible).</p>
<h2 id="header-2e167e6c-ac9b-0050-aa97-b32395bcadec">Lab Context <span>(purely hypothetical, NEVER happened before)</span></h2>
<p>In an alternative universe, you are the <b>site builder</b>
 that convinced the team <b>they COULD do</b>
 projects with Drupal. Even though you work for a marketing firm, your CEO enjoys money and hears higher education clients have a lot of it. Now that they <b><i>know</i>
 based on 1 week experience</b>
 that you can pull off complex technical projects in the "market vertical" and respond to an RFP from a large land grant university to redo their course scheduling system called "PionLath".</p>
<p>"PionLath" has been an utter UX disaster.<b> It doesn't model user roles </b>
correctly of the organization and has poor permission support within those roles. It also doesn't allow for <b>web services and APIs</b>
 to get data back out of it in new and meaningful ways. The university wants to get data out in a format that can be displayed on signage around the university but also just to ensure they aren't locked into the horrific UX patterns they currently experience with "PionLath".</p>
<p>They are looking for a solution that is cost effective given the multiple-millions of dollars spent on "PionLath" and the relative dislike of it by uhh... everyone. (again, totally hypothetical, this really isn't a problem that's ever happened at a <b>large land grant institution</b>
)</p>
<p>You easily win the bid because you've got a fantastic proposal writer, a cool sounding company and use words in marketing like "leader" and "synergy" and now you're ready to dig your claws into..err... help empower this large land grant institution.</p>
<h2 id="header-0317d0fb-0f0b-098c-8ef3-0498019da4bd">Synergistically doing more Leader'ing with Drupal</h2>
<p>Here's what we need to do this week and will walk through together in class. We need to:</p>
<ul><li>Create roles for Instructor, Parent, Student, Administrator</li>
<li>Change permissions for Instructors to be able to create new courses</li>
<li>Add an image field to our <b>course</b>
 to better market it</li>
<li>Enable these modules: Update Manager, HTTP Basic Authentication, JSON:API, RESTful Web Services, Serialization</li>
<li>Go to Reports ->Available Updates (admin/reports/updates) and hit<b> + Install new module or theme</b>
</li>
<li>Install the <a href="https://www.drupal.org/project/cors">CORS module for Drupal</a>
 - by copy and pasting this https://ftp.drupal.org/files/projects/cors-8.x-1.0.tar.gz</li>
<li>Enable the CORS module</li>
<li>Go to the CORS settings page (admin/config/services/cors) and make sure that it says the following value: *|*</li>
<li>Clear caches (a common operation in drupal for things like this) admin/config/development/performance and hit clear cache. <b>Configuration -> Development -> Performance</b>
</li>
<li>Here's a resource for all things Drupal + JSONAPI as far as how to construct paths for reference: <a href="https://www.drupal.org/docs/8/modules/jsonapi/fetching-resources-get">https://www.drupal.org/docs/8/modules/jsonapi/fetching-resources-get</a>
</li>
</ul>
<p><span>Your site will now work with Web services! Now let's dig in and test the info some:</span><br/></p>
<h2 id="header-c9950566-7e3d-f9cd-bce9-8e2271072038"><span>Get the tools to start digging into this and implementing the API</span></h2>
<p><span><a href="https://www.getpostman.com/">https://www.getpostman.com</a>
 - Really clean API viewer and manipulation tool</span></p>
<p><span><a href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa">https://chrome.google.com/webstore/detail/json-formatter/</a>
</span><span><a href="https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa">bcjindcccaagfpapjjmafapmmgkkhgoa</a>
 - </span><span>JSON Formatter chrome plugin</span><br/></p>
<p><span><a href="https://codepen.io/btopro/pen/eYYvbZm?editors=1000">https://codepen.io/btopro/pen/eYYvbZm?editors=1000</a>
 - Fork this pen and we'll check it out in class<br/></span></p>
<h2 id="header-3b19889a-47cc-fb7c-fcf2-e7fc9a885207"><font face="Space Mono">Site deliverable</font>
</h2>
<p><font face="Space Mono">No writing this week, only technique.</font>
</p>
<p><font face="Space Mono">Add the roles in question above and enable the correct modules so that if I go to YOURSITENAME.COM/DRUPALWHATEVER/jsonapi that it shows me the correct output.</font>
</p>
<h2 id="header-80bc4adf-8478-c304-596d-30a4ce37510a"><span><span>Video based deliverable (one of these or a related method)</span></span></h2>
<h4 id="header-23452fc8-a598-4a32-e248-e2b5eb0a4bfd"><span><span>Topic 1</span></span></h4>
<p><span><span>Do a video explaining how this little API example is working by interacting with it in the video and explaining how the code pen and the website are communicating either using Postman to visualize or the data in the pen itself. Change the data / add records in the Drupal site in order to demonstrate that when you reload the pen they show up.</span></span></p>
<h4 id="header-63a445b2-4df3-cd18-3c57-033ca2051ecd"><span><span>Topic 2</span></span></h4>
<p><span><span>Do a video explaining the value of "headless" and API driven example using this and any articles you find as examples. Why are API driven applications better than monolithic designed systems?</span></span></p>
<h5 id="header-afa845e9-743f-7b7f-6abf-2d0242d7bdd6"></h5>
<h4 id="header-420c776e-8fbf-0588-94e2-9e6f284bee87"><span>Topic 3</span></h4>
<p><span><span>Do a video about CORS and the security implications of headless based development methods. What is CORS? Why is it important? When does it get triggered?</span></span></p>
<h2 id="header-1449ba7d-347a-c3fc-9f26-96e443520c43"><font face="Space Mono">Method of delivery</font>
</h2>
<p><font face="Space Mono">Post in the <b>#lab8-drupal-again</b>
 channel with a link to your site for me to test. On the homepage of your site include a link / embed your video about the topic of the week. SO that you have two videos / responses on this page in your site.</font>
</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-9-drupal-again</guid>
      <pubDate>Wed, 23 Oct 2019 14:38:05 -0400</pubDate>
    </item>
    <item>
      <title>W13 Exam</title>
      <link>/labs/lab-8-midterm-no-lab</link>
      <description>
          <![CDATA[ <p>Week 14 we will have an Exam the Tuesday of this week and then start into our Final Projects on the Thursday of this week.</p>
<p>This will give you two weeks to work on your Final project prior to finals.</p>
<p>The exam is "open internet" and is an overview from the topics this semester.</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-8-midterm-no-lab</guid>
      <pubDate>Wed, 23 Oct 2019 14:38:05 -0400</pubDate>
    </item>
    <item>
      <title>W10 HAXTheWeb</title>
      <link>/labs/labs/lab-10-haxtheweb</link>
      <description>
          <![CDATA[ <p style="width: 100%;">We'll cover user experience and generating ways of improving the platform by creating issues about any confusion you've run into when using the platform. <i>Open critique is the best way to improve! </i>
This is also practicing a technique called User Story Elicitation / Generation, common in the testing and development of any product.</p>
<p style="width: 100%;">In class portion to be done using <a href="https://hax.psu.edu/login">https://hax.psu.edu/login</a>
</p>
<p style="width: 100%;"><a href="https://github.com/elmsln/HAXcms/issues/563" style="width: 100%;">Activity 1 directions</a>
</p>
<h2 id="header-7fb0780a-e5e8-fe08-1392-de5c5b807ff9">Lab scenario driven submissions and videos</h2>
<meme-maker alt="high school GIF" image-url="https://media2.giphy.com/media/8RczH5vL2k7Ju/giphy.gif" top-text="LETS ALL GO TO HAXCMS" imageurl="https://media2.giphy.com/media/8RczH5vL2k7Ju/giphy.gif" toptext="high school GIF" style="width: 50%; margin: 0px auto; display: block;">
    <div>LETS ALL GO TO HAXCMS</div>
      <img src="https://media2.giphy.com/media/8RczH5vL2k7Ju/giphy.gif" alt="high school GIF" preload="lazy"/>
    </meme-maker>
<p style="width: 100%;"><i>You may complete this using <a href="https://hax.psu.edu/login" style="width: 100%;">hax.psu.edu</a>
. Reclaim hosting is running several versions behind on HAXcms at the moment.</i>
</p>
<p style="width: 100%;"><b>HAXcms</b>
 is a highly flexible, organic static site solution. Because this is a new breed of authoring experience, it needs explaining and people to utilize the tool in different contexts to fully realize it's potential.</p>
<p style="width: 100%;">As HAX and HAXcms are being developed by the university to improve time on task, increase creativity in course design and help students present themselves online, you can complete this through any of the following scenarios.</p>
<h2 id="header-2e18814f-97fb-48a9-c6f9-f7c36303cfe0" style="width: 100%;"><b>Scenario: "Online course for helping in a crisis"</b>
</h2>
<p style="width: 100%;">Instructors don't want to learn new technologies that might get in the way of teaching. They want platforms that are simple to use, recognizable, and that will last. They've seen the ages of LMSs and having to port content to and from CMS solutions in the past. As a result, they need reassurance that HAXcms is easy to use and that it'll be an engaging way for them to teach.</p>
<p style="width: 100%;">For the purposes of this assignment, we'll take "engaging" to mean that it links to other sources, pulls in media like images and video, embeds wikipedia, has interactive question and answer segments; things like that. There are a few themes that make sense for presenting an online course but your welcome to use which ever theme you'd like.</p>
<p style="width: 100%;">Create a  ~<b>10-15 page online learning resource </b>
that teaches people about a topic that is in the news a lot and that is causing a lot of misinformation..</p>
<h3 id="header-ca04d9de-c518-3c98-ea0b-8b840b2d9439" style="width: 100%;">Topic</h3>
<ul style="width: 100%;"><li>A fact driven information site assembled about <b>COVID19</b>
 that could help others get relevant information to make better decisions about community health.</li>
<ul><li>Select sources that are not just major media sources. You can include some but lean toward research and source articles. CDC, other countries CDC equivalent, vaccine progress, models of impact of social distancing, things like this. Not just "STOCK MARKET DOWN" and "AIRPORT CLOSE" as so much of the news is right now. For example, <a href="https://www.ncbi.nlm.nih.gov/pubmed/32150748">NIH incubation period analysis</a>
 suggesting most cases are ~5 days as opposed to the widely reported 2 weeks (which while possible, is far far less frequent).</li>
<li>This can include information that is geographic specific to yourself and your situation (make it personal). If you live in rural Kansas you have very different distancing considerations than inner city Philadelphia, London, or Queens. The more localized the better chance of connecting with people that know and trust you. <a href="https://oer.psu.edu/find/">PSU has a resource listing other</a>
 OER sources to help find things as well.</li>
<li>Tone should be one about this being serious but not scary. We can help people connect with reality more through the personal trust they have in who is assembling the work</li>
<li>Video / Pictures / graphics are important, HAXcms also includes a "Self check", "Stop note", "Multiple Choice", "Citation" and more which can help make content more interactive and engaging.</li>
<li>Explaining and linking off to where media is from is also important to ensure people can discover on their own and learn from trusted sources. We're all supposed to be on lock down so we have time to invest in hoping around to primary articles.</li>
<li><b>You can actually impact the lives of people around you with this so please take it seriously</b>
. Assemble information in a relevant way, present the case, share out on social media / email to friends and family. <i>Working to improve our reality is why we seek an education</i>
. It helps give us purpose. Find that purpose this week and channel it through your work to make a positive impact in a troubled word.</li>
</ul>
</ul>
<h2 id="header-83318f78-18bd-c3b6-71e0-fbaa4639cb59" style="width: 100%;">Video submission</h2>
<p style="width: 100%;">You'll be creating two videos this week. One relevant to the platform so that we can get feedback, but more importantly one geared toward other students, friends, family and society that needs you. We need your voice to help everyone through what is to come. We can make a positive difference.</p>
<ul style="width: 100%;"><li><b>Your Experience</b>
<span>
 - Describe your frustrations in using HAXcms. What made sense immediately? What took some time to figure out? What's something that worked really well? What's something that still doesn't make sense to you? What did you want it to do that it was missing? 2-3 minutes</span></li>
<li><b>Empowerment</b>
 - We must remain calm and strong in times of trouble to help keep fear from spreading. Explain how friends and family can use technology to remain connected to one another in this crisis, maybe how you plan to, what to watch on streaming services to pass the time, games and activities to connect you with friends remotely, and how to remain active in supporting your local economy. This may not seem like something you'd do in college for credit, which is exactly why it's so important that we do it now. Education is about the pursuit of information and converting that information into knowledge and this knowledge literally has the power to save lives. 2-3 minutes</li>
</ul>
<p style="width: 100%;"><b><i>
What didn't work or what you ran into issues using the platform are critical to our team getting user feedback and improving.</i>
</b>
<br/></p>
<h2 id="header-1b9e4123-7b55-af55-39f5-5046be7e2825" style="width: 100%;">Submitting this Lab</h2>
<p>Embed your YouTube video on the homepage of your HAXcms site.</p>
<p style="width: 100%;">Submit a link to your HAXcms site to the <b>#lab9-haxtheweb</b>
 channel on slack</p>
<p style="width: 100%;"><b>*Note on current events: </b>
please consider using social media to send out links to your resource after posting and using relevant hashtags. Sunshine is a good disinfectant for the fear that is propagating society right now and creating a factual resource you could send to your friends and relatives has far greater importance then this silly class.</p>
<h2 id="header-32687e69-1d24-97e1-f989-1e0130ec742f"><b>Grading the Lab</b>
</h2>
<p style="width: 100%;">Did you do the exercise from class on user story creation, create a site HAXcms and post your link to the channel<b> (2pts)</b>
</p>
<p style="width: 100%;">Did you create an engaging site that teaches someone facts and progress toward curing COVID and is it something that helps stitch together and generate new meaning for those looking for fast resources to access critical knowledge from trusted sources? <b>(6pts)</b>
</p>
<p style="width: 100%;">Did you record two videos; one with your experience and feedback on using the platform and another pointing to the positive ways that technology can help keep us safe and informed during these difficult times? <b>(2pts, 1 per video)</b>
</p>
<p style="width: 100%;"><b>Special note</b>
: You will not be evaluated based on your opinion of the platform. If you have a horrible experience or don't like it or something is difficult, <b>be honest</b>
. We grow from critique far more then fake-positive reviews. You are evaluated based on GIVING AN OPINION, implementing the solution, utilizing it, and backing up your perspective :)</p>
<p style="width: 100%;">No you will not be graded on your usage of social media, but it is highly recommended you use it in order to help spread the word about the importance of whats going on.</p>
<grid-plate layout="1-1-1-1-1" responsive-size="xl" breakpoint-sm="900" breakpoint-md="1200" breakpoint-lg="1500" breakpoint-xl="1800" style="width: 100%;" hide-ops column-widths="[&quot;20%&quot;,&quot;20%&quot;,&quot;20%&quot;,&quot;20%&quot;,&quot;20%&quot;]"><a11y-gif-player src="https://media0.giphy.com/media/YEongvRqe8sXC/giphy.gif" style="width: 100%;" slot="col-2" class="hax-moving" tooltip="Toggle animation" no-image></a11y-gif-player>
</grid-plate>
 ]]>
      </description>
      <category></category>
      <guid>/labs/labs/lab-10-haxtheweb</guid>
      <pubDate>Thu, 10 Oct 2019 15:41:57 -0400</pubDate>
    </item>
    <item>
      <title>HAXTheWeb</title>
      <link>/topics/haxtheweb</link>
      <description>
          <![CDATA[ <p style=""><span>Slides for this week</span></p>
<p>This is the platform that's powering THIS website you are reading through for class currently. HAXTheWeb is a series of platforms and web components to transform web publishing. Here's a video for some of the reasons why we're doing what we're doing, how, and what our team has been up to.</p>
<video-player accent-color="orange" dark iframed="iframed" is-a11y-media="is-a11y-media" is-youtube="is-youtube" lang="en" media-title="HAX The Camp Address, 2019 by @btopro" preload="metadata" source="https://www.youtube.com/watch?v=f_tEA9O9pco" source-type="youtube" sticky-corner="top-right" youtube-id="f_tEA9O9pco" schema-resource-id="#99a7108b-ace6-357f-2049" resource="#99a7108b-ace6-357f-2049" prefix="oer:http://oerschema.org/ schema:http://schema.org/ dc:http://purl.org/dc/terms/ foaf:http://xmlns.com/foaf/0.1/ cc:http://creativecommons.org/ns# bib:http://bib.schema.org " sources="[]" tracks="[]" crossorigin="anonymous" element-visible></video-player>
 ]]>
      </description>
      <category></category>
      <guid>/topics/haxtheweb</guid>
      <pubDate>Thu, 10 Oct 2019 15:41:56 -0400</pubDate>
    </item>
    <item>
      <title>W8 Drupal</title>
      <link>/labs/lab-7-drupal</link>
      <description>
          <![CDATA[ <h3 id="header-2330a5dc-8f60-db5f-fc74-669c80b47f5e">Data modeling</h3>
<p>Click here to download the file
</p>
<p>This is to be done in class with image posted here for reference but in case you miss the activity that generates it. <span>Take 10 minutes and figure out the fields and relationships of this data:</span></p>
<ul><li><b>Courses</b>
</li>
<ul><li>{come up with the relationships}</li>
<li><span>{come up with the fields}</span></li>
</ul>
<li><span><b>Faculty</b>
</span></li>
<ul><li><span>{come up with the relationships}</span></li>
<li><span>{come up with the fields}</span></li>
</ul>
<li><span><b>Rooms</b>
</span></li>
<ul><li><span>{come up with the fields}</span></li>
</ul>
</ul>
<h2 id="header-387e7d28-b160-8616-d9aa-2cdb3c44fd52">Lab Context</h2>
<ul><li><span>You are the site builder that works in the organization who has been doing Grav / WP</span></li>
<li><span>You’ve starting to do websites that require a lot of data and users and you don’t think that WordPress is the right fit anymore</span></li>
<li><span>Your Project Manager (with<b><i> the same name as you, weird huh?</i>
</b>
) agrees but has never used Drupal and is concerned about you being able to handle it</span></li>
<li><span>They give you a map of the data model and ask you to model the information in Drupal and create a displays that pull data together</span></li>
<li><span>"NO problem boss with my same name!" - You say out-loud, bizarre way to address a boss but hey...</span><br/></li>
<li>"I can figure Drupal out and win the lottery when it comes to Site Building. Sucker! This is my meal ticket outta this joint!" (hopefully you say this in your head)</li>
</ul>
<h2 id="header-b960feb4-8320-9182-4e9c-32ba5ea2b52e">Lab Deliverable</h2>
<ul><li>Create a Drupal site that accurately represents the data model that we’ve   agreed on in class (on website / slack)</li>
<li>Model these entities:</li>
<ul><li>Course</li>
<li>Instructor</li>
<li>Room</li>
</ul>
<li><span>Create 5 courses on the site</span></li>
<ul><li><span>either your own or make them up whatever</span></li>
</ul>
<li><span>Create rooms and faculty and associate them with these courses so all courses have faculty and a room</span><br/></li>
<li>Create a <b>View</b>
 that shows the list of courses</li>
<ul><li>Title this schedule</li>
<li>Make sure it shows up in the menu bar</li>
<li>Make it display as a table</li>
<li>Add fields that are relevant for people viewing the site</li>
</ul>
<li><span><b>BONUS 2PTS: Create a View showing a list of the faculty</b>
</span></li>
<ul><li><span>Title this Our Faculty</span></li>
<li><span>Make sure it shows up in the menu bar</span></li>
<li><span>Make it display as a grid / list</span></li>
<li><span>Add a field for photo to the instructor type</span></li>
<li><span>Use a “Relationship” in the view in order to show the courses faculty members are teaching as well as their name and photo</span></li>
</ul>
</ul>
<h2 id="header-bdf83f14-e317-db5e-245f-1b01d61cab97">Submitting the Lab</h2>
<ul><li>Create your Drupal site building out the view and content types that we chose to model our data off of this week</li>
<li>Create a Home page in the menu that includes:</li>
<ul><li>500 words on why Drupal is the choice for big organizations</li>
<li>Links to 3 resources backing this claim</li>
<li>A link to your YouTube video</li>
</ul>
<li><span>Record the video demonstrating the following techniques (or both if you like)</span><br/></li>
<ul><li> How to create a <b>Content Type</b>
 and <b>Add Fields</b>
 then <b>Create Content</b>
 of that type and connect the concepts for viewers of your video<br/><br/><b>OR</b>
</li>
<li>How to create views, adding filters and sorting to the view then showing the view in use with data present in the site and explain what the <b>View</b>
 is doing that makes it so impressive</li>
</ul>
<li><span>Post your link to your site in: <b>#lab7-drupal</b>
</span></li>
</ul>
<h2 id="header-4c56d837-b810-e096-c2c3-b1990cb7a96d">Grading the deliverable</h2>
<ul><li>Did you create a Drupal site in Reclaim and post your link to the channel (1pts)</li>
<li>Did you create content types that match our data model? (3pts)</li>
<li>Did you create the <b>View</b>
 that matches the requested data to display? (3pts)</li>
<li>Did you record a video that demonstrates site building technique (3pts)</li>
<li>BONUS 2PTS: Did you build the more complex view to sort faculty members with (trolly or real) photos included</li>
</ul>
<p><b>10 points total with 2 possible bonus points</b>
</p>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-7-drupal</guid>
      <pubDate>Thu, 03 Oct 2019 20:07:06 -0400</pubDate>
    </item>
    <item>
      <title>Drupal</title>
      <link>/topics/drupal</link>
      <description>
          <![CDATA[ <ul href="https://www.slideshare.net/BryanOllendyke1/edtechjoker-spring-2020-lecture-7-drupal-intro" style="width: 100%;"><li>Drupal Slides for this topic</li>
<li>Drupal week two slides</li>
</ul>
<p>Drupal is the worlds most powerful, most complex and as a result, the most expensive CMS. We'll explore Drupal's concepts and do some data modeling together in class. Then we'll use Drupal to model those relationships in the website.</p>
<p>We'll learn about Content Types and fields to model data. Then we'll use Views in order to visualize that data and work with content entry to make sense of it all.</p>
<p>Drupal is daunting at first but once you learn the concepts and experience them they form a repeatable pattern of development and site building that leads you into a large community with lots of financial opportunities.</p>
 ]]>
      </description>
      <category></category>
      <guid>/topics/drupal</guid>
      <pubDate>Thu, 03 Oct 2019 20:07:06 -0400</pubDate>
    </item>
    <item>
      <title>Submitting the lab</title>
      <link>/labs/lab-6-wordpress/submitting-the-lab</link>
      <description>
          <![CDATA[ <ul><li><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Create your </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">WordPress
site</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">with
the scenario you want to cover and the solution you want to propose</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"></span></li>


<li>Record a video <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">making
the case either way </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">based
on </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">the scenario selected and solution
selected</span><br/></li>


<li><i>Put on the homepage of your WordPress site which scenario and case you are
making</i>

</li>

<li>Embed a link to your YouTube video in the <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">homepage</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">of
your </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">s</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">ite</span></li>

<li>Post your link to your site in: <b>#lab6-wordpress</b>

</li>

</ul>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-6-wordpress/submitting-the-lab</guid>
      <pubDate>Tue, 01 Oct 2019 20:43:14 -0400</pubDate>
    </item>
    <item>
      <title>Scenario 1</title>
      <link>/labs/lab-6-wordpress/scenario-1</link>
      <description>
          <![CDATA[ <h2>





<!--         StartFragment         --><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Lab
Scenario</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">1 – Soaps R Us Context</span></h2>
<ul>
<li><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">Mom’n’Pop</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> store “Soaps R Us” wants to sell </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">their </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">famous soap online. They need </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">an</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">attractive </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">website</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> with </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">high SEO</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">
that has </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">a </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">shopping cart </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">and a </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">small blogging area</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">for
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">their “Hot Soap!” </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: bold;">newsletter</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">.</span></li>








<li>They’ve heard great things about <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">WordPress</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">but
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">are </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-style: italic;">concerned
about the new editor</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">as they </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal; font-style: italic;">don’t have time</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> to learn something
new</span></li>








<li>What plugins would you recommend to <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">get</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">their
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">WordPress site off in the right </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">direction? Install them in the site
to test</span></li>








<li><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">Pick out </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">a theme and </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">then</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">customize </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">it and the menu items </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">appropriately as a mock site to
market their business</span></li>







</ul>
<h2 class="hax-active"><!--      StartFragment      --><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Deliverable</span></h2>
<ul>
<li>Create a WordPress site on reclaim hosting</li>






<li>Select plugins to improve SEO, provide <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">a</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">shopping
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">cart, and simplify content </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">editing</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">beyond
</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">the default editor</span></li>






<li>Pick a nice theme and customize it with a few links to make the site look
real (typical small business has Home, News, Hours, Location, Reviews, <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">etc</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">).</span></li>






<li>Edit 1 page in Gutenberg and <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">1
pave with the</span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">Classic </span><span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">Editor</span><br/></li>






<li>Record a video explaining the difference <span style="font-size: 18pt; font-family: &quot;Space Mono&quot;; font-variant-numeric: normal; font-variant-east-asian: normal;">and
justify why you think they should either use Classic, Gutenberg, or Both</span></li>




</ul>
<h2>Solving the scenario</h2>
<ul>
<li>Remember, they are concerned about this <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">“new</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">fancy
editor” </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">because
of </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">learning curve, evaluate, </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">is it that <b>hard for a new person</b>

 to
learn</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">? Does the quality of output
outweigh training?</span></li>

<li><b>Your tas<span style="font-variant-numeric: normal; font-variant-east-asian: normal;">k is
then to frame your response as one of the following:</span></b>

</li>

<ul><li>Either you are selling them on the new <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">editor</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">by
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">allaying these </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">concerns and showing high quality
output<br/></span><b><i>OR</i>

</b>

</li>

<li>You are agreeing with them and showing them <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">how</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">easy
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">it is to use Classic Editor and why
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">you</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">recommend </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">not using </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Gutenberg by demonstrating
complexity and learning curve</span></li>

</ul>



</ul>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-6-wordpress/scenario-1</guid>
      <pubDate>Tue, 01 Oct 2019 19:40:19 -0400</pubDate>
    </item>
    <item>
      <title>Scenario 2</title>
      <link>/labs/lab-6-wordpress/scenario-2</link>
      <description>
          <![CDATA[ <h2 class="hax-active">Lab Scenario 2 - Scope to nowhere</h2>
<ul><li><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">You
won a contract from the Alaska state government to </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">build </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">a website to market</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">:</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Alaska’s </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">”Bridge
to nowhere” (look it up)</span></li>



<li>This site was <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">originally
built in </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Grav</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> because you thought it was a one
off, but now the client is mad because they heard a word other than “WordPress” (<i>snark but happens</i>


) and are instantly </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">concerned
about having to </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">support
<i>two different </i>


</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><i>applications</i>


.</span></li>


<li>You need to build a website and QUICK to convince <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">them to stay with you, either as a new WordPress site or get them to use the existing one. </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">This
website needs turned around in 1 week (<i>shocking</i>


</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">).</span></li>


<li>Pick a <b>theme</b>


 for a <b>brochure style website</b>


 and show them what a site in
WordPress would feel like relative to <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Grav</span></li>


</ul>
<h2 class="hax-active"><span style=""><span style="letter-spacing: -0.48px;">Deliverable</span><br/></span></h2>
<ul><li><span style="" class="hax-active"><span style="" class="hax-active">





<!--   StartFragment   --><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Create
a WordPress site on reclaim hosting</span></span></span></li>



<li>Select plugins to <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">improve
SEO</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">, </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">help
ensure accessibility</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">, and
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">simplify content editing beyond the
default </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">editor </span>(<b>enable<span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">classic</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span></b>


<span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><b>editor</b>


)</span></li>


<li>Pick a nice theme and customize it with a few links to make the site look <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">like a <b>real brochure style website</b>



(</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">typical parks and rec site has </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">History, </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">News, Hours, Location, Reviews, </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">etc</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">).</span></li>



<li><b>Modify the </b>


<span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><b>homepage</b>


,
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">be as snarky as you like, this is a
real bridge project so meme it up. </span><b><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Under
History make </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">a
Pros and Cons list of WordPress vs </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Grav</span></b>


<span style="font-variant-numeric: normal; font-variant-east-asian: normal;">. Make sure to list at least <b>3
advantages and disadvantages</b>


 of each platform (links can help prove these).</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"></span></li>



<li><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Record a video </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">demonstrating some of the similarities
and differences</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
between </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Grav</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> and WordPress </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">in</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">order</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">to</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">allay their concern</span></li>


</ul>
<h2><span style="letter-spacing: -0.48px;">Solving the scenario</span></h2>
<ul><li><span style="" class="hax-active"><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">The
client is in favor of </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">WordPress</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">
because of </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">other</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">projects</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">. </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">You
like making money but want to cover your butt. Make arguments for <b>why you
agree they should migrate from </b>

</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><b>Grav</b>

</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><b> to WordPress</b>

. After all, this is a government contract and once your in maybe you can get more by making them happy.<br/></span></span><br/><b><i>OR</i>

</b>

<br/><br/></li>



<li><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">You <i><b>sell </b>

</i>

</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><i><b>Grav</b>

</i>

</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"><i><b>
over WordPres</b>

</i>

s; if you are going to get paid, might as well do it based on work
you’ve </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">already
done</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> rather then need to scrap it all
and build them a new website. This </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">might
seem more difficult but remember.. </span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Governments
<i>LOVE</i>

 <i>security</i>

</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> and
WP is hacked.. a lot</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;">.
Play on that fear relative to how Grav works.<br/></span><br/>Note: You don’t have to build a new <span style="font-variant-numeric: normal; font-variant-east-asian: normal;">Grav</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal;"> site, you can point to features in
the existing one you made but you are welcome to make a new one if you so
desire</span></li>


</ul>
 ]]>
      </description>
      <category></category>
      <guid>/labs/lab-6-wordpress/scenario-2</guid>
      <pubDate>Tue, 01 Oct 2019 19:40:19 -0400</pubDate>
    </item>
    <item>
      <title>ClassicPress / WordPress</title>
      <link>/topics/wordpress</link>
      <description>
          <![CDATA[ <p style=""><span>Lecture slides from this week</span></p>
<p>This week we'll be covering WordPress, the worlds most widely used open source CMS. WordPress is great for simple websites of which the web is made up of many. It's why it powers (estimates, numbers differ by source) 33% to as much as 50% of sites on the internet.</p>
<p>These sites could be everything from the Whitehouse down to every individual blog / new acount on wordpress.com (SaaS solution version) which is why people take some of that number with a grain of salt.</p>
<p>It's a great platform to start your own website on but it's run into some recent controversies which are worth exploring - namely the battle for the heart of the community around a text editor. It's weird to think about, but when a CMS lives and dies by the ease of content entry, you can understand why the <b>new core mandatory</b>
 text editor called<b> Gutenberg</b>
 would attract positive and negative attention.</p>
<p>With plans to phase out the "Classic Editor" in 2020 many people in the community are at a cross-roads: Continue to trust the same core community that "took away" their beloved simple HTML editor, or forge a new path. We'll look briefly at the concept of community forks through the context of ClassicPress, a popular WordPress alternative that's gaining traction as the more community centric CMS.</p>
<p>With parallels to Drupal and it's popular fork Backdrop (topic for next lab) we'll see that it's not always code that leads to inflection points in groups but the process by which that code is formed, agreed upon, and ultimately pushed into the main project everyone's aligned with.</p>
<p>WordPress is a great resume builder both in terms of the platform as well as putting on your resume that you have experience with it, so let's dig in and check it out in <a href="https://reclaimhosting.com/">ReclaimHosting</a>
 once more!</p>
 ]]>
      </description>
      <category></category>
      <guid>/topics/wordpress</guid>
      <pubDate>Tue, 01 Oct 2019 14:02:52 -0400</pubDate>
    </item>
  </channel>
</rss>