Rezultate pentru tag: grafic
Introducere în HTML5
WHATWG a dorit să dezvolte HTML ca un „standard de viață”. Un nivel de viață este mereu actualizat și îmbunătățit. Se pot adăuga noi funcții, dar funcționalitățile vechi nu pot fi eliminate.
Declarația DOCTYPE pentru HTML5.
Declarația de codare a caracterelor (charset).
Codificarea implicită a caracterelor în HTML5 este UTF-8.
Elementesemantice noi precum: <header>, <footer>, <article> și <section>.
Atribute ale elementelor de formular noi, cum ar fi: number, date, time, calendar, și range.
Elemente grafice noi: <svg> și <canvas>.
Elemente multimedia noi: <audio> și <video>.
Cele mai interesante API-uri noi în HTML5 sunt: HTML Geolocation, HTML Drag and Drop, HTML Local Storage, HTML Application Cache, HTML Web Workers, HTML SSE.
Următoarele elemente HTML4 au fost eliminate în HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>,
<noframes>, <strike>, <tt>.
Folosiți în schimb: <abbr>, <object>, CSS, <ul>, <s>, <del>.
Elemente noi în HTML5
HTML5 oferă elemente noi pentru o structură mai bună a documentelor:
<article> - Definește un articol dintr-un document
<aside> - Definește conținutul în afară de conținutul paginii
<bdi> - Izolează o parte a textului care ar putea fi formatată într-o direcție diferită de celălalt text din afara acestuia
<detalii> - Definește detalii suplimentare pe care utilizatorul le poate vizualiza sau ascunde
<dialog> - Definește o casetă de dialog sau o fereastră
<figcaption> - Definește o legendă pentru un element <figure>
<figure> - Definește conținut autonom
<footer> - Definește un subsol pentru un document sau secțiune
<header> - Definește un antet pentru un document sau secțiune
<principal> - Definește conținutul principal al unui document
<mark> - Definește text marcat / evidențiat
<meter> - Definește o masurare scalara intr-un interval cunoscut (un ecartament)
<nav> - Definește legăturile de navigare
<progress> - Reprezintă progresul unei sarcini
<rp> - Definește ce trebuie afișat în browserele care nu acceptă adnotările ruby
<rt> - Definește o explicație / pronunție a caracterelor (pentru tipografia din Asia de Est)
<ruby> - Definește o adnotare rubin (pentru tipografia din Asia de Est)
<section> - Definește o secțiune dintr-un document
<summary> - Definește un titlu vizibil pentru un element <details>
<time> - Definește o data / ora
<wbr> - Definește o posibila pauza de linie
Elemente noi de formular (New Form Elements):
<datalist> - Specifică o listă de opțiuni predefinite pentru controale de intrare
<output> - Definește rezultatul unui calcul
Tipuri noi de intrare (New Input Types): color,date,datetime,datetime,local,email,month,number,range,search,tel,time,url,week,autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height and width,list,min and max,multiple,pattern (regexp),placeholder,required,step.
Grafică HTML5:
<canvas> Desenați grafică din mers, prin scripturi (de obicei JavaScript)
<svg> Desenați grafică vectorială scalabilă
Elemente media noi:
<audio> - Definește conținutul sunetului
<embed> - Definește un container pentru o aplicație externă (non-HTML)
<source> - Definește mai multe resurse media pentru elemente media (<video> și <audio>)
<track> - Definește piesele text pentru elementele media (<video> și <audio>)
<video> - Defineste video sau film
Grafică HTML
Pentru a desena grafică pe o pagină web este utilizat elementul HTML <canvas> .
Elementul HTML <canvas> este utilizat pentru a desena grafică, din nou, prin JavaScript.
Elementul <canvas> este doar un container pentru grafică. Pentru a desena grafică trebuie să utilizați JavaScript.
Canvas are mai multe metode pentru a desena căi, cutii, cercuri, text și adăugarea de imagini.
Specificați întotdeauna un atribut id (la care se face referire într-un script) și un atribut lățime și înălțime (width și height) pentru a defini dimensiunea pânzei (canvas). Pentru a adăuga un chenar (border), utilizați atributul stil (style).
HTML SVG
SVG înseamnă grafică vectorială scalabilă.
SVG este utilizat pentru a defini grafica pentru Web.
SVG este o recomandare W3C.
Elementul HTML <svg> este un container pentru grafică SVG.
SVG are mai multe metode pentru desenarea căilor, casetelor, cercurilor, textului și imaginilor grafice.
Diferențele dintre SVG și Canvas
SVG este un limbaj pentru descrierea graficelor 2D în XML.
Canvas desenează grafică 2D, pe fugă (cu un JavaScript).
SVG este bazat pe XML, ceea ce înseamnă că fiecare element este disponibil în DOM SVG. Puteți atașa manipulatoare de evenimente JavaScript (JavaScript event handlers) pentru un element.
În SVG, fiecare formă desenată este amintită ca obiect. Dacă se schimbă atributele unui obiect SVG, browserul poate reda automat forma.
Canvas: Rezoluție dependentă. Fără suport pentru organizatorii de evenimente.Capacități slabe de redare a textului. Puteți salva imaginea rezultată ca .png sau .jpg. Bine potrivit pentru jocuri cu intensitate grafică.
SVG: Rezoluție independentă. Suport pentru operatorii de evenimente. Cel mai potrivit pentru aplicații cu zone de redare mari (Google Maps). Redarea lentă, dacă este complexă (orice lucru care utilizează mult DOM va fi lent). Nu este potrivit pentru aplicații de joc.
HTML APIs
API Geolocalizare HTML este utilizat pentru a localiza poziția unui utilizator.
Localizați Poziția Utilizatorului
API Geolocalizare în HTML este utilizat pentru a obține poziția geografică a unui utilizator.
Deoarece acest lucru poate compromite confidențialitatea, poziția nu este disponibilă decât dacă utilizatorul o aprobă.
Geolocalizarea este cea mai precisă pentru dispozitivele cu GPS, cum ar fi smartphone-ul.
Începând cu Chrome 5.0, API-ul de geolocalizare va funcționa numai pe contexte sigure, cum ar fi HTTPS. Dacă site-ul dvs. este găzduit pe o origine nesigură (cum ar fi HTTP), solicitările pentru a obține locația utilizatorilor nu vor mai funcționa.
Utilizarea geolocalizării în HTML
Metoda getCurrentPosition () este utilizată pentru a returna poziția utilizatorului.
Al doilea parametru al metodei getCurrentPosition () este utilizat pentru a gestiona erorile. Specifică o funcție care trebuie executată dacă nu reușește să obțină locația utilizatorului:
Pentru a afișa rezultatul într-o hartă, aveți nevoie de acces la un serviciu de hartă, cum ar fi Google Maps.
Geolocalizarea este de asemenea foarte utilă pentru informații specifice locației, cum ar fi:
Informații locale actualizate.
Afișare Puncte de interes în apropierea utilizatorului.
Navigare rotativă (GPS).
Metoda getCurrentPosition () returnează un obiect de succes. Proprietățile de latitudine, longitudine și precizie sunt întotdeauna returnate. Celelalte proprietăți sunt returnate dacă sunt disponibile:
coords.latitude - Latitudinea ca număr zecimal (întors întotdeauna)
coords.longitude - Longitudinea ca număr zecimal (întors întotdeauna)
coords.acuratetă - Precizia poziției (întoarsă întotdeauna)
coords.altitude - Altitudinea în metri peste nivelul mării medii (returnat dacă este disponibil)
coords.altitude - Accarity Precizia altitudinii de poziție (returnată dacă este disponibilă)
coords.heading - Titlul ca grade în sensul acelor de ceasornic dinspre nord (returnat dacă este disponibil)
coords.speed - Viteza în metri pe secundă (returnată dacă este disponibilă)
timestamp - Data / ora răspunsului (returnat dacă este disponibil)
Obiect de geolocalizare - Alte metode interesante
watchPosition () - returnează poziția actuală a utilizatorului și continuă să returneze poziția actualizată pe măsură ce utilizatorul se mișcă (precum GPS-ul într-o mașină).
clearWatch () - Oprește metoda watchPosition ().
PHP Manipularea fișierelor
Manipularea fișierelor PHP (PHP File Handling)
Manipularea fișierelor (File handling) este o parte importantă a oricărei aplicații web. Adesea, trebuie să deschideți și să procesați un fișier pentru diferite sarcini.
PHP Manipularea fișierelor (PHP Manipulating Files)
PHP are mai multe funcții pentru crearea, citirea, încărcarea și editarea fișierelor (creating, reading, uploading, and editing files).
Aveți grijă când manipulați fișierele (manipulating files)!
Când manipulați fișierele (manipulating files) trebuie să fiți foarte atenți.
Puteți face multe daune dacă faceți ceva greșit. Erorile comune sunt: editarea fișierului greșit, completarea unui hard disk cu date nefolositoare (garbage data) și ștergerea din accident a conținutului unui fișier.
Funcția PHP readfile()
Funcția readfile() citește un fișier și îl scrie în bufferul de ieșire (output buffer).
Presupunem că avem un fișier text numit „webdictionary.txt”, stocat pe server, care arată astfel:
AJAX = JavaScript și XML asincron (Asynchronous JavaScript and XML)
CSS = Fișe de stil în cascadă (Cascading Style Sheets)
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Limbaj de interogare structurat (Structured Query Language)
SVG = Grafică vectorială scalabilă (Scalable Vector Graphics)
XML = Limbaj de marcare extinsă (EXtensible Markup Language)
Codul PHP pentru a citi fișierul și a-l scrie în bufferul de ieșire (output buffer) este după cum urmează (funcția readfile() returnează numărul de octeți citiți cu succes):
<?php
echo readfile("webdictionary.txt");
?>
Funcția readfile() este utilă dacă tot ce doriți să faceți este să deschideți un fișier și să citiți conținutul acestuia.
Capitolele următoare vă vor învăța mai multe despre gestionarea fișierelor.
PHP Fișierele Open/Read/Close
PHP Fișierele Open/Read/Close
În acest capitol vă vom învăța cum să deschideți, să citiți și să închideți (open, read și close) un fișier pe server.
PHP Open File - fopen()
O metodă mai bună de a deschide fișiere este cu funcția fopen(). Această funcție vă oferă mai multe opțiuni decât funcția readfile().
Vom folosi fișierul text, "webdictionary.txt", în timpul lecțiilor:
AJAX = JavaScript și XML asincron (Asynchronous JavaScript and XML)
CSS = Fișe de stil în cascadă (Cascading Style Sheets)
HTML = Hyper Text Markup Language
PHP = PHP Hypertext Preprocessor
SQL = Limbaj de interogare structurat (Structured Query Language)
SVG = Grafică vectorială scalabilă (Scalable Vector Graphics)
XML = Limbaj de marcare extinsă (EXtensible Markup Language)
Primul parametru al fopen() conține numele fișierului care trebuie deschis și al doilea parametru specifică în ce mod ar trebui să fie deschis fișierul. Următorul exemplu generează, de asemenea, un mesaj dacă funcția fopen() nu poate deschide fișierul specificat:
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
echo fread($myfile,filesize("webdictionary.txt"));
fclose($myfile);
?>
Fișierul poate fi deschis într-unul din următoarele moduri:
r - Deschideți un fișier numai pentru citire. Indicatorul de fișiere începe de la începutul fișierului
w - Deschideți un fișier numai pentru scriere. Șterge conținutul fișierului sau creează un nou fișier dacă acesta nu există. Indicatorul de fișiere începe de la începutul fișierului
a - Deschideți un fișier numai pentru scriere. Datele existente în fișier sunt păstrate. Indicatorul fișierului începe la sfârșitul fișierului. Creează un nou fișier dacă fișierul nu există
x - Creează un nou fișier numai pentru scriere. Returnează FALSE și o eroare dacă fișierul există deja
r + - Deschideți un fișier pentru citire / scriere. Indicatorul de fișiere începe de la începutul fișierului
w + - Deschideți un fișier pentru citire / scriere. Șterge conținutul fișierului sau creează un nou fișier dacă acesta nu există. Indicatorul de fișiere începe de la începutul fișierului
a + - Deschideți un fișier pentru citire / scriere. Datele existente în fișier sunt păstrate. Indicatorul fișierului începe la sfârșitul fișierului. Creează un nou fișier dacă fișierul nu există
x + - Creează un nou fișier pentru citire / scriere. Returnează FALSE și o eroare dacă fișierul există deja
PHP Read File - fread()
Funcția fread() citește dintr-un fișier deschis.
Primul parametru al fread() conține numele fișierului din care trebuie citit și al doilea parametru specifică numărul maxim de octeți de citit.
Următorul cod PHP citește fișierul "webdictionary.txt" până la sfârșit:
fread($myfile,filesize("webdictionary.txt"));
PHP Close File - fclose()
Funcția fclose() este utilizată pentru a închide un fișier deschis.
Este o practică bună de programare pentru a închide toate fișierele după ce ați terminat cu ele. Nu doriți ca un fișier deschis să fie difuzat pe serverul dvs. preluând resurse!
fclose() necesită numele fișierului (sau o variabilă care deține numele fișierului) pe care dorim să o închidem:
<?php
$myfile = fopen("webdictionary.txt", "r");
// ceva cod care urmează să fie executat ....
fclose($myfile);
?>
PHP Read Single Line - fgets()
Funcția fgets() este utilizată pentru a citi o singură linie dintr-un fișier.
Exemplul de mai jos produce (outputs) prima linie a fișierului "webdictionary.txt":
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
echo fgets($myfile);
fclose($myfile);
?>
După un apel la funcția fgets(), indicatorul de fișiere (file pointer) a trecut la linia următoare.
PHP Verifică sfârșitul fișierului - feof() (PHP Check End-Of-File - feof())
Funcția feof() verifică dacă s-a ajuns la „sfârșitul fișierului” (end-of-file) (EOF).
Funcția feof() este utilă pentru a bucla (looping) prin date de lungime necunoscută.
Exemplul de mai jos citește fișierul "webdictionary.txt" linie rând, până la sfârșitul fișierului (end-of-file):
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
// Ieșirea unei linii până la sfârșitul fișierului (end-of-file)
while(!feof($myfile)) {
echo fgets($myfile) . "<br>";
}
fclose($myfile);
?>
PHP Read Single Character - fgetc()
Funcția fgetc() este utilizată pentru a citi un singur caracter dintr-un fișier.
Exemplul de mai jos citește fișierul "webdictionary.txt" caracter după caracter, până când se ajunge la sfârșitul fișierului (end-of-file):
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Nu se poate deschide fișierul!");
// Ieșirea unui caracter până la sfârșitul fișierului (end-of-file)
while(!feof($myfile)) {
echo fgetc($myfile);
}
fclose($myfile);
?>
După un apel către funcția fgetc(), indicatorul de fișier (file pointer) se mută la următorul caracter.
AJAX Poll
PHP - Sondaj AJAX
Sondaj AJAX
Următorul exemplu va demonstra un sondaj în care rezultatul este afișat fără reîncărcare.
Exemplu explicat - Pagina HTML
Când un utilizator alege o opțiune, se execută o funcție numită "getVote()". Funcția este declanșată de evenimentul "onclick":
<html>
<head>
<script>
function getVote(int) {
if (window.XMLHttpRequest) {
// cod pentru IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // cod pentru IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("poll").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","poll_vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="poll">
<h3>Până acum vă plac PHP și AJAX?</h3>
<form>
Da:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>Nu:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
</body>
</html>
Funcția getVote() face următoarele:
Creați un obiect XMLHttpRequest
Creați funcția care trebuie executată atunci când răspunsul serverului este gata
Trimiteți cererea dezactivată unui fișier de pe server
Observați că la URL se adaugă un parametru (vote) (cu valoarea opțiunii da sau nu)
Fișierul PHP
Pagina de pe server numită de JavaScript-ul precedent este un fișier PHP numit "poll_vote.php":
<?php
$vote = $_REQUEST['vote'];
//obțineți conținutul fișierului text (textfile)
$filename = "poll_result.txt";
$content = file($filename);
//puneți conținutul în tablou (array)
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
// introduceți voturi în fișierul txt (txt file)
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Rezultat:</h2>
<table>
<tr>
<td>Da:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>Nu:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
Valoarea este trimisă de la JavaScript și se întâmplă următoarele:
Obțineți conținutul fișierului "poll_result.txt"
Puneți conținutul fișierului în variabile și adăugați unul la variabila selectată
Scrieți rezultatul în fișierul "poll_result.txt"
Prezentați o reprezentare grafică a rezultatului sondajului
Fișierul text
Fișierul text (poll_result.txt) este locul în care stocăm datele din sondaj.
Primul număr reprezintă voturile „Da”, al doilea număr reprezintă voturile „Nu”.
Nu uitați să permiteți serverului dvs. Web să editeze fișierul text. NU acorda acces tuturor, doar serverului web (PHP).
