joi, 18 august 2011

HyperText Markup Language (HTML)

Am creat acest site detutoriale HTML pentru a invata programatorii principianti, dar si pe cei cu o oarecare baza in ce priveste libajul de programare HTML. Vei invata cum sa folosesti HTML pentru a realiza un website. Va invitam sa incepeti cursurile de programare intr-o secunda. Dar mai intai, "meniul"...

- Pentru aceia dintre voi care sunt incepatori HTML si in crearea de pagini web folosind HTML. Acest limbaj de marcare sta la baza programari web. Toate sau aproape toate website-urile folosesc HTML-ul in constructia lor.

- HyperText Markup Language sau pe scurt HTML. HTML a aparut ca o modalitate de a prezenta informatia structurata pe titluri paragrafe etc. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS

- eXtensible HyperText Markup Language, sau pe numele lui mic XHTML, este o versiune mult mai stricta si mai curata a HTML.

- CSS este prescurtarea de la Cascading Style Sheets sau in traducere libera, foi de stil. Folosind CSS poti formata toate elementeleHTML fara a incarca prea mult documentul HTML. In acest fel vei minimiza timpul de incarcare (loading) si vei putea schimba infatisarea paginii modificand un singur fisier.

Html pe scurt

Am incercat mai jos sa fac o scurta lista cu cele mai folosite coduri HTML. Poti sa adaugi aceasta pagina la favorite pentru a avea la-ndemana acesta lista de coduri HTML atunci cand nu stii cum se formuleaza un anumit tag HTML sau pur sui simplu nu iti aduci aminte.

Html - Elemente

Principalele elemente in HTML sunt <html>, <head>, <title> si <body>. Iata si un exemplu simplu de construire a unei pagini HTML.

<html>
<head> 
<title>Prima mea pagina web folosind cateva coduri HTML!</title>
</head> 
<body> 
Salut Gasca! Aici voi pune mai tarziu continutul! Si voi realiza o pagina simpla folosind HTML 
</body> 
</html>

Html - Paragraf

<p>Acesta este un simplu paragraf in HTML</p>
<p align="left">Acesta este un paragraf aliniat la stanga</p>

Pe langa atributul align putem folosi pentru a alinia elementele HTML urmatoarele valori: left, right center si justify.

Html - Titluri

<h1>Acesta este tag-ul HTML pentru cel mai mare titlu</h1>

Alte tipuri de titluri in HTML: h2, h3, h4, h5, h6. Unde h1 este cel mai mare si h6 cel mai mic.

Html - Linebreak

<br /> este un salt in linie in HTML - spatiul intre br si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu.

Html - Line Orizontala

<hr /> se foloseste pentru a desena o linie orizontala in HTML - spatiul intre hr si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu..

Html - Liste

O lista simpla in HTML este de forma

<ol>
<li>Primul element HTML din lista </li>
<li>Al doilea element HTML din lista</li>
<li>Al treilea element HTML din lista</li>
</ol>

Lista de mai sus este o lista ordonata. Alte tipuri de liste in HTML sunt liste neordonata si lista de definitii.

Html - Link-uri

<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Mergi la inceput</a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Nelamuriri aici</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

Au fost exemplificate mai sus un link normal in HTML, un link folosit pentru a lega doua sectiuni in aceasi pagina, un link email si un link imagine. Desi nu se mai foloseste in HTML dar merita mentionat.

<base href="http://www.tutorialehtml.com/">

Base href a fost scos din indexul tagurilor in HTML 5

Html - Imagini

<img src="img//html_image.jpg" alt="Html Image" width="100" height="50" align="center" />Va recomand alinierea cu ajutorul CSS. La fel si stabilirea dimensiunilor imaguinii. Ceea ce ar transforma codul HTML de mai sus in:
<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />

Html - Formulare

Am adaugat mai jos codul HTML folosit pentru a crea un simplu formular. Acesta este doar formularul HTML folosit de user pentru a introduce informatia dorita. Nu uita ca pentru procesarea aceste informatii, odata ce se face click pe butonul submit al formularului HTML. Informatia va fi procesata de catre un fisier.php si eventual urcata in baza de date sau trimisa pe email.

<form method="post" name="formular" action="fisier_care_proceseaza_formularul_html.php">
.................campurile de text care vor prelua informatia.........
<input type="submit" value="Trimite">
<input type="reset" value="Sterge" />
</form>

Html - Campuri de text

Am atasat mai jos codurile HTML folosite pentru campuri de text in functie de cerinte.

