1. by Prof. Dr. Eng. Jozef Goetz
University of La Verne
Company’s Website
Department of
Computer Science
and
Computer Engineering
by Prof. Dr. Eng. Jozef Goetz
2016 REACH Summer Camp

2. Computer Science and Computer Engineering
Program of
Computer Science and Computer Engineering
=> Mission Statement
When you study computer science, you will learn the capabilities and limitations of computing.
Computer Science is not the study of using a computer, it’s the study of teaching a computer to solve problems!

3. Computer Science and Computer Engineering
Program of
Computer Science and Computer Engineering
Supportive Classes:
CMPS 301: Programming concepts
MATH 201: Calculus I
MATH 327: Discrete Mathematics
PHYS 201: General Physics I or
PHYS 203: Mechanics
2 or 3 classes related to the specific concentrations
Core Classes:
CMPN 280: Computer Organization
CMPS 367: Object Oriented Language C++
CMPS 368: Principles of Computer Network
CMPS 370: Seminar
CMPS 385: Data Structures
CMPS 471: Internship
CMPS 499: Senior Project
Comprehensive Exam

4. Computer Science and Computer Engineering
Program of
Computer Science and Computer Engineering
Concentrations:
Software
Internet Programming
Information Science
Engineering
Certificates:
Website and Internet Applications Development
WIAD
6 courses x 4 units = 24 units
Systems Engineering - SE
4 courses x 4 units + 1 course x 1 unit = 17 units

5. Software What each concentration is about?
Software is a generic term for organized collections of computer data and instructions (programs)
Broken into two major categories:
system software that provides the basic non-task-specific functions of the computer, generally, system software consists of
an operating system and
some fundamental utilities such as
disk formatters,
file managers,
display managers,
text editors,
user authentication (login) and
management tools, and
networking and
device control software.
application software, is used to accomplish specific tasks other than just running the computer system.
Application software may consist of a single program, such as an image viewer;
a small collection of programs (often called a software package) that work closely together to accomplish a task, such as a spreadsheet or text processing system

6. Software What the students learn in the concentration:
How to write correct, well-documented programs in a reasonable time
How to identify problems that are amenable to computer solutions
Learn programming languages for solving such problems
How to work individually or as part of a team
What the topics of study include:
Programming language: an assembly language
Analysis of Algorithms
Operating Systems Concepts
Compiler Design
Software Engineering
Database

7. Software What the students carrier opportunities are:
The concentration is designed to prepare students for careers in
Application Programming( Airline reservations, Payroll,…)
System Programming (Operating Systems, Compilers, Assemblers,…)
Software Engineering (develops software products to bridge the gap between design and executable programs)
System programming, as well as entrance into graduate and professional schools.

8. Internet Programming What the concentration is about?
Internet programming is a brand new field of computer programming and Internet Services Technologies
Internet programming is generally a client/server based programming
where there will be servers for handling requests and clients for sending requests these may be on different computers
Internet programming refers to the process of web development where programming procedures are designed and incorporated into Internet websites
The client server communication established with the help of scripting and markup languages following all the communication protocols and transmission protocols can be defined as Internet programming.
Internet programming refers to the process of web development where programming procedures are designed and incorporated into internet websites to enable functionality of a website and all other functions involved in the smooth running of the website. This involves attributes like website security, database management, online runtime mathematical functions and more.  The typical programming languages are used to achieve this, but are used in small pieces and can be inserted into the html web pages or called from secured folders by a web page. These languages are Vbscripts, Javascripts, Perlscripts, CGI etc.  Database programming/development is also to be considered a part of internet programming.

9. Internet Programming What the students learn in the concentration:
The same as listed in the software concentration plus
students in IP learn and gain expertise in:
various programming languages such as HTML, CSS, JavaScript, C#, PHP
computer programming fundamentals,
Web and application programming,
Internet-based application software development.
In their final year of study, students complete a senior project which is an Internet-based application.
The knowledge, skills, experience and use of cutting-edge tools gained in this concentration will be valuable at job-hunting time.

