ETECH - 1st Semester.pdf

Lesson 1: The Current State of ICT Technology - Application of scientific knowledge for practical purposes, especially in industry - Machinery and equipment developed from the application of scientific knowledge ICT - Information and Communications Technology -...

Lesson 1: The Current State of ICT Technology - Application of scientific knowledge for practical purposes, especially in industry - Machinery and equipment developed from the application of scientific knowledge ICT - Information and Communications Technology - Extended term of Information Technology (IT) - Emphasizes the role of unified Technology Convergence communications - An evolution of technological developments - Integrates telecommunications, computers, that merge into a new system bringing enterprise software, middleware, storage, and together different types of application and audiovisual systems media - Enables users to access, store, transmit, and manipulate information Social Media - Collection of internet-based communication Web 1.0 tools and computer assisted channels - First stage of the World Wide Web (WWW) - Allows users to interact, communicate, and - Only few web content creators share info in a virtual community and network - Webpages = Static, also called “Read Only Web” Mobile Media - Only available feedback mechanism: Private - Range of handheld devices (mobile phones, Emails tablets, e-readers, game consoles, etc.) - Primarily used as personal, interactive, internet-enabled and user-controlled portable platforms that allow inter connected users to exchange personal and nonpersonal info (Wei, 2013) Web 2.0 - First used around 2004 Assistive Media - Internet technology become more and more - Non-profit organization founded in 1996 in interactive Michigan, USA (David H. Harvey) - Internet became more available for everyone - First internet-based reading service for - Users can now interact, contribute, and create persons with visual & reading impairments their own internet space & content (Explosion - Produce and publish voice-recorded written of Information & Social Media) materials on cassettes, CDs, and in the internet Web 3.0 - Described by Tim Berners-Lee (Father of WWW) as “read-write-execute web” - Referred to as the semantic web or data driven web content and response - The user's search context is analyzed by a programming language to provide relevant options based on their interests Tubig Marka ni Romero from Noether ahihi Lesson 2: Online Platform in ICT Online Platforms Presentation Tools - Makes it easier for users to interact, collect, - MS Powerpoint, Google Slides, Prezi and used data from the user’s interactions for their own particular needs Newsletter, ICT Content Platforms - Mailchimp, Substack, Constant Contact Online Platform Categories Social Media Photo Editing Tools Search Engines - Adobe Photoshop, Canva, GIMP Communication Services Payment Systems Video Editing Tools Advertising Platforms - Adobe Premiere Pro, Final Cut Pro Creative Content Outlets Photo Uploading & Hosting Tools Platforms - Flickr, Google Photos, SmugMug Web Search Engines - Software system that is designed to search for Online Collaborative Tools info on the WWW - Google Workspace, Microsoft Teams - Search result are generally presented in a line of results referred to as Search Engine Results Cloud Computing Page (SERPs) - Google Cloud Platform, Microsoft Azure - Mix of webpages, images, etc. - EX: Google, Bing, Yahoo, Opera Blog Tools - WordPress, Blogger, Medium Communication Services - Outsourced enterprise communications Mapping Tools solutions that can be leased from a single - Google Maps, Mapbox, ArcGIS Online vendor or provider - Communications Service Provider (CSP): Music Production transports info electronically and can - Ableton Live, Logic Pro X, FL Studio encompass public & private companies in telecom, internet, cable, satellite, and Survey and Forms managed service business - Google Forms, SurveyMonkey, Typeform - EX: Smart, PLDT, Globe, SKY ICT Projects and Content Publishing and Payment Systems Uploading Platforms - Any system used to settle financial - GitHub, Google Sites, WordPress transactions through transfer of monetary value Web Design Platforms - Includes institutions, instruments, people, - Wix, Squarespace, Webflow rules, procedures, standards, & technologies - EX: PayPal, MasterCard, BPI, Landbank Web Management Platforms - Drupal, WordPress, Joomla Advertising Platforms - Allows users to create and manage advertising campaigns, generate reports, and retrieve info about the ads, campaigns, and organizations that are associated with an account - EX: Amazon, Lazada, Shoppee, ebay Creative Content Outlets - Contents that need to be translated creatively - Topic/Content = Creative Presentation - EX: Blogging, Podcasts, Infographics Tubig Marka ni Romero from Noether ahihi Lesson 3: Online Safety, Security, Ethics, and Malware - disguised as real software often Etiquette secretly installed, intended to transfer and gather private info without the user’s Online Safety - practices and precautions that should permission be observed when using the internet to ensure that the users as well as their computers and personal info are - Adware: automatically delivers advertisements safe from crimes associated with using the internet (Banner Ads, Pop-up Ads) - Spyware: spying on user activity without their Delinquencies That Can Be Committed knowledge (Keylogger) Stalking Identity Theft Virus & Worms Privacy Violations a. Virus - program designed to replicate by Harassment attaching itself into other computer programs, data files, or booth sector of a hard drive Online Safety Measures b. Worm - can be injected into a network by any Never share personal information online. types of means (USB or Email) Only provide sensitive information on secure websites Trojan Horse (Trojan): disguises itself as a normal file Never follow email links for account access; or program to trick users into downloading and type the URL directly installing malware Avoid opening messages or attachments from unknown sources Iloveyou Virus: Love Bug or Love Letter; worm Regularly review and adjust your privacy attached on email that infected 10 million of windows settings personal computer that cause computer shutdown and Delete browsing data after using a public deletion of files; Onel De Guzman & Reonel computer. Ramonnes (2000) Keep your software updated Don't download or install unknown software on Computer Bug - malfunction on a computer your devices system through its runtime; “bug” originated to the Moth found on the Mark II (Grace Hopper) Online Threats - act performed by a knowledgeable that caused a system malfunction computer user sometimes referred to as “hacker that illegally browses/steal someone’s info” Cyber Stalking - use of the internet or other electronic device to harass/stalk individual, Types of Threats group, or organization Phishing - email sent from an internet criminal disguised as an email from a legitimate Cyber Bullying - act of something, threatening, source; meant to lure you into revealing harassing, or embarrassing another person sensitive or confidential info using the internet or other technologies Pharming - malicious website that resembles a Spam - unsolicited email, instant messages, or legitimate website; used to gather usernames social media messages; messages are fairly and passwords easy to spot and can be damaging if you open or respond Internet Scam - misleads the user in many ways attempting to take lead of them; cheats Spoofing - describes a criminal who the target of their personal property directly impersonates another individual/organizations, rather than private info through fabricated with the intent to gather personal or business promises, confidence tricks, etc. info Internet Bots - network of zombies computers that have been taken over by a bot that performs large-scale malicious acts for the creator of the botnet; Captcha is used to avoid this threat Tubig Marka ni Romero from Noether ahihi Online Ethics & Netiquette Lesson 4: Contextualized Online Search and Netiquette - comes from the word Network and Research Skills Etiquette; set of rules and norms for acceptable conduct or behavior online Media & Information Source Indigenous Knowledge Computer Ethics - concerned with how - Local knowledge computing professionals should make - Unique to a given culture or society decisions regarding professional & social - Contrasts with the international knowledge conduct system universities, research institutions, and private firms Ten Core Rules of Netiquette Characteristics of Indigenous Knowledge 1. Remember the Human - Oral tradition of communication 2. Adhere to the same standard of behavior - Store info in memories online that you would follow in real life - Info exchange = face to face 3. Know where you are in cyberspace - Info are contained within the border of the 4. Respect other people’s time and bandwidth community 5. Make yourself look good 6. Share expert knowledge Library 7. Help keep Flame wars under control - Either digital or physical in form 8. Respect other people’s privacy - Often classified in four groups: Academic, 9. Don’t abuse your power Public, School, Special 10. Be forgiving of other people’s mistakes Characteristics (Reliability, Accuracy, and Value) Privacy - right of individuals to deny or restrict the - Libraries of published books = often collection and used of info about them considered highly reliable, accurate, and valuable Authentication - process where users verifies their - Books and documents from dominant sources identity; deals with the problem of determining whether = often peer reviewed a user should be allowed access to a particular system - ISSN/ISBN registration ensures that standards were followed in producing these materials Four Commonly Authentication Methods User Identification - process of verifying a ISSN - International Standard Serial Number user's identity, typically using credentials like a ISBN - International Standard Book Number username and password Internet Possessed Objects - physical items like keys, - Info found may be quite varied in form and ID cards, or security tokens that a user has content and can use for authentication - More difficult to determine its reliability and accuracy Biometric Device - security device that uses - Accessing info is easy but requires more unique biological traits (like fingerprints or discipline to check and validate facial recognition) to verify identity - Factual & fictitious data are often merge - Info should be always validated Callback System - security method where the system calls back the user to verify their Online Search & Research - aka Internet Research; identity, often used in phone or online banking more than just googling; skill needed to be improved to get factual info Search Tools, Skills, & Engine Search Tools a. Safe Search: helps you block inappropriate/explicit images; isn’t 100% accurate, but helps you avoid most explicit content (Google) Tubig Marka ni Romero from Noether ahihi  b. Restricted Mode: opt-in setting available that b. OR: broadens the search to include records helps screen out potentially objectionable containing either keywords, or both content that you may prefer not to see or others to stumble across (Parental Control Plus (+) Setting, Youtube) - Indicate that the word after the sign in required word must be found in the search c. Google Scholar: provides a simple way to - EX: +preventive broadly search for scholarly literature; articles, theses, books, etc.; from academic publishers, Minus (-) universities, etc. - Exclude a word from your search that is not required on result d. Reverse Image Search: use a picture as your - EX: -personal search to find related images from around the web Wildcard (*) - Find a variation of word Search Skills - ability to efficiently find relevant - EX: measure* (will find entries such as information online using search engines, measures and measurement) keywords, and advanced search techniques Quotation Mark (“”) Search Engine - programs that look for - Names or phrase should be enclosed with documents based from specified keywords quotation mark better result and return these documents where the - EX: “precautionary measures” keyword were found Plagiarism - using other people’s word and ideas Information Evaluation without clearly acknowledging the source of the info Accuracy - grammatically correct, verifiable, and cited when necessary How to Avoid Plagiarism Author - who created the content, the Cite the things you copy on the internet individual or group’s credential/expertise and Put quotation marks around everything that provides contact info comes directly from the text Currency - info current & updated frequently Paraphrase, not simply rearrange or replace a Fairness - balanced, presents all sides of an few words issue and multiple points of view Use the style manual in properly citing sources Relevance - relevant to your topic/research Domain Types.com Commercial.gov Government.org Organization.net Network.edu Education.mil Military.ph Country Domain Search Operators - use search operators and other punctuation to get optimize search AND & OR Operator - For conditional searching - Search result must agree on the given condition a. AND: narrows the search by retrieving only records contain both terms Tubig Marka ni Romero from Noether ahihi Lesson 5: Applied Productivity Tools with Rendering - process where the color, shade, Advanced Application Techniques shadows, and other effects are added into the basic animation by an animation software Mail Merge and label Generation - creating personalized letters and pre-addressed envelopes for Storyboard - sequence of drawing, typically mass mailing; MS Word with some direction and dialogues, representing the shots planned for a movie or Custom Animation and Timing - visual effects used to television production animate objects in a presentation; MS Powerpoint Examples of Animation Software Applications Hyperlinking in Presentations - creating link or easier - Adobe Spark Video connections between documents or files; MS - Lego Movie Maker Powerpoint - Flipaclip - Pivot Animator Embedded Files and Data - files that are stored in - Adobe After Effects another file Advance and Complex Formulas and Computation - efficiently compute various data in a spreadsheet; MS Excel Animation - art of creating an optical illusion of moving pictures or texts Types of Animation Flipbook - oldest and most basic type; series of images that are created or drawn on paper; flipping of the papers to animate the drawn image Stop Motion Animation - uses real animations (clay, puppets, card boards, etc.); photographs are sequenced to create an animation of these materials 3D Computer Animation - most commonly used today; a 3D computer program is used to create character and movements Motion Graphics - not character/story given; art of creatively moving graphic/text elements Parts of Animation Frame - single image within the complete animation sequence Frame per Seconds (FPS) - speed at which each frame is shown to the viewer Key Frame - important frames; usually the first & last frames of specific animation sequence Tweening - process where the content of the frames between keyframes are created automatically by an animation software Tubig Marka ni Romero from Noether ahihi Lesson 6: Basic Principles of Graphics and e. Split Complementary Layout Color Scheme - colors that include one 1. Contrast dominant color and - Helps draw attention to specific graphic the two colors directly elements adjacent to the - Mabe applied not only to colors, but also to dominant colors size and alignment complement - In graphics design, RGB is used - Colors do not need to be on opposite 2. Repetition segments (Bear, 3.H., 2014) - Process of repeating elements throughout a - When choosing the right color, use the design to give a unified looks (Smith, M., following color scheme that works together 2014) depending on what your graphic needs - Goes with consistency of your design on font, (Cartwright, B., 2015) font size, patterns, lines, colors a. Analogous Color 3. Proximity Scheme - formed by - Calls for related items to be grouped visually, pairing one main creating less clutter and making for a more color with the two organized layout (Lazaris, L., 2010) colors directly next to it on the color a. When there are several elements, add white wheel; good for space; white space can also mean empty designing images space rather than infographics or bar charts YES NO b. Monochromatic Color Scheme - colors with various shades and tints of one hue in the color wheel c. Triadic Color Scheme - colors that are b. Related items should be placed near to each equally placed in other lines around the color wheel; great in charts YES d. Complementary Color Scheme - colors directly across from each other on the color wheel and NO relevant tints of those colors; provides the greatest amount of color contrast; similar to Triadic; bad for background and text combinations Tubig Marka ni Romero from Noether ahihi Lesson 7: Principles of Visual Message and Lesson 8: Online Formats for Images and Text Design Using Infographics Image File Formats Information Graphics or Infographics Raster-Based Files - produced when scanning - Used to represent information, statistical data, or photographing an object; compiled using or knowledge in a graphical manner, usually pixels containing unique color and tonal info done in a creative way to attract the viewer’s that come together to create and image; can’t attention be scaled without distortion - Makes complex data become more visually appealing Common Types of Raster-Based File Formats - Effective infographic grabs your attention and a. JPEG (Joint Photographics Experts Group) - keeps it just long enough to deliver an commonly used method of lossy compression important message or teach you important info for digital images; good for photographic images, images for uploading on the internet, Principles in Creating Infographics or sending through email Be Unique - design something memorable and b. GIF (Graphic interchange Format) - lossless engaging that stands out; add a creative twist format for image files that supports both to familiar elements to capture attention animated and static images c. PNG (Portable Network Graphic) - supports Keep It Simple - avoid clutter and too much lossless data compression detail; make your infographic easy to d. TIFF (Tagged Image File Format) - file format understand at a glance so people don’t lose for storing images (like photographs & line art); interest file size can be huge; commonly used when sending images to be included on printed Be Creative and Bold - highlight your main books, brochures, or magazines message boldly and creatively; use unique e. BMP (Bitmap) - standard format used by design elements to grab attention quickly Windows to store device-independent and application-independent images Less is More - use minimal text for a bigger impact; a strong image or word can draw Vector Graphics - created from mathematical attention and convey your message effectively formulas used to define lines, shapes, and curves; edited in draw programs; shapes can The Fortune is in the Forwarding - ensure your be edited by moving points (nodes = drawing infographic is easy to share with a simple click; points); resolution independent this helps it spread and reach a larger audience Common Types of Vector-Based File Formats a. DXF (Drawing Interchange Format) - Commonly Used Types of Charts commonly used in computer-aided design - Pie Charts, Bar Graphs, Column Graphs, Line software programs such as those used by Charts engineers or architects b. EPS (Encapsulated PostScript) - made up of Importance of Infographics lines and curves rather than pixels; ideal for logos, illustrations and other types of graphics Easily catch your audience Increase your brand attention awareness that need to be resized without losing quality c. SHP (Shapefiles) - uses vector coordinates Make your content really Increase your search and attribute information for features viral marketing results d. SVG (Scalable Vector Graphics) - an XML-based vector image format for defining Position you as an expert Portable and easily embeddable two-dimensional graphics, having support for interactivity and animation Make your content more Expand beyond digital e. AI (Adobe Illustrator File) - industry standard, understandable marketing used by developers for vector graphics; used Increase your subscribers and followers to create, save, and archive original artwork Tubig Marka ni Romero from Noether ahihi Text File Formats Lesson 9: Basic Image Manipulation using - Smaller than other file formats even containing Offline or Open-Source Software the same text data - Take up less space in the system and very Photo Editing & Designing Tools - allows you to easy to convert and store manipulate or edit images, apply effects, filters, add - One of the most basic file types and most frame, crop, add text. Change background color, make widely used file formats on computers a photo collage, and photo albums that you would like to do in ann image Common Types of Text File formats RTF (Rich Text Format) - supported by a Usable Platform and Application variety of applications and saved with 1. Picasa formatting instructions - A discontinued photo organizer and editor PDF (Portable Document Format) - contains created in 2002 by Lifescape, later owned by and image of the page (text and graphics); Google; automatically finds photos on your widely used for read-only file sharing; Adobe PC, lets you edit and organize them, and Acrobat = most common popular PDF file allows online photo sharing application.doc - file created by Microsoft Word (or similar 2. Paint.net programs) that contains formatted text, - Stylized as Paint.NET or paint.net; a freeware images, tables, charts, and more, all saved in raster graphics editor program for Microsoft one binary file Windows, developed on the.NET Framework.docx - updated Word file format that also includes text, tables, images, and charts, but 3. Google Sketch Up saves the data in separate files within a - 3D modeling program from Google that is compressed zip folder; commonly used for known for its ease of use; used for letters, resumes, and other documents architectural purposes as well as firms and.txt - used to store textual data; used to create games designs straightforward text documents with little to non formatting, making it one of the most 4. Autodesk Pixlr compatible and fundamental text file types - Autodesk has launched a desktop version of.msg - file created by Microsoft Outlook that Pixlr, offering features like stylize filters, double stores emails, contacts, appointments, or exposure, and Influence Masks for editing and tasks, including all related information and creating photo-based artworks attachments (MSG file) 5. Adobe Photoshop - Developed and manufactured by Adobe System Inc.; considered one of the leaders in photo editing software; allows users to manipulate, crop, resize, and correct color on digital photos 6. GIMP - GNU Image manipulation Program; a free and open-source raster graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks Tubig Marka ni Romero from Noether ahihi Lesson 10: Basic Techniques of Image Lesson 12: Uploading, Sharing, and image Manipulation Hosting Platforms Various Ways to Manipulate Images Image Hosting Service - allows you to upload images - Resizing to an Internet website - Color Adjustment - Brightness & Contrast 1. Google Photos - allows you to edit your - Combined text & Photos photos, organize, and share your photos - Cropping online even with non-Google Photos users - Balance 2. Flickr - allows you to edit your photos ,create - Combined Photos albums, organize photos to use for social - Added Effects networking and photo sharing 3. Dropbox - free cloud storage provider that you Basic Techniques of Image Manipulation can use to store photos in different file formats 1. Background Color - you can change the background if it does not match the image or Cloud Storage - a service where data is remotely the totality of the presentation; can also add maintained, managed, and backed up; allows the effects to the background users to store files online, so that they can access 2. Multiple Images - you can combine multiple them at any location via the internet images to make a point or use to highlight your message 4. Photobucket - a media storage site that allows 3. Shadow - using shadow effect will make the members to upload and video to personal image realistic account and share it with others 4. Proportion - when combining images, resize 5. 500px the image to make it proportionate and 6. ImageShack realistic 7. Imgur 5. Blending Color - you can use color blending to match the background with other elements in the page 6. Emphasis - focal point to a page that will attract viewers; must be sharp, big, and most vibrant in your design Lesson 11: Combining Text, Graphics, and Images Combining Text, Graphics, and Images 1. Transparent Shapes - add simple shapes with a slight transparency behind your text to clearly see the text you want to emphasize 2. Font & Shapes - should complement each other; use rounded shapes with rounded fonts and sharp shapes with sharp fonts 3. Text & Background - should be aligned to have an organized look; align text with shapes or geometric figures in the image 4. Clean & Clear Background - use a clean and clear background for the message to be readable; background should not washout your message Tubig Marka ni Romero from Noether ahihi Lesson 13: Google Sketch-Up Lesson 14: Creating Scientific Figure Using GIMP Sketch Up - allows participants to visualize spaces in three dimensions; enables you to draw using a familiar OCICB Bioinformatics and Computational Biosciences pencil and paper paradigm in a software context Branch - “BCBB” Objectives - Group of 30 - Transform 2D geometry in a 3D environment - Free services for NIAID - Create a model, step-by-step - Bioinformatics software developers - Create surfaces from lines - Computational biologists - Utilize the push-pull tool - Project management & analysis professionals - Maintain coplanar geometry - Apply materials GIMP - Import component models from 3D warehouse - GNU Image Manipulation program (v.2.8) - View a model in 3D - Free alternative to Adobe Photoshop - Open source Select (Space Bar) - isolates all the object you - Supported platforms: GNU/Linux (i386, PPC) click on included microsoft Windows (XP, Vista, 7), Line (“L” key) - used to create walls, floor, Mac OS X, Sun OpenSolaris, FreeBSD ceilings, and more Rectangle (“R” key) GIMP uses Circle (“C” key) Simple paint program Expert quality photo Arc (“A” key) retouching Push/Pull (“P” key) - pull faces to increase volume; great when you want to erect Online batch processing Mass production image Move (“M” key) - move and copy system renderer Rotate (“Q” key) Image format converter Expandable and extensible Offset (“F” key) - make an exact copy of a face, inside or outside of that face; Designed to be augmented Advanced scripting automatically replicates the exact ratio of your with plug-ins and interface extensions master line Orbit (“O” key) - changes the camera angle Pan (“H” key) - moves the camera up and Features and Capabilities down or side-to-side A variety of painting tools: Unlimited image size based Zoom (“Z” key) brushes, pencil, airbrush, on available disk space Dimensions cloning, etc Protractor - take angled measurement of an High-quality anti-aliasing Full support for object with sub-pixel sampling transparency with Alpha VCB (Value Control Box) - contains channels dimensions/measurements of lines and faces; Layers and channels for Advanced scripting and shows you the measurement of a line as you advanced editing. multiple undo/redo options click from point A to B; or you can type in the Procedural database for exact measurement directly scripting and automation ESC key - select this key whenever you have Transformation tools: Supports many file formats completed a line or to quickly exit out of the rotate, scale, shear, flip like GIF, JPEG, PNG, PDF, tape measure and rotate tools and more Make Component - combines items to make an element of your design; useful for creating Selection tools: rectangle, Plug-ins for adding new file ellipse, freehand, and more formats and effects windows, doors, pieces of furniture Eraser (“E” key) - deletes undesirable items Tape Measure (“T” key) - measures lines and faces; also able to create construction lines Paint Bucket (“P” key) - select a fill color for your walls from a materials pop up box Tubig Marka ni Romero from Noether ahihi Lesson 15: Nature and Purposes of Online Platforms and Application Wix - web creation tool that lets you choose a website template, customize, and publish it online instantly; Online Platform - an online marketplace that places requires no coding skills as it provides a drag n drop one party in touch with others, such as buyers and web sites builder sellers Zamzar - allows registered users to store and manage Nature of Online Platforms - introduced wherein converted files; users of Zamzar = can convert big files categories based from the services that they provide up to one GB Presentation and Visualization - allows you to present Google Maps - web-based service that provides and share presentations, infographics, and videos with detailed info about geographical regions and sites other people around the world; offers street views Cloud Computing - internet-based computing in which large groups of remote server are networked so as to aIDlow sharing of data-processing, centralized data storage, and online access to computer services or resources Social Media - websites and other online means of communication that are used by large groups of people to share info and to develop social and professional contacts Web Page Creation - lets you build a web page that includes colors, text, images, and often contain links to media such as video and audio File Management - allows you to convert and manage files and images, videos, documents, audio, and more to others format without downloading software tool Mapping - provides detailed info about geographical regions and sites around the world Slide Share - multi-purpose web working tool; you can share your presentations to other people; allows for easy content sharing via email, social bookmarking, and embedding on blogs Google Drive - cloud storage service by Google; allows users to backup files in the cloud, share files with collaborators, and access them anywhere; documents, spreadsheets, presentations, etc. Facebook - one of the most popular social networking sites that allows users to create profiles, upload photos and video, share links, send messages and keep in touch with friend, family, and colleagues Tubig Marka ni Romero from Noether ahihi Lesson 16: Basic Web Design Principles and 5. Simplify Elements - Use a simple design with minimal animations - Keep the content simple - Set aside personal preferences for - Maintain a consistent look and feel across all user-centric design the web pages - Understand user's needs and expectations - Effective web design is judged by users, not 6. Grid Based Layout owners - Organize content using a grid structure for - Usability is not just about form but also alignment and balance function - Keep the design clean and aesthetically - Poorly designed websites often have pleasing suboptimal Google Analytics metrics - Understanding what makes good web design 7. Load Time is crucial - Fast loading times are crucial; visitors leave if it takes too long Basic Web Design Principles - guidelines for layouts - Optimize images, combine code, and and user interactions; influenced by human-computer compress files to speed up loading interaction, graphic design, and color theory; builds trust, guides visitors, balances form and function Basic Web Design Elements - process of creating websites; encompasses several different aspects 1. Visual Language (webpage layout, content production, graphic design); - Use a consistent template and color scheme layout and appearance of the elements within a - Contrast text and background where you want webpage are typically defined using CSS attention - Avoid extreme font sizes and too many fonts 1. Navigation - Use consistent font styles for similar items - Website should be easy to navigate - Highlight important links or menus with color - Users should always know their location on - Use high-quality images and apply the rule of the site and easily find their desired page thirds - Menus should be accessible from any page 2. Balance 2. Visual Design - Distribute elements evenly on the page - Use scrolling text, animations, and flash - Align text and images properly for consistency sparingly for emphasis - Place important info at the top - Establish trust and professionalism quickly - Size buttons based on their importance - You have just 1/10th of a second to impress - Group similar items by shape, color, or visitors shading - Create patterns for easier navigation and 3. Content understanding - Backbone of your website - Website text should be informative, easy to 3. Paradox of Choice read, and concise - Fewer choices make decisions - The reason most visitors are seeking from easier—eliminate unnecessary designs your website - Focus on user needs and design for multi-user, multi-screen, and multi-device 4. Web Friendly contexts - The site must work across all major browsers - Web designers should use meta tags, alt tags, 4. Focus on Content and be skilled in SEO (Search Engine - Match content to the webpage’s purpose Optimization) - Spell check, organize, and clearly deliver content 5. Color Scheme - Include images, not just text - Color and fonts influence visitors' opinions - Keep content updated - Consider your brand, industry, and target audience when choosing colors - Narrow down from millions of hues to a focused color scheme Tubig Marka ni Romero from Noether ahihi  6. Typography Lesson 17: Web Page Design Using Templates - Choose fonts based on industry and audience and Online WYSIWYG Platforms - Stick with readable fonts (at least 16px) and limit to three typefaces Website or Web Template - pre-designed web page or - Use complementary fonts for headings and set of HTML webpages that anyone can use to accents “plug-in” their own text content and images; usually built with HTML; allows everyone to setup a website 7. Turnaround without hiring a professional web developer/designer - Delays in website completion can hurt your business. HTML - plain text code language that is used to allow - Quick turnaround times may cost more, but web browsers to render web pages as designed delays could lead to lost business and value Types of Web Templates Self contained ZIP Part of a proprietary web builder file downloads interface Included with an Responsive, adaptive, or static in HTML software design or configured specifically editing program in mobile What Can Web Include Text Shopping carts jQuery and CSS3 (.jpg), (.png), or (gif) Animation images Contact forms Video players Dynamic image galleries PDF download links page and slideshows Types of Mobile Web Templates Responsive Mobile and mobile optimized Full website with mobile Mobile upgrade (for older version (adaptive) websites) WYSIWYG (What You See Is What You Get) - It allows developers to see the final result while creating the interface or document - Unlike traditional editors, it doesn't require entering descriptive codes to view results - The first true WYSIWYG editor was a word processor called Bravo, created by Charles Simonyi Best WYSIWYG Platforms 1. Cloud LGS - focuses on mobile-friendly website building; creates responsive websites with tools for entrepreneurs to grow their business via mobile 2. WordPress - popular among web professionals; excellent for creating websites and blogs with customizable options Tubig Marka ni Romero from Noether ahihi  3. Wix - strong contender in WYSIWYG web Lesson 18: Online Platforms builders; offers impressive template designs and flexible customization; easy insertion of Presentation/Visualization - communicates info clearly web animations and efficiently via statistical graphics, plots, and infographics 4. Squarespace - known for aesthetically pleasing, minimalist templates; all sites are Examples of Presentation/Visualization mobile responsive Prezi - helping to reinvent the art of presentation 5. Weebly - similar to Wix, offers easy website Zoho - online project management app that creation; allows template changes after helps you plan your work and keep track of selection; limited customizations but faster your progress website loading Slideshare - platform for quickly building from concise, expert content; community for sharing Commonly used HTML Editors presentations in PowerPoint, PDF, or Dreamweaver - incorporates many advanced OpenOffice formats features (accessibility support, dynamic MindMeister - online mind-mapping tool that language support, code editing, XML support, lets you capture, develop, and share ideas growing Javascript library) visually FrontPage - WYSIWYG editor with similar Web Page Creation - encompasses a number of toolbars/interface to other MS Programs important elements including color, layout, and overall graphical appearance Advantages Quick time development Little knowledge of HTML Examples of Web Page Creation needed for basic pages Wix - cloud-based web development platform that allows users to create HTML5 websites Works much like any Controls file structure and mobile sites through the use of their online popular word processor within the program drag and drop tools Weebly - web-hosting service featuring a Disadvantages drag-and-drop website builder Many have browser bias Many still not well accomplished at writing Blogs - discussion or informational website published dynamic pages (ASP, PHP, on the web consisting of discrete, often informal JSP, ColdFusion) diary-style text entries (posts) Complex pages can be easily be composed that do not follow standards and therefore not cross platform/cross Blogger - person who regularly writes material for a browser compatible blog Tubig Marka ni Romero from Noether ahihi Lesson 19: Google Drive and Dropbox Lesson 20: Social Media Digital Literacy & Professionalism Introduction - This workshop is one of a series from BTC - Websites and applications Library made by possible by a Digital Literacy - Enable user to create and share content & Professionalism grant from the Washington - Collective of online communications channels State Library through the Institute of Museum - Community-based input, interaction, and Library Services content-sharing, and collaboration - Computer mediated technologies Digital Literacy - ability to find, evaluate, utilize, share, - Facilitate the creation and sharing of info, and create content using information technologies and ideas, career interests, and other forms of the INternet expression - Social = interaction, Media = instrument of Cloud - storing and accessing data and programs over communication the Internet instead of your computer’s hard drive Access and Uniqueness Google Drive - cloud-based storage platform; released - Access via web-based technologies on in 2012 to replace Google Docs; create and edit desktop, laptops, and smartphones or tablets documents, images, and other files; collaborate and - Differ from traditional electronic media and share paper-based media - TV broadcasting in many ways (quality, What You Can Do with Google Drive frequency, interactivity, usability, immediacy, - Store files, documents, images (15GB) permanence) - Create and edit stuff - Real-time collaboration Popular Social Media Websites - Share folders, files, & other items Facebook - Social networking website; free - Use add-ons and extension to make your life service, founded in 2004 by Mark Zuckerberg; easier Mission: empower people to share and connect globally Dropbox - personal cloud storage service that can be Whatsapp - freeware, cross-platform used for sharing and collaboration messaging and voice service; supports text, voice/video calls, media sharing, and location - Works on all desktop systems and mobile sharing; founded by ex-Yahoo employees devices Brian Acton and Jan Koum in Silicon Valley - Uses a desktop client, mobile application, and Instagram - application for sharing photos and mobile devices videos publicly or privately; created by Kevin - Download documents to edit Systrom and Mike Krieger, launched in - 2GB free storage (Up to 18GB) October 2010 for iOS; android version released in April 2012 Twitter - Online news and social networking service for posting "tweets"; created in March 2006 by Jack Dorsey, Noah Glass, Biz Stone, and Evan Williams; launched in July 2006; known as "the SMS of the Internet" Snapchat WeChat Google+ Tubig Marka ni Romero from Noether ahihi Lesson 21: Basic Web Page Creation Tips in Using the Editor - The home page is shown by default WYSIWYG (What You See Is What You Get) - To navigate to another page, click the page - Whatever you type, insert, draw, place, title in the site navigator rearrange, and everything you do on page is - The site navigator contains links to different what the audience will see pages of your website - Shows and prints whatever you type on the - The available navigator depends on the screen template you selected Other Ways to Create a Website Inserting a Page - HTML is used to create pages, and CSS is 1. However your mouse pointer over the site used to design them navigator, the Edit navigation button will - If you know coding, it can help you when using appear WYSIWYG editors 2. Click on the Edit Navigation button, click on - WYSIWYG editors are designed for people Add a New Page without coding skills 3. Rearrange pages using the tools on the right of the page title Creating a Website Using Microsoft Word 4. Click Save when done 1. Open MS Word 2. Type anything you like on the page Editing Elements 3. Click File> Save As> Browse Move Element Up - move element up by one 4. On the Save As dialog box, locate your level activities folder and create a new folder Move Element Down - move the element lower “Sample Web Page” by one level 5. Specify the filename “Sample Web Page” Delete Element - remove the element 6. On the Save As type, select “Web page (*.htm; Copy Element - copy the element *.html)” Drag Tool - click and drag the element to avoid 7. Click the Change Title button part of the page 8. Input the title, then click OK the Save 9. Check the files on your sample Web page 1. Header - clicking will allow you to edit the text folder; you will see a new folder generated and change its font size including your.html file 2. Image - several options will appear; allows you 10. Open the sample Web page.htm file and you to upload an image directly from your will see that you just created a web page using computer or Dropbox account MS Word 3. Paragraph - you will be treated more options similar to using a word processor Creating Your Own Website Using Jimbo - A web hosting service; offres free, Adding Elements professional, and business web hosting 1. Hover the mouse pointer over the top/bottom service; has an iOS and Android app of an existing element until the Add Element button appears 1. Create an account on Jimdo and click Create 2. Select the visual element you want to add Your Website 3. Edit the element to your liking then click Save 2. Pick any template that you want 3. Choose a URL for your website, enter your Settings email and password Account Settings - edit your password, email, 4. Your website will be generated and soon you and personal profile will end up in the site’s WYSIWYG editor Website Options - change site title, footer, 5. Editor is pretty easy to use, center shows the storage, privacy policy, and favicon preview of your website, design tool are Mobile Settings - optimize your page for located on the right mobile devices Email and Domain Management - premium feature for managing email accounts Tubig Marka ni Romero from Noether ahihi  Store Settings - manage items you sell on your website Lesson 23: Google Maps, Wikimapia SEO - premium feature to improve your site's search engine ranking Google Maps - offers two main ways to trace our cell Apps - manage settings for embedded apps phones with GPS and all the services are free and like Dropbox, QR Codes, Google Analytics, safe and Twitter Jimdo Settings - remove Jimdo branding Google Latitude - a new feature of Google Maps to (premium feature) and check for updates offer location-aware service; see the exact location of people Driving (Google Maps) - helps us reach our destination Lesson 22: File Management in the most efficient way - System that allows you to organize and keep Google Place - focus on local searches makes it easier track of files for customers to find you - An operating system has its own file management but you can also have a Wikimapia separate file management system if you want Mapping Tools Your Username more functions Category Search Interface Language Examples of File Management 1. Zamzar - online file conversion, covering a Principles of Wikimapia wide range of different images, documents, Share your knowledge Your Username music, video, and compression formats 2. Word2pdf - free online tool that converts Word Be civil Be polite documents to PDF 3. Dropbox - allows you to upload and store files Don’t ignore questions Don’t make misrepresentations through a client software; sharing links and other admin functions can be done directly Forgive and forget Argue facts, not from the right-click menu in Explorer, but the personalities only way to share with predefined lists of Don’t enforce existent rules Work towards agreements people is through your list of Facebook friends 4. SkyDrive - part of Microsoft Live Family which Recognize your own If another disagrees with provides client apps that sync to and from biases, and keep them in your edit, provide good folders on a client machine; files can also be check reasons why you think that mass-distributed easily to users in your it is appropriate Hotmail contact lists Concede a point when you Be prepared to apologize. have no response to it, or In animated discussions, admit when you disagree we often say things we based on intuition or taste later wish we had not. Say so! Tubig Marka ni Romero from Noether ahihi Lesson 24: Collaborative ICT Development Lesson 25: Online Collaborative Tools Effectively Web Portal - a website that contains info from different sources and places them in one location in a uniform Classic Project Management Stages way Project Initiation Planning Online Collaborative Tools - helps you and your group Execution Project Completion “go the distance” and work as if you already have your own office even if you are not physically together Transition to Operation Examples Postmodern Project Management Yahoo - offers a web portal where nes, email, Enthusiasm Disappointment weather, etc. found in one page Facebook - creating a group page that will Fear Panic allow people in your group to communicate your ideas Search for the Guilty Punishment of the Innocent WordPress - allows you to have multiple Awards of those not involved in the project contributors for a single blog Google Drive & Microsoft Office Online - allows multiple people to work on different Online Project Stages office files and even have their own group’s Find Resources Evaluate and Organize cloud storage Resources Microsoft’s Yammer - offers companies to Develop a Narrative Create a Useful Tool for have their own social network that allows Around Resources Others Using Narrative and sharing and managing content Resources Trello - offers an online to-do checklist for your entire team Collaborative Tools Resource Creation vs. Discovery Deductive vs. Inductive - Bookmarking, Social Bookmarking, Web Graffiti Social Bookmarking - practice of saving bookmarks to a public website and ‘tagging’ them with keywords; can be kept private/shared Collaborate - gather web resources; share with the team; easily move to other collaborative tools Organization (Tagging) - user describes item; many tags by many users; search via tags; tag link many pages/images Delicious - began in 2003; best known; largest community; minimalist; unrefined CiteULike - tags papers, not websites; mainly invisible web; primarily medical & biological; humanities, social sciences, & information sciences too; tags browsable and searchable; RSS feeds by author/topic; scholarly Ma.gnolia - search/browse bookmarks as a tag list or tag cloud; ability to rate bookmarks; widget to link from browser; tutorials, FAQ, and wiki for support; contacts, groups, thank you’s, and discussions Tubig Marka ni Romero from Noether ahihi Diigo - web graffiti Wiki as 3rd Stage Collaboration Tool Blog = strictly chronological Allows a linear path thru Google Bookmarks - super minimalist resources Blogs as 2nd Stage Collaborative Tools Allows hyperlinked path Plan before you produce Alternative to Asynchronous Supports Consider a sitemap vs. site Allows different levels of Email Communication Hyperlinks index control Automatic Date Multiple Users WYSIWYG Feature Interfaces Wiki Considerations Useful for Synthesizing Resources Hosted or In Editorial Control Intended House Audience Need to Update & Tracking Changes Ease of Use Migrate Content & Managing Passwords Confidentiality Wiki as Tool vs. Business Model Open to World Locked Down (Small group, Vetted) Secret Wikis Blog & Wiki = Bliki Wex Standards Contributors Screened Subject Matter Experts Desired Not as Self-referential as Extensive Linking to Wikipedia External Authority Legal Causes & Wikis Peer to Patent: Reforming Anti-Lessig Reader Wiki: the Patent System Criticizing ideas of Prof. Facebook Groups - 1st & 2nd Stage Lessig Convenient Hyperlink Blur Work or World Citizenship Wiki Network Against Violence Private Property Multiple Invitation Only Administrators Google Wave - 2nd or 3rd Stage Wiki Like Tool Still in Beta LinkedIn Groups - 2nd & 3rd Stage Invitation ONly Email Me for Invite Closed More Professional News Feed Groups Network (Sunsets, Not Simultaneous Collaboration Tool in Search of a Mission Archival) Email Multiple Updates Administrators Lots of Wiki Choices - PBWorks - Google Sites Wiki Wiki Wiki! - Wetpaint Wiki = Hawaiian for quick Wikipedia (best - Wiki Farms known; lightning rod Collaborative Website for criticism) Other models exist Tubig Marka ni Romero from Noether ahihi Measure Twice, Cut Once Lesson 26: Project Management for ICT Project Initiation Planning Content Execution Project Completion - Plays a key role in administration of projects in organization today Transition to Operation - Ensures that projects are being conducted accordingly and services are delivered JurisPedia respectively inline with the progress of - an International Legal Wiki information technology - Multilingual & Multicultural platform - Online legal encyclopedia covering global laws Requires new management method which is more - Allows contributions in multiple languages coordination of: - Reflects diverse legal perspectives Persons Rapid Information Strong Flexibility - Collaborative and inclusive resource Transfer Capital Real Time Information Process if Project Implementation Objects Make Decisions rapidly Quickly ICT Project Managers Project Managers - work with project sponsors, the project team, and their people involved in a project to meet project goals Program - group of related projects managed in a coordinated way to obtain benefits and control not available from managing individually (PMBk Guide, Fourth Edition, 2008, p. 9) Project Management - Application of knowledge, skills, tools, and techniques to project activities to meet project requirements - Discipline of planning, organizing, securing, managing, leading, and controlling resources to achieve specific goals Knowledge Areas - key competencies that project managers must develop Nine Project Management Knowledge Areas Four Core Knowledge Areas - specific project objectives - Scope, Time, Cost, Quality Four facilitating Knowledge Areas - means through which the project objectives are achieved - Human resources, Communication, Risk Management, Procurement Management One Knowledge Area - affects and is affected by all of the other knowledge areas - Project Integration Management Project Success - Project met scope, time, and cost goals - Project satisfied the customer/sponsor Tubig Marka ni Romero from Noether ahihi  - Result of the project met its main objective Lesson 27: Curating Existing Content for Use such as making or saving a certain amount of on the Web money providing good return on investment or simply making the sponsor happy Content Curation - Act of sorting through large amounts of Stakeholders content on the web and presenting the best - People involved in/or affected by project posts in a meaningful and organized way activities - Includes sifting, sorting, arranging, and placing - Includes: Project Sponsor, Project Manager, found content into specific themes the publish Project team, Support Staff, Customers, that information Users, Suppliers, & Opponent to the Project - Doesn’t include creating new content - Act of discovering, compiling, and sharing Triple Constraint of Project Management existing content - Successful project management means - Important tactic for any marketing department meeting all three goals: Scope, Time, & to maintain a successful online presence Cost-Satisfying the Project Sponsors Curators - services or people that implement content curation Three Types of Online Content 1. Creation - like planting seeds from scratch 2. Aggregation - like simply gathering seeds together 3. Curation - sorting seeds out, putting them into context, framing them, so it makes sense Five models of Content Curation (Bhargava, 2017) 1. Aggregation - act of curating the most relevant info about a particular topic into a single location 2. Distillation - act of curating info into a more simplistic format where only the most important/relevant ideas are shared 3. Elevation - curation with a mission of identifying a larger trend or insight from smaller daily musings posted online 4. Mashup - unique cursed just a position where merging existing content is used to create a new point of view 5. Chronology - bring together historical info organized based on time to show an evolving understanding of a particular topic Tubig Marka ni Romero from Noether ahihi Benefits of Content Curation (Robin Good, 2018) Lesson 28: Google Docs and Office 365 Information - Separates signal from Management noise-sense-making Microsoft Office (2013) - Gives way to creation of useful Word - word processor; easy to use; used a lot info resources for business and school use - Helps in detecting patterns & trends Excel -makes spreadsheets to organize info; - Aids in comparing & evaluating create graphs of any sort; solve equations by - Summarizes, synthesizes, simply inputting formulas distills complex info Publisher - make posters, format pictures, etc.; Knowledge & - Create knowledge easy interface; align pictures to exact places Culture - Builds (P2P) collective with scales intelligence OneNote - make quick notes in discussions; - Preserves our cultural heritage - Ethical & socially valuable organize ideas into notebooks insert reminders practice from Outlook with an existing Outlook account; easy to copy and paste assignments into Search & - Augments content discovery OneNote Discovery - Supports emergence of independent authors and Powerpoint - easily makes presentations; voices insert ables, shapes, and pictures; time slides - Complements online search and presentation; change from viewer’s to - Saves people’s time presenter’s view to see notes made Education & - Effective learning approach Learning - Helps to stay informed and PROS CONS up-to-date - Provides context explanation - Completely - New interface is - Develops critical thinking integrated with overly simplistic - Forces one to be thorough SkyDrive (cloud) - Microsoft claims - Can edit PDF files Powerpoint can have Reputation & - Increases credibility using Word have imbedded Visibility (SEO) - Builds authority, reputation - New Read Mode videos but many - Increases online visibility (SEO) allows users to read people find this documents from the difficult to do Relationships - Helps build relationships internet safely - A lot of people have & Community - Critical in building communities (option to edit as the problem where of interest well) they can’t put - Lots of people use pictures somewhere this program so it’s or start typing easier to send files somewhere to other Google Docs Google Documents - very useful because you can edit docs from different softwares; connected directly to gmail so you can work together on the same doc with gmail Google Sheets - exactly like Excel except it’s free; easily collaborate with peers Google Slides - much like powerpoint but there are many more templates and you can add man more of your own; can embed and add in videos more easily Google Forms (Extension to Sheets) - very easy to make surveys on this; much more easier to use than Word and is better use for surveys; easy to use and free to use Tubig Marka ni Romero from Noether ahihi  Apache Open Office PROS CONS - Does what Microsoft Office does in terms of - Free - Online programs - Has all features of - There have been - Easy to use Microsoft Office many privacy - Very easy to learn hacks & info leaks - Quick start-up - Email files directly - Not many people - Low use of RAM from the site know how to use or know about it PROS CONS Microsoft Office 365 - Free download - Compatibility with - Contains ⅘ major programs of MS Office 2013 - Quick help for MS Office bugs found by Formats must be (Powerpoint, Word, Excel, OneNote) users fixed (formatting - Contains Excel Survey - Quick start-up losses) - Work on projects/assignments simultaneously - Low use of RAM - Interface is clunky with peers (Random Access (full) Memory) - Spell checker isn’t - Built in OneDrive (storage) and Outlook very good (built-in email) - Easy to share files with peers PROS CONS - Easy & simple to use - Requires WIFI to - Competitively priced function - Everything is stored - Data privacy on a cloud - Software - Mobility boundaries & - Collaboration & limits Communication - Less flexible - Email hosted in the infrastructure cloud - Subscription based iWork Pages - typing processor produced by Apple Inc.; difficult to use for new people; edit very small details to perfection Keynote - used to make professional presentations; variety of different animations to insert slides Numbers - starts you off with a blank canvas to “express creativity”; pre built templates to start you off; compatible with Microsoft Excel files PROS CONS - Very useful for school - Difficult for new purposes