SlideShare a Scribd company logo
IST 402
Start up?
Let's Tool up!
haxtheweb.org
elmsln.org
IST 402
#EdTechJoker
oer.hax.psu.edu
/bto108/sites/ist402
haxtheweb.org
elmsln.org
Hey everybody
btopro
<bee-tee-oh-pro>
here
Mexico City: iPhone vs. Android [OC]
Mexico City: iPhone vs. Android [OC]
https://www.reddit.com/r/MapPorn/
comments/d3scm4/mexico_city_ip
hone_vs_android_oc
(parts of class 1st day)
Welcome to IST 402!
“Who controls the past, controls the
future: who controls the present,
controls the past…”
- Orwell, 1984
Penn State
HAXTheWeb.org
Bryan Ollendyke
[at]btopro
Developer Activist
Let’s get some things
out of the way 1st
Q1: Is this class
about making a start
up?
NO.
This is learning about
the technologies
start ups are often
built on
Q2: Do I need to be a
1337 (leet) dev to
take this class?
NO
This is about getting
”hello world” level skills by
doing hands-on labs
CIMG4000 by Scurzuzu, on Flickr, https://www.flickr.com/photos/scurzuzu/271232366
Now. To the brain eating part
Emerging technologies [w00t]
- The class I wish I had in college
- Expose you to the ideas and technologies
that make the web work
- We’ll help shape the topics of the class
together though the first month or two
is mapped out here
- Learn about the magic behind major web
platforms
- Learn how programmers work, not
necessarily coding outright, though
we will at times.
IST
402
Most importantly. We are
resources here for you!
(Use this, you pay for it. Literally.)
Who my IST 402 say they are (36)
Who my IST 402 say they are (36)
Who my IST 402 say they are (36)
What they say they want
What they say they want
But..Who the hell are
you?
But... Who the hell
are you?
(it’s weird he didn’t start there
isn’t it?)
- Loud / Yelly / friendly
- Dresses odd / wears hockey jerseys
- Loves my family
- I’ve never taught in a classroom..
- But I coached ‘10 National Champions
- Parents were both public school
teachers for 35 & 33 years
- Science (8th grade)
- Computer Programming (HS)
Bryan Ollendyke
”normal” Human
- 2X IST grad BS ‘08 MS ’15 of PSU
- I contribute 100% to FOSS projects
ELMS:LN and HAXTheWeb
- Lead developer on both projects
- A unicorn aka ”Full stack” dev
[at]btopro =
Developer
multi-million downloads of..
126+ Drupal Modules
461+ Web Components
- 20 Talks/trainings/interviews ‘18-’19
- Organized multiple Drupal / web
components events in Pitt, PSU, Duke
- 8x ~100 people
- IST Master of Sciences thesis in
“studying” Drupal adoption at PSU
[at]btopro =
Organizer
Large Land Grant University, 2007
Interview Data
Now
Which was the catalyst for..
- Our institutions & world deserve more
- Improve education, improve society
- Embedded in edu to development tech
society needs to shift beyond what
market norms can produce
[at]btopro =
Developer
Activists
{“[at]btopro” : new DeveloperActivist() }
typeof DeveloperActivist
undefined?
DeveloperActivist()
All code enacts change.
A DeveloperActivist writes code
to enact social change.
Mexico City: iPhone vs. Android [OC]
Establishing a larger purpose / context
- Edu / Tech unapproachable to all but 1%
- Tech operates without constraints
- Lack of constraints can lead to
destruction of social fabric,
addiction, lack of humanity
- We aren’t just here to learn, we are here
to enact change in society
- technology is a powerful change agent
#EdTechJoker
The web needs a
moonshot if we
are to ever grow
beyond the
vendors of 2000
HAX is my moonshot
To change publishing
35 issues opened as a result of this class! 21 closed already!
Establishing self as coach, not teacher
- Deconstructing notions of academic
- This outfit is intentional
- I started doing this 3 years ago
- My work / history / career was making me
unapproachable
- Attempt to break imposter syndrome
- Clothing and language choices..
- Approachable
- “Normal” person “just like me”
- I am them 13 years later
- Brand / marketing
- Helps LA is hockey player / IST undergrad
#EdTechJoker
[[date]] – <when-i-started-coding date=“1996”>
I made sites like this with a lot of practice by 1999
My HS summer project in ’99 from internet archive
I learned to code on a website like this ‘98 – ‘02
My dad’s Lesson plans from internet archive
So what classes did I
take to learn how to
do all these things?
None.
None.
Err... I mean.. IST
Addressing their reality head on
- This degree puts you at the start line
- You are “special” because you will have a
tech centric degree or specialization
- But.. 10,000+ others will hit that same
“special” job market with you
- Fickle, but it might come down to
1 word that gets you a job or interview
- it may signal ~3 months less training
- We’re going to equip you with that 1 word
- “I know you can do this because I did!”
#EdTechJoker
static get classStructure(section) {
if (section === ‘2’) {
return [...this.lessons];
}
}
Course structure
- Micro-topics covering pieces of the web
- Course split into three larger themes
- Web fundamentals
- Brand, Git, HTML/CSS/JS, Web components
- CMSs
- GravCMS, WordPress, Drupal, HAXcms
- Action / Job role oriented
- UX iteration (HAXcms as transition)
* Accessibility remediation
* Accessible application design
* Docker / web infrastructure
* OER / Project lead recommendation
#EdTechJoker
* Guest speaker
#EdTechJoker
Assessment types breakdown
- 12 Labs, 10 pts/each, 120 pts (80%)
- Each week, started at end of class
finished prior to next class
- 1 mid-term, 15 pts (10%)
- ”open google” exam
- 1 Project, 15 pts (10%)
- Last lab extended into a pitch of how
they would create a solution for a
solution space given the skillsets
picked up in class
Structure of lesson each week
- Recap / examples / some feedback of
previous week based on their work
- Topic / terms
- What, Why, How, market need
- Live demo of technique / skill
- Activity where we both do it together
- Lab / open time to begin on the problem
space and ask questions
- Explainer Video as evidence
#EdTechJoker
Structure of my lesson each week
- Class Wed (3H), Lab and evidence due Mon
- I accept Tues / Wed without penalty
- I don’t give these feedback
- This is not spoken...
- Lab
- highly topic specific
- hands on skill / scenario driven
- Evidence methods (varies but typical):
- ~500 word writing piece
- ~5 minute explainer YouTube video
- Link submitted to Channel
#EdTechJoker
- Create a Slack account & join IST 402
- Create an identity as an IT professional
Lab details are on course website
- GitHub, YouTube, Twitter, LinkedIn
- Socials suggested but not required
- Create a screencast that’s ~5 min long
- Explain your brand and talk about an
interesting tech blog or article you’ve
read recently (just to jog the process)
- Post to #lab-1-brand-management in Slack
Lab 1
What we’ll do now
- See how my team uses GitHub / git everyday
- make a Pull Request against our course
content itself!
https://github.com/btopro/ist402
- Fork and do an in class activity
- Lab time fixing minor documentation
issues in some HAX related pages to get
our feet wet at what contributions
workflows look like in real FOSS projects
Lab 2
GitHub
What we’ll do now
- Mess with Inspector to modify psu.edu
- Play with and explore CodePen.io
- Fork a pen of mine that we’ll step
through it together
- Ask questions, this is just a foot
in the door to this topic and we’ll
be exploring other technologies and
related platforms as the semester
progresses
Week 3
In class
Activity
Lab
- Start modifying a pen to reverse engineer
a resume boilerplate
- Fork Reflection Pen
- write your reflection post there
- add a link to your video response there
Reflection topic (pick at least one)
- Explaining styling an element in CSS
- Explain how to use JavaScript and
getElementById to add a click event to
an element in an existing codepen
- Value of CodePen as a platform
Lab 3
CodePen.io
Accounts for
skillset and
EX diff 
Codepen.io
Tools we use in
class that you
can use to teach
any number of
topics..
github.com
desktop.github.com
desktop.github.com
codepen.io
stackblitz.com
glitch.me
webcomponents.dev
labs.play-with-docker.com
labs.play-with-docker.com
Postman
JSON Formatter plugin
Lighthouse plugin
hax.psu.edu
CMS section
2 weeks
$$$$$$
comparison UX leading
into
activism
Kicks off
Reclaim
Tour
HAXcms 2019 < 10 Experimental
Edu
GravCMS 2014 < 100 Docs
Edu
WordPress 2003 > 10,000,000 Small / Mid
NGO
EDU
Drupal 2000 > 100,000 Top level
Gov, EDU
Marketing
Name Age Community Industries
HAXcms 💰 🦑 < 0.0000001%
GravCMS 💰 💰 🦑 🦑 < 0.5%
WordPress 💰 💰 💰 🦑 🦑 🦑 33%
(of top 10 mill)
Drupal 💰 💰 💰 💰 💰 🦑 🦑 🦑 🦑 🦑 4% - 6%
Name Cost Complexity Popularity
reclaimhosting.com
reclaimhosting.com
hax.psu.edu
oer.hax.psu.edu/bto108/sites/ist402/
Do you like the hybrid lab / open platform
submission approach and would you want
other courses to do things in this “YouTube
brand” style or is it obnoxious and you’d
rather keep work closed off?
34 yes
- 1 felt it was time consuming
“I like it, sometimes the video thing can
get annoying every week but this is my
favorite class by far”
1 felt hard to “pick a brand”
1 felt 3x a week would be better suited
3 felt might be difficult to scale to all
classes or topics
Midsemester
survey
Do you like the hybrid lab / open platform
submission approach and would you want
other courses to do things in this “YouTube
brand” style or is it obnoxious and you’d
rather keep work closed off?
“I enjoy using youtube because it helps me
explain using my words like I would in an
interview”
“I think it’s a really good approach.
Doesn’t feel like busy work”
“I like using Youtube. It forces me to
think and explain what I’m doing”
Midsemester
survey
Do you like the hybrid lab / open platform
submission approach and would you want
other courses to do things in this “YouTube
brand” style or is it obnoxious and you’d
rather keep work closed off?
“It’s something cool/different and I think
it’s given me a new hobby”
“I think it is a good way to show what we
learn and to get ourselves out of our
comfort zone”
“It helps me think outside my coursework
and allows me to get creative”
Midsemester
survey
Do you like the hybrid lab / open platform
submission approach and would you want
other courses to do things in this “YouTube
brand” style or is it obnoxious and you’d
rather keep work closed off?
“It helps me understand the topic better
and improves my speaking skills. It makes
me feel more confident with my opinion on
tech topics”
“It’s non-traditional but seems to fit a
21st century society. I have been learning
so much from the hands on experience. Most
other IST classes are definitions and
overviews”
Midsemester
survey
What I think can transfer to other courses
- YouTube explainer series approach
- Students like it as practice of public
speaking without being in front of people
- Imagine if this was integrated across
large parts of the IST curriculum
- Some really running with the idea
- Yes, others do bare minimum, oh well.
- Alternative submission format: unlisted
or private video, some do on Box/Drive
Wrap up
What I think can transfer to other courses
- web services utilized to teach tech
to varying tech audiences can scale and
does not have issues with student exp:
- Reclaim hosting (cheap, $30/year)
- codepen.io (fork, break to learn HTML)
- glitch/stackblitz (fork full front-end)
- Play with docker (4 hour container)
- hax.psu.edu (PSU service...)
Wrap up
What probably can’t transfer as well
- My style. I believe in my work and as a
result can often inspire others to follow
along out of attacking status quo.
- Many things might only work because these
are juniors / seniors and thus thinking
about how to present themselves in
interview form
- The many small topics approach is most
likely novel but impractical for other
topics.
Wrap up
What needs clean up / refinement
- Students have put more effort into the
scenario based assignments
- Web components assignment I did a poor
job explaining (which made me put more
into the scenarios)
- I need to make the accessibility portions
more robust
- The course is an entry into the ideas of
many things (good/bad)
- Many asking for more Docker then I can
actually cover
Wrap up
My recommendations ”As a web developer”..
- Stop silo’ing programming. No one sees
themselves as programmer until forced to
- Most web devs I meet have no formal
training in CSE. Many from iSchools or
humanities
- HTML is the most approachable language
and can be taught to anyone
- CSS is then how to style HTML
- JavaScript is then how to make HTML
interactive
Wrap up
The future is entirely web
- Web components are object oriented JS
that let you build new HTML tags. They
are going to create a revolution in web
- Electron / Ionic let you compile
HTML/CSS/JS to native phone and desktop
applications.
- VSCode editor is built out of HTML
- Github Desktop is built out of HTML
- updated Twitter is a PWA
- WASM (Web Assembly) allows compiling
any language with browsers able to handle
in a localized Virtual machine
Wrap up
Building the future of the web
- If your interested in teaching via HAXcms
reach out to me or email hax@psu.edu
- We are currently in a closed pilot but
every student in my class knows how to
get in now so it’s not like we hide it
much ;)
Wrap up
Questions?
Critique?
Bryan
Ollendyke
[at]btopro
hax@psu.edu