10. Internet Programming What the topics of study include:
Creating dynamic and interactive Websites and apps
Building console, windows, web and mobile applications
Building database (MySQL and SQL Server) driven Web applications
Database driven websites using HTML, CSS, JavaScript, PHP and C#
Web programming
Distributed programming
Database Management Systems
Object Programming Languages C# (and Java)
Programming with PHP
Language Integrated Query (LINQ)
ASP.NET
Windows Communication Foundation (WCF) and Web Services
TouchDevelop - a new programming environment and language designed for mobile devices from the ground up.
Students gain hands-on learning via practical exercises, lab, projects and exams.

11. Internet Programming What the students carrier opportunities are:
The explosive growth in the use of the Internet has created a demand for new set of skills.
Starting and running a business using the Internet continue to be “in-demand” career skills.
Students may be marketable for jobs such as a
software developer,
Webmaster,
Web developer,
Web designer,
Web and application developer,
Web architect
Web programmer,
Web manager,
e-commerce manager,
Web marketing manager,
Web technician, or Web server administrator.

12. Internet Programming Carrier Opportunities:
Web architects or programmers: These developers are the “architects” of a website, meaning they are responsible for the overall construction and technical framework of a site.
Web designers: Responsible for how a site looks, these developers use programming languages to design and create the various components that appear on a Web page or site, such as layout, graphics, applications, programs and multimedia.
Webmasters: These developers are responsible for maintaining and updating websites. They test for broken links, performance issues and similar technical errors and ensure that a site is operating as expected.

13. Internet Programming Carrier Opportunities:
Software/Web developer: Responsible for designing, coding and modifying software/websites, from layout to function and according to a client’s specifications.
Web Developer: The  Bureau of Labor Statistics considers this one of the fastest-growing jobs this decade and predicts employment should swell at a rate of about 20 percent by 2022.
Developers may be tasked with creating a product from scratch according to a customer's specifications or modifying existing software, and they work in a range of industries, including computer systems design, electronic product manufacturing and finance.
Developers are often natural problem-solvers who possess strong analytical skills and the ability to think outside the box.
The job requires a knowledge of software programs, Web applications and programming languages such as HTML, CSS, PHP, C#, Java and JavaScript, as well as a solid understanding of design principles.
Work environments for Web developers vary widely, from large corporations or governments to small businesses - ;

14. Information Science What the concentration is about?
It is the human and business side of Computer Science. 
Information science (IS) is an interdisciplinary science primarily concerned with the
collection,
analysis,
classification,
manipulation,
storage,
retrieval and
dissemination of information.
It deals with the planning for, development, management, and use of Information Technology  tools to help people perform all tasks related to information processing and management.
Organizations use information systems and technology to process and analyze data, streamline activities, and manage resources and assets.

15. Information Science What the students learn in the concentration:
Design and maintain networks in organizations.
Analyze existing current systems and data flow in the organization.
Assess end user's requirements and design new system (drawing the blue prints of new systems).
Maintain existing systems.
Learn Project Management skills to plan the development of new system.
Learn different training styles to train end users on using the new system.
Most importantly, analyze organizational data and convert it to meaningful information to assist executive make strategic decisions to gain competitive advantage.

16. Information Science What the topics of study include:
Accounting,
Management
Economics
Management of Information Systems
Project Management Systems
Systems Analysis and Design
Database Management Systems
Cyber Security 
What the students carrier opportunities are:
The major is very versatile.  Students who graduated in this major have been working in almost all industries because every organization must have an IT or an MIS department. 
Our students are employed in the following organizations:
JPL, Boeing, Intel, Motorola, Schools, Banks, Service industries, Microsoft, Google etc.

17. Computer Engineering What the concentration is about?
is the science of making computers and their parts.
Computer engineers are always trying to make new parts smaller and better. 
If you study Computer Engineering, you learn about the hardware and software of computers.
This concentration includes courses that provide
an understanding of basic digital circuits, the hardware design of digital systems and finally a complete computer system
hands-on laboratory exercises using microcontrollers, sensors and actuators
the concepts needed to analyze and design digital systems.
Future tablet

