COLEGIUL ECONOMIC “ANGHEL RUGINĂ”

VASLUI

LUCRARE DE ATESTAT
PROFESIONAL

PROFESOR ÎNDRUMĂTOR: Gherman Florin

CANDIDAT: Coșcodan Dragoș

1
 VASLUI - 2021

(TEMA LUCRĂRII)

ARDUINO

2
 Cuprins

Scurtă introducere……………………………………………………………………..…………………………….4
De ce am ales această temă..........................................................................................4
Proceduri, funcţii şi tehnici de programare folosite......................................................4
Pagina principală............................................................................................................5
Magazin.........................................................................................................................15
Software........................................................................................................................26
Download......................................................................................................................29
Proiecte.........................................................................................................................29
Info platforma...............................................................................................................33
Bibliografie....................................................................................................................34

3
1.Introducere

Arduino este o companie de software și hardware ce a dezvoltat o comunitate de utilizatori

de software și hardware din întreaga lume, ce proiectează și product microcontrollere pentru
construirea de dispozitive digitale ce pot detecta și controla obiecte din lumea fizică. Arduino constă
într-o placă de circuite programabile fizic (adesea menționată ca un microcontroler ) și într-un
software sau IDE (Integrated Development Environment), care rulează pe computer și este folosit
pentru a scrie și a încărca codul pe microcontroller.
Platforma Arduino a devenit destul de populară deoarece nu ai nevoie de foarte multe piese
hardware pentru a începe să programezi, ci doar de o placa de dezvoltare și un cablu mini USB.
Această placă se programează printr-o versiune simplificată de C++, astfel facilitând învățarea
programării.

2.De ce am ales aceasta tema

Eu am ales aceasta tema deoarece, iubesc sa creez diferite dispozitive in arduino pe care le
programez sa indeplineasca diverse functii. Arduino poate interacționa cu butoane, motoare,
difuzoare, internet, LED-uri, display-uri, destul de largi, senzori de mișcare, senzori de proximitate,
camere video, module GPS, module GPRS, module bluetooth și multe altele. Această diversivitate
de senzori și module destul de ieftine, împreună cu IDE-ul de programare Arduino care este gratuit
și ușor de învățat, au dus la realizarea unei comunități cu exemple de cod și instrucțiuni pentru o
mare varietate de proiecte bazate pe Arduino.De aceea am creat acest site in care am prezentat cele
mai importante informatii despre Arduino, unele produse si aplicatia Arduino IDE care poate fi
descarcata pentru mai multe sisteme de operare.

3. Proceduri, funcţii şi tehnici de programare folosite

Pentru a crea această pagina eu am folosit HTML5, CSS3, Javascript si JQuery
(pentru a crea unele efecte și filtre de produse).Codul a fost scris in Visual Studio Code.

Site-ul este alcatuit din 6 pagini:

-Pagina principala
-Magazin
-Info platforma
-Software
-Descarca
-Proiecte
Site-ul este complet optimizat atât pentru calculatore cât și pentru telefoane.

4
Pagina principala

5
6
Pagina principala este alcatuita din :

1.Antet(header)
2.Logo-ul
3.Meniu
4.Header image
5.Conținutul paginii
6.Subsolul(Footerul)
7.Bara laterală(Sidebar)
Codul pentru antet, logo si meniu

Html:
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars" ></i>
</label>
<label class="logo"><a href="index.html">Arduino</a></label>
<ul>
<li><a href="index.html"class="active">Pagina principala</a
></li>
<li><a href="magazin.html">Magazin</a></li>
<li><a href="info.html">Info platforma</a><li>
<div class="dropdown">
<button class="dropbtn"><li><a href="despre.html">S
oftware</a><li></button>
<div class="dropdown-content">
<a href="download.html">Descarca</a>
</div>
</div>
<li><a href="biblioteci.html">Proiecte</a></li>

</ul>

</nav>
</header>

7
Css:
#logq{width:25px;}

