This document discusses improving engagement for an introductory computing course through web-based and hands-on activities. The course previously relied heavily on textbooks and PowerPoint, but will now use free online tools to teach topics like digital images, vector art, programming, web development and video editing. Students will use websites like Pixlr, Vectr, Trinket, CodePen and WeVideo to complete projects instead of traditional software. The goal is to better engage varied students by making lessons interactive, project-based and removing barriers to participating outside of class. Potential issues like intimidating content and technology are addressed through low-pressure exploration, encouragement and optional homework videos.

1. Creating Immersive
Technology Experiences
with Web-based Software & Resources
Richard Homa
Associate Professor of Graphic & Web Design
Warren County Community College
As applied to a
Intro to Computing
General Education Course

2. The Course:
CSC 103 Introduction to Computing
 This course addresses the capabilities of computer
hardware and software, and social implications of
computer technology. Students learn common
applications software.

3. The Students:
Gen-Ed – students can satisfy Math requirement
by taking a Technology course in some majors
 Day & Evening, Both Traditional & Non-Traditional
 Liberal Arts, Criminal Justice, Automotive
 Business, Nursing, Communications
 VIPER (Military Veterans)
 Computer Information Systems

4. The Book: (that was used in the past)
Technology In Action
Pearson
No longer required!

5. Problems with past format…
that made it difficult to engage students:
 Reading-heavy, PowerPoint-heavy
 Lots of dry computer-intensive content
 Varied student skill levels and interest
 Lack of hands-on, on-task activities, despite
being in a computer lab for 1 hr 50 mins.
 Relying on too much Office software
when already covered in another course

6. Ideas/Strategies:
For improving the course content & experience
 Rely on my varied skillset in: (aka: Jack of all Trades)
art, design, color, graphics, video editing, web design,
web development, programming, database,
and traditional Office Apps to guide activities.
 Computer Science Summit (Rutgers) covered
introduction of Computer Science Principles course and
provided some advice and resources.

7. First Topic: Digital Images
Focus on a familiar area – working with pics
 I take pics with my phone with class, send to
students. Students must edit, crop and re-size
a head shot for use in their Intro forum in addition
to introducing themselves.
 The are instructed on how to use www.pixlr.com/ for
photo editing and saving procedures as well as using
our Discussion Forum and LMS in general

8. Digital Images
More Digital Editing with Pixlr
Pixlr is a free “Photoshop”-like photo/image editor
 Re-sizing (pixel size adjustments)
 Cropping
 Image Adjustments (Levels, Sharpening)
 Selections, layers, silhouetting
 Cloning, Saving, etc.

9. Compositing

10. Cloning

11. Absent Student:
“But wait Professor Homa…
my car died on the way to my sick grandmother’s house
during the power outage that only affected my
neighborhood, and, how will I EVER be able to
make up the work you did in class?”
 PDF Notes are posted and a video is posted in the
CSC 103 Playlist on the homawccc YouTube channel.
 CSC103 Intro-Computing (Homawccc Playlist)

12. Second Topic: Vector Art
Introduced on the Pixlr site is another web-based tool
for creating vector artwork called Vectr. (i.e Illustrator)
 Start with ovals & rectangles
 Manipulate anchor points
 Add fill & stroke color
 Save with transparency
 Have students see the benefits
and uses of vector art

13. Tracing raster
images to make
vector silhouettes

14. Third Topic: Binary, Hex Colors
Pixels (and vector art) are building blocks of graphics,
but binary numbers are the root of all digital data.
 Binary Number System
 Activities with Binary
 Understanding bits – related to pixel depths
 Code.org has exercises to link binary system
with visual elements

15. Using Binary code
to create the 16
(4-bit) Grayscale
combinations
https://studio.code.org/s/pixelation/

16. Topic: Computers
Free online resources (Textbook):
 Computer Science Principles Resources
developed by Runestone – CS160 Course Reader
• Computer Related Fields
• History of Computers
• Binary, Programming
• Computer Architecture, etc.
 IntroComputing.org

17. Topic: Computer Careers
Students create PowerPoints to collect an summarize
information on Computer Related Fields
 Include a PowerPoint lesson on creating custom themes,
lists, formatting using the PowerPoint Slide Master.
 Allows students to be accountable gathering their own
information and creating their own study guide and
teaches the efficiency of accessing the Slide Master tools
in PowerPoint. Sample PowerPoint

18. Topic: Programming
Students are introduced to the Python programming
language to provide instructions to computers
 Students create a Trinket.io account (free) that allows
students to utilize turtles and work through tutorials,
edit existing code, create new code and save their work
and supply a link to the instructor (in comments of LMS)
 Once students are familiar with basic turtle commands
and syntax, instructor can create custom assignments.

19. Sample: https://trinket.io/random-polygons

20. Topic: Web Development
Students are introduced to HTML, CSS & JavaScript
 Students create and utilize a free CodePen.io account
(free, web-based) that allows students write code,
preview code and share their “pens”. Instructor is able to
see all pens under username for easier grading.
 Students start with basic HTML. Apply CSS for
formatting. Then work on several JavaScript assignments
– which is aided by their previous Python exposure.

21. HTML & CSS

22. JavaScript Sample: https://codepen.io/rockpaperscissors

23. Topic: Video & Video Editing
Students are introduced to Video Editing
 Students create and utilize a free wevideo.com account
(free, web-based) that allows students upload resources
(video, audio, images) and edit videos.
 Students can add transitions, fades, animations and
piece together video clips and add audio and text.
 Student can save and share finished videos

24. Example Editing Area: https://www.wevideo.com/view/

25. Topic: Gaming
Students suggested covering Gaming
 Students can watch a video on the
History of Video Games and take a quiz.
 Students also submit a written assignment
in Discussion Forum recalling some of their
fondest memories of gaming.
 Both students & Instructor learn from this.

26. Topic: Databases
Students use Microsoft Access and phpMyAdmin
Demo to work with Databases.
 Students run sorts, filters and queries in MS Access
to retrieve needed information.
 Students create a database in phpMyAdmin.
 Run queries using Structured Query Language (SQL)
using phpMyAdmin.

27. Topic: 3D Modeling
Used free (downloadable) 3D software Blender.

28. Other Topics…
Some topics will still be traditional PPT, read, quiz for
the sake of covering necessary content.
 Networks, Mobile Networks
 Computer History, Architecture
 Operating Systems, Internet
 Students write a short “research” paper on a technology
topic of their choice – something covered or not;
a list of topics is supplied.

29. Potential Problems…
 Some non-traditional students will be resistant to the
Computer Science Principles approach.
 Some students will be intimidated by programming.
 Variety of topics can be overwhelming.
 Finding other instructors to teach the course.

30. Remedies/Strategies…
 Survey, ask. Do they like this or that, would they want to do
more of something else?
 Make programming and other topics very low pressure.
 Explore, encourage mistakes, encourage problem-solving
try new things, make connections to previous lessons
 Encourage students to help other students.
 Let students work at home if they want.
 Provide videos covering lessons.

31. In the end…
 I do my best to ensure students are engaged
and have fun in the process.
 I try to encourage everyone to get more involved and
learn about the STEM fields and to remove any
misconceptions about who can code or learn
programming be involved with computing or technology.
 It can be fun and free and good for your brain.

32. Contact
 Richard Homa
 Associate Professor,
Warren County Community College
 Email: homa@warren.edu
 Web: www.homastudio.com/
 YouTube: homawccc
©2018 Richard Homa - Faculty of the Future Conference, BCCC