Beruflich Dokumente
Kultur Dokumente
Material
You have already some basic knowledge and skills covered in this
module. If you can demonstrate competence to your teacher in a particular
skill, talk to him/her so you did not have to undergo the same training
again. If you have a qualification or Certificate of Competency from previous
trainings show it to him/her. If the skills you required are consistent with
the relevant to this module, they become part of the evidence. You can
present these RPL. If you are not sure about your competence skills, discuss
this with your teacher.
In this module, you will find the activities for you to accomplish and
relevant information sheets for each learning outcomes. Each learning
outcomes may have more than one learning activity.
This module is prepared to help you achieve the required competency
in receiving and relaying information. This will be the source of information
that will enable you to acquire the knowledge and skills in Programming
(.Net Technology) NC III independently at your own pace with minimum
supervision from your trainer.
Lists of Competencies
LEARNING OUTCOMES:
LO1: Develop basic HTML document using HTMP5 and CSS 3 syntax.
LO2: Create HTML5 document using advanced techniques with JavaScript
and CSS3.
LO3: Communicate with Remote Data Source and Create Objects and
Methods using JavaScript.
LO4: Create intuitive user interface and add offline support for web
applications.
LO5: Use CSS3 to create scalable graphics and animated user interface.
LO6: Implement real-time communications by using web-sockets and web
worker process.
LO7: Explore the Windows 8 platform and Windows Store Apps.
LEARNING OUTCOMES NO. 1: Develop basic HTML document using
HTMP5 and CSS 3 syntax
CONTENTS:
What is HTML?
Web Server
Domain Names
Understanding the HTML Tags
- <!DOCTYPE HTML>
- <HTML> </HTML>
- <Body> </Body>
- <br> </br>
- <p> </p>
- <i> </i>
- <h1> </h1> to <h6> </h6>
- <img> </img>
ASSESSMENT CRITERIA:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 2: Create HTML5 document using advanced
techniques with JavaScript and CSS3.
Contents:
ASSESSMENT CRITERIA:
1.1 Static pages are created using the new features available in HTML5.
1.2 CSS3 is used to apply basic styling to the elements in an HTML5 page.
1.3 Syntax of JavaScript is explained and how to use JavaScript with
HTML5 is described.
1.4 JavaScript code that manipulates the HTML DOM is written and events
are handled.
1.5 How to use JQuery is described to simplify code that uses many
common JavaScript APIs.
1.6 Forms that use the new HTML5 input types are created.
1.7 User input is validated and feedback is provided by using the new
HTML5 attributes.
1.8 JavaScript code is written to validate user input and feedback is
provided in cases where it is not suitable to use HTML5 attributes
1.9 Text elements are styled on an HTML5 page by using CSS3.
1.10 Styling is applied to block elements by using CSS3.
1.11 CSS3 selectors are used to specify the elements to be styled in a Web
application.
1.12 Graphical effects and transformations are implemented by using
the new CSS3.
CONDTIONS:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 3: Communicate with Remote Data Source
and Create Objects and Methods using
JavaScript
CONTENTS:
ASSESSMENT CRITERIA:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
Observation in workplace
Interviews/ questioning
LEARNING OUTCOMES NO. 4: Create intuitive user interface and add
offline support for web applications
CONTENTS:
ASSESSMENT CRITERIA:
1.17 Drag and Drop and File APIs are used to interact with files in a Web application.
1.18 Audio and video are incorporated into a Web application.
1.19 Location of the user running a Web application is detected by using the
Geolocation API.
1.20 How to debug and profile a Web application is explained by using the Web
Timing API.
1.21 The need to detect device capabilities is described and reacted to different form
factors in a Web application.
1.22 Web page that can dynamically adapt its layout to match different form factors is
created.
1.23 Data is saved and retrieved locally on the user's computer by using the Local
Storage API.
Offline support is provided for a Web application by using the Application Cache API.
CONDTIONS:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
LEARNING OUTCOMES NO. 5: Use CSS3 to create scalable graphics and
animated user interface
CONTENTS:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
LEARNING OUTCOMES NO. 6: Implement real-time communications by
using web-sockets and web worker process
CONTENTS:
URL
WebSockets - Duplex Communication
WebSockets - Implementation
ASSESSMENT CRITERIA:
1.28 How Web Sockets work is explained and how to send and receive data
through a Web Socket is described.
1.29 Web Socket API with JavaScript is used to connect to a Web Socket
server, send and receive data, and handle the different events that can
occur when a message is sent or received.
1.30 The purpose of a Web Worker process and how it can be used to
perform asynchronous processing as well as provide isolation for
sensitive operations is described.
1.31 Web Worker APIs from JavaScript code is used to create, run, and
monitor a Web Worker process.
Occupational health and safety standards in the workplace and 5S
disciplines are strictly followed as per enterprise policies and procedures.
CONDTIONS:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
LEARNING OUTCOMES NO. 7: Explore the Windows 8 platform and
Windows Store Apps
CONTENTS:
ASSESSMENT CRITERIA:
Computer Software
Visual Studio Express 2012 or higher
Application servers
SQL Server Express 2012 or higher
Network Computer (on Windows 8 or higher) with peripherals
Reference books
Practice materials
Learning materials/guide
METHODOLOGIES:
Lecture/ Discussion
Hands on
Exercises
Demonstration
ASSESSMENT METHODS:
Written exam
Practical exam
Information Sheet 1.1-1
Develop basic HTML document using HTMP5 and CSS 3 syntax
What is HTML?
HTML stands for Hyper Text Markup Language; it’s the standard
markup language for Web pages. HTML elements are the building blocks of
HTML pages, elements are represented by <> tags.
Web Server
Domain Name
The domain name must be registered before you can use it. Every domain
name is unique. No two websites can have the same domain name. If
someone types in www.yourdomain.com, it will go to your website and no
one else's.
<!DOCTYPE HTML>
Most tags must have two parts, an opening and a closing part. For
example, <html> is the opening tag and </html>is the closing tag. Note that
the closing tag has the same text as the opening tag, but has an additional
forward-slash ( / ) character. I tend to interperet this as the "end" or "close"
character.
<Body> </Body>
The <body> tag defines the document's body. The <body> element contains
all the contents of an HTML document, such as text, hyperlinks, images,
tables, lists, etc
<br> </br>
<p> </p>
The <p> tag defines a paragraph. Browsers automatically add some space
(margin) before and after each <p> element.
<i> </i>
The <i> tag defines a part of text in an alternate voice or mood. The content
of the <i> tag is usually displayed in italic. The <i> tag can be used to
indicate a technical term, a phrase from another language, a thought, or a
ship name, etc.
<img> </img>
The <img> tag defines an image in an HTML page. The <img> tag has two
required attributes: src and alt. Note: Images are not technically inserted
into an HTML page, images are linked to HTML pages. The <img> tagcreates
a holding space for the referenced image.
Create HTML5 document using advanced techniques with JavaScript
and CSS3.
HTML5 semantics come into play with all of the new elements. As you will
see throughout this tutorial, the names of the structural HTML5 tags
indicate something meaningful about the content or role of the elements
they define. The header element is the perfect example. As you may have
guessed, it's designed for the header area of a page or page section.
The header often contains one or more of the heading tags h1 to h6.
However, the header can contain other elements as well. Add the following to
the body section of your page:
<header>
<h1>Breaking News</h1>
</header>
</footer>
So far we have covered two elements almost every web page contains; now,
let's turn to another, the navigation section. The nav element is designed for
the main navigation part of a page, which will typically contain a list of links
to other pages on the site. Insert the following after your header element
<nav>
<ul>
<li><a href="#">Technology</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
<section id="top_story">
</section>
<section id="other_news">
</section>
<section id="popular_stories">
</section>
<section id="multimedia_items">
</section>
Code Validation
Code validation is the process of checking that the coding of a web page is in
compliance with the standards and recommendations set by the World
Wide Web Consortium (W3C) for the web. Code validation helps to produce
clean code.
Web page HTML (Hyper Text Markup Language), Cascading Style Sheets
(CSS), hyperlinks (also know as links) and accessibility can be validated.
The example below returns the latitude and longitude of the user's position:
Example
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Communicate with Remote Data Source and Create Objects and
Methods using JavaScript
HTTP requests allow us to request resources that our application can make
use of. In the context of this article, this will generally mean requesting data
from some API over the Internet, or loading data from a JSON file over the
local network. These are HTTP requests that we are going to be launching
manually through our code.
However, HTTP requests are also used to load other resources in our
applications like images or CSS files. If you open up the debugging window,
go to the ‘Network’ tab, and reload any web page, you will probably see a
bunch of HTTP requests that are launched to load various resources.
Many of the resources in our application are automatically loaded over the
network (e.g. images, JavaScript files, CSS files), but often we will need to
manually launch an HTTP request from our code to grab data. Generally, we
would do this when we need to load some data from an API or a JSON file.
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule
],
With the HttpClientModule set up, we then need to inject the HttpClient into
any class where we want to launch an HTTP request.
Import the HttpClient into any files that contain classes where you want to
make HTTP requests:
Inject the HttpClient into the constructor of any class where you want to make
HTTP requests:
The example above injects the HttpClient as http which will allow HTTP
requests to be launched from anywhere within that class like this:
this.http.get('https://someapi.com/posts').subscribe((response) => {
console.log(response);
});
this.http.get('https://someapi.com/posts').subscribe((response) => {
console.log(response);
});
That the console.log(response) line would be triggered every time that
the posts on the server changes – in essence, you could update your
application every time a new post is added on the server. This is a common
misconception, but it is not the case. Generally, the observable provided by
the HttpClient will only fire once.
If you want to stream data live from a server then you would want to look
into websockets.
A GET request will allow us to retrieve data from a particular URL. We have
already covered what that looks like, but let’s take another look:
this.http.get('https://someapi.com/posts').subscribe((response) => {
console.log(response);
});
We call the get method and supply it with the URL that we want to make the
request to. Once the server has sent its response to our request, it will
trigger the handler we set up using subscribe. The response will contain the
data we were attempting to request.
As well as fetching data from a remote URL, we can also use a GET request
to load data from a local file. That might look something like this:
this.http.get('assets/some-data.json').subscribe((response) => {
console.log(response);
});
This file should be stored along with your applications other static assets in
the assets folder.
POST Requests (Sending Data)
As well as fetching data from a server, we can also send data to a server
through a POST request. A POST request is very similar in nature to a GET
request, except that it also contains an additional body/payload parameter:
this.http.post('https://someapi.com/posts', {
content: 'hello',
submittedBy: 'Josh'
}).subscribe((response) => {
console.log(response);
});
This would allow the server to retrieve the following data from our POST
request:
content: 'hello',
submittedBy: 'Josh'
The server would then likely use that data to create a new “post”. Notice that
the POST request still subscribes to the observable for a response.
Observables are not executed until they are subscribed to, so it is important
that you do this. However, even though we might not technically need the
response we get, a POST request can still send a response just like a GET
request can. We might use this just to verify that the server received and
executed the request correctly, or we might get some other useful
information back from the server.
Create intuitive user interface and add offline support for web
applications
Before you try to use the Offline Web Applications API, it is a good idea to
check for browser support. Listing 12-1 shows how you can do that.
if(window.applicationCache) {
// this browser supports offline applications
}
Creating a Simple Offline Application
Let’s say that you want to create a one-page application that consists of
an HTML document, a style sheet, and a JavaScript file. To add offline
support to your HTML5 application, you include a manifest attribute on
the html element as shown in the Listing 12-2.
<!DOCTYPE html>
<html manifest="application.appcache">
.
.
.
</html>
Alongside the HTML document, provide a manifest file with
the *.appcacheextension) specifying which resources to cache. Listing 12-3
shows the contents of an example cache manifest file.
CACHE MANIFEST
example.html
example.js
example.css
example.gif
Going Offline
The manifest syntax is simple line separated text that starts with CACHE
MANIFEST (as the first line). Lines can end in CR LF or CRLF—the format is
flexible—but the text must be UTF-8 encoded, which is the typical output for
most text editors. Comments begin with the hash symbol and must be on
their own lines; you cannot append a comment to other non-comment lines
in the file.
CACHE MANIFEST
# files to cache
about.html
html5.css
index.html
happy-trails-rc.gif
lake-tahoe.JPG
#do not cache signup page
NETWORK
signup.html
FALLBACK
signup.html offline.html
/app/ajax/ default.html
If no CACHE: heading is specified, the files that are listed will be treated
as files to be cached (caching is the default behavior). The following simple
manifest specifies that three files (index.html, application.js, and style.css)
must be cached:
CACHE MANIFEST
index.html
application.js
style.css
Similarly, the following section would do the same (you can use the same
CACHE, NETWORK, and FALLBACK headers multiple times in a manifest
file if you want to):
CACHE MANIFEST
# Cache section
CACHE:
Index.html
application.js
style.css
By listing a file in the CACHE section, you instruct the browser to serve
the file from the application cache, even if the application is online. It is
unnecessary to specify the application's main HTML resource. The HTML
document that initially pointed to the manifest file is implicitly included (this
is called a Master entry). However, if you want to cache multiple HTML
documents or if you would like multiple HTML documents to act as possible
entry points for the cacheable application, they should all be explicitly listed
in the cache manifest file.
Use CSS3 to create scalable graphics and animated user interface
/* apply it to an element */
.element {
animation-name: your-animation-name;
Delay an Animation
div {
animation-delay: 2s;
}
Set How Many Times an Animation Should Run
@keyframes example {
to { background-color: green; }
.view {
animation-name: example;
animation-duration: 4s;
animation-fill-mode: forwards;
div {
animation-direction: alternate;
}
div {
animation: mymove 5s infinite;
}
Origin: http://example.com
Connection: Upgrade
Host: websocket.example.com
Upgrade: websocket
Web sockets are transforming to cross platform standard for real time
communication between a client and the server.
This standard enables new kind of the applications. Businesses for
real time web application can speed up with the help of this
technology.
URL
HTTP has its own set of schemas such as http and https. Web socket
protocol also has similar schema defined in its URL pattern.
Long Polling
Long polling, as the name suggests, includes similar technique like polling.
The client and the server keep the connection active until some data is
fetched or timeout occurs. If the connection is lost due to some reasons, the
client can start over and perform sequential request.
AJAX
AJAX is based on Javascript's XmlHttpRequest Object. It is an abbreviated
form of Asynchronous Javascript and XML. XmlHttpRequest Object allows
execution of the Javascript without reloading the complete web page. AJAX
sends and receives only a portion of the web page.
Open
Message
Close
Error
Open
Once the connection has been established between the client and the
server, the open event is fired from Web Socket instance. It is called as the
initial handshake between client and server. The event, which is raised
once the connection is established, is called onopen.
Message
Message event happens usually when the server sends some data.
Messages sent by the server to the client can include plain text messages,
binary data or images. Whenever the data is sent, the onmessage function
is fired.
Close
Close event marks the end of the communication between server and the
client. Closing the connection is possible with the help of onclose event.
After marking the end of communication with the help of onclose event, no
messages can be further transferred between the server and the client.
Closing the event can happen due to poor connectivity as well.
Error
Error marks for some mistake, which happens during the communication.
It is marked with the help of onerror event. Onerror is always followed by
termination of connection. The detailed description of each and every event
is discussed in further chapters.
send( )
close( )
send ( )
This action is usually preferred for some communication with the server,
which includes sending messages, which includes text files, binary data or
images.
socket.send( textsend.value);
close ( )
This method stands for goodbye handshake. It terminates the connection
completely and no data can be transferred until the connection is re-
established.
buttonStop.onclick = function ( ) {
socket.close( );
socket.close(1000,”Deliberate Connection”);
Explore the Windows 8 platform and Windows Store Apps
EASY GESTURES
The apps you use in Windows 8 can feed you information without you even
having to open them. This is especially helpful with home-bred Microsoft
apps like Mail, Calendar, Photos and News, for viewing new e-mail,
upcoming events, thumbnail images and the latest headlines. Third-party
app developers can also take advantage of the Live Tile feature. For example,
LivingSocial shows you snippets of new deals in your area. If you’re sick of a
specific app’s constantly changing tile, you can always turn the Live Tile
feature off. Microsoft has also given more life to the lock screen in Windows
8. You can select up to seven apps that will constantly run in the
background and send notifications to the lock screen. You can also select
between the Weather and Calendar apps to show information on the Lock
Screen at all times. Got a meeting coming up? Your Lock Screen can tell
you.
SYSTEM-WIDE SEARCH
Windows 8 offers a great tool for searching for files, apps, and specific
settings directly from the Start Screen, just by typing. If an app comes with
built-in search, you’ll also be able to quickly search within that apps from
the Search charms bar. For example, say you want to search for “food
trucks.” The Windows 8 search will be able to look through any apps or files
related to food trucks, but you can also just tap Bing to jump into that app’s
search functionality.
REFRESH AND RESET
With Windows 8, Microsoft now offers a very easy way to refresh or reset
your PC. The refresh option is especially useful when you find your PC
acting slow or buggy. In a one-click or one-tap move, you can refresh the PC
without changing any of your files, Windows Store apps, or personalization
settings. All of the PC settings will be changed back to the default, and you
will lose any desktop programs since those are not synced with your
Windows Account. Still, if it comes down it, it’s a easy fix. Reset, on the
other hand, is great for when you want to hand off your old PC to a new
owner. If you want to make sure that everything is wiped, this is your go-to
button. No more having to delete individual files or go through
manufacturer-specific programs to figure it out. You can find both features
in the Charms bar: Click Settings, choose “Change PC Settings” and go to
the “General” section.
SETTINGS SYNC
No matter what PC, tablet or notebook you use, you’ll be able to sync your
personal settings. Thanks to the Microsoft account and Windows 8’s cloud-
friendly platform, your personalizations can travel with you. The “Sync your
settings” option within your PC settings lets you sync personalizations
(background, colors, lock screen and account picture), passwords, language
preferences, app settings, browser settings, and more. It makes using a new
device much easier and makes borrowing a friend’s tablet or notebook a
more personal experience.
Windows Store apps, which default to full-screen mode, can also snap next
to each other for super simple multitasking. When you snap two apps side-
by-side, one occupies a small sliver of the screen (about one-fourth) on the
right or left. A second app takes up more space for a larger view. This is
especially useful for times when you want to, say, chat with a friend while
browsing the web. Or perhaps you want to view Map directions while your
road-trip partner (or kid) watches a movie. It’s a quick and simple way to do
two tasks at once, without having to constantly switch through apps, tabs,
or windows.
PIN ANYTHING
The Start Screen isn’t useful only for its Live Tiles and customization. It’s
also a virtual bulletin board where you can pin specific websites and
particular sections from apps. For example, you can pin individuals from the
People hub directly to your Start Screen for quick access. If you’re a big fan
of the Travel app but you only want to look at certain destinations, you can
pin them for convenience. Pin Shanghai to your Start Screen before your big
vacation, and switch it out for your next destination at a later date. You can
always pin and un-pin items from your Start Screen.
SHARE EVERYTHING
TASK MANAGER
Not all of the best features are limited to the new Start Screen environment.
The Task Manager in Windows 8’s desktop environment is much improved.
The tool has several new features and is much more intuitive to use. Once
you launch the program, you’ll see a complete list of everything that’s
running on your device, separated by section: apps, background processes,
and Windows processes. You can see how much of your device’s resources
each app or process takes. You can also drill down even further. For
example, you can open up each window in a browser app or right click a
process and choose “search online” to understand what it does. The
Performance tab gives you an at-a-glance status update on your CPU,
Memory, Disk, Bluetooth, and Wi-Fi usage in moving charts. App history
shows you how much CPU and bandwidth your apps have used over time,
making it easy to identify which apps take the most resources. The Startup
tab lets you manage which apps will start automatically when you turn on
your computer. The Users tab shows you usage based on the devices
various users, while the Services tab lets you go through your services to
restart services. In short, the Task Manager adds much more functionality
in a far more attractive space.
THE INTERFACE
OK, this is a cop-out, but Windows 8’s best feature is its radically new
interface. Without it, you wouldn’t have all the other features mentioned
here. The stunning Start Screen UI enables a completely new Windows
experience. While you might have complaints about how it doesn’t work as
well with a keyboard and mouse -- or on a desktop PC -- it’s hard to label
Windows 8 as anything but a step forward for Microsoft. The chromeless,
full-screen Windows Store apps are incredibly slick, and navigating the Start
Screen is quick and seamless. Windows 8 is speedy, and the new look only
enhances this.
Microsoft announced the Windows Store in September 2011 and opened the
marketplace in February 2012. As of October 2012, the Windows Store
contained about 3,600 apps
Here are the 11 new locations coming and their opening date.