I worked on the final presentation and the topic research. The following are my notes.

Human Machine Interface(HMI)=an interface that allos humans to interact with the machine. It provides a visual overview of the automated system status and direct control of its operation. ex. touch display, push button, moble device

Why is HMI important? Displays data frm machines to humans. optimizes an industrial process by digitizing the centralizing data for the viewer.

SCADA=runs teh world's vario9us ciritical infrastructure sectors.

• HMI is one of the ways to get in to the SCADA

• runs on old Windows operating systems (why so bad?→hacker like windows, because they don't need complex tools to attack))

• if hacked, the "treat actors" can get info for

• facility layout

• device settings(to use for later attacks)

• critical thresholds

• SCADA software vulnerabilities

• memory corruption 20%

• credential management 19%

• lack of authentication/authorization and insecure defaults 23%

• code injection 9%

• big chunk of other areas 30%

• the average time it takea a SCADA/HMI vendor to release a patch once a bug has been disclosed can go up to 150 day

I did a little research on social media phishing. It was interesting to read about the different types of phishing, how they work, and what they are meant to steal from you(personal info, passwords, access etc).

EXAMPLES:

• click on this link too..

• avoid financial loss

• for a special offer

• the links take us to a website that requests for confidential details/or cause a device to be infecter malware

• asks you to make a phone call (asking for confidential details/ premium rate, costs a lot of $ for the call)

• impersonation

• pretending to be someone else to damage "that person's" reputations (ex.pretending to be a celebrity to ruin his/her reputation)

• propagating attacks

• trick the users into logging into fake landing pages to steal info

• data dumps

• stolen data from the database

• data gathering

• they can collect data from YOU(from the SNS posts that you posted) to reset passwords or to get access

HOW IT WORKS

VOCAB

malware= software that is designed to disrupt, damage, or gain unauthorized access to a computer system

This week was the Olympics week and the second week of the sustainability challenge. I will be calculating the weekly results tomorrow, and will be sharing that with Mr.McKenna to share with the residential community. I have also started working on the survey to develop the models for typical energy usages by students. Since this upcoming Monday is formal dinner, my goal is to have the survey completed by next Monday to be filled out during dorm meeting/hall meetings.

This week was the first week of the sustainability challenge. The result was the following;

Carter -1%

Perry fiske -8%

Robertson +3%

As a community, we reuced energy usage by 193 kilowatts. The results will be shared on Monday dorm meetings.

I've focused on researching sustainability events and challenges in other schools. I found several examples in colleges and high schools. I also contacted Mr.Ford and Mr.McKenna to have a meeting on Monday afternoon next week to discuss possible inputs in dorm wars. Here are some of the notes from the research.

energy challenge at dickinson

https://www.dickinson.edu/info/20052/sustainability/2280/renewable_energy_and_conservation/3

national geographic video

https://www.youtube.com/watch?v=ndUQngCFpoM

TED-Ed

https://www.youtube.com/watch?v=RnvCbquYeIM

https://www.epa.gov/greenpower/college-and-university-challenge

Students like you video

https://youtu.be/IhfYMWWeii4

unplug the cords!

https://www.energizeschools.org/energy-competition.html

Energy, let's save it!

https://www.youtube.com/watch?v=1-g73ty9v04

My primary focus of this week was making the final presentation slides. I used beautifulai.com

and made 11 slides for a 5 minute presentation. I finished making the slides in class, so I will be practicing them over the weekend.

I continued practicing putting together what I learned from the tutorials. It has been challenging just getting used to the format and finding error and fixing them. I have been using my notes and the tutorials to do so. I have also looked at couple websites in which show more advanced tricks we can do with HTML. Here is an example of one. (I tried to use their code and change things around on my own.)

https://www.freelancer.com/articles/web-development/13-cool-tricks-for-html

HTML NOTES
<a> link

href= link destination

<img> image

<map> image-map, image with clickable areas (comes with coordinates to indicate where you want to be clickable)

<area> a clickable area inside an imaga map

<picture> a container for multiple image sources

src="____________" source (for images; make sure to add alt="__________")

width="___"

height="___"

<p> paragraph

<button> button

<ul> unordered list (bullet points)

<ol> ordered list (with numbers)

<br> break empty line NO </br>

style="______" color, font, size (include in <p>)

font-size:__px; or font-size:_____%;

color:_______;

background-color:_________;

border:_px solid COLOR NAME;

COLOR OPTIONS (Tomato, orange, dodgerblue, MediumSeaGreen, gray, slateBlue, violet, lightgray)

font-family:__________;

text-align:_____; (ex. center

COLOR INDICATION

rgb (red, green, blue)→(0,0,0)=black (255,255,255)=white

rgba(red, green, blue, alpha)

rrggbb(red, green, blue) →00=lowest value, ff=highest value

hsl value (hue, saturation, lightness)

hsla value (hue, saturation, lightness, alpha)

lang="___" language

title="____" (include in <p>, if you hover over the text, the value for title will be displayed)

<hr> horizontal rule, horizontal line across the page

<meta> meta data=information about HTML document, it is not displayed, includes document title, character set, styles, scripts(<head> element contains metadata

<q> quotation ("______")

<pre> preformatted text (with spaces)

<b> bold

<strong> important text

<i> Italix text

<em> emhasized text

<mark> marked text (highlighted)

<small> small text

<del> deleted text (line across teh text)

<ins> inserted text (underlined)

<sub> subscript

<sup> supscript

<blockquote cite="______LINK______">

<!-- →

CSS(cascading style sheets) (inline, internal, external)

(identify where) {

____________: _px COLOR;

____________: ___px;

}

padding(size of the border box)

margin(how far each texts are spread apart)

(making an exception) #p or p.ANYNAME works

LINK

<p><a href="___"> TEXT </a></p>

<h1 id="__"> TEXT </h1>

BACKGROUND (under STYLE)

background-image: url('____________');

background-repeat: ______________;

Background-attachment: __________;

background-size: ______;

TABLES

tr= row

th= header

td=data

<caption> (always after <table>)

border: _px COLOR → comes out as double line,

border-collapse: collapse; → single line border

padding: cell size

text-align: _____;

colspan= merging cells for COLOUMS

rowspan= merging cells for ROWS=

id="____" (ex.t01)→ gives the table a name: to add style later, refer it to as #t01 { AND ADD SPECIAL STYLES}

nth-child(odd/even) → for patterns

<table style="width:___">

<tr>

<th>______</th>

<th>______</th>

<th>______</th>

</tr>

<tr>

<td_______</td>

<td_______</td>

<td_______</td>

</tr>

LIST

<ul> list

<ol> ordered(/numbered) list

type="__"

1 numbered with numbers

A order with uppercase letters

a oder with lowercase letters

I order with upper roman numbers

i order with lowercase roman numbers

<li> each list item in a list

style=

list-style-type:______; (disc, circle, square, none)

start="__"

<dl>description list

<dt>the term

<dd>each item on the list

<div> container for other HTML elements (example: <div style="background-color:black;color:white;padding:20px;">)

<span> container for some text

<iframe> inline frame

INPUT FORM

<form></form>

<input type="text">

<input type="radio">

<input type="submit">

Ami Ibaramoto

Cyber Tech

Dr.Bill

Developing Sustainable Habits in the Dorms

The overall goal of this project is to encourage members of our residential life to adopt sustainable habits. To do so, I will be learning stats, data management, and coding to create an online visual representation for our resource usages.

Phase 1 - Learning the Tools: These tools will be essential when collecting and presenting data to the community.

Milestone 1: the Tracker

• Presents current water and electricity usage data in each dormitory (Carter, Robertson, Perry Fiske, and the Faculty Housings)

Milestone 2: the Server

• Provides tracked water/electricity usage (data points)

• The data points allow us to make a graph on EXCEL and numbers

Milestone 3: Mango

• tracking/graphing system

• automatically graphs rate and total usage

Milestone 4: HTML

• Learned basics of HTML. I am hoping to use HTML for the visual component of my project.

Milestone 5: New Tracking System

• Mr.McKenna is working on the new tracking system. I will be working with him to incorporate it more into residential life.

Phase 2 - Collect Data: I will be using the five tools mentioned in the previous section to obtain accurate data to create a visualization.

Milestone 1: Mango

• I learned that the tracking system is inconsistent in its because of its connection with electricity(the computer sometimes gets turned off).

• I've also looked at the data to find patterns in our water usages, to see where we are most likely to see improvements on

Milestone 2: The New Tracking System

• I'm hoping to learn and work with Mr.McKenna more to figure out how I can work with the new system.

Phase 3 - Create Internal Visualization: The visual for my project would be in a software form (which will most likely be a website). To create such, I will be following these steps.

Milestone 1: Plan

• talk to the adults involved in residential life and the sustainability project to get permission/figure out what I can do

Milestone 2: Create a visual (with HTML)

• learn HTML and other techniques

• make a website (or some form of an online visual)

• by creating a visual I hope to

• convert technical data/device into more every day/understandable elements

• encourage sustainable behaviors

Phase 4 - Final Products: My final project would likely include the following elements.

• The visual

• online visual (HTML or any other online products)

• Graphs

• Graph and data of the resources used in the residential community

• graph description and interpretation from it

• Logs

• recorded document of the progress(weekly updates)

HTML NOTES
<a> link

href= link destination

<img> image

<map> image-map, image with clickable areas (comes with coordinates to indicate where you want to be clickable)

<area> a clickable area inside an imaga map

<picture> a container for multiple image sources

src="____________" source (for images; make sure to add alt="__________")

width="___"

height="___"

<p> paragraph

<button> button

<ul> unordered list (bullet points)

<ol> ordered list (with numbers)

<br> break empty line NO </br>

style="______" color, font, size (include in <p>)

font-size:__px; or font-size:_____%;

color:_______;

background-color:_________;

boarder:_px solid COLOR NAME;

COLOR OPTIONS (Tomato, orange, dodgerblue, MediumSeaGreen, gray, slateBlue, violet, lightgray)

font-family:__________;

text-align:_____; (ex. center

COLOR INDICATION

rgb (red, green, blue)→(0,0,0)=black (255,255,255)=white

rgba(red, green, blue, alpha)

rrggbb(red, green, blue) →00=lowest value, ff=highest value

hsl value (hue, saturation, lightness)

hsla value (hue, saturation, lightness, alpha)

lang="___" language

title="____" (include in <p>, if you hover over the text, the value for title will be displayed)

<hr> horizontal rule, horizontal line across the page

<meta> meta data=information about HTML document, it is not displayed, includes document title, character set, styles, scripts(<head> element contains metadata

<q> quotation ("______")

<pre> preformatted text (with spaces)

<b> bold

<strong> important text

<i> Italix text

<em> emhasized text

<mark> marked text (highlighted)

<small> small text

<del> deleted text (line across teh text)

<ins> inserted text (underlined)

<sub> subscript

<sup> supscript

<blockquote cite="______LINK______">

<!-- →

CSS(cascading style sheets) (inline, internal, external)

(identify where) {

____________: _px COLOR;

____________: ___px;

}

padding(size of the border box)

margin(how far each texts are spread apart)

(making an exception) #p or p.ANYNAME works

LINK

<p><a href="___"> TEXT </a></p>

<h1 id="__"> TEXT </h1>

BACKGROUND (under STYLE)

background-image: url('____________');

background-repeat: ______________;

Background-attachment: __________;

background-size: ______;

TABLES

tr= row

th= header

td=data

<caption> (always after <table>)

boarder: _px COLOR → comes out as double line,

boarder-collapse: collapse; → single line boarder

padding: cell size

text-align: _____;

colspan= merging cells for COLOUMS

rowspan= merging cells for ROWS=

id="____" (ex.t01)→ gives the table a name: to add style later, refer it to as #t01 { AND ADD SPECIAL STYLES}

nth-child(odd/even) → for patterns

<table style="width:___">

<tr>

<th>______</th>

<th>______</th>

<th>______</th>

</tr>

<tr>

<td_______</td>

<td_______</td>

<td_______</td>

</tr>

LIST

<ul> list

<ol> ordered(/numbered) list

type="__"

1 numbered with numbers

A order with uppercase letters

a oder with lowercase letters

I order with upper roman numbers

i order with lowercase roman numbers

<li> each list item in a list

style=

list-style-type:______; (disc, circle, square, none)

start="__"

<dl>description list

<dt>the term

<dd>each item on the list

<div> container for other HTML elements (example: <div style="background-color:black;color:white;padding:20px;">)

<span> container for some text

<iframe> inline frame

HTML NOTES
<a> link

href= link destination

<img> image

src="____________" source

width="___"

height="___"

<p> paragraph

<button> button

<ul> unordered list (bullet points)

<ol> ordered list (with numbers)

<br> break empty line NO </br>

style="______" color, font, size (include in <p>)

font-size:__px; or font-size:_____%;

color:_______;

background-color:_________;

boarder:_px solid COLOR NAME;

COLOR OPTIONS (Tomato, orange, dodgerblue, MediumSeaGreen, gray, slateBlue, violet, lightgray)

font-family:__________;

text-align:_____; (ex. center

COLOR INDICATION

rgb (red, green, blue)→(0,0,0)=black (255,255,255)=white

rgba(red, green, blue, alpha)

rrggbb(red, green, blue) →00=lowest value, ff=highest value

hsl value (hue, saturation, lightness)

hsla value (hue, saturation, lightness, alpha)

lang="___" language

title="____" (include in <p>, if you hover over the text, the value for title will be displayed)

<hr> horizontal rule, horizontal line across the page

<meta> meta data=information about HTML document, it is not displayed, includes document title, character set, styles, scripts(<head> element contains metadata

<q> quotation ("______")

<pre> preformatted text (with spaces)

<b> bold

<strong> important text

<i> Italix text

<em> emhasized text

<mark> marked text (highlighted)

<small> small text

<del> deleted text (line across teh text)

<ins> inserted text (underlined)

<sub> subscript

<sup> supscript

<blockquote cite="______LINK______">

<!-- →

CSS(cascading style sheets) (inline, internal, external)

(identify where) {

____________: _px COLOR;

____________: ___px;

}

padding(size of the border box)

margin(how far each texts are spread apart)

(making an exception) #p or p.ANYNAME works

LINK

<p><a href="___"> TEXT </a></p>

<h1 id="__"> TEXT </h1>

We shared our presentation with the novel writing class. We created those presentation on "beautiful.ai." My slides were prepared for the presentaiton, hoever, I need to work on my presentation skills. Some of the feed-backs that I got included; making eye contacts, and speaking louder with more confidence in my voice.

I also started looking at w3school online tutorials to learn about how HTML works. Yoyo introduced me to sublime text and SubEthaEdit. I went through six tutorials this week. (HTML Introduction, Editors, basic, elements, attributes, and headings). I'm planning on continuing on learning about HTML on tutorials from w3school next week. Here is my notes from this week.

<a> link

href= link destination

<img> image

src="____________" source

width="___"

height="___"

<p> paragraph

<button> button

<ul> unordered list (bullet points)

<ol> ordered list (with numbers)

<br> break empty line NO </br>

style="______" color, font, size (include in <p>)

font-size:__px

lang="___" language

title="____" (include in <p>, if you hover over the text, the value for title will be displayed)

<hr> horizontal rule, horizontal line across the page

<meta> meta data=information about HTML document, it is not displayed, includes document title, character set, styles, scripts(<head> element contains metadata

About the proposal

My proposal is finished for now, however, I am only starting to research about sustainability and still need to talk to adults about teh resources available, so I will be adjusting it as I find out what is available. The goal right now is to talk to adults who are involved in the sustainability project to find out what the challenges are, and to come up with ideas in which I might be able to help.

What I want to accomplish

My big goal is to track and create a degital visual for how much resources we are using and the progress of the sustainability project. This is to help people visualize and see the data about our impact on the community.

8/26

talked to Mr.Mckenna about what I can do and what resources are accessible

XML- tracking water usage (just current total amount of water used)

Dorm water usage for each dorm( including dorm parents)

Carter 10.32.8.1

Perry fiske 10.12.8.1

Robertson 10.22.8.1

eGauge (IP adress= 10.20.8.1 )

→energy usage tracking system (with graphs by dates, weeks, and months)

currently available for Kohala Side of Robertson (girls + commons+ dorm parents)

will be installed in all 3 dorms in mid September and data will be available