<input type="text" size="10" maxlength="40" name="nume"> - camp de text normal
<input type="password" size="10" maxlength="10" name="parola"> - parola
<input type="radio" name="culoare" value="rosu"> - buton radio
<input type="checkbox" name="da" value="da"> - casuta de bifat
<select name="limbajdeprogramare">  - meniu drop-down
<option>Html 4.1</option> 
<option>Html 5</option> 
</select>

HTML - Tabele

Structura de baza a unui tabel in HTML este urmatoarea..

<table>
   <tr> 
      <th>Column 1</th>
      <th>Column 2</th>
   </tr>
   <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
   </tr>
   <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
   </tr>
</table>

Html - Bgcolor

Iata folosirea atributului bgcolor in HTML. Scopul lui este acela de a stabili o culoare de fond.

<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - Background

Puntru a pune o imagine background vom folosi urmatorul cod HTML.

<table background="img/pattern.jpg">

Html - Comentarii

Html - Embed (Muzica)

Pentru a insera muzica intr-un document.html vom folosi folosi urmatorul randHTML.

<embed src="tu si tuborg.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - Object (Video)

Pentru a insera un video intr-un document.html vom folosi urmatoarea bucata de cod HTML.

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

Html- Text ingrosat (Bold)

<b>text ingrosat in html</b>
<strong>text ingrosat in html</strong>

Html - Text inclinat

<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>

Html - Subscript, Superscript, Striketrough

<sub>indice!</sub>
<sup>exponential!</sup>
<del>text taiat</del>

In general aceste trei tag-uri HTML nu se folosesc prea mult dar merita amintite

HTML - Upload si Campuri ascunse

Exemplul de mai jos este campul folosit pentru a urca un fisier pe server. Tine minte ca este doar partea HTML a formularului.

<form method="post" action="fisier_care_proceseaza_formularul_html.php"> 
        <input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
         <input type="file" />
<input type="submit" value="Trimite">
<input type="reset" value="Sterge" />
</form>

Cum sa creezi un fundal in stil Matrix

O tehnica foarte simpla, in doar cativa pasi vei reusi sa rcreezi celebrul fundal care tot apare in filmele Matrix.

1.Sa incepem : Deschide un nou document : File - New - Selectam Width si Height cat dorim ( de ex daca vrei sa il folosesti ca wallpaper, foloseste rezolutia monitorului) - Selecteaza pentru Background Contents : White si OK.

2.Apasa tasta D pentru a reseta culorile in alb si negru.
De sus : Filter - Texture Grain si aplica setarile dupa care OK:

3.Tot de sus : Filter - Artistic - Neon Glow:
Seteaza Glow Size: 5 / Glow Brightness:20 si Glow Color: Verde

4.Si ultimul pas : Filter - Stylize - Glowing Edges cu setarile:

Si imaginea finala:

Fundal Cercuri Colorate

In acest tutorial photoshop vei invata cum sa creezi un brush si cum sa-l setezi astfel incat obtii un surprinzator fundal colorat abstract.

1.Prima parte consta in crearea brushului.
Asadar creem un nou document: File - New - Width: 400px / Heigh 400px - OK

2.Apoi ascundem layerul 'Background' si adaugam unul nou.

3.Din panoul Tools selectam Ellipse Tool si culoarea Negru.

4.Tinem apasata tasta SHIFT (pentru a putea desena un cerc) si incercam sa incadram un cerc pe toata suprafata scenei.
*Sfat: Poti apasa tasta SPACE in timpul desenarii pentru a modifica pozitia cercului.

5.Click dreapta pe layerul cu cercul - Blending Options.
Setam pentru Fill Opacity: 50 %

6.Bifam Stroke. Selectam Size:8px / Position: Inside si culoarea Negru.

7.Apasam ok si urmam ultima parte a construirii brushului si anume Definirea lui.
Apasam CTRL + A pentru a selecta tot apoi de sus: Edit - Define Brush Preset.. - ii dam un nume - OK.

Acum ca am terminat si definirea brushului sa trecem la crearea scenei propriu zise.
8.Deschidem un nou document: File - New - orice rezolutie doriti, eu am folosit 1024 width si 768 height - OK.

9.Selectam unealta Paint Bucket Tool si pentru culoare un gri inchis ( * Nu Negru ) si aplicam pe intreagra scena.

10.Click dreapta pe layerul Background - Convert to smart object pentru a-i putea aplica un gradient.