header{
position: sticky;
top: 0;
z-index:100;
}
nav{

background-image: linear-
gradient(to right,rgba(2,29,50,0.9),rgba(28,96,143,0.9) );
height: 60px;
width: 100%;
box-shadow: 0px 2px 3px 0px rgba(41,44,47, 0.6);
}
label.logo a{
color:white;
font-size:35px;
line-height: 60px;
padding: 0 100px;
padding-right:50px;
font-weight:900;
cursor: pointer;
text-decoration: none;

}
.logov{
font-size:10px;
}
nav ul{
float: right;
margin-right: 15px;
}

nav ul li{
display: inline-block;
line-height: 60px;
margin :0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
border-radius:3px;

8
}
nav ul li a.active,nav ul li a:hover{
font-weight: bold;
transition:.3s;

}
.checkbtn{
font-size: 30px;
color:white;
float: right;
line-height: 60px;
margin-right: 40px;
cursor: pointer;
display: none;

}
#check{
display:none;

}
@media (max-width: 752px){
label.logo{
font-size: 30px;
padding-left: 50px;
}
nav ul li a{
font-size:16px;
}
}
@media (max-width: 1070px){
.checkbtn{
display: block;

}
.nvv{display:block;}
nav ul{
position: fixed;
width: 100%;
height: 100vh;
background: rgba(41,44,47, 0.9);
top: 60px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
9
 margin: 50px 0;
line-height:30px;

}
nav ul li a{
font-size: 20px;
}
nav ul li a:hover,nav ul li a.active{
background: none;
font-weight:bold;
font-size:22px;

}
#check:checked ~ ul{
left: 0;

Atunci când lățimea ferestrei browser-ului este mai mică decât 752px meniul din
header este ascuns, iar pentru a avea acces la el, facem click pe butonul din dreapta.

10
4.Header Image

Html:
<div class="wav1">
<div class="custom-shape-divider-bottom-1603636248">
<svg data-
name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAs
pectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-
16.72,168.19-17.73,250.45-
.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A60
0.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<div class="center">Învață cum să creezi și să programezi roboți cu arduino!</d
iv>
</div>

Css:
.wav1{
background:url("img/header2.2.jpg");
height:600px;
position: relative;
z-index: inherit 5;

}
.center {
position: absolute;

color:rgba(255, 255, 255, 0.671);

font-weight: bold;
font-size: 55px;
padding-left: 8%;
padding-right: 8%;
padding-top: 10%;

}
.custom-shape-divider-bottom-1603636248 {

11
 position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}

.custom-shape-divider-bottom-1603636248 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 180px;
}

.custom-shape-divider-bottom-1603636248 .shape-fill {
fill: #FFFFFF;
}

6.Subsolul

Html:
<footer class="footer-distributed">

<div class="footer-left">
<h3>Ardu<span>ino</span></h3>
<p class="footer-links">
<a href="index.html">Pagina principala</a>
·
<a href="biblioteci.html">Proiecte</a>
·
<a href="magazin.html">Magazin</a>
·
<a href="despre.html">Software</a>

·
<a href="info.html">Info</a>
</p>

<p class="footer-company-name">arduino_lessons &copy; 2021</p>

</div>

12
 <div class="footer-center">

<div>
<i class="fa fa-map-marker"></i>
<p><span>Adresa</span> Romania, Vaslui</p>
</div>

<div>
<i class="fa fa-phone"></i>
<p>+40555123456</p>
</div>

<div>
<i class="fa fa-envelope"></i>
<p><a href="mailto:dragos.abcqw@gmail.com">dragos.abcqw@gmail.com</
a></p>
</div>

</div>

<div class="footer-right">

<p class="footer-company-about">
<span>Despre</span>
Pe acest site vei afla cum sa descarci Arduino IDE, sa creezi si sa
programezi roboti
</p>

<div class="footer-icons">

<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>

<a href="https://twitter.com/?lang=en"><i class="fa fa-
twitter"></i></a>
<a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/"><i class="fa fa-github"></i></a>

</div>

</div>

</footer>

Pentru a adauga iconițele am folosit biblioteca :

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

13
7.Bara laterală

