This week we are covering Chapters 10 and 11 in the textbook. We are covering two unrelated topics: IT Careers and Multimedia.

Your Career in Computer Science

What follows is based on my experiences…

• 30-years experience working for not-for-profit corporations
• 10-years experience working as a freelance app and website developer

Try to learn what you can from everyone you know, from other instructors, relatives and friends. From each class you take, learn more about yourself, including what you like to do and what you are best at. 

What follows is my perspective. You are likely to hear completely different ideas from other working professionals.

Education for a Career

By choosing to go to school, you are choosing to have a career. The difference between a career and a job is that you choose something that you want to do and get paid to do it.  Every class you take will help shape your career. 

Your goal as a student is to prepare for your first professional job. Once you land a job and prove yourself, further education can either be on the job, or, if you return to college, paid for by your employer. 

While this is oversimplified, here are some common career paths in Computer Science, particularly in a corporate environment:

Everyone makes their own career path and there isn’t one clear path that you follow. This chart isn’t a black and white path, but is an image of the paths you could follow in your career. You can jump from one path to another, although you may need a to make a lateral move to jump paths. 

To move above the Senior level you will probably need a 4-year or masters degree. Even so, I would add that in the programming field there is less emphasis on degrees and much more emphasis on your ability to do the job.

As a student, your objective is to get an entry-level position. You can do this by making yourself the best job candidate possible.

Computer Science Degrees and Certificates at Saint Paul College

There are numerous degree choices at Saint Paul College. There are so many that is must be very difficult to choose one. The AC and AAC degrees typically take two years, and the certificates take up to a year. Each of the links brings you to the program descriptions.

Web 

• Web Design Certificate
• Web Development Certificate

Computer Programming

• Computer Programming AAS 
  • Java emphasis
  • Web emphasis
  • 2D Game emphasis
• Java Programming Certificate

Degrees

• Computer Science Transfer Pathway AS 
• Management Information Systems AS
• Data Science AS

DGIM

• Computer Animation Certificate
• Computer Graphics and Visualization AAS
• Web based 2D Game Development Certificate

• Computer Graphics and Visualization AAS
• Visualization Technology AS
• Visualization Technology Certificate

Networking

• Computer Network Engineering AAS
• Network Administration Certificate

Cybersecurity

• Cybersecurity AAS
• Cybersecurity Certificate

GIS

• Geographic Information Science AAS
• Geographic Information Science Certificate

With so many, how can you know which degree or certificate is right for you?

Start by taking classes that give you multiple paths forward. While you may be required to declare a major, you can change it based on what you learn about yourself and what you like to do. 

What you like about a class can help you decide which degree program. As you work through this course, think about what you like about it. 

• Do you like the design part but not the coding? 
• Do you like the coding part, but are you less interested in the design parts? 

If you love both the design and the coding, then I recommend a more technical career because of the shortage of programmers. 

See my blog post on this topic: https://webdevstudents.com/what-course-should-i-take-after-web-fundamentals-html-css/

Programming Focus

If you like the coding part of this course, here are some great classes to take next semester:

CSCI1410: Computer Science & Information Systems

This is a great first class to take because it covers a very broad set of topics. It will help you to get a perspective on the overall field. It is required for many of the CS degrees and certificates, but not all.

CSCI1523: Introduction to Computing and Programming Concepts 

If you enjoy the coding part of this course, this is a great next course to take. You will learn the Python language. 

Client-Side or Server-Side Programming

Client-Side Programming is offered in the Spring and Server-Side Programming is in the fall. Both classes pick up where this course leaves off. In the client-side course you will learn JavaScript, and in the server-side course you will learn PHP and MySql. 

Design Focus

If you like the design part of this course, here are some great next classes to take:

CSCI1470: Web Design

Web Design course picks up where this course leaves off, but with a focus on design rather than coding.  We continue learning Bootstrap and then dive into WordPress, which is the Content Management System (CMS) used by most business for their customer facing websites.

Adobe Certification Courses

There are several DGIM courses in which you take the Adobe test after you finish the course, and that gives you an extremely valuable certification from an outside source. 

DGIM: Can’t stop thinking about video games?

Consider taking some courses in the DGIM area. While there is a lot of competition in the video game field, the skills you learn making video games can be applied to other types of work. 

Web Design Certificate at Saint Paul College

If you enjoy this course, a great option to consider is the Web Design Certificate. The Web Design Certificate can be completed in two semesters: Fall, then Spring. There is one more class that is primarily coding, Client Side 1, where you learn JavaScript. The other courses are less focused on coding and more on the technology used for design.

The Web Design Certificate would prepare you to work in these types of positions:

• Freelance Web Designer
• Corporate Communications Department as a Web Designer
• Working for an agency as a Web Designer

Here are the courses in the Web Design Certificate:

Web Design Course (CSCI-1470) at Saint Paul College

If you enjoy this class…

Web Design picks up where this course leaves off, but with a focus on design rather than coding. We continue learning Bootstrap and then dive into WordPress, which is the Content Management System (CMS) used by most business for their customer facing websites. A few of my students who have taken this course have started to make websites for clients. 

If you take this course, you can add WordPress skills to your resume. This is a desired skill in the workplace. The course is only offered in the Spring Semester.

Note: This course is ONLY in the Web Design Certificate so would be an elective in the other Degree and Certificate programs.

Learn from your Non-Professional Jobs

If you are working in a non-professional job right now, you are developing soft skills that you can place on your resume. For example:

1. Reliability – Your employer can count on you

2. Integrity – Your employer can trust you

3. Teamwork – You work well with your co-workers

4. Customer Service – Providing friendly service if your job interfaces with customers

5. Communication Skills – Work on improving your written and oral communication skills in your day to day work. In order to move ahead in professional careers, you need very strong communication skills. 

Your current employer can also provide references for you.

Try to learn as much as you can about the business of your employer. For example, if you work in a restaurant, pay attention to the technology you are using to manage customers and orders. Perhaps some day you program similar technology. 

Part of how you are paid in a job is not only is money, but also with experience. It may be in your interest to take a job that pays less money but will provide you with valuable experience and connections. 

How to Prepare for your First Professional Job

Here are some things you can do to help get your first professional job:

1. Resume: Have a well-written and thoughtful resume. List out relevant college courses on your resume. As you learn skills, like HTML and CSS, add those to your resume.

2. Volunteer: Consider volunteering to build up more experiences for your resume. Volunteering helps not only by giving you experience but also by showing that you are a team player.  

3. Github: Create a Github account. We’ll set this up for the final project. For programming jobs, hiring managers may check your code on Github. 

4. LinkedIn: Have a LinkedIn account and start to capture instructors and school friends as connections. Networking is how you are most likely to find your first job. At the same time, keep your other social networking clean as a whistle because future employers will Google you before hiring you. 

5. Instructors: Make an effort to get to know each instructor. Take advantage of office hours. This allows your instructor to provide you with a more specific reference. 

6. Communication Skills: Make an effort to improve your written communication skills. Write in complete sentences. Avoid any cryptic communications. For example, when you send an email to an instructor, write a few sentences explaining what you need and thanking them for their help. 

7. Clean Code: Make a habit of indenting your code and adding helpful code comments. Always add a height, width, and alt text to HTML images. Use lowercase file names with a dash between words for the HTML and CSS languages. 

8. Have Published Work Products: For example, consider purchasing your name as a domain name, and publishing a website. Then you have a public example of your work. Make websites for friends and family and list them on your resume as examples of your work. 

Working As A Programmer

If you work in a mid or large-sized corporation, you will work as part of a team. There are a couple different approaches to project management: 

Agile: Most IT departments will use Agile for project management

Waterfall: You will still see some Waterfall project management on older mainframe systems. 

Agile Model of Project Management

If you work for a large corporation, it is highly likely you will work in an Agile environment. Agile development has largely replaced “Waterfall” development but only over the last decade. 

Agile typically works in a 30-day cycle with shorter bursts. In contrast, the Waterfall development can last for a year or more.  Before you interview for a job, it would be good to review some of the Agile terminology, because they will likely use it in the interview.

Scrum Process: This is the name for the 30-day cycle. After each 30-day cycle, you will have an extensive review process regarding how the process went. 

ScrumMaster: The project manager that leads the scrums. If you like technology but not coding, it would be a great idea to take some courses on how to be a ScrumMaster so you can move up in a corporation. 

Daily Scrum: There is a daily meeting where you  report on how your part of the project is going. The target for the meeting is 15 minutes, and will likely be held in Zoom the same time every day. 

User Story: The process starts with documenting the User Story, so the project can meet the needs of the user. 

Waterfall Project Management Model

The waterfall model is the traditional model for managing IT releases. It is associated with large mainframe computer systems.

1. Requirements:  Product requirements are documented (Business side, with direction from IT.)
2. Analysis: What is the best way to meet the need? (Business Analysts in either IT or Business Unit)
3. Design: Programming to the requirements(IT)
4. Testing: Checking the programs. It starts in IT then moves towards the business users
5. Implementation: Software is released, usually over a weekend
6. Verification: Software used, bugs reported
7. Maintenance: Ongoing use and maintenance

Each release tends to be very large and the timelines very long, over months and years. It had its place in early IT and the creation of large mainframe computers.

Code Standards