More Related Content

Similar to Ed techjoker faculty presentation

EdTechJoker Spring 2020 - Lecture 1 - Welcome
EdTechJoker Spring 2020 - Lecture 1 - WelcomeEdTechJoker Spring 2020 - Lecture 1 - Welcome
EdTechJoker Spring 2020 - Lecture 1 - Welcome
Bryan Ollendyke
 
The NXT Step - Assessing with Lego Robots
The NXT Step - Assessing with Lego RobotsThe NXT Step - Assessing with Lego Robots
The NXT Step - Assessing with Lego Robots
Kenji Lamb
 
From contributing to consuming
From contributing to consumingFrom contributing to consuming
From contributing to consuming
Mel Chua
 
If you liked it, you should have put a Seq on it
If you liked it, you should have put a Seq on itIf you liked it, you should have put a Seq on it
If you liked it, you should have put a Seq on it
Olga Botvinnik
 
00-intro.pdf
00-intro.pdf00-intro.pdf
00-intro.pdf
NadhirahAzamuddin
 
Creating Flipped Lessons
Creating Flipped Lessons Creating Flipped Lessons
Creating Flipped Lessons
Kate Willey
 
Webquest ... a teaching tool
Webquest ... a teaching toolWebquest ... a teaching tool
Webquest ... a teaching toolAnna C
 