Html:
<div class="sidenav">
<p>Arduino IoT Cloud:</p>
<a href="https://create.arduino.cc/projecthub/Arduino_Genuino/getting-started-
with-arduino-web-editor-on-various-platforms-4b3e4a">Noțiuni introductive </a>

<p>Instrucțiuni pentru panouri:</p>

<a href="https://www.arduino.cc/en/Guide/ArduinoNano">Nano</a>

<a href="https://www.arduino.cc/en/Guide/ArduinoUno">Uno</a>

<a href="https://www.arduino.cc/en/Guide/ArduinoMega2560">MEGA2560</a>
<a href="https://www.arduino.cc/en/Guide/MKRGSM1400">MKR GSM 1400</a>
<p> Placi de dezvoltare:</p>
<a href="https://www.arduino.cc/en/Guide/MKR485Shield">Arduino MKR 485 Shield</
a>
<a href="https://www.arduino.cc/en/Guide/MKRCANShield">Arduino MKR CAN Shield</
a>
<a href="https://www.arduino.cc/en/Guide/MKRConnectorCarrier">Arduino MKR Conne
ctor Carrier</a>
<a href="https://www.arduino.cc/en/Guide/MKRENVShield">Arduino MKR ENV Shield</
a>
<a href="https://www.arduino.cc/en/Guide/MKRETHShield">Arduino MKR ETH Shield</
a>

</div>

Css:
.sidenav {
float: right;

height: 60%;
position: sticky;
top: 19%;
margin-left:5%;
margin-bottom: 25%;
margin-right: 5%;
margin-top:10%;
}
.sidenav a {

14
 padding: 6px 8px 6px 16px;
text-decoration: none;
color: #2196F3;
display: block;
}
.sidenav p{
font-weight: bold;
}
.sidenav a:hover {
color: #064579;
}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.content{margin-right: 30%;}
@media screen and (max-width: 1200px) {
.sidenav{display: none;
}
.content{margin-right:10%;}
}

Magazin

15
Pagina magazin contine:
1.Bara de navigare
2.Bara de căutare produse
3.Filtru de sortare
4.Conținutul
5.Subsolul

1.Bara de navigare

Bara de navigare conține 5 butoane pe care daca fixăm cursorul mouse-ului apare o
lista de opțiuni. În partea dreapta avem bara de căutare.

Html:
<div class="navmag">

<div class="nvv">
<div class="dropdown1">
<button class="dropbtn1">Placi arduino</button>
<div class="dropdown-content1 ">

<button id="1" onclick="myFunction()">Uno</button>

16
 <button id="2" onclick="myFunction2()" >Nano</button>
<button id="3" onclick="myFunction3()">Micro</button>
<button id="4" onclick="myFunction4()">Mega</button>
<button id="5" onclick="myFunction5()">Altele</button>

</div>
</div>

<div class="dropdown1">
<button class="dropbtn1">Placi de extensie</button>
<div class="dropdown-content1">
<button id="6" onclick="myFunction6()">Motor Shield</button>
<button id="7" onclick="myFunction7()">GSM Shield</button>
<button id="8" >LCD Shield</button>

</div>
</div>

<div class="dropdown1">
<button class="dropbtn1">Accesorii</button>
<div class="dropdown-content1">
<button id="9" onclick="myFunction6()">Motor Shield</button>
<button id="10" onclick="myFunction7()">GSM Shield</button>

</div>
</div>
<div class="dropdown1">
<button class="dropbtn1"> &nbsp &nbsp KITuri &nbsp &nbsp</button>
<div class="dropdown-content1">
<button id="11" onclick="myFunction8()">Lcd display</button>
<button id="12" onclick="myFunction9()">Module</button>

<button id="13" >LCD Shield</button>

</div>
</div>
<div class="dropdown1">
<button class="dropbtn1">Senzori</button>
<div class="dropdown-content1">
<button id="14" onclick="myFunction10()">Kit-uri</button>
<button id="15" onclick="myFunction11()">Senzori</button>

</div>
</div>

<div class="search-container">
17
 <form action="https://www.google.com/search" method="GET">
