THE ANDES

TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 1

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: April 26, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Basic structure of a web page
Objective: Specify similarities and differences between desktop programming and web-oriented programming.

Contents Methodological Approaches: Activities Resources Assessment Learning

In person Autonomous strategies Outcomes:
Competencies
Introduction to General concepts Plans  Concept Identify the
HTML on the Study maps concepts,
technology introduction to guides and  Written of HTML
HTML technology. Internet evaluations. technology.
Basic structure Videos  Oral
of a web page. Masterclass on evaluations. Analyze the
the basic  Practical basic structure
Open and structure of a web exercises of web pages.
closed tags in page.
HTML Differentiate
Workshop on between open
open and closed and closed
Formats on web tags in HTML HTML tags.
pages.
Examples of List the tags to
formatting tags in apply formats on
HTML a web page.

WEBGRAPHY:
http://www.ite.educacion.es/formacion/materiales/182/cd/dos/estructura_bsica_de_una_pgina.html
http://html.hazunaweb.com/102.php

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

 THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 2

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: May 3, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Lists in HTML
Objective: Recognize ordered and unordered list labels by applying HTML commands to create structured web
pages.

Contents Methodological Approaches: Activities Resource Assessment Learning

Autonomous s strategies Outcomes:
In person Competencies
General concepts Plans  Concept Define general
Introduction to about ordered Study maps concepts about
ordered and and unordered guides  Written ordered and
unordered lists lists in HTML and evaluations. unordered lists.
in HTML Internet  Oral
Masterclass on Videos Evaluations. Identify the
Features of the features of  Practical characteristics
ordered and ordered and exercises of ordered and
unordered lists unordered lists in
unordered lists
in HTML HTML
in HTML

Tags for building Explain tags for

building ordered Learn the
ordered and usefulness of
unordered lists and unordered
lists in HTML ordered and
in HTML
unordered tags
Headers in Masterclass on in HTML
HTML HTML headers.
Create a web
page by
applying lists.

WEBGRAPHY:
http://html.hazunaweb.com/110.php
http://html.conclase.net/w3c/html401-es/struct/lists.html

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

 THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 3

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: May 10, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Links in HTML
Objective: Create web pages with links by applying HTML codes, to develop interactive computer systems.

Contents Methodological Approaches: Activities Resources Assessment Learning

In person Autonomous strategies Outcomes:
Competencies
Plans  Concept Understand
Introduction to Explanation of the Study maps general
links in HTML general concepts guides and  Written concepts about
of links in HTML. Internet evaluations. links in HTML.
Features of links Videos  Oral
in HTML. Masterclass on evaluations. Identify the
the features of  Practical characteristics
HTML links exercises of links in HTML
Types of links
on a web page.
Chart
Differentiate the
comparisons of
types of links on
types of links in
HTML Link Type HTML. a web page
Tags
Exemplification of Create a web
HTML link type page with links.
labels

WEBGRAPHY:
http://librosweb.es/libro/xhtml/capitulo_4/enlaces_basicos.html
http://platea.pntic.mec.es/~abercian/guiahtml/enlaces.htm

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080
 LESSON PLAN No. 4
School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: May 17, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Images in HTML
Objective: Insert images by applying the HTML img tag to design attractive and eye-catching web systems.

Contents Methodological Approaches: Activities Resource Assessment Learning

In person Autonomous s strategies Outcomes:
Competencies

Introduction to Explanation of Plans  Concept Understand the

images in HTML general concepts Study maps general
guides  Written concepts of
of images in and evaluations.
Alignment of images in
images on web HTML Internet  Oral HTML.
pages. Videos evaluations.
Examples of  Practical Align images in
exercises
Website image alignment different areas
backgrounds on web pages
with images on web pages.
Insert
Image size in Masterclass on background
HTML images into web
web page
pages.
backgrounds with
images. Set the size of
images on web
pages
Workshop on
image size in
HTML

WEBGRAPHY:
http://html.hazunaweb.com/111.php
http://www.virtualnauta.com/html-imagenes

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 5

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: May 31, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Tables in HTML
Objective: Design tables in HTML, using the table tag, to structure information on web pages.

Contents Methodological Approaches: Activities Resource Assessment Learning

In person Autonomous s strategies Outcomes:
Competencies

Introduction to Class Plans  Concept Defines the

tables in HTML Masterclass on Study maps general
the concepts of guides  Written concepts of
Features of tables in HTML and evaluations. tables in
tables in HTML Internet  Oral HTML
Explanation of the Videos evaluations.
Table tags in characteristics of  Practical Identify the
HTML tables in HTML exercises characteristics
of tables in
Merging cells Explanation of HTML
in HTML tables tags in HTML
tables Merge cells in
Inserting HTML tables
images into Masterclass on
HTML tables merging cells in Insert images
HTML tables into HTML
tables
Example on
inserting tables in
HTML

WEBGRAPHY:
http://www.esi2.us.es/cofrade/consulting/consulting2.htm
http://platea.pntic.mec.es/~abercian/guiahtml/tablas.htm

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 6

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: June 7, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: HTML multimedia content
Objective: Insert multimedia content using the embed object, to create dynamic web pages