Become a moodle developer marcus green - moodle moot global19
Become a moodle developer  marcus green - moodle moot global19Become a moodle developer  marcus green - moodle moot global19
Become a moodle developer marcus green - moodle moot global19
Marcus Green
 
Technology and Project-Based Learning in the ELA classroom (2)
Technology and Project-Based Learning in the ELA classroom (2)Technology and Project-Based Learning in the ELA classroom (2)
Technology and Project-Based Learning in the ELA classroom (2)
Scott Moran
 
EdTechJoker Open Activism Project
EdTechJoker Open Activism ProjectEdTechJoker Open Activism Project
EdTechJoker Open Activism Project
btopro
 
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
rpowell285
 
Everything old is new again…or is it?
Everything old is new again…or is it?Everything old is new again…or is it?
Everything old is new again…or is it?
Jo Kay
 
The Toolbelt
The ToolbeltThe Toolbelt
2013 june-ccssconf2013-keynote-common core in the cloud
2013 june-ccssconf2013-keynote-common core in the cloud2013 june-ccssconf2013-keynote-common core in the cloud
2013 june-ccssconf2013-keynote-common core in the cloudVicki Davis
 
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online coursesPimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
Tracy Kelly
 
Ut teaching symposium project based learning and technology 2012
Ut teaching symposium project based learning and technology 2012Ut teaching symposium project based learning and technology 2012
Ut teaching symposium project based learning and technology 2012David Harms
 