<input type="text" placeholder="Cauta.." name="search">
<button type="submit" value="search"><i class="fa fa-
search"></i></button>
</form>
</div>
</div>
</div>

Css:

.navmag{
background-color:rgba(223, 222, 222,0.7);
box-shadow: inset 0px 0px 21px 8px rgba(226,241,255,0.64);

position: fixed;
width:100%;
padding:0.5% 0;

}
.nvv{
padding-left:10%;
}
.search-container{
text-align: right;
display: inline-block;
margin:-5px;
margin-right:50px;
}
.search-container {

float: right;
}

.search-container input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}

.search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
18
 margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}

.search-container button:hover {
background: #ccc;
}

@media screen and (max-width: 900px) {

.search-container {
float: none;
}
.search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}

.nvv{display:block;}
.navmag{display:block;}
.dropdown1 {
position: relative;
display: block;
padding:5px;
}

.nvv{display:none;}
}

nav{

background-image: linear-gradient(to right,rgba(2,29,50,1),rgba(28,96,143,1) );

height: 60px;
width: 100%;
box-shadow: 0px 2px 3px 0px rgba(41,44,47, 0.6);
}
nav ul li{
display: inline-block;
line-height: 70px;
margin :0 5px;
}
19
label.logo a{
color:white;
font-size:25px;
line-height: 50px;
padding: 0 100px;
font-weight:900;
cursor: pointer;
text-decoration: none;

}
ul{margin:-10px;}
.logo a{font-size: 20px;
}
nav{
height:50px;
}
body{background-color: #f9f9f9;}
Javascript:

function myFunction() {
document.getElementById("d3").style.display = "none";
document.getElementById("d11").style.display = "none";
document.getElementById("d10").style.display = "none";
document.getElementById("d9").style.display = "none";
document.getElementById("d8").style.display = "none";
document.getElementById("d7").style.display = "none";
document.getElementById("d6").style.display = "none";
document.getElementById("d5").style.display = "none";
document.getElementById("d4").style.display = "none";
document.getElementById("d2").style.display = "none";
document.getElementById("d1").style.display = "block";
}

...
function myFunction11() {

document.getElementById("d3").style.display = "none";
document.getElementById("d2").style.display = "none";
document.getElementById("d1").style.display = "none";
document.getElementById("d4").style.display = "none";
document.getElementById("d5").style.display = "none";
document.getElementById("d6").style.display = "none";
document.getElementById("d7").style.display = "none";
document.getElementById("d8").style.display = "none";
document.getElementById("d9").style.display = "none";
document.getElementById("d10").style.display = "none";
document.getElementById("d11").style.display = "block";
20
 }

2.Filtru de soratare produse

Cu acest filtru putem sorta produsele dupa preț si origine. Pentru aceasta am folosit
limbajul de programare javascript.

Html:

<div id="myBtnContainer" class="navmagazin">

21
 <p>Filtru :</p>

<button class="btn active" onclick="filterSelection('toate')">Toate

</button>
<button class="btn " onclick="filterSelection('sb50')"> Sub 50 lei<
/button>
<button class="btn " onclick="filterSelection('ps50')"> Peste 50 le
i</button>
<button class="btn " onclick="filterSelection('rom')"> Romania</but
ton>
<button class="btn " onclick="filterSelection('chn')"> China</butto
n>
</div>

Css:
.navmag{

background-color:rgba(223, 222, 222,0.7);

box-shadow: inset 0px 0px 21px 8px rgba(226,241,255,0.64);

position: fixed;
width:100%;
padding:0.5% 0;

Javascript:

filterSelection("toate")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "toate") c = "";
for (i = 0; i < x.length; i++) {
RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) AddClass(x[i], "show");
}
}

