-
Notifications
You must be signed in to change notification settings - Fork 0
/
formediapost3.html
170 lines (157 loc) · 9.93 KB
/
formediapost3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE HTML>
<html>
<head>
<title>Media Management</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>JuneDev</strong> <span>.com</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="careerHighlights.html">Career Highlights</a></li>
<li><a href="programmingPortfolio.html">Programming Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="codeprojects.html">Gallery</a></li>
</ul>
<ul class="actions stacked">
<li><a href="https://calendly.com/iamjunedev" class="button primary fit">Schedule Interview</a></li>
<li><a href="https://github.com/JuneDev5779/junedev5779.github.io" class="button fit">Explore This Repo</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1> Media Management & ADA Compliance for Developers </h1>
</header>
<span class="image main"><img src="images/formedia.jpeg" alt="computer" /></span>
<h2>Fundamentals for front-end web development using html5.</h2>
<h3>Quick Summary</h3>
<p>So it’s time to get creative with your basic Html webpage format. Let’s get started! Media management is the first place to begin when implementing code that will bring life and vibrancy to your page! You’re no longer limited to plain text. Engage your users and clients with images, special effects, and creative front-end code.</p>
<h3>Requirements</h3>
<ul>Basic elements and Html "tags" format and structure.</ul>
<ul>Understanding of organization code layout, "header, footer, nav, body , div " tags </ul>
<ul>Code editor (Visual Studio Code — Recommended)</ul>
<h3>Introduction</h3>
<h2>“when you don’t create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.”
― Why The Lucky Stiff</h2>
<h3>Media Tags and Explanation</h3>
<p>The tag you would use to add an image to a webpage is img src=”X”. The ‘alt’ attribute is for coding alternative information for an image. The ‘alt’ is important because provides context if there is an error in the ‘src’ of the image, it provides info if the image is not loading due to slow connection, it describes the image to those using a screen reader, and it optimizes search engine accessibility.</p>
<p>The #video and #audio tags are formatted the same with #source #type and ‘controls’ attributes, close and ending tags, both support file format ‘Ogg’. Differences are that #video has ‘height’ and ‘width’ attributes and supports file formats ‘MP4, WebM’. The #audio only supports file formats ‘MP3, Wav’</p>
<p>Example: <br>
img src="https://s3.amazonaws.com/bloc-foo/soda.jpeg" alt='picture of soda' (wrapped in arrow tags of course)</p>
<h2>What if my users can’t see, hear, or engage with the Media on my page?</h2>
<span class="image main"><img src="images/whatifmedia.jpeg" alt="ada" /></span>
<p>Go to https://webaim.org/ to understand empowerment for developers to make their web content accessible to people with disabilities.</p>
<p>This resource assists coders with the four following to be compliant with regulations for people with disabilities.</p>
<h3>Accessibility Training</h3>
<p>Whether here in Utah or on-site at your organization, WebAIM can provide web and document training to fit your needs.</p>
<h3>Accessible Site Certification</h3>
<p>As a respected third party accessibility expert, WebAIM can evaluate and certify your site to established web accessibility guidelines.</p>
<h3>Technical Assistance</h3>
<p>Need assistance implementing accessibility? WebAIM’s expert staff can provide the assistance you need.</p>
<h3>Evaluation and Reporting</h3>
<p>We can provide reports to help you know how accessible your site is and how to make it better.</p>
<h2>Semantics & Accessibility</h2>
<p>Accessibility is very important because is provides web accessible sites to all users who may experience difficulty accessing information on the internet.</p>
<p>Some forms of accessibility related to web development include semantic html, using specific tags that describe all of the content on the website, also using high contrasting colors for those who struggle with color blindness.</p>
<p>Semantic html means using specific tags that describe the code, for example table and form in contrasts to non-semantic tags that don’t require specific format for the text, such as div and span. Semantic html convey meaning of what text is doing inside the tag. Some common accessibility issues my end users may have is reading the text because of blindness, or using excessive clicking and selecting options requiring a high volume of motor skills. Steps to take is providing options for users with screen readers, and reducing amount of tasks to input/request user information. The label tag is used for appropriate accessibility when user may toggle mouse over text and properly connects user to input field.</p>
<h4>“I wish for a world that views disability, mental or physical, not as a hindrance but as unique attributes that can be seen as powerful assets if given the right opportunities”― Oliver Sacks</h4>
<div>
</section>
</div>
<!-- Contact -->
<section id="contact">
<div class="inner">
<section>
<form method="post" action="mailto:iamjunedev@gmail.com" enctype="text/plain">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Clear" /></li>
</ul>
</form>
</section>
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-envelope"></span>
<h3>Email</h3>
<a href="#">iamjunedev@gmail.com</a>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-phone"></span>
<h3>Phone</h3>
<span>(970) 541-0681 </span>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-home"></span>
<h3>Address</h3>
<span>1776 S Garfield St. <br />
Denver, CO 80014<br />
United States of America</span>
</div>
</section>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/iamjunedev" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/junibeldelacruz/" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="copyright">
<li>© Unfold, Evolve, Advance </li><li>Develop: <a href="https://JuneDev.com">I am June Dev</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>