Lecture 14 - OER final project
Lecture 14 - OER final projectLecture 14 - OER final project
Lecture 14 - OER final project
Bryan Ollendyke
 
How to integrate technology into your classroom
How to integrate technology into your classroomHow to integrate technology into your classroom
How to integrate technology into your classroomtnjestes
 
How to integrate technology into your classroom
How to integrate technology into your classroomHow to integrate technology into your classroom
How to integrate technology into your classroomtnjestes
 
Web 2.0 presentation
Web 2.0 presentationWeb 2.0 presentation
Web 2.0 presentation
debwolf
 

Similar to Ed techjoker faculty presentation (20)

EdTechJoker Spring 2020 - Lecture 1 - Welcome
EdTechJoker Spring 2020 - Lecture 1 - WelcomeEdTechJoker Spring 2020 - Lecture 1 - Welcome
EdTechJoker Spring 2020 - Lecture 1 - Welcome
 
The NXT Step - Assessing with Lego Robots
The NXT Step - Assessing with Lego RobotsThe NXT Step - Assessing with Lego Robots
The NXT Step - Assessing with Lego Robots
 
From contributing to consuming
From contributing to consumingFrom contributing to consuming
From contributing to consuming
 
If you liked it, you should have put a Seq on it
If you liked it, you should have put a Seq on itIf you liked it, you should have put a Seq on it
If you liked it, you should have put a Seq on it
 
00-intro.pdf
00-intro.pdf00-intro.pdf
00-intro.pdf
 
Creating Flipped Lessons
Creating Flipped Lessons Creating Flipped Lessons
Creating Flipped Lessons
 
Webquest ... a teaching tool
Webquest ... a teaching toolWebquest ... a teaching tool
Webquest ... a teaching tool
 
Become a moodle developer marcus green - moodle moot global19
Become a moodle developer  marcus green - moodle moot global19Become a moodle developer  marcus green - moodle moot global19
Become a moodle developer marcus green - moodle moot global19
 
Technology and Project-Based Learning in the ELA classroom (2)
Technology and Project-Based Learning in the ELA classroom (2)Technology and Project-Based Learning in the ELA classroom (2)
Technology and Project-Based Learning in the ELA classroom (2)
 
EdTechJoker Open Activism Project
EdTechJoker Open Activism ProjectEdTechJoker Open Activism Project
EdTechJoker Open Activism Project
 
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
eLearning Guild Online Forum - Application of the Thiagi Four-Door Model for ...
 
Everything old is new again…or is it?
Everything old is new again…or is it?Everything old is new again…or is it?
Everything old is new again…or is it?
 
The Toolbelt
The ToolbeltThe Toolbelt
The Toolbelt
 
2013 june-ccssconf2013-keynote-common core in the cloud
2013 june-ccssconf2013-keynote-common core in the cloud2013 june-ccssconf2013-keynote-common core in the cloud
2013 june-ccssconf2013-keynote-common core in the cloud
 
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online coursesPimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
Pimp Your Post - Tips and Tricks for Jazzing up Intro Posts in Online courses
 
