Category Archives: Pentru Webmasteri

Cum sa creezi corect o pagina web din punct de vedere semantic

25/12/2014

In calatorii, cand esti pierdut, sa ai harta la tine ajuta mereu. Acest lucru este valabil in general, chiar si atunci cand scrii o pagina web. Ma gandesc cum ar trebui sa arate aceasta din punct de vedere SEO si incerc in continuare sa fac o lista a celor mai utile lucruri pe care trebuie sa le ai in vedere atunci cand creezi o pagina web.

Facand o paralela, as asemana un site web cu o carte, iar o pagina din site-ul web cu un capitol. Intr-o carte, fiecare capitol are un titlu al lui. Iar prima regula pe care o deduc de aici este urmatoarea: un singur tag h1 intr-o pagina web. Existenta a doua sau mai multe tag-uri pe aceeasi pagina web nu face decat sa induca in eroare motoarele de cautare.

Foloseste celelalte taguri h pentru a scote in evidenta importanta topiculului pe care vrei sa il evidentiezi. Pentru topicurile cu importanta mai mica foloseste un tag h cu o valoare mai mare (cu alte cuvinte, tagul h2 arata o importanta a topicului mai mare decat tagul h4, sau h5). Pentru topicuri care au aceeasi importanta foloseste taguri cu valori similare (inca o data, nu folosi doua taguri h1 pe aceeasi pagina web).

Motoarele de cautare interpreteaza textul din tagul h4 ca fiind un subtopic al tagului h3. Similar si pentru celelalte taguri. Profita de asta, nu ignora importanta tagurilor h in SEO, si nu le folosi la intamplare. As spune chiar ca este importanta folosirea tagurilor in ordine, iar daca motorul de cautare intalneste un tag h1 si apoi h3 este zapacit… (unde este tag-ul h2?!). Cititorule, daca nu crezi asta, poti sa faci un exercitiu: ia o carte in trei volume. Citeste pe primul si apoi al treilea. Ce senzatie ai? Esti pierdut? Cam asa si motorul de cautare 🙂

Foloseste corect tagurile pentru liste:

liste ordonate (tagul ol);
liste neordonate (tagul li);
liste de definitii (tagurile: dl – definition list, dt – definition term si dd – definition description).

Foloseste listele ordonate atunci cand definesti un proces, sau ordinea unor elemente (cum ar fi capitolele dintr-o carte). Foloseste liste neordonate pentru insiruirea de termeni asemanatori, dar pentru care ordinea nu este importanta (un exemplu ar fi o lista de cumparaturi). Daca definesti un glosar de termeni foloseste listele de definitii.

A treia regula SEO pe care o mentionez este folosirea tagurilor p pentru paragrafe. Intotdeauna, include fiecare pagraf in tagul lui.

Foloseste correct tagurile blockquote, q si cite. Foloseste blockquote atunci cand vrei sa incluzi in textul tau un citat dintr-o carte, un film sau pur si simplu citezi un prieten din fata blocului. Daca citatul este scurt (nu mai mare de o line de text), foloseste tagul q in loc de blockquote. Pentru a mentiona sursa acestui citat foloseste tagul cite.

Uite de taguri precum: i, b, font sau altele care sunt folosite pentru “a da frumos” la cititor. Repet, uita de tagurile si atributele care au ca scop doar sa schimbe modul in care textul este afisat vizitatorului. Foloseste CSS pentru designul paginii. Tine minte: HTML este facut pentru a organiza continutul intr-o pagina web. Daca vrei ca aceasta sa arate bine, foloseste CSS.

Si nu in ultimul rand nu uita sa folosesti un W3C validator pentru a valida pagina ta web. Despre importanta validarii paginii web voi vorbi intr-un articol viitor. Acum vreau sa mentionez un singur lucru: nu este important sa validezi pagina web cu ajutorul unui validator, important este ca pagina web sa fie valida din punct de vedere al modului in care folosesti tagurile HTML/XTML.

Reguli probabil ca sunt cu duiumul, le-am mentionat pe cele pe care le vad eu mai importante.

Published by: claudiu

Sistemul de grid bootstrap

16/11/2014

Pentru Webmasteri Programare

Grid, este un cuvant care nustiu cum s-ar traduce in limba romana. Ar putea fi tradus prin retea, grila, gratar, insa niciuna dintre aceste traduceri nu-si are locul in web. Probabil tabel ar fi celmai potrivit. Si oricum ar fi, voi continua sa folosesc cuvantul grid.

In web, grid-ul este folosit pentru a proiecta si structura continutul unei pagini web. El este defapt o “structura”, compusa din linii orizontale si verticale (il puteti privi ca pe un tabel), care este utilizata pentru a structura continut. Folosind aceasta tehnica, bootstrap creaza un layout eficient folosing HTML si CSS.

Sistemul de grid din bootstrap este structurat pe 12 coloane. El este mobile-first si responsive. Aceasta inseamna ca atunci cand pagina web este vizualizata pe ecrane cu dimensiuni diferite, coloanele “se vor re-aranja de unele singure”.

