Q3Week3 MELC DLP SLHT
MELC 3: Create an original or derivative ICT content to effectively communicate or present data or information related to specific professional tracks; and
Evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design. (Week
Objectives:
1. Use the Internet as a tool for credible research and information gathering to best achieve specific class objectives or address situational cases. or keywords.
2. Uses common productivity tools effectively by maximizing advanced application techniques.
3. Creates an original or derivative ICT content to effectively communicate or present data or information related to specific professional tracks.
4. Evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design.
Introductory Activity
Disclaimer: The statements and a picture stated above are borrowed from online sources. The Department of Education does not claim or own the presented statements and a picture. Links for the sources are found in the reference part of the Self-Learning Home Task.
What I Know-Activity (10 minutes only)
Link is an open-source text and a graphical web browser with a pull-down menu system.[2] It renders complex pages, has partial HTML 4.0 support (including tables and frames[3] and support for multiple characters sets such as UTF-8), supports color and monochrome terminals, and allows horizontal scrolling.
It is intended for users who want to retain many typical elements of graphical user interfaces (pop-up windows, menus ,etc.) in a text-only environment. (source)
What's In Activity (3 minutes only)
Utilization of Common Productivity Tools to Create Original and Derivative ICT Contents for Website Creation in Empowerment Technologies
By George P. Lumayag
This article is based on the Most Essential Learning Competencies (MELCs) in Empowerment Technologies. Students are encouraged to use the internet as a tool for credible research and information gathering to best achieve specific class objectives or address situational cases or keywords. The subject guides students to use their cellphone/s or computer/s in searching unfamiliar words or browsing the sites that might publish the topics based on the Most Essential Learning Competencies (MELCs). Everybody can use Google Chrome, Explorer and other browsers that might be installed on a cellphone or computer. Everybody can login his/her Gmail account and utilize the Google applications. The ABM students can utilize the Microsoft Office Excel and apply the formula in e-bookkeeping. Then, they could upload the document into their Google Drive or Shared Drive for online collaboration. Other students from their group can encode the amount of sales, monthly inventory, purchases and other transactions to compute the Gross Profit or Total Revenue. And they can continue encoding the operational expenses for them to compute the Net Surplus or Net Loss. By just pressing the Enter key, the application will automatically display the Gross Profit or Total Revenue or Net Surplus or Net Loss. Such competency shall be obtained through the Blended Learning Approach. In this case students just need a cellphone or computer with internet connection. They need their counterpart to load their device to have the internet data for internet browsing if they utilize the online application and collaborate with other students in the network. But if students don’t have a cellphone, they are exempted from such competency, provided that other suitable modular activities shall be accomplished, however, other competencies need internet applications.
Another competency encourages all ABM, HUMSS, STEM, and TVL students to use the common productivity tools e.g. Google Drive (Docs, Sheets, Slides), Google Calendar effectively by maximizing advanced application techniques. Just in case they are assigned for a group research proposal. Online researchers or collaborators can utilize the Google Doc wherein group members can login their Gmail accounts and utilize their Google Shared Drive with different online applications if those Gmail accounts are given the role as editors or collaborators. It is advisable to use the Google Doc because it is free of charge and all collaborators can link the different research journals by utilizing the link icon to justify that the statements are adopted or adapted from the research publication journals.
The next competency encourages students to create original and derivative Information and Communications Technology (ICT) contents to effectively communicate or present data or information related to specific professional tracks. It is good for ABM, HUMSS, STEM, and TVL students to create an original personal website to publish their original or derivative ICT contents, such as textual information, visual graphics, infographics, audio clips, video tracks, blogs, vlogs etc. Examples of derivative ICT contents are linked or embedded videos from www.youtube.com and published infographics which are linked into students’ websites using the hypertexts and hyperlinks. Hyperlinks are pictures with linked websites while hypertexts are texts with linked websites or web pages. Hopefully students are given the chance to publish their innovations, e.g. logo by utilizing Student’s Online ePorfolio or they are required to create their original ICT content pertaining to a publishable research paper, and they shall have to present the data through a web page presentation, e.g. https://georgelumayag.weebly.com/online-automated-instructional-materials-for-english-8.html.
Task: Use the Internet as a tool for credible research and information gathering to best achieve specific class objectives or address situational cases. or keywords. Browse the above-mentioned web browsers and type the keywords in relation to web development.
Review (5 minutes only)
WEB 1.0 SEARCH – It starts with what was defined as Web 1.0. The web as most people experienced in perhaps the 90s would have been more than likely a Web 1.0 site. It would have been static mainly based on search. It may have had some useful information but it would rarely if ever be updated. You could imagine it as a single page of a book placed up on the web and then left there for people to read. It was also unresponsive in the sense it was purely a one-way feed of information. There was no interactivity between the person who was visiting the site. No comments, no collaboration, no community.
Web 2.0 is the current state of online technology as it compares to the early days of the Web, characterized by greater user interactivity and collaboration, more pervasive network connectivity, and enhanced communication channels.
One of the most significant differences between Web 2.0 and the traditional World Wide Web (WWW, retroactively referred to as Web 1.0) is greater collaboration among Internet users, content providers, and enterprises.
Originally, data was posted on Web sites, and users simply viewed or downloaded the content. Increasingly, users have more input into the nature and scope of Web content and in some cases exert real-time control over it.
The social nature of Web 2.0 is another major difference between it and the original, static Web. Increasingly, websites enable community-based input, interaction, content-sharing, and collaboration. Types of social media sites and applications include forums, microblogging, social networking, social bookmarking, social curation, and wikis.
Web 3.0 is slated to be the new paradigm in web interaction and will mark a fundamental change in how developers create websites, but more importantly, how people interact with those websites. Computer scientists and Internet experts believe that this new paradigm in web interaction will further make people’s online lives easier and more intuitive as smarter applications such as better search functions give users exactly what they are looking for since it will be akin to artificial intelligence which understands context rather than simply comparing keywords, as is currently the case.
Activity
Here is another competency that encourages students to evaluate existing websites and online resources in the principles of layout, graphic, and visual message design. Please read the next article.
10 Basic Principles of Graphic and Design
Anahat Rawal
Published on July 12, 2018
@ https://blog.usejournal.com/10-basic-principles-of-graphic-design-b74be0dbdb58
The journal states Graphic design plays a critical role in brand-building and at the same time, in showcasing your skill-sets. Although branding and design are an inseparable experience, it’s important to understand the fundamentals of graphic design before embarking on any new assignment. When working with clients, you get only one opportunity to make a strong first impression, so why not infuse their experience with your knowledge and application of design elements to a range of projects — social media graphics, web and app User Interface (UI), videos, banners, advertisements, et al. Of course, as a designer, don’t worry about drawing outside the lines and having fun whilst doing it! In fact, you must frequently colour outside the lines to pull away from a mediocre or a repetitive design structure, but, the beginners must first know what those prescribed lines are. So, let’s understand the ten basic design principles that will help you create stunning graphics.
01. Balance
Balance lends stability and structure to an overall design. To understand it better, think that there’s weight behind each of your design elements. Shapes, text boxes, and images are the elements that form your design, so it’s important to be familiar with the visual weight each of those elements possesses. Now, this doesn’t mean that the elements always need to be distributed evenly or that they must be of an equal size — balance is either symmetrical or asymmetrical. Symmetrical balance is when the weight of elements is evenly divided on either side of the design, whereas asymmetrical balance uses scale, contrast, and colour to achieve the flow in design.
02. Proximity
Proximity helps in creating a relationship between similar or related elements. These elements need not be grouped, instead, they should be visually connected by way of font, colour, size, etc.
03. Alignment
Alignment plays a pivotal role in creating a seamless visual connection with the design elements. It gives an ordered appearance to images, shapes, and blocks of texts by eliminating elements placed in a disheveled manner.
04. Visual Hierarchy
In simple words, a hierarchy is formed when extra visual weight is given to the most important element or message in your design. It can be achieved in various ways — using larger or bolder fonts to highlight the title; placing the key message higher than the other design elements; or adding focus to larger, more detailed, and more colorful visuals than those less relevant or smaller images.
05. Repetition
Repetition is a fundamental design element, especially when it comes to branding. It creates a rhythm and strengthens the overall design by tying together consistent elements such as logo and colour palette, making the brand or design instantly recognizable to viewers.
06. Contrast
Contrast happens when there is a difference between the two opposing design elements. The most common types of contrast are dark vs. light, contemporary vs. old-fashioned, large vs. small, etc. Contrast guides a viewer’s attention to the key elements, ensuring each side is legible.
7. Colour
Colour is an important design and it dictates the overall mood of a design. The colours you pick represent your brand and its tonality, so be careful with the palette you choose. As a graphic designer, it’s always helpful to have a basic knowledge of colour theory, for example, gold & neutral shades evoke an overall feel of sophistication, bright colours signal happiness, and blue creates a feeling of calmness. Colour palettes can be used as a contrast or even to complement the elements.
08. Negative Space
We’ve discussed the importance of colours, images, and shapes, but what about the space that is left blank? It is called the ‘negative space’, which in simple words means the area between or around the elements. If used creatively, negative space can help create a shape and highlight the important components of your design.
09. Typography
“Words have meaning, type has spirit,” — Paula Scher.
Typography is one of the key pillars of design, and it speaks volumes about a brand or an artwork when executed stylistically or even customized. Sometimes, ‘type’ is all you need to showcase your design concept.
10. Rules
Once you’re an adept graphic designer who understands the foundations of design, then it’s time to break some of those rules. And, by that, I don’t mean, using pixelated images or an illegible font type. Remember, whatever it is that you’re choosing to communicate, should not be compromised. While these principles may require some of you to be more observant and take mental snapshots of novel designs (that you stumble upon), they’re key principles for those who want to create a great brand by way of strong visuals and content.
Performance Tasks: Browse this link @ https://docs.google.com/presentation/d/1Y3iiGXyJglvP8ISeJXufP4pHaP3cyInjbnJ_Hk6cu_E/edit#slide=id.p and create a website using the basic design principles.
What's New Activity (10 minutes only)
Performance Task. Directions. Browse this link @ https://docs.google.com/presentation/d/1NfrleqxPLU4GB2N8diD8WdPNXRQwGmnAPaynwXVHswc/edit#slide=id.p and create a website using Google Site.
Analysis
How do users evaluate the existing websites and online resources?
What Is It (10 minutes only)
Essay. Directions. Write down an essay in relation to the topics or competencies. Please write down your “Performance Task” using a short-size bond paper or intermediate paper. Don’t forget to cite your reference.
The essay writing process consists of three main stages:
1. Preparation: Decide on your topic, do your research, and create an essay outline.
2. Writing: Set out your argument in the introduction, develop it with evidence in the main body, and wrap it up with a conclusion.
3. Revision: Check the content, organization, grammar, spelling, and formatting of your essay.
Abstraction
What’s More-Activity (10 minutes)
Appreciate the users when applying the online safety, security, ethics, and etiquette standards and practice.
Application
What I Have Learned-Activity (10 minutes)
Performance Task: Directions.
In browsing the websites, use the common productivity tools effectively by maximizing advanced application techniques.
Assessment
In your own words, explain the reasons why students create and evaluate the existing websites and online resources based on the principles of layout, graphic, and visual message design.
Assignment: Optional
Concluding Activity
“My teaching is not limited to the classroom; this can be a shortcut icon to everybody on the web; acquiring new ideas, the students might learn and experience in the application of knowledge, appreciation, and skills”. (George P. Lumayag)
References: