Rezultate pentru tag: mica
Unghiul a două plane
Unghi diedru. Unghi plan al unui diedru. Determinarea măsurii unghiului format de două plane
Propagarea luminii. Reflexia si refracţia.
Propagarea luminii în medii omogene: constanţa vitezei şi conceptul de rază de lumină. Legile reflexiei şi refracţiei. Reflexia totală: definiţie, aplicaţii.
Prisma. Oglinzi plane şi sferice.
Prisma optică. Formarea imaginilor. Oglinda plană. Oglinzi sferice: proprietăţi, construcţia imaginilor.
Aproximaţiile lentilei. Lentila convergentă.
Aproximaţiile lentilei: lentila subţire, stigmatismul. Lentila convergentă: proprietăţi, construcţia imaginilor.
Lentile divergente. Convergenţa lentilelor.
Lentile divergente: proprietăţi, construcţia imaginilor. Convergenţa lentilelor: definiţie, ecuaţie.
Formulele lentilelor: Newton şi Descartes.
Explicarea convenţiei de semn pentru lentile. Deducerea formulelor Newton şi Descartes pentru imagini în lentile.
Microscopul. Ochiul uman.
Exemple de instrumente optice cu sisteme centrate de lentile: microscopul (parametri, exemple) şi ochiul uman (componente, acomodarea).
Noțiuni introductive
Materia, substanțe, molecule, atomi, ioni. Particulele subatomice: electroni, protoni, neutroni. Unitatea atomică de masă (u.a.m.) și sarcina electrică. Numărul atomic Z, numărul de masă A, numărul de neutroni N.
Masă atomică. Izotopi. Mol de atomi
Masa atomică relativă medie. Compoziția procentuală a izotopilor în natură. Numărul lui Avogadro.
Noţiuni de cinematică.
Introducem noţiunile şi mărimile de bază ale cinematicii. Discutăm ecuaţia de mişcare. Prezentăm definiţia şi proprietăţile vectorilor.
Viteza şi acceleraţia.
Metode de adunare şi scadere a vectorilor. Viteza medie şi viteza momentană. Acceleraţia medie şi acceleraţia momentană.
Mişcarea circulară uniformă.
Definiţie, ecuaţia de mişcare, mărimi caracteristice, acceleraţia centripetă.
Noţiuni de dinamică. Principiile mecanicii.
Inerţia şi masa, principiul I (al inerţiei), forţa, principiul II (fundamental.)
Acţiunea şi reacţiunea. Problemă de dinamică.
Principiul III, al acţiunii şi reacţiunii. Exemplu de problemă dinamică rezolvată.
Elasticitatea. Legea Hooke.
Elasticitatea. Forţa elastică. Legea Hook. Efortul unitar.
Forţa de frecare. Corpul pe plan înclinat.
Frecarea. Forţa de frecare. Aplicaţiile frecării. Corpul pe plan înclinat.
Puterea şi randamentul.
Definiţia puterii. Randamentul unei maşini. Randamentul planului înclinat.
Legea conservării impulsului.
Impulsul forţei. Impulsul punctului material. Legea conservării impulsului. Exemple.
Refracţia undelor.
Refracţia undelor mecanice. Seismologia - undele mecanice terestre.
Structura substanţei.
Structura substanţei. Ipoteza atomică. Numarul lui Avogadro. Molul.
Noţiuni de termodinamică.
Sistem termodinamic. Stări şi parametri de stare. Procese şi parametri de proces. Echilibru termodinamic.
Echilibrul termic. Temperatura.
Echilibrul termic. Temperatura. Scări de temperatura. Termometre.
Procese izobare. Procese izocore.
Procese izobare: legea Gay-Lussac. Procese izocore: legea Charles. Temperatura zero absolut.
Procese izoterme. Ecuaţia generală a gazelor.
Procese izoterme: legea Boyle-Mariotte. Ecuaţia generală a gazelor (Clapeyron-Mendeleev).
Teoria cinetico-moleculara: aplicaţii.
Deducerea legii Dalton. Extinderea modelului gazului ideal la substanţe reale. Clasificarea stărilor de agregare.
Calorimetrie I.
Lucrul mecanic: definiţie, ecuaţii pentru varii procese. Căldura. Coeficienţi calorici: definţii, tipuri.
Calorimetrie II.
Calorimetrul şi utilizarea lui. Ecuaţia calorimetrică. Energia internă.
Principiul I. Maşina termică.
Principiul I al termodinamicii. Maşina termică. Perpetuum mobile de speţa I şi II. Relaţia Mayer.
Motoare termice.
Randamentul maşinii termice. Motoarele termice Otto şi Diesel.
Ciclul Carnot.
Ciclul Carnot. Teorema Carnot: randament maxim. Motorul cu reacţie.
Entropia. Principiul II.
Entropia: definiţie, interpretare. Procese reversibile şi ireversibile. Principiul II al termodinamicii.
Lichefierea, topirea. Diagrama de fază.
Izotermele Andrews ale gazului real. Lichefierea. Topirea şi solidificarea. Diagramele de fază. Punctul triplu.
Legea Coulomb. Câmpul electric.
Sarcina electrică. Legea Coulomb a interacţiunii electrostatice. Câmpul electric, linii de câmp.
Inducţia magnetică. Forţa electrodinamică.
Inducţia magnetică: conductorii rectiliniu şi circular, solenoidul, bobina. Forţa electrodinamică.
Mărimile curentului alternativ.
Valorile momentane şi valorile efective ale mărimilor curentului alternativ: fluxul, tensiunea, intensitatea.
Elemente de circuit: R, L, C.
Elemente de circuit în curent alternativ: rezistorul, bobina, condensatorul.
Circuitul oscilant deschis. Antene.
Circuitul oscilant deschis. Antene dipol de emisie şi recepţie. Clasificarea undelor electromagnetice.
Principiile Einstein. Transformările Lorentz.
Principiile Einstein ale relativităţii restrânse. Spaţiu-timpul în fizica relativistă. Transformările Lorentz. Relativitatea simultaneităţii.
Dinamica relativistă. Ecuaţia Einstein.
Dinamica relativistă: masa, impusul şi forţa în fizica relativistă. Ecuaţia Einstein: relaţia masă-energie.
Efectul fotoelectric extern.
Dispozitiv experimental. Legile efectului fotoelectric extern. Eşecul modelului ondulatoriu de a explica efectul.
Efectul Compton.
Dispozitivul experimental. Calculul variaţiei lungimii de undă. Eşecul modelului ondulatoriu şi succesul modelului corpuscular.
Ipoteza de Broglie. Difracţia electronilor.
Dualismul unda-corpuscul: ipoteza de Broglie. Relaţia de Broglie. Difracţia electronilor: legea Bragg.
Experimentul Rutherford.
Dispozitiv experimental, rezultate, concluzii. Modelul planetar al atomului.
Experimentul Franck-Hertz.
Dispozitiv experimental, rezultate, concluzii. Cuantificarea energiei atomice.
Nivelele energetice ale atomului de hidrogen.
Nivelele energetice Bohr ale atomului de hidrogen. Tranziţiile atomului de hidrogen. Energia de ionizare.
Interpretarea spectrelor hidrogenului.
Interpretarea legii seriilor spectrale ale atomului de hidrogen prin modelul Bohr. Calculul constantei Rydberg.
Aplicaţii: laseri.
LASERi: emisia stimulată, inversia de populaţie. Tehnologii de construcţie, proprietăţi, aplicaţii.
Structura învelișului electronic
Electroni. Înveliş electronic - straturi electronice, substraturi electronice, orbitali. Spin electronic.
Semiconductori intrinseci şi extrinseci.
Legături covalente. Semiconductori intrinseci. Semiconductori extrinseci P şi N - doparea cu impurităţi.
Poziţia elementelor în tabelul periodic şi proprietăţile periodice
Tabelul periodic. Poziţia elementelor în tabelul periodic. Proprietăţile periodice. Raza atomică, volumul atomic. Ion, cation, anion.
Forma nucleului. Forţa nucleară.
Compoziţia, forma şi densitatea nucleului. Forţa nucleară. Defectul de masă.
Variaţia energiei de ionizare
Ion, cation, anion. Proprietăți periodice. Energie de ionizare - definiție, variație în tabelul periodic.
Variaţia proprietăţilor periodice chimice
Proprietățile periodice chimice. Electronegativitate, caracter metalic, caracter nemetalic, valență. Scara electronegativităţii. Elemente electronegative şi elemente electropozitive. Proprietăţile fizice ale metalelor şi nemetalelor. Caracterul bazic şi caracterul acid al oxizilor metalici.
Legătura ionică. Compuşii ionici.
Regula octetului. Legături chimice. Cedare şi primire de electroni. Punere în comun de electroni. Compuşi ionici. Ioni pozitivi – cationi. Ioni negativi – anioni. Simboluri Lewis. Substanţe cristaline. Proprietăţile compuşilor ionici.
Interacţia cu substanţa. Fisiunea nucleară.
Interacţia radiaţiilor α, β şi γ cu substanţa. Dozimetrie. Fisiunea nucleară şi produsele ei.
Legătura covalentă şi compuşii moleculari
Legături covalente. Compuşi moleculari. Legături covalente polare. Molecule polare – molecula de apă şi molecula de acid clorhidirc.
Fisiunea în lanţ. Reactorul nuclear.
Reacţia de fisiune în lanţ. Criticalitatea fisiunii în lanţ. Reactorul nuclear. Bomba nucleară.
Legătura coordinativă. Combinaţiile complexe.
Legătura coordinativă. Coordinare. Combinații complexe. Donor, acceptor, ion central, ligand. Număr de coordinare.
Proprietăţile apei
Molecula de apă. Proprietățile apei. Legături de hidrogen. Dipoli. Gheța. Solubilitate, punct de topire, punct de fierbere.
Forţele dipol-dipol şi forţele de dispersie London
Forțe intermoleculare. Legătura de hidrogen, forțe dipol-dipol, forțe de dispersie London, forțe van der Waals. Punct de fierbere, punct de topire, stare de agregare, electronegativitate.
Modelul standard. Particule elementare.
Modelul standard al interacţiunilor cuantice de câmp. Fizica particulelor elementare.
Soluţii. Dizolvarea compuşilor ionici şi moleculari în apă.
Soluţii. Amestecuri omogene şi amestecuri eterogene. Solvent/dizolvant şi solut/dizolvat/solvat. Soluţii lichide, gazoase şi solide. Solubilitate. Factorii care influenţează solubilitatea. Apa – cel mai bun solvent. Dizolvarea. Dizolvarea compuşilor ionici în apă. Dizolvarea substanţelor polare în apă.
Echilibre chimice – legea acţiunii maselor
Reacţia directă, reacţia inversă. Procedeul Haber, obţinerea amoniacului. Starea de echilibru chimic. Variaţia în timp a concetraţiilor şi a vitezelor de reacţie. Reacţii reversibile. Legea acţiunii maselor. Constanta de echilibru. Aplicaţii – legea acţiunii maselor.
Echilibre chimice – aplicaţie
Viteza reacţiei directe, viteza reacţiei inverse. Starea de echilibru chimic. Constanta de echilibru. Aplicaţii.
Acizi şi baze. Teoria protolitică.
Reacţia de neutralizare. Acizi, baze. Protonul. Transferul de protoni. Ion hidroniu. Teoria Brönsted-Lowry sau teoria protolitică. Clasificarea acizilor. Acid conjugat, bază conjugată. Cupluri acid-bază conjugate.
Tăria acizilor şi bazelor – amfoliţi acido-bazici
Acizi tari şi acizi slabi. Ionizarea acizilor tari. Ionizarea acizilor slabi. Constanta de aciditate. Ka. Baze tari şi baze slabe. Ionizarea bazelor tari. Ionizarea bazelor slabe. Constanta de bazicitate, Kb. Caracterul amfoter. Amfoliţi acido-bazici.
pH-ul soluţiilor apoase
pH – definiţie, semnificaţie matematică. Reacţia de autoprotoliză a apei. Soluţie neutră. Produsul ionic al apei, Kw. Soluţii acide, soluţii neutre şi soluţii bazice. pH neutru, pH bazic şi pH acid. Scala de pH.
Reacţii redox. Oxidanţi şi reducători.
Transferul de electroni. Reacţia de oxidare. Reacţia de reducere. Numărul de oxidare. Reguli pentru determinarea numerelor de oxidare. Reacţii redox. Agenţi oxidanţi şi agenţi reducători. Caracter oxidant şi carcter reducător. Seria activităţii metalelor.
Seria activităţii metalelor
Oxidant, reducător. Metale active, metale foarte active şi metale inactive. Atomi metalici, ioni metalici – configuraţia electronică.
Coeficienţii stoechiometrici în ecuaţiile reacţiilor redox
Coeficienţi stoechiometrici. Stabilirea coeficienţilor stoechiometrici prin metoda redox – aplicaţii.
Celule electrochimice
Electrochimie. Celulă electrochimică. Elemente galvanice/voltaice. Conductori metalici şi electroliţi. Electrod, anod, catod. Semicelulă galvanică. Punte de sare. Procesele chimice care au loc la anod şi la catod. Simbolizarea unei celule electrochimice. Pile uscate/baterii. Pila Daniell.
Coroziunea. Prevenirea coroziunii.
Coroziunea. Reacţiile chimice care generează coroziunea. Metode de prevenire a coroziunii. Galvanizarea. Protecţia catodică.
Unghiuri. Clasificarea unghiurilor
Unghi ascuţit, unghi drept, unghi obtuz, unghi nul, unghi alungit.
Clasificarea triunghiurilor
Clasificarea triunghiurilor după laturi şi după unghiuri: triunghi oarecare, triunghi isoscel, triunghi echilateral, triunghi ascuţitunghic, triunghi dreptunghic, triunghi obtuzunghic
Proprietați ale triunghiurilor oarecare
Suma masurilor unghiurilor unui triunghi este de 180 de grade. Unghi exterior unui triunghi.Teorema unghiului exterior. Bisectoarea interioară și bisectoarea exterioară a unui triunghi. Relații între unghiurile și laturile unui triunghi.
Dreptunghiul
Paralelogramul care are un unghi drept se numește dreptunghi. Proprietățile dreptunghiului. Modalități de a demonstra că un patrulater este dreptunghi.
Trapezul
Patrulaterul care are două laturi opuse paralele, iar celelalte două neparalele se numește trapez. Definiția unui trapez isoscel. Proprietățile trapezului isoscel. Modalități de a demonstra că un trapez este isoscel.
Linia mijlocie în trapez
Segmentul care uneşte mijloacele laturilor neparalele ale unui trapez se numeşte linie mijlocie a trapezului.
Proiecţii ortogonale pe o dreaptă
Proiecţia ortogonală a unui punct pe o dreaptă, proiecția ortogonală a unui segment pe o dreaptă
Trunchiul de piramidă (definiție, elemente)
Trunchi de piramidă. Definiția și elementele trunchiului de piramidă. Înălțimea trunchiului. Apotema trunchiului. Apotema bazei mari, apotema bazei mici. Trunchi de piramidă patrulateră regulată. Trunchi de piramidă triunghiulară regulată.
Corpuri geometrice asemenea
Corpuri asemenea. Definiția a două piramide asemenea. Raport de asemănare. Raportul ariilor a două suprafețe omoloage. Raportul volumelor a două piramide asemenea.
Alcani – proprietăţi chimice
Reacţii care au loc cu scindarea legăturilor C – C. Reacţii care au loc cu scindarea legăturilor C – H. Arderea alcanilor. Reacţia de substituţie – halogenarea alcanilor. Reacţia de dehidrogenare – piroliza, cracarea. Izomerizarea alcanilor. Izomerizarea n-butanului. Cifra octanică a benzinelor. Solubilitatea alcanilor.
Alchene – nomenclatură, proprietăţi fizice, aplicaţii practice
Serie omoloagă. Nomenclatură. Atomi de carbon vinilici şi atomi de carbon alilici. Caracteristicile legăturii duble. Izomerie geometrică (izomeri cis-trans). Izomerie de catenă. Izomerie de funcţiune. Izomerie de poziţie. Proprietăţi fizice
Alchine – nomenclatură, proprietăţi fizice
Caracteristicile legăturilor covalente triple. Nomenclatură. Izomerie de constituţie – izomerie de catenă şi izomerie de poziţie. Structura alchinelor. Proprietăţi fizice.
Alcadiene – nomenclatură, proprietăţi fizice şi chimice
Nomenclatură. Clasificarea alcadienelor în funcţie de poziţia legăturilor duble în catenă. Adiţia hidrogenului. Adiţia halogenilor. Adiţia 1,2 şi adiţia 1,4. Reacţia de polimerizare. Reacţia de copolimerizare. Obţinerea butadienei şi a izoprenului.
Legături covalente în compuşii organici
Tipuri de catene de atomi de carbon. Tipuri de legături covalente în compuşii organici. Orbitali moleculari de legătură. Hibridizare. Orbitali hibrizi. Hibridizare sp3. Hibridizare sp2. Hibridizare sp. Caracteristicile legăturilor covalente. Legătură σ, legătură π, geometrie tetraedrică, geometrie trigonal-planară, geometrie liniară.
Structura compuşilor organici – formule moleculare şi formule structurale
Structură chimică. Analiza elementală. Determinarea formulei procentuale, a formulei brute şi a formulei moleculare (exemple de calcul). Formule structurale: formule de proiecţie, formule de proiecţie restrânse (plane). Izomerie. Izomeri geometrici (izomeri cis-trans).
Reacţii ale compuşilor organici
Clasificarea reacţiilor chimice ale compuşilor organici. Schema generală a unei reacţii. Substrat organic şi reactant. Reacţii de substituţie. Reacţii de adiţie. Reacţii de eliminare. Reacţii de transpoziţie.
Reacţii de condensare şi policondensare
Reacţii de condensare între compuşii carbonilici – condensarea aldolică şi crotonică. Componentă carbonilică şi componentă metilenică. Reacţii de policondensare. Obţinerea şi proprietăţile fenoplastelor – bachelita şi novolacul.
Configuraţia enantiomerilor. Formule de perspectivă, formule Fischer
Formule de perspectivă. Formule de proiecţie Fischer. Configuraţia enantiomerilor. Sistemul R, S. Denumirea enantiomerilor reprezentaţi prin formule de perspectivă. Denumirea enantiomerilor reprezentaţi prin formule de proiecţie Fischer.
Grăsimi
Acizii graşi saturaţi. Acizi graşi nesaturaţi. Trigliceride simple şi mixte. Grăsimi saturate. Grăsimi nesaturate. Grăsimi mononesaturate. Omega 3. Grăsimi trans. Acţiunea grăsimilor asupra organismului uman.
Compuşi carbonilici
Grupa funcţională carbonil. Aldehide şi cetone. Nomenclatura aldehidelor. Nomenclatura cetonelor. Proprietăţi fizice. Reacţii de adiţie – adiţia hidrogenului. Reacţii de oxidare. Aplicaţii practice.
Aria dreptunghiului
Formula pentru arie dreptunghi. Exercițiu cu aria unui dreptunghi.
Acizi nucleici - mononucleotide, polinucleotide
Secvenţă de nucleotide. Acid deoxiribonucleic (ADN) şi acid ribonucleic (ARN). Informaţie genetică. Structura acizilor nucleici. Mononucleotide - pentoză, acid fosforic, baze azotate. Baze purinice şi baze pirimidinice. Riboză şi deoxiriboză. Nucleozide. Policondensarea mononucleotidelor.
Media aritmetică și media aritmetică ponderată
Formulele pentru medie aritmetică și medie ponderată a numerelor raționale pozitive.
Unghiuri - definiție și clasificare
Clasificarea unghiurilor. Unghi nul, unghi alungit, unghi ascuțit, unghi obtuz, unghi drept.
Patrulatere
Pătrat, dreptunghi, romb, paralelogram, trapez. Prezentare prin descriere și desen.
Noţiuni de termochimie, partea I
Tipuri de energie. Termodinamică – definiţie. Energie potenţială. Energie gravitaţională. Lucru mecanic. Căldură. Energie internă. Variaţia energiei interne într-un sistem termodinamic.
Noţiuni de termochimie, partea II
Reacţii endoterme. Reacţii exoterme. Efecte termice: degajare de căldură, absorbţie de căldură. Căldura de reacţie. Condiţii standard de determinare a căldurii de reacţie.
Entalpia
Energie cinetică. Energie potenţială. Energie internă. Funcţii de stare şi funcţii de proces. Variabile de stare. Mărimi de stare extensive şi intensive. Transfer de energie internă. Entalpia. Semnificaţia relaţiei de definire a entalpiei. Variaţia entalpiei. Calorimetrie.
Legea lui Hess. Entalpia de formare standard.
Termochimie. Variaţia entalpiei în reacţiile endoterme. Variaţia entalpiei în reacţiile exoterme. Legea aditivităţii căldurilor de reacţie – Legea lui Hess. Condiţii standard de reacţie. Entalpia molară de formare standard.
Căldura de combustie
Combustie. Tipuri de combustibili. Entalpia de combustie standard. Ardere completă şi ardere incompletă. Căldura de combustie. Puterea calorică. Condiţii normale pentru măsurarea puterii calorice. Putere calorică inferioară şi putere calorică superioară.
Aplicaţii
Căldura specifică, c. Căldura specifică molară. Exemple de calcul pentru capitolul termochimie.
Viteza de reacţie
Cinetica chimică – definiţie. Viteza medie de reacţie. Variaţia concentraţiei reactanţilor şi a produşilor de reacţie în timp. Exemplu de calcul pentru viteza medie de reacţie. Clasificarea reacţiilor chimice în funcţie de viteza de reacţie. Reacţii rapide. Reacţii cu viteză moderată. Reacţii lente. Măsurarea vitezei de reacţie.
Energia de activare. Teoria complexului activat.
Redistribuirea legăturilor chimice în timpul unei reacţii. Ciocniri eficace. Ciocniri ineficace. Energie de activare. Stare de tranziţie sau complex activat. Energia potenţială a complexului activat. Reprezentarea grafică a energiei de activare pentru o reacţie endotermă şi pentru o reacţie exotermă. Energia de activare a reacţiei directe şi energia de activare a reacţiei inverse. Teoria complexului activat. Condiţia geometrică şi condiţia energetică pentru ciocniri eficace.
Influenţa suprafeţei de contact şi a temperaturii asupra vitezei de reacţie
Factorii care influenţează viteza de reacţie. Influenţa suprafeţei de contact asupra vitezei de reacţie. Influenţa temperaturii asupra vitezei de reacţie. Dependenţa constantei de viteză de temperatură. Relaţia lui Arrhenius. Semnificaţia matematică a elementelor din relaţia lui Arrhenius. Determinarea energiei de activare. Metoda grafică de determinare a energiei de activare.
Influenţa catalizatorilor asupra vitezei de reacţie
Catalizatori – definiţie şi mod de funcţionare. Reprezentarea grafică a energiei de activare pentru o reacţie necatalizată şi o reacţie catalizată. Etapa determinantă de viteză. Reacţii catalitice. Proprietăţile catalizatorilor - activitatea catalitică, selectivitatea. Promotorii şi otrăvurile. Tipuri de reacţii catalitice –reacţii omogene, eterogene şi enzimatice. Suport catalitic. Inhibitori.
Aplicaţii
Timp de înjumătăţire. Unităţi de măsură pentru constanta de viteză. Exemple de calcul.
Numere naturale scrise în formă arabă și romană
Scrierea unui număr cu cifre arabe sau cifre romane. Reguli de scriere folosind cifrele romane
Logaritmi
Noțiunea de logaritm, exemple de logaritmi. Condițiile de existență a logaritmilor.
Trunchiul de con circular drept
Descrierea trunchiului de con circular drept. Elementele unui trunchi de con circular drept. Înălțimea trunchiului de con. Generatoarea trunchiului de con. Secțiunea axială a trunchiului de con. Desfășurarea unui trunchi de con circular drept. Aria trunchiului de con și volumul trunchiului de con. Deducerea formulelor de calcul pentru arie trunchi de con și volum trunchi de con. Aria laterală a trunchiului de con circular drept. Aria totală a trunchiului de con circular drept. Volumul trunchiului de con circular drept.
Funcții periodice
Noțiunea de funcție periodică, noțiunea de perioadă, perioadă principală. Exemple de funcții periodice. Proprietăți ale funcțiilor periodice. Graficul unei funcții periodice - proprietate. Periodicitatea funcțiilor - exerciții.
Echilibre acido-bazice. Tăria acizilor. Exponentul de aciditate.
Protonul și ionul de hidrogen. Ionul hidroniu și ionul hidroxil. Teoria protolitică Brønsted-Lowry. Cuplu acid-bază conjugată. Echilibru acido-bazic. Constanta de aciditate. Disocierea în apă a acizilor tari. Disocierea în apă a acizilor slabi. Exemple de acizi tari. Exemple de acizi slabi.
Tăria bazelor. Constanta de bazicitate și exponentul de bazicitate.
Disocierea bazelor tari în apă. Disocierea bazelor slabe în apă. Exemple de baze tari și baze slabe. Constanta de bazicitate. Exponentul de bazicitate. Apa - substanță amfoteră (amfolit acido-bazic). Produsul ionic al apei.
Funcția exponențială
Noțiunea de creștere exponențială, descreștere exponențială. Funcția exponențială și proprietățile acesteia. Grafice de funcții exponențiale.
Funcția logaritmică
Funcția logaritmică și proprietățile acesteia. Graficul funcției logaritmice.
Ecuații logaritmice
Rezolvarea ecuațiilor logaritmice, diverse tipuri de ecuații logaritmice.
Inecuații logaritmice
Rezolvarea inecuațiilor logaritmice, diverse tipuri de inecuații logaritmice.
Proprietăţile limitei unui şir
Principalele proprietăţi ale şirurilor care au limită.
Limitele funcţiilor elementare
Limita funcției raționale. Limita funcţiei radical. Limita funcţiei exponenţiale. Limita funcţiei logaritmice.
Derivatele unor funcţii elementare
Derivatele unor funcţii elementare: funcţia constantă, funcţia putere, funcţia radical de ordin n, funcţia logaritmică, funcţia exponenţială.
Variabile aleatoare
Variabile aleatoare: tabelul de distribuţie, media, modulul, dispersia şi amplitudinea unei variabile aleatoare.
Culori în HTML
Culorile în codul HTML sunt specificate folosind nume de culori predefinite sau valorile: RGB, HEX, HSL, RGBA, HSLA.
În HTML, o culoare poate fi specificată folosind un nume de culoare.
Puteți seta culoarea de fundal (Background Color) pentru elementele HTML folosind background-color.
Puteți seta culoarea textului folosind color.
Puteți seta culoarea marginilor folosind border.
Saturația poate fi descrisă ca intensitatea unei culori.
Luminozitatea unei culori poate fi descrisă cam cât de multă lumină doriți să dați culorii.
Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
Linkuri HTML
Linkurile se găsesc în aproape toate paginile web. Link-urile permit utilizatorilor să facă click pe drumul lor de la pagină la pagină.
Link-urile HTML sunt hyperlink-uri.
Utilizați elementul <a> pentru a defini un link.
Utilizați atributul href pentru a defini adresa link-ului.
Utilizați atributul țintă (target) pentru a defini unde să deschideți documentul legat.
Utilizați elementul <img> (în interiorul <a>) pentru a utiliza o imagine ca link.
Utilizați atributul id (id = "valoare") pentru a defini marcajele (bookmarks) dintr-o pagină
Atributul title specifică informații suplimentare despre un element.
Utilizați atributul href (href = "# valoare") pentru a face legătura cu marcajul (bookmark).
Marcajele HTML (bookmarks) sunt utilizate pentru a permite cititorilor să sară la anumite părți ale unei pagini Web.
Paginile externe pot fi referite cu o adresă URL completă sau cu o cale relativă la pagina web curentă.
Imagini de fundal în HTML
O imagine de fundal poate fi specificată pe aproape orice element HTML.
Pentru a adăuga o imagine de fundal în HTML, folosiți imaginea de fundal (background-image) a proprietății CSS.
Pentru a adăuga o imagine de fundal (background-image) la un element HTML, puteți utiliza atributul style.
Dacă doriți ca întreaga pagină să aibă o imagine de fundal (background-image), atunci trebuie să specificați imaginea de fundal (background-image) în elementul <body>.
Dacă imaginea de fundal este mai mică decât elementul, imaginea se va repeta, orizontal și vertical, până când va ajunge la sfârșitul elementului.
Pentru a evita ca imaginea de fundal (background-image)să se repete, utilizați proprietatea background-repeat.
Dacă doriți ca imaginea de fundal să acopere întregul element, puteți seta proprietatea de fundal (background-size) pe care să o acopere.
De asemenea, pentru a vă asigura că întregul element este întotdeauna acoperit, setați proprietatea de atașare în fundal la fix (background-attachment).
Dacă doriți ca întinderea imaginii de fundal să se potrivească întregii imagini din element, puteți seta proprietatea de fundal (background-size) la 100% 100%:
Elementul HTML head
Elementul <head> este un container pentru metadate (date despre date) și este plasat între eticheta <html> și eticheta <body>.
<head> Definește informații despre document.
<titlu> Defineste titlul unui document.
<base> Definește o adresă implicită sau o țintă implicită pentru toate linkurile dintr-o pagină.
<link> Definește relația dintre un document și o resursă externă.
<meta> Definește metadatele despre un document HTML.
<script> Definește un script din partea clientului.
<style> Definește informațiile despre stil pentru un document.
HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Aceasta variază în funcție de dispozitiv și va fi mai mică pe un telefon mobil decât pe ecranul computerului.
Ar trebui să includeți următorul element viewport <meta> în toate paginile web.
Partea width=device-width stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (care va varia în funcție de dispozitiv).
Partea initial-scale=1.0 setează nivelul inițial de zoom când prima pagină este încărcată de browser.
HTML Responsive Web Design
Responsive Web Design vizează utilizarea HTML-ului și CSS-ului pentru redimensionarea, ascunderea, micșorarea sau mărirea unui site web automat, pentru a-l arăta bine pe toate dispozitivele (desktop-uri, tablete și telefoane).
Setarea Viewport. Când creați pagini web responsive, adăugați următorul element <meta> în toate paginile dvs. web.
Imaginile responsive sunt imagini care se dimensionează frumos pentru a se potrivi cu orice dimensiune a browserului.
Utilizarea proprietății lățime (width).
Utilizarea proprietății cu lățimea maximă (max-width).
Elementul HTML <picture> vă permite să definiți imagini diferite pentru dimensiuni diferite ale ferestrei browserului.
Responsive Text Size. Mărimea textului poate fi setată cu o unitate „vw”, ceea ce înseamnă „lățimea vizualizării” (viewport width).
Pe lângă redimensionarea textului și a imaginilor, este de asemenea obișnuit să folosești interogări media în paginile responsive web.
Cu interogări media, puteți defini stiluri complet diferite pentru diferite dimensiuni de browser.
O pagină Responsive Web ar trebui să arate bine pe ecrane desktop mari și pe telefoane mobile mici.
Există multe CSS Frameworks care oferă un Responsive Design.
O modalitate excelentă de a crea un Responsive Design este de a utiliza o responsive style sheet.
Un alt framework popular este Bootstrap, folosește HTML, CSS și jQuery pentru a face pagini web responsive.
Culori CSS
Culorile sunt specificate folosind nume de culori predefinite sau valori RGB, HEX, HSL, RGBA, HSLA.
Nume de culoare CSS.
În CSS, o culoare poate fi specificată folosind un nume de culoare.
CSS / HTML acceptă 140 de nume standard de culori.
Culoare de fundal CSS (CSS Background Color).
Puteți seta culoarea de fundal pentru elementele HTML.
Culoare text CSS (CSS Text Color).
Puteți seta culoarea textului.
Culoarea marginilor în CSS (CSS Border Color).
Puteți seta culoarea marginilor.
Valori de culoare CSS (CSS Color Values).
În CSS, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA.
Valoarea CSS RGB
În CSS, o culoare poate fi specificată ca valoare RGB, folosind această formulă:
rgb (roșu, verde, albastru) / rgb(red, green, blue)
Fiecare parametru (roșu, verde și albastru)/rgb(red, green, blue) definește intensitatea culorii între 0 și 255.
De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la valoarea cea mai mare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, toți parametrii de culoare trebuie să fie setați la 0, astfel: rgb (0, 0, 0).
Pentru a afișa culoarea albă, toți parametrii de culoare trebuie să fie setați la 255, astfel: rgb (255, 255, 255).
Valoarea CSS HEX
În CSS, o culoare poate fi specificată folosind o valoare hexadecimală sub forma:
#rrggbb
În cazul în care rr (roșu), gg (verde) și bb (albastru) sunt valori hexadecimale între 00 și ff (la fel ca zecimale 0-255).
De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).
Valoare HSL.
În CSS, o culoare poate fi specificată folosind nuanță, saturație și ușurință (HSL) sub forma:
hsl (nuanță, saturație, ușurință)/ hsl (hue, saturation, lightness).
Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.
Saturația este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
De asemenea, lumina este procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% alb.
Saturația (saturation).
Saturația poate fi descrisă ca intensitatea unei culori.
100% este de culoare pură, fără nuanțe de gri
50% este 50% gri, dar puteți vedea în continuare culoarea.
0% este complet gri, nu mai puteți vedea culoarea.
Luminozitate (Lightness).
Luminozitatea unei culori poate fi descrisă cât de multă lumină doriți să dați culorii, unde 0% nu înseamnă lumină (negru), 50% înseamnă 50% lumină (nici întuneric, nici lumină) 100% înseamnă lumină completă (alb).
Nuanțele de gri sunt adesea definite prin setarea nuanței și a saturației la 0 și reglați luminozitatea de la 0% la 100% pentru a obține nuanțe mai închise / mai deschise.
Valoarea RGBA.
Valorile de culoare RGBA sunt o extensie a valorilor de culoare RGB cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu:
rgba (roșu, verde, albastru, alfa) / rgba(red, green, blue, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent).
Valoarea HSLA.
Valorile de culoare HSLA sunt o extensie a valorilor de culoare HSL cu un canal alfa - care specifică opacitatea unei culori.
O valoare de culoare HSLA este specificată cu:
hsla (nuanță, saturație, luminozitate, alfa) / hsla (hue, saturation, lightness, alpha)
Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent).
CSS Height și Width
Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.
Valori CSS înălțime / lățime (height/width)
Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:
auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
% - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.
Nu uitați că proprietățiile de înălțime și lățime nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!
Setarea lățimii maxime (max-width).
Proprietatea max-width este utilizată pentru a seta lățimea maximă a unui element.
Lățimea maximă (max-width) poate fi specificată în valori de lungime, cum ar fi px, cm, etc., sau în procente (%) din blocul conținut sau setat pe niciunul (acesta este implicit. Înseamnă că nu există o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului (500px). Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici.
Trageți fereastra browserului la o lățime mai mică de 500px, pentru a vedea diferența dintre cele două div-uri!
height - Setează înălțimea unui element.
max-height - Setează înălțimea maximă a unui element.
max-width - Setează lățimea maximă a unui element.
min-height - Setează înălțimea minimă a unui element.
min-width - Setează lățimea minimă a unui element.
width - Setează lățimea unui element.
CSS Fonturi
Proprietățiile fontului CSS definesc font family, boldness, size și style of a text.
Familii de fonturi CSS (CSS Font Families).
În CSS, există două tipuri de nume de fonturi:
generic family - un grup de familii de fonturi cu aspect similar (cum ar fi „Serif” sau „Monospace”).
font family - o familie de fonturi specifică (cum ar fi „Times New Roman” sau „Arial”).
Font Family.
Familia de fonturi a unui text este setată cu proprietatea font-family.
Proprietatea font-family ar trebui să dețină mai multe nume de font ca sistem „fallback”. Dacă browserul nu acceptă primul font, încearcă următorul font și așa mai departe.
Începeți cu fontul dorit și terminați cu o familie generică (generic family), pentru a permite browserului să aleagă un font similar în familia generică (generic family), dacă nu sunt disponibile alte fonturi.
Dacă numele unei familii de fonturi este mai mult de un cuvânt, acesta trebuie să fie între ghilimele, cum ar fi: „Times New Roman”.
Mai multe familii de fonturi sunt specificate într-o listă separată de virgule.
Stilul fontului (Font Style)
Proprietatea font-style este utilizată mai ales pentru a specifica textul italic.
Această proprietate are trei valori:
normal - Textul este afișat normal.
italic - Textul este afișat cu caractere italice.
oblique - Textul este „aplecat” (oblic este foarte similar cu italic, dar mai puțin susținut).
Proprietatea font-size stabilește dimensiunea textului.
Posibilitatea de a gestiona dimensiunea textului este importantă în proiectarea web. Cu toate acestea, nu ar trebui să utilizați ajustări de dimensiune a fontului pentru a face ca paragrafele să arate ca titluri sau rubricile să pară paragrafe.
Utilizați întotdeauna etichetele HTML adecvate, cum ar fi <h1> - <h6> pentru titluri și <p> pentru paragrafe.
Valoarea font-size poate fi o dimensiune absolută sau relativă.
Dimensiune absolută:
Setează textul la o dimensiune specificată.
Nu permite utilizatorului să modifice dimensiunea textului în toate browserele (greșit din motive de accesibilitate).
Dimensiunea absolută este utilă atunci când dimensiunea fizică a ieșirii este cunoscută.
Mărime relativă:
Setează dimensiunea în raport cu elementele din jur.
Permite unui utilizator să modifice dimensiunea textului în browsere.
Dacă nu specificați o dimensiune a fontului, dimensiunea implicită pentru textul normal, cum ar fi alineatele, este 16px (16px = 1em).
Setarea dimensiunii fontului cu pixeli.
Setarea dimensiunii textului cu pixeli vă oferă un control complet asupra dimensiunii textului.
Dacă utilizați pixeli, puteți utiliza în continuare zoom tool pentru a redimensiona întreaga pagină.
Setați dimensiunea fontului cu Em
Pentru a permite utilizatorilor să redimensioneze textul (în meniul browserului), mulți dezvoltatori folosesc em în loc de pixeli.
Unitatea de dimensiuni em este recomandată de W3C.
1em este egal cu dimensiunea curentă a fontului. Dimensiunea implicită a textului în browsere este 16px. Deci, dimensiunea implicită de 1em este 16px.
Mărimea poate fi calculată de la pixeli la em folosind această formulă: pixeli / 16 = em.
Font Weight
Proprietatea font-weight specifică greutatea unui font:
Responsive Font Size
Mărimea textului poate fi setată cu o unitate vw, ceea ce înseamnă „viewport width”.
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:
Font Variant
Proprietatea font-variant specifică dacă un text ar trebui să fie afișat sau nu într-un font cu caractere mici.
Într-un font cu caractere mici, toate literele mici sunt convertite în litere mari. Cu toate acestea, literele majuscule convertite apar cu o dimensiune de font mai mică decât literele majuscule originale din text.
font - Setează toate proprietățile fontului într-o singură declarație.
font-family - Specifică familia de fonturi pentru text.
font-size - Specifică dimensiunea fontului textului.
font-style - Specifică stilul de font pentru text.
font-variant - Specifică dacă un text trebuie să fie afișat sau nu într-un font cu caractere mici.
font-weight - Specifică greutatea unui font.
CSS max-width
CSS Layout - width și max-width.
Utilizarea width, max-width și margin: auto;
Așa cum am menționat în capitolul precedent; un element la nivel de block (block-level element) ocupă întotdeauna întreaga lățime disponibilă (se întinde spre stânga și spre dreapta, cât poate).
Setarea lățimii (width) unui element la nivel de bloc (block-level element) va împiedica întinderea sa până la marginile containerului său. Apoi, puteți seta marginile la auto, pentru a centra orizontal elementul în containerul său. Elementul va prelua lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între cele două margini.
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului. Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici. Acest lucru este important atunci când faceți un site utilizabil pe dispozitive mici.
CSS Position
CSS Layout - Proprietatea position
Proprietatea position specifică tipul metodei de poziționare utilizate pentru un element (static, relativ, fix, absolut sau lipicios/static, relative, fixed, absolute sau sticky).
Elementele sunt apoi poziționate folosind proprietățiile de sus, de jos, de stânga și de dreapta (top, bottom, left, și right). Cu toate acestea, aceste proprietăți nu vor funcționa decât dacă proprietatea position este setată prima. De asemenea, funcționează diferit în funcție de valoarea poziției.
position: static; (poziție: static)
Elementele HTML sunt poziționate static în mod implicit.
Elementele poziționate static nu sunt afectate de proprietățile de sus, de jos, de stânga și de dreapta.
Un element cu position: static; (poziție: static) nu este poziționat într-un mod special; este poziționat întotdeauna în funcție de fluxul normal al paginii.
Element cu position: relative; (poziție: relativă;)
Un element cu position: relative; (poziție: relativă;) este poziționat în raport cu poziția normală.
Setarea proprietățiilor de sus, dreapta, jos și stânga a unui element relativ poziționat (relatively-positioned element) va face ca acesta să fie ajustat departe de poziția normală. Alt conținut nu va fi ajustat pentru a se încadra în niciun spațiu lăsat de element.
Elementul cu position: fixed; (poziție: fix;)
Un element cu position: fixed; (poziție: fix;) este poziționat în raport cu afișajul, ceea ce înseamnă că acesta rămâne întotdeauna în același loc, chiar dacă pagina este defilată. Proprietățile de sus, dreapta, jos și stânga sunt utilizate pentru poziționarea elementului.
Un element fix nu lasă un gol în pagina în care ar fi fost localizat în mod normal.
Elementul cu position: absolute; (poziție: absolută;)
Un element cu position: absolute; (poziție: absolută;) este poziționat în raport cu strămoșul cel mai apropiat poziționat (în loc de poziționat în raport cu vitrina, ca fix).
In orice caz; dacă un element poziționat absolut nu are strămoși poziționați, acesta folosește corpul documentului și se deplasează împreună cu derularea paginii.
Un element „poziționat” este unul a cărui poziție este orice, cu excepția staticii.
Elementul cu position: sticky; (poziție: lipicios;)
Un element cu position: sticky; (poziție: lipicios;) este poziționat în funcție de poziția de derulare a utilizatorului.
Un element lipicios (sticky) trece între relativ și fix, în funcție de poziția de defilare. Este poziționat relativ până când o poziție de offset dată este întâlnită în vitrină - apoi se „lipeste” în loc (ca poziția: fix).
Internet Explorer, Edge 15 și versiunile anterioare nu acceptă poziționarea sticky. Safari necesită un prefix -webkit- (vezi exemplul de mai jos). De asemenea, trebuie să specificați cel puțin una de sus, dreapta, jos sau stânga pentru ca poziționarea sticky să funcționeze.
În acest exemplu, elementul sticky se lipește în partea de sus a paginii (sus: 0), când atingeți poziția de defilare.
Elemente suprapuse (Overlapping Elements)
Când elementele sunt poziționate, se pot suprapune altor elemente.
Proprietatea indexului z specifică ordinea stivei unui element (care element trebuie plasat în fața sau în spatele celorlalte).
Un element poate avea o comandă a stivei pozitivă sau negativă.
Un element cu o ordine de stivă mai mare este întotdeauna în fața unui element cu o ordine de stivă mai mică.
Dacă două elemente poziționate se suprapun fără z - index specificat, elementul poziționat ultimul în codul HTML va fi afișat în partea de sus.
Poziționarea textului într-o imagine
Cum să poziționați textul peste o imagine.
Toate proprietățiile de poziționare CSS: bottom, clip, left, position, top, right, z-index.
bottom - Setează marginea inferioară a marginii pentru o casetă poziționată
clip - Clipsează un element absolut poziționat
left - Setează marginea din stânga pentru o cutie poziționată
position - Specifică tipul de poziționare pentru un element
right - Setează marginea din dreapta pentru o cutie poziționată
top - Setează marginea superioară a marginii pentru o casetă poziționată
z-index - Setează ordinea stivei unui element
CSS Opacitate / Transparență
Proprietatea opacity specifică opacitatea / transparența unui element.
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât mai transparentă.
IE8 și utilizarea anterioară filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Efectul Hover transparent
Proprietatea de opacitate este adesea folosită împreună cu: hover selector pentru a modifica opacitatea cu mouse-over.
Transparent Box
Când se utilizează proprietatea opacity pentru a adăuga transparență pe fundalul unui element, toate elementele sale copil moștenesc aceeași transparență. Acest lucru poate face textul într-un element complet transparent, greu de citit.
Transparență folosind RGBA
Dacă nu doriți să aplicați opacitate elementelor copil, folosiți valorile de culoare RGBA.
Ați aflat de la capitolul nostru de culori CSS, că puteți utiliza RGB ca valoare a culorii. În plus față de RGB, puteți utiliza o valoare a culorii RGB cu un canal alfa (RGBA) - care specifică opacitatea unei culori.
O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac).
Text în Transparent Box.
CSS Image Sprites
Image Sprites
Un image sprite este o colecție de imagini puse într-o singură imagine.
O pagină web cu multe imagini poate dura mult timp pentru a se încărca și generează mai multe solicitări de server.
Utilizarea image sprite-urilor va reduce numărul de solicitări de server și va economisi lățimea de bandă.
Cu CSS, putem afișa doar partea din imagine de care avem nevoie.
<img id = "home" src = "img_trans.gif"> - Definește doar o imagine transparentă mică, deoarece atributul src nu poate fi gol. Imaginea afișată va fi imaginea de fundal pe care o specificăm în CSS.
width: 46px; height: 44px; - Definește portiunea imaginii pe care dorim sa o folosim.
background: url(img_navsprites.gif) 0 0; - Definește imaginea de fundal și poziția acesteia (left 0px, top 0px).
Acesta este cel mai simplu mod de a utiliza image sprites, acum dorim să-l extindem folosind link-uri și efectele hover.
Image Sprites - Creați o listă de navigare
Imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.
Listă HTML, deoarece poate fi o legătură și acceptă și o imagine de fundal.
#navlist {position: relative;} - poziția este setată pe relativ pentru a permite poziționarea absolută în interiorul ei.
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin și padding sunt setate la 0, stilul listei este eliminat și toate elementele din listă sunt poziționate în mod absolut.
#navlist li, #navlist a {height:44px;display:block;} - înălțimea tuturor imaginilor este 44px.
Acum începe să poziționezi și stilul pentru fiecare parte specifică:
#home {left:0px;width:46px;} - poziționat până la stânga, iar lățimea imaginii este 46px.
#home {background:url(img_navsprites.gif) 0 0;} - definește imaginea de fundal și poziția acesteia (left 0px, top 0px)
#prev {left:63px;width:43px;} - poziționat 63px la dreapta (#home width 46px + puțin spațiu suplimentar între elemente), iar width este de 43px.
#prev {background:url('img_navsprites.gif') -47px 0;} - defineste imaginea de fundal 47px la dreapta (#home width 46px + 1px divisor de linie)
#next {left:129px;width:43px;} - poziționat 129px la dreapta (începutul #prev este 63px + #prev lățime 43px + spațiu suplimentar), iar lățimea este 43px.
#next {background:url('img_navsprites.gif') -91px 0;} - defineste imaginea de fundal 91px la dreapta (#home width 46px + 1px line diviser + #prev width 43px + 1px divisor line).
Image Sprites - Hover Effect
Adăugăm un efect hover în lista noastră de navigare.
Selectorul :hover poate fi utilizat pe toate elementele, nu numai pe linkuri.
("img_navsprites_hover.gif") conține trei imagini de navigare și trei imagini pe care să le utilizăm pentru efectele hover.
Deoarece este vorba de o singură imagine și nu de șase fișiere separate, nu va exista nicio întârziere de încărcare atunci când un utilizator trece peste imagine.
Adăugăm doar trei linii de cod pentru a adăuga efectul de hover.
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Pentru toate cele trei imagini pasive, specificăm aceeași poziție de fundal, doar 45px mai jos.
CSS Formulare
Formulare CSS
Aspectul unui formular HTML poate fi îmbunătățit mult cu CSS.
Stilizarea câmpurilor de intrare (Styling Input Fields)
Utilizați proprietatea width pentru a determina lățimea câmpului de intrare (input field).
Dacă doriți să stilați un tip de intrare specific, puteți utiliza selectori de atribute:
input [type=text] - va selecta doar câmpurile de tip text
input [type=password] - va selecta doar câmpuri de tip parolă
input [type=number] - va selecta doar câmpuri numerice
Padded Inputs
Utilizați proprietatea padding pentru a adăuga spațiu în câmpul text.
Când aveți multe intrări una după cealaltă, este posibil să doriți să adăugați și o anumită marjă (margin), pentru a adăuga mai mult spațiu în afara lor.
Bordered Inputs
Utilizați proprietatea border pentru a modifica dimensiunea și culoarea border-ului și utilizați proprietatea border-radius pentru a adăuga colțuri rotunjite(corners rounded).
Dacă doriți doar un bottom border, utilizați proprietatea border-bottom.
Colored Inputs
Utilizați proprietatea background-color pentru a adăuga o culoare de fundal la intrare și proprietatea color pentru a schimba culoarea textului.
Focused Inputs
În mod implicit, unele browsere vor adăuga un contur (outline) albastru în jurul intrării atunci când va fi focalizat (faceți click pe). Puteți elimina acest comportament adăugând outline: none; la intrare.
Utilizați selectorul :focus pentru a face ceva cu câmpul de introducere atunci când este focalizat.
Intrare cu pictogramă / imagine(Input with icon/image)
Dacă doriți o pictogramă (icon) în interiorul intrării, utilizați proprietatea background-image și poziționați-o cu proprietatea background-position. Rețineți, de asemenea, că adăugăm un left padding mare pentru a rezerva spațiul pictogramei (icon).
Intrare de căutare animată(Animated Search Input)
În acest exemplu, utilizăm proprietatea CSS transition pentru a anima lățimea (width) intrării de căutare atunci când devine focus.
Styling Textareas
Utilizați proprietatea resize pentru a împiedica redimensionarea textului (dezactivați „grabber” din colțul din dreapta jos):
Styling Select Menus
Stilizarea butoanelor de intrare(Styling Input Buttons)
Formular responsiv(Responsive Form)
Redimensionați fereastra browserului pentru a vedea efectul. Când ecranul are o lățime mai mică de 600px, faceți ca cele două coloane să se stivească una peste alta, în loc de una lângă alta.
Interogări media pentru a crea un formular cu răspuns.
CSS Unități
Unități CSS
CSS are mai multe unități diferite pentru exprimarea unei lungimi.
Multe proprietăți CSS iau valori „de lungime” (lenght), cum ar fi lățimea, marja, căptușirea, dimensiunea fontului etc (width, margin, padding, font-size).
Lungimea este un număr urmat de o unitate de lungime, cum ar fi 10px, 2em etc.
Un whitespace nu poate apărea între număr și unitate. Cu toate acestea, dacă valoarea este 0, unitatea poate fi omisă.
Pentru unele proprietăți CSS, lungimile negative sunt permise.
Există două tipuri de unități de lungime: absolută și relativă.
Lungimi absolute (Absolute Lengths)
Unitățile de lungime absolută sunt fixe și o lungime exprimată în oricare dintre acestea va apărea exact ca acea dimensiune.
Unitățile de lungime absolută nu sunt recomandate pentru utilizare pe ecran, deoarece dimensiunile ecranului diferă atât de mult. Cu toate acestea, pot fi utilizate dacă este cunoscut suportul de ieșire, cum ar fi pentru aspectul tipăririi.
cm - centimetri
mm - millimetri
in - inci (1in = 96px = 2.54cm)
px * - pixeli (1px = 1/96th of 1in)
pt - puncte (1pt = 1/72 of 1in)
pc - picas (1pc = 12 pt)
* Pixelii (px) sunt în raport cu dispozitivul de vizualizare. Pentru dispozitivele cu valoare redusă, 1px este un pixel de dispozitiv (punct) al afișajului. Pentru imprimante și ecrane de înaltă rezoluție, 1px implică mai mulți pixeli de dispozitiv.
Lungimi relative (Relative Lengths)
Unitățile de lungime relativă specifică o lungime relativă la o altă proprietate lungime. Unitățile de lungime relativă scalează mai bine între diferite medii de redare.
em - În raport cu dimensiunea fontului elementului (2em înseamnă de 2 ori dimensiunea fontului curent)
ex - În raport cu înălțimea x a fontului curent (rar folosit)
ch - În raport cu lățimea "0" (zero)
rem - Relativ la dimensiunea fontului elementului rădăcină
vw - În raport cu 1% din lățimea afișajului *
vh - În raport cu 1% din înălțimea viewport *
vmin - În raport cu 1% din dimensiunea mai mică a portofoliului *
vmax - În raport cu 1% din dimensiunea mai mare a portofoliului
% - În raport cu elementul părinte
Unitățile em și rem sunt practice în crearea unui aspect scalabil perfect!
* Viewport = dimensiunea ferestrei browserului. Dacă viewport are 50cm lățime, 1vw = 0,5cm.
Asistență browser (Browser Support)
Numerele din tabel specifică prima versiune a browserului care acceptă integral unitatea de lungime.
CSS Fundaluri multiple
În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.
Proprietățiile background-size, background-origin, background-clip.
CSS vă permite să adăugați mai multe imagini de fundal pentru un element, prin proprietatea background-image.
Diferitele imagini de fundal sunt separate prin virgule, iar imaginile sunt stivuite una peste alta, unde prima imagine este cea mai apropiată de privitor.
Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.
CSS Background Size
Proprietatea CSS background-size vă permite să specificați dimensiunea imaginilor de fundal.
Mărimea poate fi specificată în lungimi, procente (lengths, percentages) sau utilizând unul dintre cele două cuvinte cheie: conține sau acoperire(contain sau cover).
Redimensionare background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli).
Celelalte două valori posibile pentru background-size sunt contain și cover.
Cuvântul cheie contain scalează imaginea de fundal (scales the background image) pentru a fi cât mai mare (dar atât lățimea cât și înălțimea sa trebuie să se încadreze în zona conținutului). Ca atare, în funcție de proporțiile imaginii de fundal (background image) și de zona de poziționare a fundalului, pot exista anumite zone ale fundalului care nu sunt acoperite de imaginea de fundal (background image).
Cuvântul cheie cover scalează imaginea de fundal (scales the background image) astfel încât zona de conținut să fie acoperită complet de imaginea de fundal (background image) (atât lățimea cât și înălțimea acesteia sunt egale sau depășesc aria conținutului). Ca atare, este posibil ca unele părți ale imaginii de fundal (background image) să nu fie vizibile în zona de poziționare a fundalului.
Definirea dimensiunilor mai multor imagini de fundal (Define Sizes of Multiple Background Images)
Proprietatea background-size acceptă, de asemenea, mai multe valori pentru dimensiunea fundalului (folosind o listă separată de virgule), atunci când lucrați cu mai multe fundaluri.
Full Size Background Image
Acum vrem să avem o imagine de fundal (background image) pe un site web care să acopere întreaga fereastră a browserului în orice moment.
Cerințele sunt următoarele:
Completează întreaga pagină cu imaginea (fără spațiu alb).
Scalați imaginea după caz.
Centrați imaginea pe pagina.
Nu provocați bare de defilare (scrollbars).
Hero Image
De asemenea, puteți utiliza diferite proprietăți de fundal (background) pe un <div> pentru a crea hero image (o imagine mare cu text) și să o plasați acolo unde doriți.
Proprietatea CSS background-origin
Proprietatea CSS background-origin specifică unde este poziționată imaginea de fundal.
Proprietatea are trei valori diferite:
border-box - imaginea de fundal pornește din colțul din stânga sus al border-ului.
padding-box - (implicit) imaginea de fundal pornește din colțul din stânga sus al marginii padding-ului.
content-box - imaginea de fundal pornește din colțul din stânga sus al conținutului.
Proprietatea CSS background-clip
Proprietatea CSS background-clip specifică zona de pictură a fundalului.
Proprietatea are trei valori diferite:
border-box - (implicit) fundalul este pictat pe marginea exterioară a border-ului.
padding-box - fundalul este vopsit până la marginea exterioară a padding-ului.
content-box - fundalul este pictat în caseta de conținut.
Proprietăți CSS background avansate:
background - O proprietate shorthand pentru setarea tuturor proprietăților de fundal într-o singură declarație
background-clip - Specifică zona de pictură a fundalului
background-image - Specifică una sau mai multe imagini de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-size - Specifică dimensiunea imaginii de fundal
CSS Stilizarea imaginilor
CSS Stilizarea imaginilor (CSS Styling Images)
Imagini rotunjite (Rounded Images)
Utilizați proprietatea border-radius pentru a crea imagini rotunjite (rounded images).
Imagini în miniatură (Thumbnail Images)
Utilizați proprietatea border pentru a crea imagini în miniatură (thumbnail images).
Imagine in miniatură (thumbnail image).
Imagine în miniatură ca link (Thumbnail Image as Link).
Imagini responsive (Responsive Images)
Imaginile responsive se vor regla automat pentru a se potrivi cu dimensiunea ecranului.
Redimensionați fereastra browserului pentru a vedea efectul.
Centrați o imagine (Center an Image)
Pentru a centra o imagine, setați marginea stângă și dreapta pe auto și transformați-o într-un element block.
Imagini / Carduri Polaroid (Polaroid Images / Cards)
Imagine transparentă
Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât este mai transparentă:
IE8 și versiunile anterioare folosesc filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.
Image Text
Cum se poziționează textul într-o imagine.
Filtre de imagine (Image Filters)
Proprietatea CSS filter adaugă efecte vizuale (precum estomparea și saturația/(blur and saturation) unui element.
Proprietatea CSS filter nu este acceptată în Internet Explorer, Edge 12 sau Safari 5.1 și nici în versiunile anterioare.
Image Hover Overlay
Creați un efect de suprapunere asupra hover.
Rotiți o imagine
Mutați mouse-ul peste imagine.
Galerie de imagini responsive
CSS poate fi utilizat pentru a crea galerii de imagini. Acest exemplu utilizează interogări media pentru a reorganiza imaginile pe dimensiuni de ecran diferite. Redimensionați fereastra browserului pentru a vedea efectul.
Image Modal (Advanced)
Modul în care CSS și JavaScript pot lucra împreună.
În primul rând, utilizați CSS pentru a crea o fereastră modală (dialog box) și ascundeți-o în mod implicit.
Apoi, utilizați un JavaScript pentru a afișa fereastra modală și pentru a afișa imaginea în interiorul modalului, atunci când un utilizator face click pe imagine.
CSS object-fit
Proprietatea CSS object-fit
Proprietatea CSS object-fit este utilizată pentru a specifica modul în care un <img> sau <video> trebuie redimensionat pentru a se potrivi cu containerul său.
Această proprietate spune conținutului să umple containerul într-o varietate de moduri; cum ar fi „păstrați acel raport de aspect” sau „întindeți-vă și ocupați cât mai mult spațiu”.
Asistență browser (Browser Support)
Avem două imagini și dorim ca acestea să umple lățimea de 50% a ferestrei browserului și 100% din înălțime.
Nu folosim object-fit, așa că atunci când redimensionăm fereastra browserului, raportul de aspect al imaginilor va fi distrus.
Folosim object-fit: cover; astfel, când redimensionăm fereastra browserului, raportul de aspect al imaginilor este păstrat.
Toate valorile proprietății CSS object-fit
Proprietatea CSS object-fit poate avea următoarele valori:
fill - Aceasta este implicită. Conținutul înlocuit este dimensionat pentru a completa content box a elementului. Dacă este necesar, obiectul va fi stretched sau squished pentru a se potrivi
contain - Conținutul înlocuit este scalat pentru a-și menține raportul de aspect (aspect ratio) în timp ce se încadrează în content box a elementului
cover - Conținutul înlocuit este dimensionat pentru a-și păstra raportul de aspect (aspect ratio) în timp ce umpleți întreaga content box a elementului. Obiectul va fi tăiat (clipped ) pentru a se potrivi
none - Conținutul înlocuit nu este redimensionat
scale-down - Conținutul este dimensionat ca și cum nici un conținut nu a fost specificat (ar avea ca rezultat o dimensiune mai mică a obiectului concret).
CSS Interogări media - Exemple
Interogări media CSS - exemple
Interogările media sunt o tehnică populară pentru livrarea unei foi de stil adaptate diferitelor dispozitive. Pentru a demonstra un exemplu simplu, putem schimba culoarea de fundal pentru diferite dispozitive.
Interogări media pentru meniuri
În acest exemplu, folosim interogări media pentru a crea un meniu de navigare responsive, care variază în ceea ce privește designul pe diferite dimensiuni de ecran.
Interogări media pentru coloane
O utilizare obișnuită a interogărilor media este de a crea un aspect flexibil (flexible layout). În acest exemplu, creem un aspect (layout) care variază între patru, două și full-width coloane, în funcție de diferitele dimensiuni ale ecranului.
Un mod mai modern de a crea column layouts este să folosiți CSS Flexbox. Cu toate acestea, nu este acceptat în Internet Explorer 10 și versiunile anterioare. Dacă aveți nevoie de asistență IE6-10, folosiți floats.
Ascundeți elementele cu interogări media
O altă utilizare obișnuită a interogărilor media este de a ascunde elemente pe diferite dimensiuni ale ecranului.
Modificați dimensiunea fontului cu interogări media
De asemenea, puteți utiliza interogări media pentru a modifica dimensiunea fontului (font size) unui element pe diferite dimensiuni ale ecranului.
Galerie de imagini flexibile
Folosim interogări media împreună cu flexbox pentru a crea o galerie de imagini responsive.
Site web flexibil
Utilizăm interogări media împreună cu flexbox pentru a crea un site web responsive, care conține o bară de navigare flexibilă și conținut flexibil.
Orientare: Portret / Peisaj
Interogările media pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Landscape):
Utilizați o culoare de fundal lightblue (background color) dacă orientarea este în modul peisaj (landscape):
Folosind o valoare suplimentară: adăugăm o interogare media suplimentară la cea existentă folosind virgulă (aceasta se va comporta ca un operator OR).
CSS Responsive Web Design - Interogări media
Responsive Web Design - Interogări media
Ce este o interogare media?
Interogarea media este o tehnică CSS introdusă în CSS3.
Utilizează regula @media pentru a include un block de proprietăți CSS numai dacă o anumită condiție este adevărată.
Dacă fereastra browserului este de 600px sau mai mică, culoarea de fundal (background color) va fi deschisă la culoare (lightblue).
Adăugați un Breakpoint
Mai devreme în acest tutorial am făcut o pagină web cu rânduri și coloane și a fost responzive, dar nu arăta bine pe un ecran mic.
Interogările media (media queries) vă pot ajuta. Putem adăuga un punct de break (breakpoint) unde anumite părți ale designelui se vor comporta diferit pe fiecare parte a punctului de break (breakpoint).
Utilizați o interogare media (media queries) pentru a adăuga un punct de break (breakpoint) la 768px:
Când ecranul (fereastra browserului) devine mai mic decât 768px, fiecare coloană ar trebui să aibă o lățime de 100%.
Întotdeauna design pentru mobil întâi
Mobile First înseamnă proiectare pentru mobil înainte de proiectare pentru desktop sau orice alt dispozitiv (Acest lucru va face afișarea paginii mai rapidă pe dispozitive mai mici).
Aceasta înseamnă că trebuie să facem unele modificări în CSS-ul nostru.
În loc să schimbăm stilurile când lățimea devine mai mică de 768px, ar trebui să schimbăm designul când lățimea devine mai mare de 768px. Acest lucru va face în primul rând proiectarea noastră mobilă.
Puteți adăuga câte breakpoints doriți.
Vom insera, de asemenea, un punct de break (breakpoint) între tablete și telefoane mobile.
Facem acest lucru prin adăugarea a încă o interogare media (media query ) (la 600px) și un set de clase noi pentru dispozitive mai mari de 600px (dar mai mici decât 768px):
Rețineți că cele două seturi de clase sunt aproape identice, singura diferență este denumirea (col- și col-s-).
Breakpoints tipice dispozitivului (Typical Device Breakpoints)
Există tone de ecrane și dispozitive cu înălțimi și lățimi diferite, așa că este greu să creezi un punct de break (breakpoint) exact pentru fiecare dispozitiv. Pentru a menține lucrurile simple, puteți viza cinci grupuri.
Orientare: Portret / Peisaj (Landscape)
Interogările media (media queries) pot fi, de asemenea, utilizate pentru a schimba aspectul (layout) unei pagini, în funcție de orientarea browserului.
Puteți avea un set de proprietăți CSS care se vor aplica numai atunci când fereastra browserului este mai largă decât înălțimea sa, o așa-numită orientare „Peisaj” (Lanscape):
Pagina web va avea un fundal luminos (lightblue background) dacă orientarea este în modul peisaj (lanscape).
Ascundeți elementele cu interogări media (Hide Elements With Media Queries)
O altă utilizare obișnuită a interogărilor media (media queries) este de a ascunde elemente pe dimensiuni diferite de ecran.
Modificați dimensiunea fontului cu interogări media (Change Font Size With Media Queries)
De asemenea, puteți utiliza interogări media (media queries) pentru a modifica dimensiunea fontului unui element pe diferite dimensiuni ale ecranului.
CSS Responsive Web Design - Imagini
Responsive Web Design - Images
Utilizarea proprietății Width
Dacă proprietatea lățimii (width) este setată la un procent și înălțimea este setată la „auto”, imaginea va fi receptivă și va scala în sus și în jos.
Imaginea poate fi redusă pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă.
Imaginile de fundal (Background Images) pot răspunde, de asemenea, la redimensionare și scalare (resizing și scaling).
Dacă proprietatea background-size este setată pe „contain”, imaginea de fundal (background Images) se va scala și va încerca să se potrivească zonei de conținut. Cu toate acestea, imaginea își va păstra raportul de aspect (relația proporțională între lățimea și înălțimea imaginii (width și height)).
Dacă proprietatea background-size este setată pe „100% 100%”, imaginea de fundal (background image) se va întinde pentru a acoperi întreaga zonă de conținut.
Dacă proprietatea background-size este setată pe „cover”, imaginea de fundal (background image) se va scala pentru a acoperi întreaga zonă de conținut. Observați că valoarea „cover” păstrează raportul de aspect (aspect ratio), iar o parte din imaginea de fundal (background image) poate fi tăiată.
Imagini diferite pentru dispozitive diferite
O imagine mare poate fi perfectă pe un ecran mare al unui computer, dar inutilă pe un dispozitiv mic. De ce să încărcați o imagine mare atunci când trebuie să o măriți în jos? Pentru a reduce încărcarea sau pentru orice alte motive, puteți utiliza interogări media (media queries) pentru a afișa imagini diferite pe dispozitive diferite.
Puteți utiliza interogarea media (media query) min-device-width, în loc de min-width, care verifică lățimea dispozitivului, în loc de lățimea browserului. Atunci imaginea nu se va schimba când redimensionați fereastra browserului.
Elementul HTML5 <picture>
HTML5 a introdus elementul <picture>, care vă permite să definiți mai multe imagini.
Asistență browser (Browser Support)
Elementul <picture> funcționează similar cu elementele <video> și <audio>. Configurați surse diferite, iar prima sursă care se potrivește preferințelor este cea utilizată:
Atributul srcset este necesar și definește sursa imaginii.
Atributul media este opțional și acceptă interogările media (media queries) pe care le găsiți în regula CSS @media.
De asemenea, ar trebui să definiți un element <img> pentru browserele care nu acceptă elementul <picture>.
CSS Grid Container
Grid Container
Pentru a face ca un element HTML să se comporte ca un container grid, trebuie să setați proprietatea display la grid sau la inline-grid.
Containerele grid constau din elemente grid, plasate în coloane și rânduri (columns și rows).
Proprietatea grid-template-columns
Proprietatea grid-template-columns definește numărul de coloane din aspectul gridului dvs. (grid layout) și poate defini lățimea (width) fiecărei coloane.
Valoarea este un space-separated-list, unde fiecare valoare definește lungimea coloanei respective.
Dacă doriți ca aspectul gridului (grid layout) să conțină 4 coloane, specificați lățimea (width) celor 4 coloane sau „auto” dacă toate coloanele trebuie să aibă aceeași lățime (width).
Proprietatea grid-template-rows definește înălțimea (height) fiecărui rând (row).
Valoarea este un space-separated-list, unde fiecare valoare definește înălțimea (height) rândului respectiv (row).
Proprietatea justify-content este utilizată pentru alinierea întregului grid în interiorul containerului.
Lățimea (width) totală a gridului trebuie să fie mai mică decât lățimea (width) containerului pentru ca proprietatea justify-content să aibă vreun efect.
Proprietatea align-content este utilizată pentru alinierea verticală (vertically align) a întregului grid în interiorul containerului.
Înălțimea (height) totală a gridului trebuie să fie mai mică decât înălțimea (height) containerului pentru ca proprietatea align-content să aibă vreun efect.
SQL MIN() și MAX()
Funcțiile SQL MIN() și MAX()
Funcția MIN() returnează cea mai mică valoare a coloanei selectate.
Funcția MAX() returnează cea mai mare valoare a coloanei selectate.
Sintaxa MIN()
SELECT MIN(column_name)
FROM table_name
WHERE condition;
Sintaxa MAX()
SELECT MAX(column_name)
FROM table_name
WHERE condition;
Exemplu MIN()
Următoarea declarație SQL găsește prețul celui mai ieftin produs:
SELECT MIN(Price) AS SmallestPrice
FROM Products;
Exemplu MAX()
Următoarea declarație SQL găsește prețul celui mai scump produs:
SELECT MAX(Price) AS LargestPrice
FROM Products;
PHP Numere
PHP Numbers
În acest capitol vom analiza în profunzime Integers, Floats și Number Strings.
Numere PHP
Un lucru de remarcat cu privire la PHP este că oferă conversie automată de tip de date (automatic data type conversion).
Deci, dacă atribuiți o valoare integer (valoare întreagă) unei variabile, tipul acelei variabile va fi automat un integer (număr întreg). Apoi, dacă atribuiți un string (șir) aceleiași variabile, tipul se va schimba la un string (șir).
Această conversie automată îți poate sparge codul.
PHP Integers
Un integer (număr întreg) este un număr fără nicio parte zecimală.
2, 256, -256, 10358, -179567 sunt integers (întregi). În timp ce 7.56, 10.0, 150.67 sunt floats.
Deci, un tip de date întreg (integer data type) este un număr non-zecimal cuprins între -2147483648 și 2147483647. O valoare mai mare (sau mai mică) decât aceasta, va fi stocată ca float, deoarece depășește limita unui integer (număr întreg).
Un alt lucru important de știut este că, chiar dacă 4*2,5 este 10, rezultatul este stocat sub formă de float, deoarece unul dintre operanzi este un float (2.5).
Iată câteva reguli pentru integers (numere întregi):
Un număr întreg (integer) trebuie să aibă cel puțin o cifră
Un număr întreg (integer) nu trebuie să aibă o zecimală
Un număr întreg (integer) poate fi pozitiv sau negativ
Numerele întregi pot fi specificate în trei formate: zecimale (baza 10), hexazecimale (baza 16 - prefix 0x) sau octale (baza 8 - prefix 0)
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este integer (întreg):
is_int()
is_integer() - alias of is_int()
is_long() - alias of is_int()
Verificați dacă tipul unei variabile este integer (întreg):
<?php
$x = 5985;
var_dump(is_int($x));
$x = 59.85;
var_dump(is_int($x));
?>
PHP Floats
Un float este un număr cu un punct zecimal sau un număr în formă exponențială.
2.0, 256.4, 10.358, 7.64E + 5, 5.56E-5 sunt toate floats.
Tipul de date (data type) float poate stoca de obicei o valoare de până la 1.7976931348623E + 308 (dependentă de platformă) și are o precizie maximă de 14 cifre.
PHP are următoarele funcții pentru a verifica dacă tipul unei variabile este float:
is_float()
is_double() - alias of is_float()
Verificați dacă tipul unei variabile este float:
<?php
$x = 10.365;
var_dump(is_float($x));
?>
PHP Infinity
O valoare numerică mai mare decât PHP_FLOAT_MAX este considerată infinită.
PHP are următoarele funcții pentru a verifica dacă o valoare numerică este finită sau infinită:
is_finite()
is_infinite()
Cu toate acestea, funcția PHP var_dump() returnează tipul (data type) și valoarea datelor:
Verificați dacă o valoare numerică este finită sau infinită:
<?php
$x = 1.9e411;
var_dump($x);
?>
PHP NaN
NaN semnifică Not Number.
NaN este utilizat pentru operații matematice imposibile.
PHP are următoarele funcții pentru a verifica dacă o valoare nu este un număr:
is_nan()
Cu toate acestea, funcția PHP var_dump() returnează tipul și valoarea datelor:Calculul invalid va returna o valoare NaN:
<?php
$x = acos(8);
var_dump($x);
?>
PHP Numerical Strings
Funcția PHP is_numeric() poate fi utilizată pentru a afla dacă o variabilă este numerică. Funcția returnează true dacă variabila este un număr sau un șir numeric, false altfel.
Verificați dacă variabila este numerică:
<?php
$x = 5985;
var_dump(is_numeric($x));
$x = "5985";
var_dump(is_numeric($x));
$x = "59.85" + 100;
var_dump(is_numeric($x));
$x = "Hello";
var_dump(is_numeric($x));
?>
De la PHP 7.0: Funcția is_numeric() va returna FALSE pentru șirurile numerice (numeric strings) în formă hexazecimală (de exemplu, 0xf4c3b00c), deoarece nu mai sunt considerate șiruri numerice (numeric strings).
PHP Casting Strings and Floats to Integers
Uneori, trebuie să convertiți o valoare numerică într-un alt tip de date (data type).
Funcția (int), (integer) sau intval() sunt adesea folosite pentru a converti o valoare (value) într-un număr întreg (integer).
Convertiți float și string la integer:
<?php
// Cast float to int
$x = 23465.768;
$int_cast = (int)$x;
echo $int_cast;
echo "<br>";
// Cast string to int
$x = "23465.768";
$int_cast = (int)$x;
echo $int_cast;
?>
PHP if...else...elseif
Instrucțiunile PHP if...else...elseif
Instrucțiunile condiționale sunt utilizate pentru a efectua diferite acțiuni bazate pe condiții diferite.
Instrucțiuni condiționale PHP
Foarte des când scrieți cod, doriți să efectuați diferite acțiuni pentru diferite condiții. Pentru a face acest lucru puteți utiliza în codul dvs. instrucțiuni condiționale.
În PHP avem următoarele instrucțiuni condiționale:
if statement - execută unele coduri dacă o condiție este adevărată
if ... else statement - execută ceva cod dacă o condiție este adevărată și un alt cod dacă această condiție este falsă
if ... elseif ... else statement - execută coduri diferite pentru mai mult de două condiții
switch statement - selectează unul dintre numeroasele blocuri de cod care trebuie executate
PHP - Instrucțiunea if
Instrucțiunea if execută un cod dacă o condiție este adevărată.
Sintaxă
if (condition) {
cod care trebuie executat dacă condiția este adevărată (true);
}
<?php
$t = date("H");
if ($t < "20") {
echo "Să aveți o zi bună!";
}
?>
Instrucțiunea PHP - The if...else
Instrucțiunea if ... else execută un cod dacă o condiție este adevărată (true) și un alt cod dacă această condiție este falsă (false).
Sintaxă
if (condition) {
cod care trebuie executat dacă condiția este adevărată (true);
} else {
cod care trebuie executat dacă condiția este falsă (false);
}
<?php
$t = date("H");
if ($t < "20") {
echo "Să aveți o zi bună!";
} else {
echo "Noapte bună!";
}
?>
Instrucțiunea PHP - if...elseif...else
Instrucțiunea if ... elseif ... else execută coduri diferite pentru mai mult de două condiții.
Sintaxă
if (condition) {
cod care trebuie executat dacă această condiție este adevărată (true);
} elseif (condition) {
cod care trebuie executat dacă prima condiție este falsă (false) și această condiție este adevărată (true);
} else {
cod care trebuie executat dacă toate condițiile sunt false (false);
}
<?php
$t = date("H");
if ($t < "10") {
echo "Bună dimineața!";
} elseif ($t < "20") {
echo "Să aveți o zi bună!";
} else {
echo "Noapte bună!";
}
?>
Instrucțiunea PHP- switch
Instrucțiunea switch va fi explicată în capitolul următor.
PHP Loops
Bucle PHP (PHP Loops)
În capitolele următoare veți învăța cum să repetați codul folosind bucle (loops) în PHP.
Bucle PHP (PHP Loops)
Adesea, atunci când scrieți cod, doriți ca același block de cod să fie difuzat de mai multe ori un anumit număr de ori. Deci, în loc să adăugăm mai multe linii de cod aproape egale într-un script, putem folosi bucle (loops).
Buclele (loops) sunt utilizate pentru a executa același block de cod din nou și din nou, atâta timp cât o anumită condiție este adevărată (true).
În PHP, avem următoarele tipuri de buclă (loop types):
while - buclează (loops) un block de cod atâta timp cât condiția specificată este adevărată (true).
do ... while - se buclează (loops) o dată printr-un block de cod, apoi se repetă bucla (loop) atâta timp cât condiția specificată este adevărată (true).
for - se buclează (loops) printr-un block de cod de un număr specificat de ori.
foreach - se buclează (loops) printr-un block de cod pentru fiecare element dintr-un tablou.
Capitolele următoare vor explica și vor oferi exemple pentru fiecare tip de buclă (loop type).
PHP bucla while (PHP while Loop)
Bucla while - Bucle printr-un block de cod atâta timp cât condiția specificată este adevărată (true).
PHP bucla while
Bucla while execută un block de cod atâta timp cât condiția specificată este adevărată (true).
Sintaxă
while (condition is true) {
cod de executat;
}
<?php
$x = 1;
while($x <= 5) {
echo "Numărul este: $x <br>";
$x++;
}
?>
$x = 1; - Inițializați contorul de bucle (loop counter) ($x) și setați valoarea de pornire la 1.
$x <= 5 - Continuați bucla (loop) atâta timp cât $x este mai mică sau egală cu 5.
$X ++; - Măriți valoarea contorului buclei (loop counter) cu 1 pentru fiecare iterație.
<?php
$x = 0;
while($x <= 100) {
echo "Numărul este: $x <br>";
$x+=10;
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 100 - Continuați bucla (loop) atât timp cât $x este mai mic sau egal cu 100.
$X + = 10; - Măriți valoarea contorului buclei (loop counter) cu 10 pentru fiecare iterație.
PHP bucla do while (PHP do while Loop)
Bucla do ... while - Buclează (loops) o dată printr-un block de cod, apoi repetă bucla (loop) atâta timp cât condiția specificată este adevărată (true).
PHP bucla do while (PHP do while Loop)
Bucla do ... while va executa întotdeauna blocul de cod o dată, apoi va verifica starea și va repeta bucla (loop) cât timp (while) condiția specificată este adevărată (true).
Sintaxă
do {
cod de executat;
} while (condition is true);
Exemplul de mai jos stabilește prima variabilă $x la 1 ($x = 1). Apoi, bucla do while (do while loop) va scrie o anumită ieșire, apoi va crește variabila $x cu 1. Apoi, starea este bifată ($x este mai mică sau egală cu 5?), Iar bucla (loop) va continua să funcționeze atâta timp cât $x este mai mică sau egală cu 5:
<?php
$x = 1;
do {
echo "Numărul este: $x <br>";
$x++;
} while ($x <= 5);
?>
În bucla do...while (do...while loop) în timp ce condiția este testată DUPĂ executarea instrucțiunilor din buclă (loop). Aceasta înseamnă că bucla do ... while (do...while loop) își va executa instrucțiunile cel puțin o dată, chiar dacă condiția este falsă (false). Vezi exemplul de mai jos.
Acest exemplu stabilește variabila $x la 6, apoi rulează bucla (loop), apoi starea este verificată:
<?php
$x = 6;
do {
echo "Numărul este: $x <br>";
$x++;
} while ($x <= 5);
?>
PHP bucla for. (PHP for Loop)
Bucla for - Buclează (loops) printr-un block de cod de un număr specificat de ori.
PHP bucla for. (PHP for Loop)
Bucla for se utilizează atunci când știi în prealabil de câte ori ar trebui să ruleze scriptul.
Sintaxă
for (init counter; test counter; increment counter) {
cod care trebuie executat pentru fiecare iterație;
}
Parametrii:
init counter: Initializarea valorii contorului buclei (loop counter).
test counter: evaluare pentru fiecare iterație de buclă (loop iteration). Dacă se evaluează la TRUE, bucla (loop) continuă. Dacă se evaluează la FALSE, bucla (loop) se termină.
increment counter: Crește valoarea contorului buclei (loop counter).
Exemplul de mai jos afișează numerele de la 0 la 10:
<?php
for ($x = 0; $x <= 10; $x++) {
echo "Numărul este: $x <br>";
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 10; - Continuați bucla (loop) atâta timp cât $x este mai mic sau egal cu 10.
$x ++ - Măriți valoarea contorului buclei (loop counter) cu 1 pentru fiecare iterație.
Acest exemplu numără până la 100 din zece în zece:
<?php
for ($x = 0; $x <= 100; $x+=10) {
echo "Numărul este: $x <br>";
}
?>
$x = 0; - Inițializați contorul buclei (loop counter) ($x) și setați valoarea de pornire la 0.
$x <= 100; - Continuați bucla (loop) atâta timp cât $x este mai mic sau egal cu 100.
$x + = 10 - Măriți valoarea contorului buclei (loop counter) cu 10 pentru fiecare iterație.
PHP bucla foreach (PHP foreach Loop)
Bucla foreach - Buclează (loops) printr-un block de cod pentru fiecare element dintr-un tablou (array).
PHP bucla foreach (PHP foreach Loop)
Bucla foreach funcționează numai pe tablouri (arrays) și este utilizată pentru a bucla (loop) fiecare pereche cheie / valoare (key/value ) dintr-un tablou (array).
Sintaxă
foreach ($array as $value) {
cod de executat;
}
Pentru fiecare iterație de buclă (loop iteration), valoarea elementului array curent este atribuită lui $value, iar indicatorul tabloului (array) este mutat de unul singur până când ajunge la ultimul element de matrice (element array).
Următorul exemplu va emite valorile tabloului dat (array) ($colors):
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?>
<?php
$age = array("Ion"=>"35", "Petre"=>"37", "Tudor"=>"43");
foreach($age as $x => $val) {
echo "$x = $val<br>";
}
?>
PHP - AJAX Introducere
PHP - AJAX Introducere
AJAX este despre actualizarea părților unei pagini web, fără a reîncărca întreaga pagină.
Ce este AJAX?
AJAX = JavaScript asincron și XML.
AJAX este o tehnică pentru crearea de pagini web rapide și dinamice.
AJAX permite actualizarea asincronă a paginilor web, schimbând cantități mici de date cu serverul din culise. Aceasta înseamnă că este posibil să actualizați părți ale unei pagini web, fără a reîncărca întreaga pagină.
Paginile web clasice (care nu utilizează AJAX) trebuie să reîncarce întreaga pagină dacă conținutul ar trebui să se schimbe.
Exemple de aplicații care utilizează AJAX: Google Maps, Gmail, Youtube și Facebook.
AJAX se bazează pe standardele de internet
AJAX se bazează pe standardele de internet și folosește o combinație de:
Obiectul XMLHttpRequest (pentru schimbul de date asincron cu un server)
JavaScript / DOM (pentru afișarea / interacțiunea cu informațiile)
CSS (pentru stilizarea datelor)
XML (adesea folosit ca format pentru transferul de date)
Aplicațiile AJAX sunt independente de browser și de platformă!
Sugestie Google
AJAX a fost popularizat în 2005 de Google, cu Google Suggest.
Google Suggest utilizează AJAX pentru a crea o interfață web foarte dinamică: Când începeți să tastați în caseta de căutare Google, un JavaScript trimite cererea de informații pe un server și serverul returnează o listă de sugestii.
Începeți să utilizați AJAX Today
În tutorialul nostru PHP, vom demonstra modul în care AJAX poate actualiza părți ale unei pagini web, fără a reîncărca întreaga pagină. Scriptul serverului va fi scris în PHP.
Acizi
Definirea acizilor conform teoriei disociației electrolitice și a teoriei protolitice; hidracizi și oxoacizi; radicali acizi; formula generală și nomenclatura acizilor; proprietățile și reacțiile chimice specifice acizilor; ionizarea acizilor; metode generale de obținere a acizilor.
Baze
Definirea bazelor conform teoriei disociației electrolitice și teoriei protolitice; formula generală și nomenclatura bazelor; proprietățile și reacțiile chimice specifice bazelor; ionizarea bazelor; metode generale de obținere a bazelor.
Săruri
Structura și formula generală a sărurilor; săruri neutre, săruri acide și săruri bazice; nomenclatura sărurilor; proprietățile și reacțiile chimice ale sărurilor; metode generale de obținere a sărurilor; neutralizare și hidroliză.
Hidrogenul
Caracteristici generale ale hidrogenului; formarea ionului de hidrură, H-, și formarea ionului de hidrogen (proton), H+. Răspândirea hidrogenului în natură. Metode de preparare a hidrogenului. Proprietățile fizice și chimice ale hidrogenului. Hidruri. Ortohidrogen și parahidrogen. Hidrogenul atomic. Întrebuințările hidrogenului. Izotopii hidrogenului (protiu, deuteriu, tritiu).
Apa
Răspândirea apei în natură. Purificarea apei - sedimentare, filtrare, sterilizare. Apele industriale. Distiliarea apei. Apa higroscopică. Proprietățile fizice ale apei. Structura moleculei de apă. Proprietățile chimice ale apei. Hidrați.
Grupa 18 sau grupa a VIII-a principală
Grupa a VIII-a principală, numerotată VIII A sau 18, cuprinde gazele rare (nobile) heliu, He, neon, Ne, argon, Ar, kripton, Kr, xenon, Xe, radon, Rn.
Grupa 17 sau grupa a VII-a principală
Grupa a VII-a principală, numerotată VII A sau 17, numită și grupa halogenilor, conține următoarele elemente: fluor, F, clor, Cl, brom, Br, iod, I, astatin, At.
Grupa 16 sau grupa a VI-a principală
Grupa a VI-a principală a sistemului periodic, numerotată VI A sau 16, cuprinde elementele oxigen, O, sulf, S, seleniu, Se, telur, Te, și poloniu, Po.
Grupa 15 sau grupa a V-a principală
Grupa a V-a principală a sistemului periodic, numerotată V A sau 15, cuprinde următoarele elemente: azot, N, fosfor, P, arsen, As, stibiu (antimoniu), Sb, și bismut, Bi.
Grupa 14 sau grupa a IV-a principală
Grupa a IV-a principală a sistemului periodic, numerotată IV A sau 14, cuprinde elementele carbon, C, siliciu, Si, germaniu, Ge, staniu, Sn, și plumb, Pb.
Grupa 13 sau grupa a III-a principală
Grupa a III-a principală a sistemului periodic, numerotată III A sau 13, cuprinde elementele bor, B, aluminiu, Al, galiu, Ga, indiu, In, și taliu, Tl.
Grupa 2 sau grupa a II-a principală
Grupa a II-a principală a sistemului periodic, numerotată II A sau 2, cuprinde elementele: beriliu, Be, magneziu, Mg, calciu, Ca, stronțiu, Sr, bariu, și radiu, Ra. Această grupă se mai numește grupa metalelor alcalino-pământoase.
Grupa 1 sau grupa I principală
Elementele de tranziție
Structura electronică a elementelor de tranziție; caracteristicile chimice ale elementelor de tranziție.
Grupa 3 sau grupa a III-a secundară
Grupa a III-a secundară a sistemului periodic, numerotată III B sau 3, cuprinde elementele rare scandiu, Sc, ytriu, Y, și lantan, La, precum și elementul radioactiv actiniu, Ac.
Grupa 4 sau grupa a IV-a secundară
Grupa a IV-a secundară a sistemului periodic, numerotată IV B sau 4, cuprinde elementele rare titan, Ti, zirconiu, Zr, și hafniu, Hf.
Grupa 5 sau grupa a V-a secundară
Grupa a V-a secundară a sistemului periodic, numerotată V B sau 5, cuprinde elementele rare vanadiu, V, niobiu, Nb, și tantal, Ta.
Grupa 6 sau grupa a VI-a secundară
Grupa a VI-a secundară a tabelului periodic, numerotată VI B sau 6, cuprinde elementele crom, Cr, molibden, Mo, și wolfram, W.
Grupa 7 sau grupa a VII-a secundară
Grupa a VII-a secundară a sistemului periodic, numerotată VII B sau 7, cuprinde elementele mangan, Mn, technețiul, Tc, și reniu, Re.
Grupa 8 sau grupa a VIII-a secundară
Grupa 8 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 9 și 10, cuprinde elementele fier, Fe, ruteniu, Ru, și osmiu, Os.
Grupa 9 sau grupa a VIII-a secundară
Grupa 9 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare alături de grupele 8 și 10, cuprinde elementele cobalt, Co, rodiu, Rh, și iridiu, Ir.
Grupa 10 sau grupa a VIII-a secundară
Grupa 10 a sistemului periodic, în trecut considerată parte a grupei a VIII-a secundare, alături de grupele 8 și 9, cuprinde elementele nichel, Ni, paladiu, Pd, și platină, Pt.