Cateva reguli :

Pentru ca vorbim de bootstrap, gridul trebuie sa se gaseasca intr-un div cu atributul class = container sau container-fluid;
In interiorul acestui div, va fi plasat in alt div cu atributul class = row;
In interiorul acestui div, vor fi plasate div-uri cu atributul class = col-sm-x sau col-md-x. Unde x este un numar cuprins intre 1 si 12. Suma numerelor x trebuie sa fie 12 (12 coloane are grid-ul de bootstrap).

<!DOCTYPE html>
<html>
<head>
    <title>A simple bootstrap grid example</title>
    
    <meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- add the Bootstrap CDN and a link to jQuery. See the last imported script -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
 
<body>
	<div class="container">
		<div class="row">
		    <div class="col-md-3">
		      	<p>This example creates a three-column layout where the column in the middle is wider than the first and last column.</p>
		    </div>
		    <div class="col-md-6"> 
		      	<p>This is the second column. It has class = col-md-6</p>
		      	<p>This is a new paragraph in the second column.</p>
		    </div>
		    <div class="col-md-3"> 
		      	<p>Notice how the three column has an x = 3 + 6 + 3. A total of 12 grid columns.</p>
		    </div>
	  	</div>
 	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>

Published by: claudiu

Primul pas cu bootstrap

13/11/2014

Pentru Webmasteri Programare

Nustiu cat de coerent am fost in primul post despre bootstrap, si cat de bine am definit ce este bootstrap. Asta pentru ca nici eu nu am inteles foarte bine ce este, dar asta nu ma impiedica sa lucrez cu el. Intai vreau sa inteleg cum functioneaza, dupa care, poate, reusesc sa inteleg si ce este …

Bootstrap este folosit in paginile web (pentru exemplificare voi alege cel mai populat tip de pagina web, HTML), si primul pas pentru a-l folosi este sa descarci foaia de stil bootstrap. In continuare, un link catre aceasta trebuie inclus in pagina ta HTML. Cel mai usor este sa incluzi link-ul dintr-un CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

Aceasta abordare poate aduce si un plus de viteza site-ului tau. Si anume, daca un alt site care include aceelasi fisier a fost incarcat in browser-ul vizitatorului, atunci fisierul bootstrap este deja in cache-ul browser-ului.

Pentru ca bootstrap foloseste HTML 5, pagina ta trebuie sa inceapa cu declaratia de document HTML 5:

<!DOCTYPE html>

Pagina ta trebuie sa se afle intr-un div ce contine atributul class cu valoarea container (daca pagina ta are o lungime fixa) sau container-fluid (daca vrei ca pagina ta sa ocupa intreaga lungime a ecranului).

Introducerea etichetei viewport este deasemenea recomandata, in special daca este folosit div-ul container-fluid:

<meta name="viewport" content="width=device-width, initial-scale=1">

Acestea fiind spune, o pagina bootstrap ar trebui sa arate asa:

<!DOCTYPE html>
<html>
<head>
    <title>A bootstrap example</title>
    
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
	<div class="container">
	
	</div>  
</body>
</html>

Cateva elemente bootstrap :

<h1>In boootstrap tag-ul h1 are 36 pixeli</h1>
<h2>In boootstrap tag-ul h2 are 32 pixeli</h2>
<h3>In boootstrap tag-ul h3 are 24 pixeli</h3>
<h4>In boootstrap tag-ul h4 are 18 pixeli</h4>
<h5>In boootstrap tag-ul h5 are 14 pixeli</h5>
<h6>In boootstrap tag-ul h6 are 12 pixeli</h6>

Fiecare element din HTML are un stil predefinit in bootstrap. Printre cele mai interesante as alege abbr, kbd si mark. Testeaza-l pe fiecare.

Published by: claudiu

Bootstrap

06/11/2014

Pentru Webmasteri Programare

La momentul scrierii articolului, bootstrap este cel mai popular framework HTML, CSS si JavaScript pentru dezvoltarea site-urilor si a aplicatiilor web. Totodata poate fi folosit pentru a dezvolta interfete web responsive.

Initial, Bootstrap a fost dezoltat de Mark Otto si Jacob Thornton pentru Twitter. Scopul a fost acela de a pastra o anume consistenta in cadrul aplicatiilor interne. Cu timpul, ei (impreuna cu ceilalti colegi ai echipei) au dezoltat ceva mai bun pentru a folosi in cadrul companiei, iar in august 2010, Twitter a lansat Bootstrap ca proiect open-source.

Bootstrap poate fi descarcat de pe site-ul getbootstrap.com, iar probabil cel mai bun tutorial pentru incepatori este cel de pe w3schools.

Bootstrap a ajuns acum la versiunea 3.3 si este compatibil cu ultimele versiuni ale celor mai importante browser-e.

Ce trebuie sa stii pentru a lucra cu bootstrap ?