function AddClass(element, name) {

var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
22
 if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function RemoveClass(element, name) {

var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}

$(document).ready(function() {
$(".btn").click(function () {
$(this).addClass("active");
$(".btn").not(this).removeClass("active");
});
});

4.Continutul

Html:

<div id="d1" >

<div class=PUno>

<div class="mline1">

<div class="col1 filterDiv chn sb50 p12"><img src="img/m0.w

ebp" alt="image">
<div class="c1"><p class="tit"><a href="https://www.ali
express.com/item/1005001621923182.html?spm=a2g0o.productlist.0.0.3f301276h2HbLn&alg
o_pvid=fd2926ac-01ac-42e4-b2ae-c7607d84ed18&algo_expid=fd2926ac-01ac-42e4-b2ae-
c7607d84ed18-
23
1&btsid=0b0a556816104553138957102e9c40&ws_ab_test=searchweb0_0,searchweb201602_,sea
rchweb201603_ "target="_blank">Arduino Uno</a></p><p class="pret">12 lei<span class
="pret1"> /buc</span></p><p class="star">
<span class="fa fa-star checked star1"></span>
<span class="fa fa-star checked star2"></span>
<span class="fa fa-star checked star3"></span>
<span class="fa fa-star checked star4"></span>
<span class="fa fa-star checked star5"></span></p>
</div>
</div>
<div class="col1 filterDiv chn ps50 p12"><img src="img/m1.j
pg" alt="image">
<div class="c1"><p class="tit"><a href="https://www.ali
express.com/item/1005001621923182.html?spm=a2g0o.productlist.0.0.3f301276h2HbLn&alg
o_pvid=fd2926ac-01ac-42e4-b2ae-c7607d84ed18&algo_expid=fd2926ac-01ac-42e4-b2ae-
c7607d84ed18-
1&btsid=0b0a556816104553138957102e9c40&ws_ab_test=searchweb0_0,searchweb201602_,sea
rchweb201603_"target="_blank">Arduino Uno</a></p><p class="pret">216.63 lei<span cl
ass="pret1"> /10 buc</span></p><p class="star">
<span class="fa fa-star checked star1"></span>
<span class="fa fa-star checked star2"></span>
<span class="fa fa-star checked star3"></span>
<span class="fa fa-star checked star4"></span>
<span class="fa fa-star checked star5"></span></p>
</div>
</div>
<div class="col1 filterDiv rom ps50 p12"><img src="img/m2.j
pg" alt="image">
<div class="c1"><p class="tit"><a href="https://www.ema
g.ro/placa-dezvoltare-arduino-uno-v3-ard-03/pd/DQXDS3BBM/?X-Search-
Id=84e18c48c9a33dea0aa9&X-Product-Id=15226092&X-Search-Page=1&X-Search-
Position=1&X-Section=search&X-MB=0&X-Search-
Action=view"target="_blank">Arduino UNO V3</a></p><p class="pret">125 lei<span clas
s="pret1"> /buc</span></p><p class="star">
<span class="fa fa-star checked star1"></span>
<span class="fa fa-star checked star2"></span>
<span class="fa fa-star checked star3"></span>
<span class="fa fa-star checked star4"></span>
<span class="fa fa-star checked star5"></span></p>
</div>
</div>
</div>
<div class="mline2">
<div class="col1 filterDiv rom sb50 p12"><img src="img/m1.j
pg" alt="image">
<div class="c1"><p class="tit"><a href="https://www.sig
manortec.ro/Placa-dezvoltare-UNO-R3-Arduino-Compatibil-ATmega328p-CH340G-cu-bara-
24
pini-
p170362384"target="_blank"> Uno ATMEGA328P</a></p><p class="pret">17,85<span class=
"pret1"> /buc</span></p><p class="star">
<span class="fa fa-star checked star1"></span>
<span class="fa fa-star checked star2"></span>
<span class="fa fa-star checked star3"></span>
<span class="fa fa-star checked star4"></span>
<span class="fa fa-star star5"></span></p>
</div>
</div>

Css:

.mline1, .mline2, .mline3, .mline4{

display:flex;
margin-left:10%;

max-width: 1000px;
}
.col1, .col2, .col3, .col4{

margin:15px;
background-color: white;
padding-left: 20px;
padding-right: 20px;
padding-top:20px;
}
.col1>img{ max-width:100%;}
.col2>img{ max-width:100%;}
.col3>img{ max-width:100%;}
.col4>img{ max-width:100%;}
.c1{padding:20px 0;}

.star{cursor:pointer;}

.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
25
 color: black;
font-weight: bold;
}

