-
Notifications
You must be signed in to change notification settings - Fork 0
/
learn.html
496 lines (454 loc) · 22.8 KB
/
learn.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
<!doctype html>
<html lang="ar" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css"
integrity="sha384-nU14brUcp6StFntEOOEBvcJm4huWjB0OcIeQ3fltAfSmuZFrkAif0T+UtNGlKKQv" crossorigin="anonymous">
<title>Learn</title>
<style>
body {
body.dark-theme {
background-color: #292b2c;
color: #ffffff;
}
}
.container-fluid {
width: 80%;
}
#sidebar {
background-color: #343a40;
}
.nav-btn {
display: block;
width: 100%;
text-align: left;
padding: 10px;
background-color: #343a40;
color: #ffffff;
border: none;
border-bottom: 1px solid #555;
cursor: pointer;
transition: background-color 0.3s;
}
.nav-btn:hover {
background-color: #555;
}
.nav-sub {
margin-left: 20px;
}
.scrollspy-example-2 {
padding: 20px;
}
.scrollspy-example-2 h4,
.scrollspy-example-2 h5 {
color: #252020;
}
.scrollspy-example-2 p {
color: #211d1d;
}
footer {
background-color: #090b11;
padding: 20px;
text-align: center;
display: flex;
justify-content: space-around;
}
footer a {
color: #fff;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.footer-section {
margin-bottom: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () {
var previousScroll = 0;
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll) {
// Scrolling down
$(".navbar").css("top", "-60px"); // Adjust the value as needed
} else {
// Scrolling up
$(".navbar").css("top", "0");
}
previousScroll = currentScroll;
});
});
</script>
</head>
<body class="dark-theme">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<br>
<!-- Navigation bar -->
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">E-Circuit <img src="E-Circuit logo.png" width="35"></a>
<a href="index.html"><button type="button" class="btn btn-outline-light" role="link">Home</button></a>
<a href="projects.html"><button type="button" class="btn btn-outline-light" role="link">Projects</button></a>
<a href="learn.html"><button type="button" class="btn btn-outline-light" role="link">Learn</button></a>
<a href="components.html"><button type="button" class="btn btn-outline-light" role="link">Components</button></a>
<a href="datasheet.html"><button type="button" class="btn btn-outline-light" role="link">Datasheets</button></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<button type="button" class="btn btn-outline-light">
Guides
</button>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="chatbox1.html">Chat-Box</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Collaborate</a></li>
</ul>
</li>
<a href="login.html"><button type="button" class="btn btn-outline-light" role="link">Login/Register</button></a>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">E-Circuit</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="datasheet.html">Datasheets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components.html">Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="learn.html">Learn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Guides
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="chatbox1.html">Chat-Box</a></li>
<li><a class="dropdown-item" href="#">Collaborate</a></li>
<li>
<hr class="dropdown-divider">
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login/Register</a>
</li>
</ul>
<form class="d-flex mt-3" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
<br>
<!-- scrollspy -->
<br>
<div class="container-fluid h-100">
<div class="row">
<div class="col-4">
<nav id="sidebar" class="h-100 flex-column align-items-stretch pe-4 border-end">
<button class="nav-btn" data-bs-target="#item-1">Datasheets</button>
<div class="nav-sub">
<button class="nav-btn ms-3 my-1" data-bs-target="#item-1-1">Companies</button>
<button class="nav-btn ms-3 my-1" data-bs-target="#item-1-2">How to use it?</button>
</div>
<button class="nav-btn" data-bs-target="#item-2">Devices</button>
<div class="nav-sub">
<button class="nav-btn ms-3 my-1" data-bs-target="#item-2-1">How to use ekectronic devices?</button>
</div>
<button class="nav-btn" data-bs-target="#item-3">Applications</button>
<div class="nav-sub">
<button class="nav-btn ms-3 my-1" data-bs-target="#item-3-1">Types and uses</button>
<button class="nav-btn ms-3 my-1" data-bs-target="#item-3-2">Download Guide</button>
<button class="nav-btn ms-3 my-1" data-bs-target="#item-3-3">Tutorial</button>
</div>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#sidebar" data-bs-smooth-scroll="true" class="scrollspy-example-2"
tabindex="0">
<div id="item-1">
<h4>Datasheets</h4>
<p>A datasheet is a document that provides detailed information about a specific electronic component or
device. Datasheets are essential for engineers, designers, and technicians to understand the
characteristics, specifications, and usage guidelines of electronic components. Here are some common
sections found in electronic component datasheets:
<h6>Product Overview:</h6>Name and description of the component and Manufacturer's name and logo.<br>
<br>
<h6>Pin Configuration:</h6>Diagram showing the physical arrangement of pins or leads on the component.
Electrical Characteristics like Operating voltage range, Current consumption, Power dissipation and Input
and output voltage level.Input and output current levels.<br>
<br>
<h6>Absolute Maximum Ratings:</h6>Maximum values that a component can tolerate without permanent damage.This
Includes parameters like maximum voltage, current, temperature, etc.<br>
<br>
<h6>Recommended Operating Conditions:</h6>Recommended values for voltage, current, and temperature during
normal operation.<br>
<br>
<h6>Functional Description:</h6>How the component operates and its intended function.<br>
<br>
<h6>Electrical Characteristics:</h6>Detailed electrical specifications such as voltage and current levels,
frequency response, and timing<br><br>
A lot of changes made to the datasheet over time so staying updated is important.
Datasheets are typically available on the websites of component manufacturers or distributors. Engineers
and designers rely on datasheets to select appropriate components for their designs, understand their
limitations, and ensure proper integration into a circuit or system.</p>
</div>
<br>
<hr>
<br>
<div id="item-1-1">
<h5>Companies</h5>
<p>There are numerous companies manufacturing electronic components, ranging from semiconductors to passive
components and more. Here are some well-known companies along with general information on accessing
datasheets:
<br>
<br>
<h6>Texas Instruments (TI):</h6>Website: <a href="https://www.ti.com/">Texas Instruments</a><br>
TI offers a wide range of analog and digital semiconductor products.
Datasheets can usually be found on the individual product pages under the "Technical Documents" section.
<br>
<br>
<h6>Analog Devices:</h6>Website:<a href="https://www.analog.com/en/index.html">Analog Devices</a><br>
Analog Devices known for analog and mixed-signal integrated circuits.
Datasheets are typically available on the product pages under the "Documentation" tab.
<br>
<br>
<h6>Intel:</h6>Website: <a href="heeps://www.intel.com">Intel</a><br>
Intel is a major manufacturer of microprocessors and other semiconductor products.
Datasheets for Intel products can usually be found on the Intel website in the "Documentation" or "Support"
sections.
<br>
<br>
<h6>STMicroelectronics:</h6>Website: <a href="https://www.st.com">STMicroelectronics</a><br>
STMicroelectronics offers a broad range of semiconductor products.
Datasheets can be found on individual product pages under the "Technical Documentation" or "Datasheets" tab.
<br>
<br>
<h6>Microchip Technology:</h6>Website:<a href="https://www.microchip.com">Microchip</a><br>
Microchip is known for microcontrollers and other integrated circuits.
Datasheets are typically available on the product pages under the "Documentation" tab.
<br>
<br>
<h6>Vishay Intertechnology:</h6>Website:<a href="https://www.vishay.com">Vishay</a> <br>
Vishay a manufacturer of discrete semiconductors (diodes, transistors, etc.) and passive components.
Datasheets are usually accessible on the product pages under the "Datasheets" or "Technical Documentation"
section.
<br>
<br>
<h6>ON Semiconductor:</h6>Website: <a href="https://www.onsemi.com/">ON Semiconductor</a><br>
ON Semiconductor provides a wide range of semiconductor solutions.
Datasheets are typically available on the individual product pages under the "Documentation" or "Datasheets"
tab.
<br>
<br>
<h6>NXP Semiconductors:</h6>Website: <a href="https://www.nxp.com">NXP Semiconductors</a><br>
NXP Semiconductors offers a variety of semiconductor products, including microcontrollers and analog
ICs.<br><br>
Datasheets can be found on the product pages under the "Documentation" tab. To access datasheets for
specific components from these companies, you can navigate to their respective websites, search for the
product or part number, and look for technical documentation or datasheets in the product's support or
documentation section. Keep in mind that the availability and format of datasheets may vary between
manufacturers.
</p><br>
<hr><br>
</div>
<div id="item-1-2">
<h5>How to use it?</h5>
<br>
<p>Using datasheets effectively is crucial for engineers, designers, and technicians to understand and
integrate electronic components into their circuits or systems. Here's a guide on how to use datasheets:
<br>
<br>
<h6>Identify the Component:</h6>Ensure that you have the correct datasheet for the specific component you
are using. Check the part number
and manufacturer.<br>
<br>
<h6>Understanding Pin Configuration:</h6>Locate the pin diagram or pinout section in the datasheet.
Identify the functions of each pin and their physical location on the component.<br>
<br>
<h6>Electrical Characteristics:</h6>Review the electrical characteristics section to understand the
operating conditions of the component.
Check the operating voltage, current, power consumption, and other relevant electrical parameters.<br>
<br>
<h6>Absolute Maximum Ratings:</h6>
Pay attention to the absolute maximum ratings to avoid damaging the component.
Ensure that your circuit operates within the specified limits for voltage, current, temperature, etc.<br>
<br>
<h6>Recommended Operating Conditions:</h6>Identify the recommended operating conditions for optimal
performance.
Ensure that your circuit meets these conditions for reliable operation.<br>
<br>
<h6>Functional Description:</h6>Read the functional description to understand how the component operates.
Gain insights into its intended use and functionality within a circuit.<br>
<br>Remember that datasheets are comprehensive documents, and it's important to thoroughly review the
relevant
sections based on your specific application. If you have any uncertainties or questions, reaching out to
the component manufacturer's support or community forums can be helpful.</p>
</div>
<br>
<hr>
<br>
<div id="item-2">
<h4>Devices</h4>
<p>
<br>
<h6>Digital Oscilloscope:</h6>Description: A digital oscilloscope is a versatile tool used to visualize and
analyze electronic signals
over time. It displays voltage waveforms on a screen, allowing engineers and scientists to observe and
measure various electrical phenomena.<br>
<br>
<h6>Function Generator:</h6>Description: A function generator is a device that produces various types of
waveforms, such as sine,
square, and triangle waves. It is commonly used in laboratories for testing and calibrating electronic
circuits.<br>
<br>
<h6>Multimeter:</h6>Description: A multimeter is a basic instrument for measuring voltage, current, and
resistance in
electronic circuits. It is a versatile tool used by engineers and technicians for troubleshooting and
testing electronic components.<br>
<br>
<h6>Power Supply:P</h6>Description: A power supply provides a stable and adjustable voltage output to power
electronic circuits
during testing and development. It ensures that components receive the required voltage for proper
operation.<br>
<br>
<h6>Logic Analyzer:</h6>Description: A logic analyzer is a device used to capture and analyze digital
signals in electronic
circuits. It helps engineers understand the behavior of digital systems by displaying the sequence and
timing of logic-level changes.<br>
<br>
<h6>Spectrum Analyzer:</h6>Description: A spectrum analyzer is a tool that measures and displays the
frequency spectrum of a signal.
It is commonly used for analyzing the frequency content of RF (radio frequency) signals in communication
and electronic systems.<br>
<br>
<h6>Signal Generator:</h6>Description: A signal generator produces electronic signals at various frequencies
and amplitudes. It is
used in testing and designing electronic circuits, communication systems, and audio equipment.</p>
</div><br>
<hr>
<br>
<div id="item-2-1">
<h5>How to use electronic devices</h5>
<p>
<br>
<h6>Digital Oscilloscope:</h6>
Tutorial: <a href="https://youtu.be/uxKyLTMv9js?si=SiPuut33bb5zvEsK">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Digital_storage_oscilloscope">Here</a><br>
<br>
<h6>Function Generator:</h6>
Tutorial: <a href="https://youtu.be/Zink6v6TXk4?si=nWAX3FNj7g8EqPR7">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Function_generator">Here</a><br>
<br>
<h6>Multimeter:</h6>
Tutorial: <a href="https://youtu.be/4lAyzRxsbDc?si=J0ulmwcKTXlntokh">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Multimeter">Here</a><br>
<br>
<h6>Power Supply:</h6>
Tutorial: <a href="https://youtu.be/uraPWaeAgYA?si=PsdC9gVCtdrBRXuJ">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Power_supply">Here</a><br>
<br>
<h6>Logic Analyzer:</h6>
Tutorial: <a href="https://youtu.be/u1DYs2I-_lU?si=nXy8Z0-VXF7b-EO4">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Logic_analyzer">Here</a><br>
<br>
<h6>Spectrum Analyzer:</h6>
Tutorial: <a href="https://youtu.be/WnKK11UEvVE?si=VBegF0UD247z_W9A">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Spectrum_analyzer">Here</a><br>
<br>
<h6>Signal Generator:</h6>
Tutorial: <a href="https://youtu.be/1UUT2pF9Hlw?si=5ITB4H6VbO9rlVbX">Click Here!</a><br>
Get more info. : <a href="https://en.wikipedia.org/wiki/Signal_generator">Here</a><br>
</p>
<div id="item-3">
<h4>Applications</h4>
<p>1. Multisim <br>
2. ElectroDroid<br>
3. EveryCircuit<br>
4. ArduinoDroid<br>
5. Fritzing<br></p>
</div>
<div id="item-3-1">
<h5>Types and uses</h5>
<p><br><h6>Multisim:</h6>Use: Multisim is a simulation software for electronic circuits. It allows users to design and simulate
circuits before actually building them, helping engineers and students in the design and testing phases
of electronic projects.<br>
<br><h6>ElectroDroid:</h6>Use: ElectroDroid is a handy app that serves as a reference tool for electronics enthusiasts and
professionals. It provides a wide range of information, including resistor color codes, component
calculators, and reference materials, making it a useful companion for electronics hobbyists and
students.<br>
<br><h6>EveryCircuit:</h6>Use: EveryCircuit is a mobile app that enables users to create and simulate electronic circuits. It's a
great educational tool for understanding circuit behavior, allowing users to experiment with various
components and visualize their impact on the circuit.<br>
<br><h6>ArduinoDroid:</h6>Use: ArduinoDroid is an app designed for programming and simulating Arduino projects on Android devices.
It allows users to write, compile, and upload Arduino sketches directly from their mobile devices,
making it convenient for on-the-go development and testing.<br>
<br><h6>Fritzing:</h6>Use: Fritzing is a software tool that helps users design and document electronic circuits. The Fritzing
app provides an easy-to-use platform for creating visual representations of breadboard layouts,
schematics, and PCB designs. It is particularly useful for hobbyists and beginners in electronics.
<br></p>
</div>
<div id="item-3-2">
<h5>Download Guide</h5>
<p><br>Multisim: <a href="https://youtu.be/7hy7LCcWjxk?si=_Ch9y1gq6ELqIHe2">Click Here</a><br>
<br>ElectroDroid: <a href="https://youtu.be/dYIpSX4_uH4?si=RsgQssdq6D6yOcmF">Click Here</a><br>
EveryCircuit: <a href="https://youtu.be/dYIpSX4_uH4?si=RsgQssdq6D6yOcmF">Click Here</a><br>
ElectroDroid: <a href="https://youtu.be/dYIpSX4_uH4?si=RsgQssdq6D6yOcmF">Click Here</a><br>
ElectroDroid: <a href="https://youtu.be/dYIpSX4_uH4?si=RsgQssdq6D6yOcmF">Click Here</a><br>
</p>
<div id="item-3-3">
<h5>Tutorial</h5>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- footer -->
<br>
<footer>
<div class="footer-section">
<a href="..."><button type="button" class="btn btn-outline-light" role="link">something</button></a>
</div>
<div class="footer-section">
<a href="..."><button type="button" class="btn btn-outline-light" role="link">Contact Us</button>
<p>
Email: [email protected]</p>
</a>
</div>
<div class="footer-section">
<a href="..."><button type="button" class="btn btn-outline-light" role="link">About Us</button></a>
</div>
</footer>
<br>
</body>
</html>