Contents Methodological Approaches: Activities Resource Assessment Learning

In person Autonomous s strategies Outcomes:
Competencies
 Introduction to  Explain general Plans  Concept  Describes the
multimedia concepts about Study maps Written concepts of
content on web multimedia guides evaluations. multimedia
pages content on web and  Oral content on
 Structure of pages Internet evaluations. web pages.
tags for  Explain the Videos  Practical  Describes the
inserting audio structure of audio exercises tag structures
and video into and video tags in for inserting
HTML files HTML files audio and
 Types of audio  Socialize the video into
and video tags types of audio HTML files
 Servers with and video tags.  Explains the
multimedia  Explain the types of audio
content on the operation of web and video tags
web servers with  Insert audio
 Inserting audio multimedia and videos
and video into content into web
web pages  Illustrate the pages
insertion of audio
and video on web
pages

WEBGRAPHY:
https://developer.mozilla.org/es/docs/Web/HTML/Using_audio_y_video_con_HTML5
http://www.aulaclic.es/html/t_9_1.htm

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 7

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: June 14, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: HTML Forms
Objective: Insert forms into web pages by applying HTML form tags, to receive data from Internet users browsing
the web.

Contents Methodological Approaches: Activities Resource Assessment Learning

In person Autonomous s strategies Outcomes:
Competencies

 Introduction to  Explain the Plans  Concept

HTML forms general Study maps.  Explains the
concepts of guides  Written general
 Features of HTML forms and evaluations. concepts of
HTML forms  Explain the Internet  Oral HTML forms
characteristics Videos evaluations.  Explains the
 Types of data of HTML forms.  Practical characteristics
input in HTML  Socialize the exercises of HTML
forms types of data forms.
entries in HTML  Understand
 Structure of forms. the types of
forms in HTML  Exemplification data input in
of form HTML forms
 Inserting forms structures in  Embed forms
into web pages HTML in web pages.
 Example of
inserting forms
into web pages

WEBGRAPHY:
http://html.conclase.net/w3c/html401-es/interact/forms.html
http://www.uazuay.edu.ec/estudios/sistemas/lenguaje_iii/manual4/form.htm

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 8

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: June 21, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Responsive HTML Maps
Objective: Implement a responsive map by applying map tags to locate tourist sites on the web in an easy and
timely manner.
 Contents Methodological Approaches: Activities Resource Assessment Learning
In person Autonomous s strategies Outcomes:
Competencies

 Introduction to  Explain the Plans  Concept

Responsive general Study maps.  Explains the
HTML Maps concepts of guides  Written general
responsive and evaluations. concepts of
 Features of maps in HTML Internet  Oral responsive
responsive  Explain the Videos evaluations. maps in HTML
HTML maps features of  Practical  Identify the
responsive exercises characteristics
 Structure of maps in HTML. of responsive
responsive  Masterclass on HTML maps.
maps in HTML the structure of  Interprets rect,
responsive circle and poly
 Rect, circle, maps in HTML coordinates in
poly  Instantiation of sensible maps
coordinates on rect, circle, and  Program a
responsive poly coordinates responsive
maps. in sensible map in HTML
maps.
 Programming  Exemplification
responsive of responsive
maps on web map
pages programming on
web pages

WEBGRAPHY:
http://platea.pntic.mec.es/~abercian/guiahtml/mapas.htm
http://www.ite.educacion.es/formacion/materiales/182/cd/trece/mapas_sensibles.html

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE

THE ANDES
TECHNOLOGICAL INSTITUTE
Ministerial Agreement # 1598
Institutional Registry # 17-080

LESSON PLAN No. 9

School: Computer Science CAREER: Technology in Semester: Fifth
Subject Name: Web Programming Systems Analysis Face-to-face hours: 4
Name of Teacher: Eng. Zambrano Date: June 28, 2015. Autonomous Hours:
Zambrano Leader

Unit Name: Web-Oriented Programming

Topic: Frames in HTML
Objective: Divide the screen into several zones by applying the HTML frame tag, to design option menus that
facilitate user navigation.

Contents Methodological Approaches: Activities Resource Assessment Learning

 In person Autonomous s strategies Outcomes:
Competencies

 Introduction to  Explain the Plans  Concept

frames in general Study maps.  Explains the
HTML concepts of guides  Written general
frames in HTML and evaluations. concepts of
 Features of  Explain the Internet  Oral frames in
frames in characteristics Videos evaluations. HTML
HTML of frames in  Practical  Identify the
HTML. exercises characteristics
 Structure of  Explanation of of frames in
frames in the structure of HTML.
HTML frames in HTML  Analyzes
 Exemplification HTML frame
 HTML Frame of HTML frame tags
Tags tags  Program a
 Socializing web page with
 Frame frame frames.
orientation in orientation in
HTML HTML
 Exemplification
of programming
 Programming frames in web
responsive pages
maps on web
pages

WEBGRAPHY:
http://www.htmlpoint.com/guida/html_13.htm
http://platea.pntic.mec.es/~abercian/guiahtml/frames.htm

TEACHING VICE-CHANCELLOR STUDENT REPRESENTATIVE