18. Computer Engineering What the students learn in the concentration:
Students learn engineering design, prototyping and testing skills in:
Hardware Engineering
Software Engineering
Digital logic circuits
Circuit theory
Electronic circuits
Cyber Security
What the topics of study include:
Principles of Electronics
Digital Logic Systems
Electronic Devices
Microprocessors
Computer Organization
Advanced Computer Architecture

19. Computer Engineering What the students carrier opportunities are:
telecommunications firms
designers of digital hardware,
software engineering companies and
many other companies hire computer engineering majors right out of college.

20. HOT SKILLS FOR 2016 Computer World magazine December 7, 2015:
Programming and Application Development is the skill set that's most in demand for  (# 1), 
and 2016 (#2 - 40% of the 182 IT executives who responded to the Computer World magazine survey).
IT enterprise to cloud architecture, 42%
Programming and Application Development; 40%
Project management; 39%
Big data; 36%
Business Intelligence/Analytics; 34%
Help desk/technical support; 30%
Database administration; 25%
Security/compliance/governance; 25%
Cloud/SaaS - Software as a service (software is licensed on a subscription basis); 25%
Web Development; 28% - Web development expertise is one of the hardest skill sets to find.
The Internet Programming concentration fully addresses fields 2, 7 and 10.
Fields 3, 7 are supported partially by the Information Sciences concentration
The following fields are supported:
Programming and Application Development in CMPS 218, 319, 320, 378, 455, 480, 481
Project management in CMPS 392
Web Development in CMPS 218, 319, 320, 480, 481
Database administration in CMPS 490 and CMPS 320
Mobile applications in CMPS 481
Networking in CMPS 368

21. Major functions of E-Commerce include:
E- Commerce major
E- Commerce:
The integration of
communications,
data management, and
security technologies
to allow individuals and organizations to exchange information related to the sale of goods and services.
Major functions of E-Commerce include:
the buying of goods,
the selling of goods, and
the performance of financial transactions on the Internet.

22. Building Websites Objectives: - to learn and understand the concepts and building blocks of Web pages with HTML and CSS - to modify business website for your own needs

23. What is HTML?
Hypertext Markup Language (HTML), a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
HTML
Describes the general structure of the document
HTML describes the Structure of a Page
It defines a set of common styles for Web pages
headings
paragraphs
lists
tables
and more
Each of these common styles has a tag associated with it to define the element
Made up of tags and attributes
The set of markup symbols or codes placed in a file intended for display on a Web browser page.

24. Adds special code (tags) around words and paragraphs
What is HTML?
The text of the page
Adds special code (tags) around words and paragraphs
each individual markup code is referred to as an element or tag. Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and ">" symbols – referred to as container tags
<body> </body>
Most tags come in pairs; an opening tag and a closing tag.
_______________________________
horizontal line: <hr align="left" width="50%"> is a stand-alone or self-contained tag and doesn’t have a closing tag.

25. HTML
Whereas the text is the actual information contained in a page, the tags define the appearance of the document.
Every HTML tag is a name followed by an optional list of attributes, all enclosed between less-than and greater-than symbols (< and >).
An attribute, if present, is followed by an equals sign and the value of the attribute.
<hr align="left" width="50%"> <hr align="left|center|right">
Some tags can be used alone; others must be used in pairs.
Those that are used in pairs are called beginning and ending tags.
The beginning tag can have attributes and values and starts with the name of the tag.
The ending tag cannot have attributes or values but must have a slash before the name of the tag.

26. align words <html> <head>
<title> Hello </title>
</head>
<body>
<h1>
<font color=“blue">
<center> Hello World</center>
</font>
</h1>
</body>
</html> 26 26

27. HTML
The browser makes a decision about the structure of the text based on the tags, which are embedded into the text.
Scripting language that instructs a Web browser how to display a Web page
Less powerful than other computer languages
Runs within a browser, not stand-alone
The latest version: HTML 5.0

28. 4. Head & Body Sections
Head Section (description) -- Contains information that describes the web page document.
<head>
…head section info goes here
</head>
Body Section (contents) -- Used for text and tags that do show directly on the web page.
<body>
…body section info goes here
</body>

29. <title> tag The Title gives a page a title used in bookmarks
used by search engines
appears in browser title bar
goes inside the page header (<head>)

30. HTML Code in Notepad and Browser Results
Title goes in Title bar of browser
Body goes in content area of browser
Note in this case that "Hello World" was not part of any tag, except that it was included in the body. In most cases, however, text is displayed as part of a specific element, as will be seen in later slides.
Copyright (c) 2006 Prentice-Hall. All rights reserved. 30 30

31. align words <html> <head>
<title> Hello </title>
</head>
<body>
<h1>
<font color="#AABBCC">
<center> Hello World</center>
</font>
</h1>
</body>
</html> 31 31

32. HTML <body> tag attributes
The <body> tag can be used to set attributes (properties) for entire Web page, such as
Background color
Background image
Text color and
Link color
bgcolor
Configures the background color of a web page
<body bgcolor=“#000066”> // dark navy blue
<body bgcolor=“white”>
text
Configures the color of the text on the web page <body bgcolor=“#000066” text=“#CCCCCC”> <body bgcolor=“white” text=“red”>

33. Headings Heading tags Six levels:
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
used to divide sections -- similar to a book
displayed either in larger or bolder text
can be centered, underlined, capitalized
common to use a heading to duplicate the title

34. Headings
HOP 2.4:

35. The align Attribute <p align = “center”> CONTENT </p>
Specifies how text within the paragraph <p> should be aligned
Options include: left, center, right, justify
Example:
<p align = “center”> CONTENT </p>

36. href (hypertext reference)
HTML <a> tag
The anchor element
href (hypertext reference)
Indicates the target – destination page or location of the link
Text between the <a> and </a> is displayed on the web page.
<a href="contact.html">Contact Us</a>
href Attribute
Indicates the file name: Web page document, photo, pdf, etc. or
URL (Web address)

37. Creating Links
Text that will be displayed
URL
Opening Tag
Closing Tag

38. Effects of <a>, href, and title
title: Provides text that can appear in a tool tip when the mouse hovers over the link
Mouse pointer changes when hovered over the link
Tool tip generated by
title="Home Page Link"
Displayed text generated by
text between the <a> tag and the </a> tag
In this example, and others in the project, the files specified in the hyperlinks are .htm files. But it is also possible to provide links to files of other sorts, such as Word documents (.doc) or even Excel files (.xls). Browsers can be set up to recognize which software should be invoked based on the file extension of the file linked to. For example, Internet Explorer will use Windows' recognized file extensions to call the appropriate application program for a file. For example, a URL like " will cause Microsoft Word to run in order to display a document.
When user clicks, the page opened will be based on href=“
<a href=“
title="Home Page Link">Click here to go to our home page!</a>
Copyright (c) 2006 Prentice-Hall. All rights reserved. 38 38

39. HTML <img> tag The image tag img
Used to place graphics on a web page
src attribute (vs longdesc long description attribute)
used to indicate the file name of the graphic
specifies file where image comes from
alt (alternative) attribute
used to configure a text description (label)
align=“left”|”right”|”center”|”bottom”|” top”|“middle”
controls the relationship of text and images
vspace
adds vertical space to image (above and below)
hspace
adds horizontal space to image (left and right)
height Attribute
used to configure the height of the image in pixels
width Attribute
used to configure the width of the image in pixels
border Attribute
allows a surrounding border
clear Attribute
separates image from text
id text name, alphanumeric, the value must be unique
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” >

40. To create an image link use an anchor tag to contain an image tag
Image Links
To create an image link use an anchor tag to contain an image tag
<p><a href="URL path to external link" title="Mouseover Description"><img style="width: XXpx; height: YYpx; border: 0;" src=“path to the img location/img name" alt="Text Description"></a></p>
Browsers automatically add a blue border to image links.
Configure to eliminate the border
Home
<a href="index.htm"> <img src="home.gif" height="19" width="85" alt="Home"></a>
<a href="index.htm"> <img src="home.gif" height="19" width="85" alt="Home“ border:”0”></a>

41. Image links
starter3.html => index.html

42. Sample Image Map <map> tag <area> tag href Attibute
Defines the map
<area> tag
Defines a specific area on a map
href Attibute
shape Attribute
Rectangular ( shape = “rect” )
Polygon ( shape = “poly” )
Circle ( shape = “circle” )
coords Attribute
<map name="boat" id="boat">
<area href=" shape="rect" coords="24, 188, 339, 283" alt=“fishing boat" >
</map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416" height="350" >

43. Design for the browser you think most of your visitors will use
Tips
Design for the browser you think most of your visitors will use
Design the page so that is “degrades gracefully” (looks OK) in other browsers

44. Lets create a first page
<html>
<head>
<title> Hello </title>
</head>
<body>
<h1>
<font color="#AABBCC">
<center> Hello World</center>
</font>
</h1>
</body>
</html>

45. Saving an HTML File from Notepad
By default, files from Notepad are saved with a .txt extension
If you try to save as filename.html, then the saved file name will be filename.html.txt
You can avoid this by either:
Making sure that the Save As Type entry is set as
All Files instead of *.txt or
Saving with the name in quotes, like this: "filename.html"
Problems with file extensions may be a frequent difficulty encountered by students. One way to deal with this is to switch folder options. In the Tools menu of a folder, select Folder Options. In the View tab of the Folder Options dialog box, uncheck the Hide extensions for known file types box. This will ensure that all extensions are visible, making it easier to change file names appropriately. 45 45

46. Lets add a picture <html> <head>
<title> Hello </title>
</head>
<body>
<h1>
<font color="#AABBCC">
<center> Hello World </center>
</font>
</h1>
My favorite school is
<a href="
University of La Verne</a>!
<br>
My favorite picture is:
<p><img src="artist.jpg" width="350" height="250"
alt="My Favorite Picture"></p>
</body>
</html>
Next Exercise:
: expand attribute href:
target="_new”
: expand attribute img:
onClick="alert('you clicked');”

47. Answers to Excercises Next Exercise:
Add at the code but before the </body> the following code:
<embed type="application/x-shockwave-flash" src=" name="plugin" height="50%" width="50%">

48. Lets add alignments

49. Java Script
file:///D:/Classes_LV/318_Publishing_on_the_WEB%20I/STEM%20+%20SOAR+My%20Semin/2014_STEM_hello.html

50. Asking for the User Name
<html>
<head>
<title> Hello </title>
</head>
<body text="white">
<script type="text/javascript">
var userName;
userName = prompt("Please type the user name");
document.write("<h1 align=\"center\">Hello " + userName +
"</h1>"); // write the 1st line
document.bgColor = userName; // assign userName as a color </script>
<h1>
<font color="beige">
<center> Hello World </center>
</font>
</h1>
<p align="center"> My favorite school </p>
<p align="center"> <a href=
target="_new">University of La Verne</a>! </p>
<p align="center"> My favorite picture is: </p>
<p align="center"> <img src="file:///D|/xampp-portable/htdocs/Penguins.jpg" width="350" height="250“ alt="My Favorite Picture" onClick="alert('you clicked');"></p>
<p align="center"> My favorite fractal is: </p>
<p align="center"><embed type="application/x-shockwave-flash"
src="
name="plugin" height="250" width="350"> </embed> </p>
</body>
</html>
file:///D:/Classes_LV/318_Publishing_on_the_WEB%20I/STEM%20+%20SOAR+My%20Semin/2014_STEM_Intro_to_Web_11_Ask_user_name_My.html

51. Replace my favorite school name with the 15 Most Popular Health Websites | July 2014
<html>
<head>
<title> Hello </title>
<script type="text/javascript">
var userName;
userName = prompt("Please type the user name");
document.write("<h1 align=\"center\">Hello " + userName +
"</h1>"); // write the 1st line
</script>
</head>
<body text="beige">
var userColor;
userColor = prompt("Please type the user color");
document.write("<h1 align=\"center\">you selected background color: " + userColor +
"</h1>"); // write the 2nd line
document.bgColor = userColor; // assign userColor as a color </script>
<h1>
<font color="beige">
<center> Hello World </center>
</font> </h1>
<p align="center"> 15 Most Popular Health Websites | July 2014
</p>
<p align="center"> <a href= target="_new"> 15 Most Popular Health Websites | July 2014 </a>! </p>
<p align="center"> My favorite picture is: </p>
<p align="center"> <img src="file:///D|/xampp-portable/htdocs/Penguins.jpg" width="350" height="250“ alt="My Favorite Picture" onClick="alert('you clicked');"></p>
<p align="center"> My favorite fractal is: </p>
<p align="center"><embed type="application/x-shockwave-flash"
src="
name="plugin" height="250" width="350"> </embed> </p>
</body>
</html> file:///D:/Classes_LV/318_Publishing_on_the_WEB%20I/STEM%20+%20SOAR+My%20Semin/2014_STEM_15%20Most%20Popular%20Health%20Websites%20%20July% html

52. Cascading Style Sheets (CSS)
Introduction
Cascading Style Sheets (CSS)
is a stylesheet language used to describe the presentation of a document written in a markup language.
Used to specify the presentation of elements separately from the structure and content of the document
define colors, fonts, layout, and other aspects of document
presentation.
CSS is
a flexible,
cross-platform,
standards-based language
widely implemented in browsers.

53. Using Inline Styles

54. Keep rolling dice until…
DEMO of Craps Game
Craps simulation - the most popular games of chance
A player has 2 dice. Each die has six faces.
The player must roll two dice on the first and all subsequent rolls
Roll dice first time
If sum equals 7 or 11, the player wins on the first throw (called “craps”)
If sum equals 2, 3 or 12, the player loses
Any other sum (4, 5, 6, 8, 9, 10) is that player’s point
Keep rolling dice until…
Sum matches player’s point
Player wins
Sum equals 7
Player loses
file:///D:/Classes_LV/319_Publishing_on_the_WEB%20II/Projects_with_students/ch09_2013_Craps_play_roll_buttons_ %20games++++/Craps.html

55. Business Case Study Websites
JavaJam Coffe House
Pacific Trails Resort
Prime Properties

56. Wireframes of Business Case Study Websites
Desktop
Tablet
<= Smart Phone

57. Wireframes of JavaJam index.html
Desktop
Tablet
<= Smart Phone

58. List Tags Common Elements
HTML List Basics
List Tags Common Elements
opening and closing tag
unordered list <ul> and </ul>
list items <li>
ordered list <ol> and </ol>
definition list <dl> and </dl>
definition term <dt> and
definition data <dd>
list items have their own tag <li>

59. Unordered List Example JavaJam index.html
Desktop
Tablet
<= Smart Phone

60. Used to display information in bullet points
1. Unordered Lists
Used to display information in bullet points

61. <ul> Contains the unordered list
HTML Unordered List
HTML 3.2 provided ways to customize unordered lists
They have been deprecated in HTML 4.0 in favor of using style sheets
<ul> Contains the unordered list
The type attribute customizes unordered lists
the type attribute has 3 possible values
disc - default
square
circle
the type attribute is used in the <ul> tag
<ul type=“square”>
<li> Contains an list item

62. 2. Ordered Lists
Used to convey information in an ordered fashion

63. <dl> tag <dt> tag Contains a defined term
HTML Definition List
Useful to display a list of terms an definitions or a list of FAQ and answers
<dl> tag
Contains the definition list
<dt> tag Contains a defined term
<dd> tag Contains a data definition
HOP 2.5

64. HTML Definition List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>

65. <!-- text inside here is ignored -->
Comments
Comment
<!-- text inside here is ignored -->
It’s a good rule of thumb not to include “--”, “<“, “>”, or HTML tags within comments

66. Menu

67. Music

68. Jobs (form)

69. Gear