11.Click dreapta pe el din nou - Blending Options si bifam Gradient Overlay.
   Adaugam un gradient colorat, linear la un unghi de 45 de grade.
   Deci sa incepem.
   Selectam Blend Mode: Overlay.
   Apoi click pe bara de gradient pentru a adauga culori. Eu am folosit unul presetat din categoria Spectrums. Tu poti folosi oricare altul insa daca se poate sa folosesti culori mai inchise.

Selectam si un unghi de 45 de grade.

   Apasam OK si trecem la partea cea mai interesanta.

12.Trebuie sa facem setarile pentru brush.
   Selectam unealta Brush (tasta B) si de sus Window - Brush.
   Cel mai important e sa selectam Brush-ul ce tocmai l-am definit. Apoi marimea si Spacing.
   Urmareste detaiile din imaginile urmatoare:

Bifam Shape Dynamics si adaugam valorile:

Bifam Scattering si punem cele 3 valori.

Bifam Other Dynamics sau Transfer (CS 5) si adaugam urmatoarele setari:

13.Cam atat cu setarile pentru brush. Din partea dreapta, din panoul Layers, adaugam un nou grup si ii schimbam modul in Color Dodge.

14.Adaugam un nou layer in interiorul acestui grup.

15.Avand selectata unealta Brush, selectam si culoarea Alb.
Desenam in scena fie tinand apasat in continuu click si tragand, fie apasand doar cate o data pentru a avea mai mult control.

16.De sus: Filter - Blur - Gaussian Blur - Radius: 12px (sau mai mult) - OK

17.Adaugam un nou layer si il coloram din nou. Eventual, dupa ce am desenat cercurile adaugam un Gaussian Blur doar ca de doar 2px acum.
Imaginea finala:

Click pe imagine pentru a o vedea la marimea originala.

Acum ca stii cum s-a obtinut acest efect poti incerca diverse experimente. Alte culori pentru gradient, alte marimi pentru brush, mai multe layere suprapuse si multe altele. Spor la noi creatii !

Scurtaturi Esentiale in Photoshop

Am realizat o lista esentiala cu cele mai bune scurtaturi din Photoshop pe care vi le recomandam sa le invatati si utilizandu-le va veti creste drastic viteza cu care lucrati. Unele dintre ele e posibil sa le stiti altele le veti afla acum.

1. 'Undo' de mai multe ori [CTRL+ALT+Z]

Majoritatea programelor permit combinatia [CTRL+Z] pentru a anula actiunea si a revenit la actiunea precedenta. Apasand de mai multe ori aceasta combinatie - revii de fiecare data - insa nu si in Photoshop - aici trebuie sa folosesti combinatia [CTRL+ALT+Z]

2. Selectare Move Tool [Spatiu]

Aceasta scurtatura se foloseste apasand tasta spatiu si mentinand in timp ce muti un obiect. Se poate folosi si in combinatie cu diverse unelte cum ar fi Rectangle Tool. In timp ce desenezi dreptunghiul poti apasa tasta spatiu pentru a-l pozitiona mai bine.

3. Zoom In/ Out/ Potrivire in fereastra

[Ctrl + =] – zoom in

[Ctrl + -] – zoom out

[Ctrl + 0] – potrivire in fereastra

Fara a mai selecta unealta de apropiat sau din tabul Navigator - aceasta combinatie de taste este foarte folositoare la fiecare lucrare in Photoshop.

4.Reutilizare Filtru [CTRL+F]

Chiar daca Photoshop ofera un preview in timp ce aplici un filtru tot nu esti sigur ca l-ai aplicat la intensitatea dorita. Apasand [CTRL+F] de mai multe ori poti vedea daca te apropii de rezultatul scontat. Poti reveni de fiecare data folosind prima scurtatura [CTRL+ALT+Z].

5. Copie a unui Layer (Duplicate Layer) [CTRL+J]

De multe ori ai nevoie sa faci o copie a unui layer - fie pentru a experimenta fie pentru a incerca diverse efecte.

6. Desenare Linii Drepte [tine apasat SHIFT]

Pentru a desena linii drepte, cercuri sau patrate perfecte tine apasat tasta SHIFT in timp ce desenezi. Functioneaza aproape cu toate uneltele de desenare si selectare.

7.Mareste/Micsoreaza textul [CTRL+SHIFT+ ./ ,]

Mareste sau micsoreaza textul prin simpla combinatie a tastelor CTRL + SHIFT + .(punct) sau ,(virgula).

8.Umplere sau Fill [CTRL/ALT + Backspace]

Umplere cu culoarea principala: [ALT+Backspace]

Umplere cu culoarea de fundal: [SHIFT+Backspace]

Optiuni Fill: [SHIFT+Backspace]

O scurtatura foarte buna in cazul in care vrei sa schimbi culoarea unui text, a unui obiect sau daca vrei sa umpli o selectie.

9.Schimbare Opacitate [1,2,..,9]

Schimba opacitatea unui layer sau a unei selectii apasand direct tastele numerice. Ai grija sa ai selectata o unealta gen Move Tool care sa nu intre in conflict cu aceasta scurtatura - unealta precum Brush Tool sau Drawing Tool. Folosind aceasta scurtatura vei schimba direct opacitatea cu care vei desena - nerecomandat.

10.Interschimbare Culoare Principala cu cea de Fundal [X]

Cu ajutorul tastei [X] poti schimba intre ele culoarea principala cu cea de fundal.

Aceasta este lista noastra cu Top 10 Scurtaturi esentiale din Photoshop - invatandu-le va veti creste drastic viteza, concentrandu-va mai mult timp pe creativitate.

Daca v-au placut, impartiti-le si cu prietenii.

Este wordpress solutia cea mai buna de blogging?

Atunci cand vine vorba de blog, toata lumea va alege wordpress, fiindca are o reputatie buna: suport, pluginuri, teme, comunitate imensa. Insa nimeni nu vorbeste de lipsa perfomantelor. Atunci cand se doreste cat mai multe functii intr-o platforma, incep sa apara probleme de performante. Si sa nu mai povestim de pluginuri, deoarece majoritatea creatorilor de pluginuri nu se gandesc la performante (queries, performante pluginuri sau timpul incarcarii unei pagini de wordpress).

Ce inseamna queries?

Query-urile sint comenzile care se executa pe serverul de mySQL, baza de date a platformei wordpress, unde se stocheaza tot ceea ce este continut dinamic: utilizatori, postari, linkuri, widget-uri, date despre pluginuri, etc.

Cat trebuie sa fie timpul de executie?

Timpul de executie al unui script reprezinta performanta platformei in incarcarea unei pagini. Acest timp de executie rulat pe un server pe calculatorul personal, nu are voie sa treaca peste 1 secunda. Pe un server de hosting timpul fiind mult mai mic. Atunci cand vezi pe serverul de hosting un timp de executie mai mare de 1 secunda, reprezinta o performanta slaba a platformei.

Exemple de performante la instalarea fara pluginuri si tema originala a wordpress, facute pe localhost pe un procesor dual-core:

- wordpress 3.0.4 dupa instalare executa 15 queries in aproximativ 0,3 secunde per pagina

- wordpress 3.2.1 dupa instalare are exact aceleasi performante

Exemple de site-uri care ruleaza un numar mare de queries:

- http://wptuts.ro/ executa 61 queries in 0.965 secunde

- http://www.longren.org/ executa 81 de queries in 1.058 secunde

- http://westerwelle.net/USAImmobilien/ executa 59 de queries in 1.760

- http://cheque.ro/ desi utilizeaza W3 Total Cache, executa suma uimitoare de 132 de queries in 1.611 secunde

Exemplele de mai sus au fost luate aleatoriu prin cautarea pe google. Ca sa puteti vedea performantele acestor site-uri, uneori este indeajuns a va uita in footer-ul site-ului, insa alteori este necesar sa va uitati in codul sursa HTML al site-ului pentru a vedea timpul de executie, codul fiind comentat, de aceea nefiind vizibil decat in sursa.

Exemplu de cautare pe google dupa performante wordpress:

http://www.google.ro/search?q=Powered+by+WordPress+queries+seconds

Ce se poate face pentru a mari performanta unui blog bazat pe wordpress?

- una dintre cele mai simple metode este instalarea simpla a wordpress fara pluginuri, fiind destul de buna pentru a rula pe aproape orice host. Insa vom pierde distractia care este adusa de multe pluginuri foarte utile.

- insa cea mai buna metoda este implementarea de pluginuri de cache, de exemplu W3 Total Cache, asa cum a scris in articolul precedent despre pluginuri wordpress.

- iar cea mai grea metoda este optimizarea codul manual, insa aici apar multe inconveniente, printre care: 1. pierderea de timp, fiindca un programator face cu usurinta ceva asemanator platformei wordpress cu performante deosebite; 2. dupa ce s-au facut modificari, este imposibil de a face upgrade platformei wordpress, fiindca se pierd toate modificarile/optimizarile;

Cum pot vedea numarul de queries si timpul de executie pe wordpress?

In folderul temei curente de wordpress exista un fisier numit footer.php in care puteti introduce urmatorul cod, exact dupa <?php wp_footer(); ?> :