Clasicele … HTML/HTML 5, CSS/CSS3 si Java Script.

Published by: claudiu

Ce este un cod QR si cum poti sa generezi unul

17/10/2014

Pentru Webmasteri

Primul cod QR l-am vazut pentru prima data in urma cu cativa ani la muzeul Antipa din Bucuresti. Pe atunci pentru mine era similar cu un OZN…

Codul QR (quick response) este un cod de bare care poate sa stocheze orice caracter alfa-numeric. Astfel, un cod QR poate stoca adresa unui site web, un numar de telefon, o adresa de email, sau orice alt text. Cu un simplu search pe Mr. Google gasesti o serie de site-uri cu ajutorul carora poti genera coduri QR. Sigur asta functioneaza pentru utilizatori “normali”. Pentru dezvoltatori de aplicatii si pentru webmaseri, lucrurile stau putin diferit.

De cele mai multe ori, ei au nevoie sa genereze codurile QR din codul aplicatiti lor. Pentru aceasta exista PHP QR Code, o librarie ce este distribuita sub licenta open source (LGPL) si care genereaza coduri QR in format 2D.

Pentru a crea un cod de bare QR cu un simplu text, sunt necesare doar doua linii de cod:

<?php
include "phpqrcode/qrlib.php"; // include libraria Php Qr Code.
QRcode::png("QR code generat din codul de pe destept.net"); // creaza codul de bare cu textul ales.
?>

Sau, poti sa generezi un o imagine png cu codul de bara dorit:

<?php
include "phpqrcode/qrlib.php"; // include libraria Php Qr Code.
QRcode::png("http://www.destept.net", "mergi-la-blog-destept.png", "L", 4, 4);
?>

In ordinea in care apar, cele 5 (cinci) argumente se refera la :

Un simplu text care va fi codat in imagine.
Numele imaginii care urmeaza sa fie generata.
Nivelul de corectie, in baza algoritmului Reed-Solomon. Exista 4 niveluri de corectie :
- L = Low, 7%
- M = Medium, 15%
- Q = Quartile, 25%
- H = High, 30%
Dimensiunea fiecarui patrat din codul QR (se masoara in pixeli).
Specifica dimensiunea, in pixeli, a marginii albe din jurul codului QR.

Pentru a citi un cod de bare, ai nevoie de un smart phone si de o aplicatie capabila sa decodeze codul QR (eu folosesc QR Barecode Scanner).

Published by: claudiu

Cum sa adaugi jQuery la site-ul tau

10/08/2014

Pentru Webmasteri Programare

Ma plictisesc, atat de tare incat week-end-ul asta m-am apucat sa invat jQuery. Pentru aceasta, in perioada urmatoare mai multe tutoriale si articole despre jQuery (si java script) vor aparea pe blog.

Pentru inceput voi atinge urmatoarele doua puncte:

Ce este jQuery;
Cum sa adaugi jQuery la site-ul tau.

Se spune ca pentru a invata jQuery trebuie sa stii HTML, CSS si Java Script. HTML am invatat in urma cu 10 ani, in perioada liceului si putin in facultate, iar cu CSS ma descurc. Sper sa mearga si fara JavaScript.

Definitie: jQuery este o librarie JavaScript care simplifica programarea in JavaScript. In alta ordine de idei, jQuery “incapsuleaza” task-urile comune din JavaScript, si astfel scrii mai putine linii de cod pentru ele.

Cum adaugi jQuery la site-ul tau ?

Pentru a adauga si folosi jQuery in site-ul tau exista doua modalitati:

download-ezi jQuery de pe jQuery.com;
adaugi jQuery dintr-un Content Develivery Network (CDN) cum ar fi google cdn. Pentru asta adaugi urmatoarea linie intre tag-urile head :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

Avantajul evident al celei de-a doua abordari este “rapiditatea” prin care jQuery este adaugat site-ului tau. Pe langa acesta, un avantaj “mai practic” exista: majoritatea utilizatorilor de internet au vizitat google (astfel jquery exista in cache). jQuery va fi incarcat din cache, rezultand intr-o incarcare mai rapida a site-ului tau.

Acum poti folosi jQuery in site-ul tau. Success!

Published by: claudiu

Domenii personalizate de internet

26/11/2013

Pentru Webmasteri

De reglementarea domeniilor de internet se ocupa organizatia Internet Corporation for Assigned Names and Numbers (ICANN).
Cei de la ICANN au anuntat posibilitatea inregistrarii de domenii personalizate, aceasta fiind o masura ce are ca scop o libertate mai mare de alegere. Astfel vor putea aparea domenii precum .cola, .pepsi, .dacia, etc. As putea chiar si eu sa-mi cumpar un domeniu precum .destept …

Cu toate acestea, domeniile personalizate nu vor fi la indemana oricui si asta deoarece taxa de rezervare a lor se situeaza in jurul sumei de 140.000 EURO.

Published by: claudiu