(Fundamentals of Web Design and Development 2 And Photo ...€¦ · 1 Syllabus in TLE 8...
Transcript of (Fundamentals of Web Design and Development 2 And Photo ...€¦ · 1 Syllabus in TLE 8...
1
Syllabus in TLE 8
(Fundamentals of Web Design and Development 2
And Photo Editing using GIMP Program)
First Quarter
Grade Level Standard
The learner demonstrates understanding about the process of creating standards –based websites using HTML and CSS ( Cascading Style Sheet )
Content The learner demonstrates understanding how to create web pages, explain the different HTML tags and CSS style
Performance Standard
The learner transfers learning by: applying the standards in creating websites and manually code and design a website for easy management.
Time Frame Topic Learning Competencies Assessment
Week 1 Orientation
Rules and regulations
Requirements
Student’s Activity Program
Grading System
Pre-test
Week 2
Internet and Internet Etiquette
Principles of web design
Creating Graphics for the web
Basic documentation and
Describes through a diagram how network and internet works
Generates a list of proper etiquette to be used in the internet
Formative : Group Sharing Summative:
Video Presentation Illustrations
Activity 1 My Diagram of
2
storyboarding process for website development
Valuing: Following appropriate formats ( for standards)
Understands the Basic Principles of web design
Creates graphics using paint
Illustrates the structure of a website by creating a site storyboard
the Internet
Activity 2 Netiquette Formative:
Explain the structure of a website using the One stray Team stay method
Discussion Summative:
Create graphics using MS-Paint
Illustrate the structure of a website by creating a site specification and site storyboard
Week 3
Creating Content Using Productivity Tools
Converting Microsoft Office Documents into web Page
Valuing :
Following appropriate formats ( for standards)
Creates document
( RESUME) in MS Word and convert it into webpage
Creates Slide Presentations and convert it into web page
Creates worksheet and convert it into webpage
Formative:
Recitation
Discussion Summative:
Converting Microsoft Office Documents into web Page
3
Week 4
The Hypertext Markup Language (HTML)
Requirements in creating HTML documents using a text editor
HTML Basics
HTML TAGS
Indentions
Empty Spaces
Tag Attributes
Formatting Text
Character Entities Valuing:
Show accuracy in typing HTML Tags
States the uses of HTML
Describes the structure of an HTML document
Explains the different HTML Tags
States the recommendations of the W3C and WHATWG in creating well-formed HTML documents
Formative:
Identify the html tag using Lap Clap Click
Summative:
Creating a HTML Chart
Post Test
Week 5
First Mid Quarter Examination
Week 6
Lists
Inserting Images
Inserting Links
Creating Bookmarks
Mail to Links Valuing: Understanding the importance of following the html tags accurately.
Explains the requirements in creating HTML documents.
Produces a personal website using HTML and text editor.
Formative
Following the instruction Summative
Creating a website Example
Week 7 Nutrition Month
Image Maps
Frames
Inserting Multimedia
Explains the Nutrition Month Theme
Applies tags in inserting Multimedia
Formative:
Write an essay about the nutrition month theme using the HTML tags
4
Valuing: Following writing standards
( formats)
(select video related to Nutrition)
Produces a personal website using HTML and text editor
Transfer Goal: In line with the Nutrition Month celebration, the TLE Dept. will have an activity tag as:”Fiesta sa Gym: Halina at Makisaya sa TLE Day siguradong may kita”
This is to showcase the talents and skills learned in different components, so students will have a chance to portray the role of an entrepreneur, baker, programmer, web developer, artist etc. This is also a way for the students to experience the real world of work.
Summative
Create PERSONAL SITE show the following information.
Personal data
Educational Background
Hobbies
Organizations and other activities
Week 8
Page Templates a. Creating Tables
B. Page templates
Creates and use tables to create
tabular data or layout sections in web pages.
Formative: Recitation Summative :
Creating your first table
5
Empty Cells
Other HTML Tags
Layouts Valuing: Focusing on a task
States how HTML should be written when creating templates
Personal Site Template Create a duplicate copy of the files found in the personal site that you created in the previous chapter. Convert it into a Personal Site Template.
Week 9 Introduction to Cascading Style Sheets A. Defining Styles B. CSS Selectors
Valuing : Show Perseverance and accuracy In applying styles using CSS.
States how page presentation is separated from content.
Identifies properties that affect element styles.
Creates and use style sheet to handle the presentation of a page
Create and use an external style sheet to handle the presentation of a website.
Formative: Group sharing Summative
Exercise 1 Using Inline Styles
Exercise 2 Using Internal Sheets
Exercise 3 Using External Style Sheets
Week 10
First Quarter Examination
6
Second Quarter
Grade Level Standard The learner demonstrates competence in performing basic photo editing, using Gimp Program
application by creating, drawing and editing images using the different tools.
Content Standard The learner demonstrates understanding of Gimp program and its tools; create, draw and edit
images.
Performance Standard The learner transfers learning by: Creating, drawing, retouching and repairing images using the different tools in Gimp program.
Time Frame
Topics Learning Competencies Assessment
Week 1
Getting to know the Gimp Program
Definition and Uses of Gimp
Starting Gimp and opening file
A tour of the Important GIMP windows and Menus
Defines and give the uses of Gimp software.
States the uses of each tool in the toolbox
Starts gimp and opens file
Manipulates computers and other equipment for classroom learning
Opens Gimp and Save file .
Pre-test
Week 2
How to start using the GIMP (Opening and Saving Images)
Gimp toolbox
Rectangular select
Ellipse
Free select
Fussy select
Opens and save gimp file.
Follows the use of toolbox windows and tool options dialog
Applies the use of each tool in the toolbox
Creates drawings of fruits and vegetables using the different tools.
Uses technology effectively and
Formative:
Identifying the Gimp toolbox using lap clap click method
Summative:
Draw different fruits using the
7
Paint Bucket Fill
Using the Text Tool
Valuing:
Correct use of tools
responsively in improving the quality of work
Produces projects using Gimp software
toolbox
Week 3
Parts of the Image Window
Menu bar
Rulers
Quick mask button
Location area
Scale menu
Status bar
Zoom control toggles
Image Windows menu File Menu
Edit
Select
View
Layer Menu
Colors menu Dialogs menu
User Interface and Keyboard shortcuts
Identifies the parts of the image window
Labels the parts of the Image window menu
Applies the use of keyboard shortcuts
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Creates different sizes of ID pictures using the ruler and guides.
Formative :
Labeling the parts of Image window
Summative
Creating ID pictures with different sizes
8
Week 4
Parts of Layers Dialog Box
Project 2 – Following instructions
Drawing of final tree in a planter
Repairing and Retouching
using clone tool and healing
tool
Valuing: Appreciate the Gimp Program
Identifies the parts of Layers Dialog Box
Labels the parts of Layers Dialog Box
Develops creativity in making projects.
Produces projects using gimp software.
Creates a collage using the different tools.
Performs the given exercises
Shows enjoyment in using the different tools
Follows instruction accurately
Edits images
Retouches images properly
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Formative: Labeling the parts of Layers Dialog box
Summative:
Collage Making using Gimp tools
Working with selection
Drawing of Final tree in a planter using Gimp program
Week 5 Second Mid-Quarter Exam
Week 6
Activity 3- Retouching and repairing
Person who has pimples and wrinkles
Fixing Red –Eye
Follows instruction accurately
Edits images
Retouches images properly
Produces projects using gimp software.
Formative:
Retouching and repairing images
9
Creating a simple and special Invitation for debut, wedding and other occasions
Valuing: Develop skills in repairing and retouching Show perseverance and creativity in creating invitations
Uses technology effectively and responsively in improving the quality of work
Performs the given exercises
Shows enjoyment in repairing and retouching
Appreciates gimp program
Formative: Recitation Summative
Creating a simple and special Invitation for debut, wedding and other occasions using Gimp Program
Week 7
Use of Layer Mask
Hands on Activity
Exercise 3 Pegasus and Me
Valuing:
Following instruction
properly
Explains the use of layer masks.
Performs the given exercises with accuracy
Explains the use of flattening the image
Uses technology effectively and responsively in improving the quality of work
Follows instructions accurately
Formative: Recitation Summative
Applying the layer mask
Week 8
Animation
Steps on how to animate using gimp program
Making their own Animation
Presentation of best work
Valuing:
Appreciate Animation
Defines animation
Applies animation.
Saves a copy of the file with the layers flattened
Follows the steps given by the teacher
Performs the given exercises
Creates a short movie using animation
Appreciates animation using Gimp program
Formative
Follow the steps in animation
Summative
Creates their own Animation
Note: Post Test will be given to students
10
Week 9
Creating design and Making project plan
Project Making ( T-shirt Printing)
Valuing: Show interest in business
Transfer Goal:
The knowledge and skills acquired by the students in Photo editing will enable them to create, edit, retouch and repair images and produce quality products such as T-shirt printing.
Practices creativity in making projects
Develops good working attitude
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Appreciates gimp program
Summative
Project Making
Week 10
Second Quarter Exam
11
Syllabus in TLE 8
(Fundamentals of Web Design and Development 2
And Photo Editing using GIMP Program)
Third Quarter
Grade Level Standard
The learner demonstrates understanding about the process of creating standards –based websites using HTML and CSS ( Cascading Style Sheet )
Content The learner demonstrates understanding how to create web pages, explain the different HTML tags and CSS style
Performance Standard
The learner transfers learning by: applying the standards in creating websites and manually code and design a website for easy management.
Time Frame Topic Learning Competencies Assessment
Week 1 Orientation
Rules and regulations
Requirements
Student’s Activity Program
Grading System
Pre-test
Week 2
Internet and Internet Etiquette
Principles of web design
Creating Graphics for the
Describes through a diagram how network and internet works
Generates a list of
Formative : Group Sharing Summative:
Video Presentation Illustrations
12
web
Basic documentation and storyboarding process for website development
Valuing: Following appropriate formats ( for standards)
proper etiquette to be used in the internet
Understands the Basic Principles of web design
Creates graphics using paint
Illustrates the structure of a website by creating a site storyboard
Activity 1 My Diagram of the Internet
Activity 2 Netiquette Formative:
Explain the structure of a website using the One stray Team stay method
Discussion Summative:
Create graphics using MS-Paint
Illustrate the structure of a website by creating a site specification and site storyboard
Week 3
Creating Content Using Productivity Tools
Converting Microsoft Office Documents into web Page
Valuing :
Following appropriate formats ( for standards)
Creates document
( RESUME) in MS Word and convert it into webpage
Creates Slide Presentations and convert it into web page
Creates worksheet and convert it into webpage
Formative:
Recitation
Discussion Summative:
Converting Microsoft Office Documents into web Page
13
Week 4
The Hypertext Markup Language (HTML)
Requirements in creating HTML documents using a text editor
HTML Basics
HTML TAGS
Indentions
Empty Spaces
Tag Attributes
Formatting Text
Character Entities Valuing:
Show accuracy in typing HTML Tags
States the uses of HTML
Describes the structure of an HTML document
Explains the different HTML Tags
States the recommendations of the W3C and WHATWG in creating well-formed HTML documents
Formative:
Identify the html tag using Lap Clap Click
Summative:
Creating a HTML Chart
Post Test
Week 5
Third Mid Quarter Examination
Week 6
Lists
Inserting Images
Inserting Links
Creating Bookmarks
Mail to Links Valuing: Understanding the importance of following the html tags accurately.
Transfer Goal:
The knowledge and skills acquired by the students in HTML will enable them to create and design website and will help to be productive and be a Web Developer, Web designer and a Programmer. .
Formative
Following the instruction Summative
Creating a website Example
14
Explains the requirements in creating HTML documents.
Produces a personal website using HTML and text editor.
Week 7
Image Maps
Frames
Inserting Multimedia
Valuing: Following writing standards
( formats)
Applies tags in inserting Multimedia
Produces a personal website using HTML and text editor
Formative:
Write an essay about the nutrition month theme using the HTML tags
Summative
Create PERSONAL SITE show the following information.
Personal data
Educational Background
Hobbies
Organizations and other activities
Week 8
Page Templates b. Creating Tables
B. Page templates Empty Cells
Other HTML Tags
Layouts Valuing: Focusing on a task
Creates and use tables to create
tabular data or layout sections in web pages.
States how HTML should be written when creating templates
Formative: Recitation Summative :
Creating your first table
Personal Site Template
Create a duplicate copy of the files found in the personal site that you created in the previous chapter. Convert it into a Personal Site Template.
Week 9 Introduction to Cascading Style Sheets
States how page presentation is
Formative: Group sharing
15
C. Defining Styles D. CSS Selectors
Valuing : Show Perseverance and accuracy In applying styles using CSS.
separated from content.
Identifies properties that affect element styles.
Creates and use style sheet to handle the presentation of a page
Create and use an external style sheet to handle the presentation of a website.
Summative
Exercise 1 Using Inline Styles
Exercise 2 Using Internal Sheets
Exercise 3 Using External Style Sheets
Week 10
Third Quarter Examination
16
Fourth Quarter
Grade Level Standard The learner demonstrates competence in performing basic photo editing, using Gimp Program
application by creating, drawing and editing images using the different tools.
Content Standard The learner demonstrates understanding of Gimp program and its tools; create, draw and edit
images.
Performance Standard The learner transfers learning by: Creating, drawing, retouching and repairing images using the different tools in Gimp program.
Time Frame
Topics Learning Competencies Assessment
Week 1
Getting to know the Gimp Program
Definition and Uses of Gimp
Starting Gimp and opening file
A tour of the Important GIMP windows and Menus
Defines and give the uses of Gimp software.
States the uses of each tool in the toolbox
Start gimp and opens file
Manipulates computers and other equipment for classroom learning
Opens Gimp and Save file .
Pre-test
Week 2
How to start using the GIMP (Opening and Saving Images)
Gimp toolbox
Rectangular select
Ellipse
Free select
Fussy select
Opens and save gimp file.
Follows the use of toolbox windows and tool options dialog
Applies the use of each tool in the toolbox
Creates drawings of fruits and vegetables using the different tools.
Uses technology effectively and
Formative:
Identifying the Gimp toolbox using lap clap click method
Summative:
Draw different fruits using the
17
Paint Bucket Fill
Using the Text Tool
Valuing:
Correct use of tools
responsively in improving the quality of work
Produces projects using Gimp software
toolbox
Week 3
Parts of the Image Window
Menu bar
Rulers
Quick mask button
Location area
Scale menu
Status bar
Zoom control toggles
Image Windows menu File Menu
Edit
Select
View
Layer Menu
Colors menu Dialogs menu
User Interface and Keyboard shortcuts
Identifies the parts of the image window
Labels the parts of the Image window menu
Applies the use of keyboard shortcuts
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Creates different sizes of ID pictures using the ruler and guides.
Formative :
Labeling the parts of Image window
Summative
Creating ID pictures with different sizes
18
Week 4
Parts of Layers Dialog Box
Project 2 – Following instructions
Drawing of final tree in a planter
Repairing and Retouching
using clone tool and healing
tool
Valuing: Appreciate the Gimp Program
Identifies the parts of Layers Dialog Box
Labels the parts of Layers Dialog Box
Develops creativity in making projects.
Produces projects using gimp software.
Creates a collage using the different tools.
Performs the given exercises
Shows enjoyment in using the different tools
Follows instruction accurately
Edits images
Retouches images properly
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Formative: Labeling the parts of Layers Dialog box
Summative:
Collage Making using Gimp tools
Working with selection
Drawing of Final tree in a planter using Gimp program
Week 5 Fourth Mid-Quarter Exam
Week 6
Activity 3- Retouching and repairing
Person who has pimples and wrinkles
Fixing Red –Eye
Follows instruction accurately
Edits images
Retouches images properly
Produces projects using gimp software.
Formative:
Retouching and repairing images
19
Creating a simple and special Invitation for debut, wedding and other occasions
Valuing: Develop skills in repairing and retouching Show perseverance and creativity in creating invitations
Uses technology effectively and responsively in improving the quality of work
Performs the given exercises
Shows enjoyment in repairing and retouching
Appreciates gimp program
Formative: Recitation Summative
Creating a simple and special Invitation for debut, wedding and other occasions using Gimp Program
Week 7
Use of Layer Mask
Hands on Activity
Exercise 3 Pegasus and Me
Valuing:
Following instruction
properly
Explains the use of layer masks.
Performs the given exercises with accuracy
Explains the use of flattening the image
Uses technology effectively and responsively in improving the quality of work
Follows instructions accurately
Formative: Recitation Summative
Applying the layer mask
Week 8
Animation
Steps on how to animate using gimp program
Making their own Animation
Presentation of best work
Valuing:
Appreciate Animation
Defines animation
Applies animation.
Saves a copy of the file with the layers flattened
Follows the steps given by the teacher
Performs the given exercises
Creates a short movie using animation
Appreciates animation using Gimp program
Formative
Follow the steps in animation
Summative
Creates their own Animation
Note: Post Test will be given to students
20
Week 9
Creating design and Making project plan
Project Making ( T-shirt Printing)
Valuing: Show interest in business
Transfer Goal:
The knowledge and skills acquired by the students in Photo editing will enable them to create, edit, retouch and repair images and produce quality products such as T-shirt printing.
Practices creativity in making projects
Develops good working attitude
Produces projects using gimp software.
Uses technology effectively and responsively in improving the quality of work
Appreciates gimp program
Summative
Project Making
Week 10
Fourth Quarter Exam
21