Part of how you can prepare for a first professional job is to code neatly. When you apply for a job, your potential employer may ask for a code sample. You may want to use your work in this class for the code sample. The hiring manager will be looking for code that is:

• Consistently indented
• Thoughtfully commented 
• Using the Semantic Elements <header><nav><main><footer>
• Using image tags with the alt, width, and height attributes
• Does not have inline CSS
• Folder and file names are all lower case and with a dash between words.

Multimedia

Copyright Issues

Because websites are “published” to the World Wide Web, you need to make sure you have the right to use any images you publish to a website. Only publish web pages, images, and other media that you have personally created or have obtained the rights or license to use. Ask permission to use media created by another person.

There is a practice called “Copyright Trolling” in which owners of images sue website owners for using their images without permission. To keep yourself safe, always make sure you have permission to use images. If you use an image you don’t have permission to use, the owner of the image can sue you for the cost of the image.

It’s ok to embed a YouTube video without permission, but not ok to display a YouTube video as your own work. (YouTube gets permission on your behalf in their upload process.)

Here are a couple of places where you can get images for free:

• Wikipedia: provides images and attributions you should use with the image. Be sure to use the attribution

• Pixabay.com: You can use images from Pixabay.com without providing attribution, although if you use their image it is a nice idea to use their attribution for the image.

If you use images from any website that provides free images, be sure that you check how you need to provide attribution for the image.

The <iframe> Element

An inline frame, the <iframe>, is used to embed another document within the your HTML document. An iframe is like a website inside of a website. 

The code below embeds a YouTube video in an iframe. You can find this code over at YouTube. Note that the attribute specifies what the iframe website is:

 

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/0u63sfQUF3U" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

On the code above I added a line break between each iframe attribute, so it is easier to see all of the attributes. The height and width are critical attributes in the iframe, and the src attribute is the link to the embedded website.

Embedding Videos with their Fixed Aspect Ratios

Because videos have a fixed aspect ratio, when you embed videos you need to have some workarounds for mobile devices. Because iframes have a fixed aspect ratio, it is challenging to make them fit on all size screens. 16:9 is the most common size. 

The image below shows the problem. The video fits on a desktop, but not on a mobile device.

The fix for this is quite easy. Flaviocopes.com provides the code you need to make the video responsive:

https://flaviocopes.com/responsive-youtube-videos/

As you can see in the JSFiddle screenshot below, when you use this responsive video fix by Flaviocopes, the video is at 100% width and the aspect ratio is corrected.

How to Find the Embed Code

Embedding YouTube Videos

The default YouTube embed default options may not be what you want. For example, after your video finishes, it plays another video instead of replaying your video. YouTube provides player parameters that you can add to control the video. https://developers.google.com/youtube/player_parameters

I recently was asked by a client set the video to do the following: 1) autoplay, 2) no sound, 3) show captions, 4) replay the video. This is how I coded it:

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/gnpyczgMJp4?loop=1&autoplay=1&mute=1&cc_load_policy=1&playlist=gnpyczgMJp4" 
title="YouTube video player" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

I added line breaks between the attributes to make it easier to see the code I added. The extra code that controls it is this code that goes after the rest of the src attribute:

loop=1 //this turns on video looping

autoplay=1 //this starts on the video running

mute=1 //this mutes the video. It is poor manners to have sound turned on automatically.

cc_load_policy=1 //this turns on the closed captioning. Since the sound is turned off, turning on the closed captioning tells the website visitor that the video is narrated. 8

playlist=gnpyczgMJp4 //this resets the video to autoplay the same video by using the same video number

Embedding Google Maps

Embedding Google Maps is easier than YouTube videos, because they can be any aspect ratio. What works best is to set the width attribute to 100% and the height attribute to a fixed height (eg. 300px). You will see how to do this in the next video and try it out in the exercise.

Demonstration Video: Embedding a Google Map and YouTube Video

Exercise: Embedding YouTube Videos

1. Open JSFiddle.net
2. Go to YouTube and find a video you like
3. Find the embed code in Share
4. Embed it on JSFiddle

Your JSFiddle should look like this:

Exercise: Embed a Google Map

1. Open JSFiddle.net
2. Go to maps.google.com and create a map
3. Get the embed code
4. Embed it on JSFiddle
5. Make the map responsive by setting a percentage width, eg. width=”100%”
6. Use a fixed height, like height=”300″.

Your JSFiddle should look something like this:

More Complex Maps

Embedding a map is quite easy, but there is so much more you can do with the Google Maps API. There are many online tutorials to get you started.

Lab Assignment

For the lab assignment for this week, we are going to add a multimedia page to our portfolio website. You will add three embedded iframes, a Google Map, a YouTube video, and a third one from another provider, like Vimeo or SoundCloud.