.btn:hover {
background-color: #ddd;
}

.btn.active {
background-color: #666;
color: white;
}

.filterDiv {
display: none;
}

.container {
margin-top: 20px;
overflow: hidden;
}
.show {
display: block;
}
.checked {
color: #ffa500;
}
.star{text-align:center;}
.star1:hover{
color: #f5b33a;
cursor:pointer;
}
.star2:hover{
color: #f5b33a;
cursor:pointer;
}
.star3:hover{
color: #f5b33a;
cursor:pointer;
}
.star4:hover{
color: #f5b33a;
cursor:pointer;
}
26
Software

Aceasta pagina coține informații despre aplicațile în care putem scrie codul și cum putem
să le instalăm și să lucrăm cu ele.

HTML:
<h1> Creați Arduino</h1>
<p id="desprep">Conectați-vă, colaborați, creați.</p>

<p><a href="https://create.arduino.cc/">Arduino Create</a> este o platformă online

integrată care permite producătorilor și dezvoltatorilor
profesioniști să scrie cod, să acceseze conținut, să configureze placi și să part
ajeze proiecte.
Treceți de la o idee la un proiect IoT finalizat mai repede decât oricând. Cu Ar
duino Create
puteți utiliza un IDE online, puteți conecta mai multe dispozitive cu Arduino I
oT Cloud, răsfoiți
o colecție de proiecte pe Arduino Project Hub. De asemenea, vă puteți împărtăși
creațiile,
27
 împreună cu ghiduri pas cu pas, scheme, referințe și puteți primi feedback de l
a alții.
</p>
<p>De asemenea, puteți configura un număr de dispozitive terțe în <a href="https://
create.arduino.cc/getting-started/">Manager pentru dispozitive Linux.</a></p>

<p>Veți avea capacitatea de a gestiona fiecare aspect al proiectului dvs. chiar di

ntr-un singur tablou de bord -
toate accesibile într-
un mediu ușor pentru începători și productiv pentru dezvoltatorii profesioniști. În
ciuda nivelului dvs. de calificare, Arduino Create oferă fluxuri ghidate în profu
nzime pentru a ajuta la
configurarea cu ușurință a serviciilor online, cum ar fi Web Editor și IoT Cloud
.</p>

<div class="despreimg">
<img id="ard"src="img/d0.png" alt="imagine">
<div class="idk">
<div class="info"><img src="img/d1.png" alt="img"><h3>Editor Web</h3><p>
Scrieti codul, accesați bibliotecile și salvați schițele în cloud</p> </div>
<div class="info"><img src="img/d2.png" alt="img"><h3>IoT Cloud</h3><p>C
onstruiți tablouri de bord pentru plăcile conectate și accesați-
le de la distanță</p> </div>
<div class="info"><img src="img/d3.png" alt="img"><h3>Manager Linux</h3>
<p>Gestionați configurația și serviciile pentru dispozitivul dvs Linux</p> </div>
<div class="info"><img src="img/d4.png" alt="img"><h3>Digital store</h3>
<p>Gestionați-vă planul de creare și SIM-urile, certificați-
vă cunoștințele despre Arduino</p> </div>

</div>
</div>

<p>Trecerea de la o idee la un dispozitiv IoT complet funcțional a fost un proce

s obositor chiar și
pentru cei mai avansați ingineri și dezvoltatori. Până acum, ar trebui să tr
eacă frecvent înainte
și înapoi între diverse instrumente și ecrane, de la IDE la servicii cloud.
De aceea, Arduino
și-
a propus să lanseze un ghișeu unic pentru experiența Maker și Dev, care va schimba modul
în
care creați, colaborați și comunicați cu proiectele dvs. și cu comunitatea
în creștere rapidă.
</p>

28
 <p>În timp ce multe companii livrează IDE, unele oferă cloud și altele organizea