Ut teaching symposium project based learning and technology 2012
Ut teaching symposium project based learning and technology 2012Ut teaching symposium project based learning and technology 2012
Ut teaching symposium project based learning and technology 2012
 
Lecture 14 - OER final project
Lecture 14 - OER final projectLecture 14 - OER final project
Lecture 14 - OER final project
 
How to integrate technology into your classroom
How to integrate technology into your classroomHow to integrate technology into your classroom
How to integrate technology into your classroom
 
How to integrate technology into your classroom
How to integrate technology into your classroomHow to integrate technology into your classroom
How to integrate technology into your classroom
 
Web 2.0 presentation
Web 2.0 presentationWeb 2.0 presentation
Web 2.0 presentation
 

More from btopro

ELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ ApereoELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ Apereo
btopro
 
Lecture13 Containers
Lecture13   ContainersLecture13   Containers
Lecture13 Containers
btopro
 
IST 402 Presentation by Sonya
IST 402 Presentation by SonyaIST 402 Presentation by Sonya
IST 402 Presentation by Sonya
btopro
 
Lecture11 - Accessibility
Lecture11  - AccessibilityLecture11  - Accessibility
Lecture11 - Accessibility
btopro
 
EdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWebEdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWeb
btopro
 
Drupal
DrupalDrupal
Drupal
btopro
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
btopro
 
Grav CMS
Grav CMSGrav CMS
Grav CMS
btopro
 
HAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp addressHAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp address
btopro
 
HAX camp 2019 - Welcome
HAX camp 2019 - WelcomeHAX camp 2019 - Welcome
HAX camp 2019 - Welcome
btopro
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
btopro
 
HTML / CSS / JS Web basics
HTML / CSS / JS Web basicsHTML / CSS / JS Web basics
HTML / CSS / JS Web basics
btopro
 
Background info on git / github
Background info on git / githubBackground info on git / github
Background info on git / github
btopro
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
btopro
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinar
btopro
 
HAX - Chaotic Good
HAX - Chaotic GoodHAX - Chaotic Good
HAX - Chaotic Good
btopro
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
btopro
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
btopro
 
Web components training setup knowledge
Web components training setup knowledgeWeb components training setup knowledge
Web components training setup knowledge
btopro
 
The case for web components in government
The case for web components in governmentThe case for web components in government
The case for web components in government
btopro
 

More from btopro (20)

ELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ ApereoELMS:LN 2020 update @ Apereo
ELMS:LN 2020 update @ Apereo
 
Lecture13 Containers
Lecture13   ContainersLecture13   Containers
Lecture13 Containers
 
IST 402 Presentation by Sonya
IST 402 Presentation by SonyaIST 402 Presentation by Sonya
IST 402 Presentation by Sonya
 
Lecture11 - Accessibility
Lecture11  - AccessibilityLecture11  - Accessibility
Lecture11 - Accessibility
 
EdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWebEdTechJoker - HAXTheWeb
EdTechJoker - HAXTheWeb
 
Drupal
DrupalDrupal
Drupal
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
 
Grav CMS
Grav CMSGrav CMS
Grav CMS
 
HAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp addressHAX camp 2019 - HAX The Camp address
HAX camp 2019 - HAX The Camp address
 
HAX camp 2019 - Welcome
HAX camp 2019 - WelcomeHAX camp 2019 - Welcome
HAX camp 2019 - Welcome
 
Web components and Package managers
Web components and Package managersWeb components and Package managers
Web components and Package managers
 
HTML / CSS / JS Web basics
HTML / CSS / JS Web basicsHTML / CSS / JS Web basics
HTML / CSS / JS Web basics
 
Background info on git / github
Background info on git / githubBackground info on git / github
Background info on git / github
 
Future proofing design work with Web components
Future proofing design work with Web componentsFuture proofing design work with Web components
Future proofing design work with Web components
 
The case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinarThe case for Web components - Drupal4Gov webinar
The case for Web components - Drupal4Gov webinar
 
HAX - Chaotic Good
HAX - Chaotic GoodHAX - Chaotic Good
HAX - Chaotic Good
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 
Open Apereo - Web components workshop
Open Apereo - Web components workshopOpen Apereo - Web components workshop
Open Apereo - Web components workshop
 
Web components training setup knowledge
Web components training setup knowledgeWeb components training setup knowledge
Web components training setup knowledge
 
The case for web components in government
The case for web components in governmentThe case for web components in government
The case for web components in government
 

Recently uploaded

Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
TechSoup
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
Balvir Singh
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
Vikramjit Singh
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
Scholarhat
 
Multithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race conditionMultithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race condition
Mohammed Sikander
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
thanhdowork
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
Celine George
 
Chapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdfChapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdf
Kartik Tiwari
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
Peter Windle
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
EugeneSaldivar
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
MysoreMuleSoftMeetup
 

Recently uploaded (20)

Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup   New Member Orientation and Q&A (May 2024).pdfWelcome to TechSoup   New Member Orientation and Q&A (May 2024).pdf
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdf
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
Operation Blue Star - Saka Neela Tara
Operation Blue Star   -  Saka Neela TaraOperation Blue Star   -  Saka Neela Tara
Operation Blue Star - Saka Neela Tara
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
 
Multithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race conditionMultithreading_in_C++ - std::thread, race condition
Multithreading_in_C++ - std::thread, race condition
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
Model Attribute Check Company Auto Property
Model Attribute  Check Company Auto PropertyModel Attribute  Check Company Auto Property
Model Attribute Check Company Auto Property
 
Chapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdfChapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdf
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
 
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...TESDA TM1 REVIEWER  FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
TESDA TM1 REVIEWER FOR NATIONAL ASSESSMENT WRITTEN AND ORAL QUESTIONS WITH A...
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
Mule 4.6 & Java 17 Upgrade | MuleSoft Mysore Meetup #46
 

Ed techjoker faculty presentation

  • 1. IST 402 Start up? Let's Tool up! haxtheweb.org elmsln.org
  • 4. Mexico City: iPhone vs. Android [OC]
  • 5. Mexico City: iPhone vs. Android [OC] https://www.reddit.com/r/MapPorn/ comments/d3scm4/mexico_city_ip hone_vs_android_oc
  • 6. (parts of class 1st day) Welcome to IST 402! “Who controls the past, controls the future: who controls the present, controls the past…” - Orwell, 1984 Penn State HAXTheWeb.org Bryan Ollendyke [at]btopro Developer Activist
  • 7. Let’s get some things out of the way 1st
  • 8. Q1: Is this class about making a start up?
  • 9. NO.
  • 10. This is learning about the technologies start ups are often built on
  • 11. Q2: Do I need to be a 1337 (leet) dev to take this class?
  • 12. NO
  • 13. This is about getting ”hello world” level skills by doing hands-on labs
  • 14. CIMG4000 by Scurzuzu, on Flickr, https://www.flickr.com/photos/scurzuzu/271232366 Now. To the brain eating part
  • 15. Emerging technologies [w00t] - The class I wish I had in college - Expose you to the ideas and technologies that make the web work - We’ll help shape the topics of the class together though the first month or two is mapped out here - Learn about the magic behind major web platforms - Learn how programmers work, not necessarily coding outright, though we will at times. IST 402
  • 16. Most importantly. We are resources here for you! (Use this, you pay for it. Literally.)
  • 17. Who my IST 402 say they are (36)
  • 18. Who my IST 402 say they are (36)
  • 19. Who my IST 402 say they are (36)
  • 20. What they say they want
  • 21. What they say they want
  • 22. But..Who the hell are you?
  • 23. But... Who the hell are you? (it’s weird he didn’t start there isn’t it?)
  • 24. - Loud / Yelly / friendly - Dresses odd / wears hockey jerseys - Loves my family - I’ve never taught in a classroom.. - But I coached ‘10 National Champions - Parents were both public school teachers for 35 & 33 years - Science (8th grade) - Computer Programming (HS) Bryan Ollendyke ”normal” Human
  • 25. - 2X IST grad BS ‘08 MS ’15 of PSU - I contribute 100% to FOSS projects ELMS:LN and HAXTheWeb - Lead developer on both projects - A unicorn aka ”Full stack” dev [at]btopro = Developer
  • 26. multi-million downloads of.. 126+ Drupal Modules 461+ Web Components
  • 27. - 20 Talks/trainings/interviews ‘18-’19 - Organized multiple Drupal / web components events in Pitt, PSU, Duke - 8x ~100 people - IST Master of Sciences thesis in “studying” Drupal adoption at PSU [at]btopro = Organizer
  • 28. Large Land Grant University, 2007
  • 30. Now Which was the catalyst for..
  • 31. - Our institutions & world deserve more - Improve education, improve society - Embedded in edu to development tech society needs to shift beyond what market norms can produce [at]btopro = Developer Activists
  • 32. {“[at]btopro” : new DeveloperActivist() } typeof DeveloperActivist undefined?
  • 33. DeveloperActivist() All code enacts change. A DeveloperActivist writes code to enact social change.
  • 34. Mexico City: iPhone vs. Android [OC]
  • 35. Establishing a larger purpose / context - Edu / Tech unapproachable to all but 1% - Tech operates without constraints - Lack of constraints can lead to destruction of social fabric, addiction, lack of humanity - We aren’t just here to learn, we are here to enact change in society - technology is a powerful change agent #EdTechJoker
  • 36. The web needs a moonshot if we are to ever grow beyond the vendors of 2000
  • 37. HAX is my moonshot To change publishing
  • 38. 35 issues opened as a result of this class! 21 closed already!
  • 39. Establishing self as coach, not teacher - Deconstructing notions of academic - This outfit is intentional - I started doing this 3 years ago - My work / history / career was making me unapproachable - Attempt to break imposter syndrome - Clothing and language choices.. - Approachable - “Normal” person “just like me” - I am them 13 years later - Brand / marketing - Helps LA is hockey player / IST undergrad #EdTechJoker
  • 41. I made sites like this with a lot of practice by 1999 My HS summer project in ’99 from internet archive
  • 42. I learned to code on a website like this ‘98 – ‘02 My dad’s Lesson plans from internet archive
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51. So what classes did I take to learn how to do all these things?
  • 52. None.
  • 54. Addressing their reality head on - This degree puts you at the start line - You are “special” because you will have a tech centric degree or specialization - But.. 10,000+ others will hit that same “special” job market with you - Fickle, but it might come down to 1 word that gets you a job or interview - it may signal ~3 months less training - We’re going to equip you with that 1 word - “I know you can do this because I did!” #EdTechJoker
  • 55.
  • 56. static get classStructure(section) { if (section === ‘2’) { return [...this.lessons]; } }
  • 57. Course structure - Micro-topics covering pieces of the web - Course split into three larger themes - Web fundamentals - Brand, Git, HTML/CSS/JS, Web components - CMSs - GravCMS, WordPress, Drupal, HAXcms - Action / Job role oriented - UX iteration (HAXcms as transition) * Accessibility remediation * Accessible application design * Docker / web infrastructure * OER / Project lead recommendation #EdTechJoker * Guest speaker
  • 58. #EdTechJoker Assessment types breakdown - 12 Labs, 10 pts/each, 120 pts (80%) - Each week, started at end of class finished prior to next class - 1 mid-term, 15 pts (10%) - ”open google” exam - 1 Project, 15 pts (10%) - Last lab extended into a pitch of how they would create a solution for a solution space given the skillsets picked up in class
  • 59. Structure of lesson each week - Recap / examples / some feedback of previous week based on their work - Topic / terms - What, Why, How, market need - Live demo of technique / skill - Activity where we both do it together - Lab / open time to begin on the problem space and ask questions - Explainer Video as evidence #EdTechJoker
  • 60. Structure of my lesson each week - Class Wed (3H), Lab and evidence due Mon - I accept Tues / Wed without penalty - I don’t give these feedback - This is not spoken... - Lab - highly topic specific - hands on skill / scenario driven - Evidence methods (varies but typical): - ~500 word writing piece - ~5 minute explainer YouTube video - Link submitted to Channel #EdTechJoker
  • 61. - Create a Slack account & join IST 402 - Create an identity as an IT professional Lab details are on course website - GitHub, YouTube, Twitter, LinkedIn - Socials suggested but not required - Create a screencast that’s ~5 min long - Explain your brand and talk about an interesting tech blog or article you’ve read recently (just to jog the process) - Post to #lab-1-brand-management in Slack Lab 1
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. What we’ll do now - See how my team uses GitHub / git everyday - make a Pull Request against our course content itself! https://github.com/btopro/ist402 - Fork and do an in class activity - Lab time fixing minor documentation issues in some HAX related pages to get our feet wet at what contributions workflows look like in real FOSS projects Lab 2 GitHub
  • 69.
  • 70.
  • 71.
  • 72. What we’ll do now - Mess with Inspector to modify psu.edu - Play with and explore CodePen.io - Fork a pen of mine that we’ll step through it together - Ask questions, this is just a foot in the door to this topic and we’ll be exploring other technologies and related platforms as the semester progresses Week 3 In class Activity
  • 73.
  • 74.
  • 75.
  • 76. Lab - Start modifying a pen to reverse engineer a resume boilerplate - Fork Reflection Pen - write your reflection post there - add a link to your video response there Reflection topic (pick at least one) - Explaining styling an element in CSS - Explain how to use JavaScript and getElementById to add a click event to an element in an existing codepen - Value of CodePen as a platform Lab 3 CodePen.io Accounts for skillset and EX diff 
  • 78. Tools we use in class that you can use to teach any number of topics..
  • 92. CMS section 2 weeks $$$$$$ comparison UX leading into activism Kicks off Reclaim Tour
  • 93. HAXcms 2019 < 10 Experimental Edu GravCMS 2014 < 100 Docs Edu WordPress 2003 > 10,000,000 Small / Mid NGO EDU Drupal 2000 > 100,000 Top level Gov, EDU Marketing Name Age Community Industries
  • 94. HAXcms 💰 🦑 < 0.0000001% GravCMS 💰 💰 🦑 🦑 < 0.5% WordPress 💰 💰 💰 🦑 🦑 🦑 33% (of top 10 mill) Drupal 💰 💰 💰 💰 💰 🦑 🦑 🦑 🦑 🦑 4% - 6% Name Cost Complexity Popularity
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 103. Do you like the hybrid lab / open platform submission approach and would you want other courses to do things in this “YouTube brand” style or is it obnoxious and you’d rather keep work closed off? 34 yes - 1 felt it was time consuming “I like it, sometimes the video thing can get annoying every week but this is my favorite class by far” 1 felt hard to “pick a brand” 1 felt 3x a week would be better suited 3 felt might be difficult to scale to all classes or topics Midsemester survey
  • 104. Do you like the hybrid lab / open platform submission approach and would you want other courses to do things in this “YouTube brand” style or is it obnoxious and you’d rather keep work closed off? “I enjoy using youtube because it helps me explain using my words like I would in an interview” “I think it’s a really good approach. Doesn’t feel like busy work” “I like using Youtube. It forces me to think and explain what I’m doing” Midsemester survey
  • 105. Do you like the hybrid lab / open platform submission approach and would you want other courses to do things in this “YouTube brand” style or is it obnoxious and you’d rather keep work closed off? “It’s something cool/different and I think it’s given me a new hobby” “I think it is a good way to show what we learn and to get ourselves out of our comfort zone” “It helps me think outside my coursework and allows me to get creative” Midsemester survey
  • 106. Do you like the hybrid lab / open platform submission approach and would you want other courses to do things in this “YouTube brand” style or is it obnoxious and you’d rather keep work closed off? “It helps me understand the topic better and improves my speaking skills. It makes me feel more confident with my opinion on tech topics” “It’s non-traditional but seems to fit a 21st century society. I have been learning so much from the hands on experience. Most other IST classes are definitions and overviews” Midsemester survey
  • 107. What I think can transfer to other courses - YouTube explainer series approach - Students like it as practice of public speaking without being in front of people - Imagine if this was integrated across large parts of the IST curriculum - Some really running with the idea - Yes, others do bare minimum, oh well. - Alternative submission format: unlisted or private video, some do on Box/Drive Wrap up
  • 108. What I think can transfer to other courses - web services utilized to teach tech to varying tech audiences can scale and does not have issues with student exp: - Reclaim hosting (cheap, $30/year) - codepen.io (fork, break to learn HTML) - glitch/stackblitz (fork full front-end) - Play with docker (4 hour container) - hax.psu.edu (PSU service...) Wrap up
  • 109. What probably can’t transfer as well - My style. I believe in my work and as a result can often inspire others to follow along out of attacking status quo. - Many things might only work because these are juniors / seniors and thus thinking about how to present themselves in interview form - The many small topics approach is most likely novel but impractical for other topics. Wrap up
  • 110. What needs clean up / refinement - Students have put more effort into the scenario based assignments - Web components assignment I did a poor job explaining (which made me put more into the scenarios) - I need to make the accessibility portions more robust - The course is an entry into the ideas of many things (good/bad) - Many asking for more Docker then I can actually cover Wrap up
  • 111. My recommendations ”As a web developer”.. - Stop silo’ing programming. No one sees themselves as programmer until forced to - Most web devs I meet have no formal training in CSE. Many from iSchools or humanities - HTML is the most approachable language and can be taught to anyone - CSS is then how to style HTML - JavaScript is then how to make HTML interactive Wrap up
  • 112. The future is entirely web - Web components are object oriented JS that let you build new HTML tags. They are going to create a revolution in web - Electron / Ionic let you compile HTML/CSS/JS to native phone and desktop applications. - VSCode editor is built out of HTML - Github Desktop is built out of HTML - updated Twitter is a PWA - WASM (Web Assembly) allows compiling any language with browsers able to handle in a localized Virtual machine Wrap up
  • 113. Building the future of the web - If your interested in teaching via HAXcms reach out to me or email hax@psu.edu - We are currently in a closed pilot but every student in my class knows how to get in now so it’s not like we hide it much ;) Wrap up

Editor's Notes

  1. Icon created by Creative Stall from the Noun Project
  2. Icon created by Creative Stall from the Noun Project
  3. Icon created by Creative Stall from the Noun Project
  4. Icon created by Creative Stall from the Noun Project
  5. Icon created by Creative Stall from the Noun Project
  6. Platform acceptable because others had been playing with Drupal
  7. Icon created by Creative Stall from the Noun Project
  8. Icon created by Creative Stall from the Noun Project
  9. Icon created by Creative Stall from the Noun Project
  10. Icon created by Creative Stall from the Noun Project
  11. Icon created by Creative Stall from the Noun Project