ză proiecte DIY, Arduino Create
converge toate acestea sub un singur acoperiș pentru o experiență de utiliza
tor complet nefragmentată. Proiectat pentru a oferi
Producători și dezvoltatori cu un flux de lucru continuu, platforma conectea
ză punctele dintre fiecare parte

a călătoriei Maker de la inspirație la implementare.

</p>

<h2>Editor Web Arduino</h2>

<div class="video"><iframe width="560" height="315" src="https://www.youtube.com
/embed/6cRFf4qkcTw" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Download

Aceasta pagină poate fi accesată atunci când apropiem mouse-ul de butonul Software.Din
această pagina putem descarca aplicația Arduino IDE pentru mai multe sisteme de
operare.

29
Proiecte

În această pagină găsim proiecte realizate în arduino de alți utilizatori.

30
Fiecare căsuță are o imagine cu proiectul, titlul și numele de utilizator al creatorului. Atunci
când apropiem mouse-ul de căsuță, va aparea o scurtă descriere a proiectului.

Așa arată codul pentru acest efect :

<div class="s1"><img src="img/p8.webp" alt="image">

<div class="srtg">Make a Virtual Assistant AI Robot for Computer Automa
tion and Little Chit Chat.</div>
<div class="info"><a href="https://create.arduino.cc/projecthub/tartrob
otics/a-diy-flapping-wing-robotic-bat-
3f9e38?ref=user&ref_id=1612397&offset=1"target="_blank">AI Assistant Robot with Ard
uino and Python</a>
<p>Proiect realizat de <a href="https://create.arduino.cc/projecthub/as
hraf_minhaj"class="numeautor"target="_blank">ashraf_minhaj</a></p></div>
</div>

<div class="s1"><img src="img/p9.webp" alt="image">

<div class="srtg">High accuracy wall plotting at minimal cost, enrich a
ll the whiteboards around you with surprising artwork!</div>
<div class="info"><a href="https://create.arduino.cc/projecthub/fredrik
stridsman/stringent-the-15-wall-plotter-

31
d965ca?ref=user&ref_id=515423&offset=2"target="_blank">Stringent, the $15 Wall Plot
ter</a>
<p>Proiect realizat de<a href="https://create.arduino.cc/projecthub/fre
drikstridsman"class="numeautor"target="_blank">Fredrik Stridsman</a></p></div>
</div>
</div>

.content{
max-width: 100%;

z-index: 10;
font-size: 1.1em;
}
.l1{

display:flex;

.l2{

display:flex;

}
.l3{

display:flex;

.s1 ,.s2, .s3{

position: relative;
z-index: 11;
transition: .7s;
margin-right:3%;
margin-bottom:3%;
max-width: 35%;
background-color: white;
}
.s1> img{

max-width: 100%;
transition: .7s;

32
}

.info{
padding:20px;

}
.info >a {font-size:20px;
text-decoration: none;
color:black;
transition:.3s;
font-weight: bold;
}
.info>a:hover{
color:rgb(47,106,147);

}
.info>p{
color:rgb(95,95,95);
padding-bottom: 10px;
}

.info > p>.numeautor{

color:black;
font-weight: bold;
}
.info > p>.numeautor:hover{
color:rgb(47,106,147);

@media screen and (max-width: 800px){

.l1,.l2 ,.l3{
display:block;}
.s1,.s2,.s3{
max-width: 100%;}
}

.s1>img:hover{

cursor: pointer;
opacity: 0.2;
}
.s1:hover{
33
 box-shadow: inset -2px -16px 50px 33px #DFFFFF;
}
.srtg{
position: absolute;
left:0;
top:0;
padding:30px;
z-index: -2;
font-weight: bold;
color:rgb(13,59,83);
}

Info platforma

În această pagină sunt informații generale despre arduino și despre acest site

Bibliografie:

https://www.arduino.cc/
https://en.wikipedia.org/wiki/Arduino
https://www.w3schools.com/html/default.asp
https://www.aliexpress.com/w/wholesale-arduino.html
https://ardushop.ro/
https://cleste.ro/

34