<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 

/**
*@package Codeigniter  
* @subpackage Libraries  
* @category Youtube
* @author Ciobanu Ion "http://www.it-nolimit.com"
* @version 0.1
*/ 

class Youtube  {
public $id ='';
private $_url = "http://gdata.youtube.com/feeds/api/videos/";
private $data;
public $width = 640;
public $height = 390;
public $link;
public $title; 	 	

function __construct($param = array())
{
  if (count($param) --> 0) {

    $this->init($param);

  }
}

	public function init($param = array())
	{
		if (count($param) > 0){

			foreach ($param as $k=>$v){

				if (isset($this->$k)) {
					$this->$k = $v;
				}
			}
		}
	}

	/**
	 *@return complete url
	 */
	private function set_url($url)
	{
		return $this->_url = $url;
	}

	public function set_data($data)
	{
		 $this->data = $data;
	}

	public function get_data()
	{
		return $this->data;
	}

	/**
	 *Extragem datele despre clip
	 *@return array()
	 */

	public function get_youtube_data ()
	{

		$this->set_url($this->_url.$this->id);
		$this->set_data(file($this->_url));
		$this->set_data(implode('', $this->get_data()));
		$this->set_data(str_replace(array("\r\n", "\r"), "\n", $this->get_data()));
		preg_match("<yt:duration seconds='(.*?)'/>", $this->get_data(), $duration);
		preg_match('|<title [^>]*>(.*?)</title>|is', $this->get_data(), $title);

		$min = floor($duration[1]/60);
       	$sec = $duration[1] %60;

	    $details = array(
	    	'title'=>$title[1],
	    	'duration'=>$min.':'.$sec,

	    );

	    $this->title = $title[1];

       return $details;

	}

	/**
	 * Player-ul
	 * @return html
	 */

	public function embed_code()
	{
		$outupt = '<object width="'.$this->width.'" height="'.$this->height.'">';
                $outupt .= '<param name="movie" value="http://www.youtube.com/v/'.$this->id.'?version=3&controls=0&rel=0&showinfo=0&feature=player_embedded" />';
                $outupt .= '<param name="allowFullScreen" value="true" />';
                $outupt .= '<param name="allowScriptAccess" value="always" />';
                $outupt .= '<embed type="application/x-shockwave-flash" width="'.$this->width.'" height="'.$this->height.'" src="http://www.youtube.com/v/'.$this->id.'?version=3&controls=0&rel=0&showinfo=0&feature=player_embedded" allowscriptaccess="always" allowfullscreen="true"></embed></object>';

		return $outupt;
	}

	/**
	 * Image
	 *@return html
	 */
	public function embed_image()
	{
		$output = '<img title=".$this->title." src="http://i.ytimg.com/vi/'.$this->id.'/default.jpg" border="0" alt=".$this->title." width="120" height="90" />';

		return $output;
	}

	/**
	 * Verifica daca exista asa id
	 *
	 * @param $link format
	 * @return id or FALSE
	 */
	public function check_link($link)
	{
		//Verificam daca este link de youtube
		if (!preg_match('/http:\/\/www\.youtube\.com\/watch\?v=[^&]+/', $link)) {
          return FALSE;
		} else {

    	   	//Extragem ID-ul
			$x = explode('?v=', $link);
			if(!empty($x) && isset($x[1])){

				$x = explode('&', $x[1]);
				$id = $x[0];

			}

			$header = get_headers($this->_url.$id);

			//Verificam daca exista asta ID
			if (!strpos($header[0], '200')) {
	    		return FALSE;
			} else {
				return $id;
			}
       	}
	}

}

Controller

$v_id = $this->youtube->check_link("http://www.youtube.com/watch?v=mHTx0mhRFws&feature=autoplay&list=PLE74055EAE83B6803&index=4&playnext=25");

if($v_id){

     $config['id'] = $v_id;
     $config['width'] = 640;
     $config['height']= 390;

     $this->youtube->init($config);

     $details = $this->youtube->get_youtube_data();

     print_r($details);

     echo $this->youtube->embed_image();

     echo  $this->youtube->embed_code();
}

Cînd faceți click pe buton se deschide un bloc cu o listă de link-uri și atunci cînd apasăm pe un link blocul este minimizat. Acest lucru poate fi realizat cu jQuery și în acest tutorial voi arata cum. În primul rînd trebuie sa creem butonul nostru, ca mai apoi sa ne concentram asupra codului. Puteți crea un buton absolut de orice dimensiune. Dimensiunea la butoanele mele – 182 x 32 pixeli. Faceți dublu click pe stratul de fundal și adaugă “Gradient Overlay”.

În partea dreapta a butonului adaugă o mică săgeată albă și un separator vertical din două culori: #252525 și #302f2f

La stînga puteți insera o imagine și un text, nu voi intra în detalii la crearea butonului pentru ca fiecare își va crea singur meniul. Aici este butonul meu.(Salvați imaginea în folderul cu imagini.)

Acum deschideți Notepad și salvați documentul gol ca styles.css în folderul ”sliding menu” de pe desktop. Închideți Notepad, deschideți folderul ”slideng menu” și creați creați două foldere noi ”js” și ”images”. Du-te la jquery.ocom descarcă biblioteca ”jquery-1.4.4.min.js”, redenumiți fișierul doar ”jquery” și salvați-l în folderul ”js”. Deschideți Dreamweaver și creați un fișier nou HTML. Salvați-l direct pe desktop. (Numele fișierul nu joacă nici un rol, de aceea dații ce nume doriți, de exemplu ”sliding_menu.html”). În Dreamweaver comutăm în regim de cod

În primul rînd ce trebuie să facem este sa punem referințele către fișierele noastre javascript și css. Pentru aceasta copiem aceasta bucată de cod înt tag-ul HEAD.

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

Probabil ați observat ca am menționat 3 fișiere styles.css, jquery.js și slider.js (Desigur ca vă veți întreba de la treilea fișier). Deschideți Notepad și salvați documentul gol într-un folder cu numele de slider.js Acum deschideți fișierul în Dreamweaver și scriți codul de mai jos.

$(document).ready(function () {
    $('img.menu_class').click(function () {
        $('ul.the_menu').slideToggle('medium');
    });
});

Permiteți-mi să explic fragmentul de cod de mai sus. Prima linie înseamnă că atunci cînd documentul este încărcat, este apelată funcția(în cazul nostru sliding menu). Următoarea linie înseamnă că, îndată ce faceți click pe imagine cu clasa menu_class meniul se va desfășura.l Urmează al 3-lea rînd.  Meniul se va desfășura în jos la o viteză medie.  Puteți seta viteza slow(lent) sau fast(rapid). Linia a doua și a treia sunt foarte importante deoarece ele conțin elemente legate de CSS și anume img.menu_class și ul.the_menu. Treci la documentul HTML în regim de cod pentru ca să începem să creem meniul nostru.

<img src="images/button.png" width="184" height="32" class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

În primul rînd de cod noi inserăm imaginea butonului nostru. Am specificat lățimea și înălțimea, și stabilim clasa menu_class. Clasa este unicul punct de referință pentru fișierul js care noi deja l-am creat. Clasa ne permite să aplicam orice stil CSS prin intermediul .menu_class. După care noi obținem o listă neordonată. Dacă vizualizați meniul în browser-ul dvs., trebuie să arate așa.

Deschideți fișierul CSS în Dreamweaver. Acum trebuie să stabilim stilul pentru documentul nostru.

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

Este nevoie de un font și fundal simplu. Setatți dimensiunea fontului după dorință. Am schimbat culoarea fundalului de la alb la gri închis. Creem stil pentru listele neordonate.

ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

Următorul stil se aplică pentru meniul care se va desfășura după apăsarea butonului.

.the_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}

În acest fragment de cod, aveți posibilatea să modificați lățimea blocului meniului desfășurat. Lățimea meniului meu este de 300px, dar aveți posibilitatea să specificați orice lățime. Eu am setat și border cu 1px. Următoarea parte a codului se referă la culoarea de fundal a meniului desfășurat și stabilește și textului.

.the_menu li {
    background-color: #302f2f;
}

.the_menu li a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

Sursa: net.tutsplus.com

Se vorbește mult despre schimbările care au adus HTML 5. Fiecare tag menționat în acest articol sunt acceptate în HTML 4.01 și HTML 5. Deși unele dintre aceste tag-uri sunt utilizate pe scara largă, va fi foarte util de a revizui metodele aplicate .

1.<!- ->

Fiecare carte despre programare menționează faptul că este foarte bine de a explica ceea ce face codul. De ce sunt comentariile o idee bună? Acest lucru este foarte util pentru oricine care citește codul, să înțeleagă ceea ce se întîmplă.

Pentru HTML, comentarea pare nejustificată, cu toate acestea, ea poate fi utilizată pentru a defini secțiuni, și vă poate ajuta să păstrați codul organizat și structurat. Etichetarea începutului și sfîrșitul unei secțiuni într-adevăr ajută mult atunci cînd lucrezi la un proiect.

<!-- Inceptul navigarii -->
<ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
   </ul>
<!-- Sfirsitul navigarii -->
<!-- Inceptul continului -->
<p>Continutul</p>

2.<thead>,<tbody>,<tfoot>

Pentru a face un design mai frumos pentru tabel trebuie sa folosim tag-urile menționate mai sus. Ele toate afectează rîndurile tabelei și poate fi ușor stabilite stiluri.

<thead>

Se foloseşte pentru a grupa una sau mai multe linii ale tabelului într-un antet al acestuia.

<tbody>

Se foloseşte pentru a marca grupuri de linii ale tabelului care conţin datele propriu zise. Într-un tabel pot exista mai multe zone
. Dacă tabelul nu are
sau
atunci
poate să lipsească, altfel este obligatoriu.

<tfoot>

Se foloseşte pentru a grupa una sau mai multe linii ale tabelului într-un subsol al acestuia.

<table>
	<thead>
		<tr>
			<td>Item</td>
			<td>Qty</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>Sum</td>
			<td>7</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>#1</td>
			<td>3</td>
		</tr>
		<tr>
			<td>#2</td>
			<td>4</td>
		</tr>
	</tbody>
</table>

3.<optgroups>

Listele “drop down“ sunt o modalitate foarte bună de a prezenta date pentru ca utilizatorul sa aleagă. Ele nu numai că ocupă spațiu putin, dar și utilizatorii sunt familiarizați  și ușor de utilizat. Cu proprietatea <optgroup> este posibilitatea de a crea categorii pentru elementele din listă.

<select>
<optgroup label="Бейсбольные команды">
<option value="Detroit Tigers">Detroit Tigers</option>
<option value="Chicago Cubs">Chicago Cubs</option>
</optgroup>
<optgroup label="Футбольные команды">
<option value="Detroit Lions">Detroit Lions</option>
<option value="Chicago Bears">Chicago Bears</option>
</optgroup>
</select>

4.Heading

Desigur, toată lumea folosește titluri. Dar pentru a fi sincer, cînd ultima oară ați folosit h3 sau mai mic. Titlurile vă permit să cronstruiți structuri semantice mai puține, cum ar fi stiluri de text în div.
Nu trebuie să facem muncă suplimentară. Amentiți-vă de aceste tag-uri.

5.<fieldset>și<legend>

La toată lumea le place site-urile unde este ușor de găsit informația necesară care este grupă. <fieldset>grupează elementele formei, desenînd împrejurul lor un dreptunghi. De asemenea, este posibil de adăugat titlu la acest grup cu <legend>

<form>
<fieldset>
<legend>General Information: </legend>
<label>Name: <input type="text" size="30" /></label>
<label>Email: <input type="text" size="30" /></label>
<label>Date of birth: <input type="text" size="10" /></label>
</fieldset>
</form>

6.<label>

Tag-ul <label> nu are nici un efect asupra stilului. El afectează funcționalitatea paginii.

<label>se utilizează pentru a determina eticheta elementui de intrare. Această proprietate este valabilă pentru cîmpurile de tip text și radio butoane.

<form>
<label>Numele: <input type="text" size="30" /></label>
<label>Masculin: <input type="radio" name="sex" /></label>
<label>Feminin: <input type="radio" name="sex" /></label>
</form>

7.<blockquote>

Dacă sunteți în căutarea de a crea un efect dramatic de a atrage atenția la o declarație sau o propoziție, puteți folosi <blockquote>. În mod implicit, înainte și după element se adaugă un spațiu gol.

Exemplu de utilizare a <blockquote>

Exemplu de utilizare a acestui tag

<blockquote>
Exemplu de utilizare a acestui tag
</blockquote>

8.<cite>

Nu se poate de spus că <cite> se referă la <blockquote>, de obicei ele sunt folosite împreună. Gîndiți-vă de eticheta <cite>, atunci cînd aveți nevoie de citat pe cineva.
Exemplu:

Utilizarea tag-ului cite în tag-ul blockquote

<blockquote>
<cite>Utilizarea tag-ului cite în tag-ul blockquote </cite>
</blockquote>

9.<dl>

Listele ne oferă oportunitatea pentru organizarea informației. Toată lumea știe de <ul>, dar cît de des folosiți <ol> și <dl> ?
Tipuri de liste

1. Listă neordonată (ul)
2. Listă ordonată (ol)
3. Listă de definiții(dl)

Ce fac ele

• Listă neordonată (ul): listă cu buline
• Listă ordonată (ol): listă numerotată
• Listă de definiție(dl): O listă de definiţii ale elementelor

Modul de afișare a informației în fiecare tip de listă este diferit. Desigur nu trebuie să ma opresc asupra <ul> și <ol>, dar asupra listei de definiții care necesită clarificare suplimentară.

<dl>
<dt>List Item #1</dt>
<dd>Definiția pentru elementul din Lista #1</dd>
<dt>List Item #2</dt>
<dd>Definiția pentru elementul din Lista #2</dd>
</dl>

În loc de a specifica un element din listă (<li>), vom folosi două etichete: <dt> și <dd>. <dt> definește fiecare element și <dd> descrie elementul de mai sus.

10.&#39;(și alte caractere ASCII)

La folosirea HTML trebuie de folosit codul ASCII, atunci cînd trebuie să inseram un simbol. Această regulă necesită acțiuni suplimentare, dar asigură afișarea simbolului corect pe ecranul utilizatorului.

Sursa:aici

În Chrome poți instala extensiile și le folosi fără să faci restart la browser, taburile sunt izolate în procesere separate în caz ca cade un tab browser-ul rămîne în funcționare.

Un lucru foarte bun pentru utilizatorii de Chrome este că cei de la google aduc modificări treptat ceea ce face ca utilizatorul repede să prindă firul, pe cînd cei de la Firefox fac o lista întreaga  de modificări și apoi scot o versiune nouă.

Pe mine personal mă deranjează la Firefox consumul mare de  memorie.

Cei de la google au implimentat sincronizarea , acum permite si sincronizarea extensiilor .  Odată cu apariția la Firefox 4 ei ne promit Sincronizarea și o modalitate practică de organizare a taburilor(vedem ce se va primi).

Dar totuși Firefox este puternic la cîteva capitole:

• ca web-developer nu am găsit nimic bun ca Firebug (Firebug Lite este un început pentru Chrome)
• dacă descarci mult de pe internet Firefox are o extensie foarte utilă care în Chrome  nu este asa ceva DownThemAll

P.S.  Ca web-developer folosesc Firefox ca simplu utilizator folosesc Chrome

Doar dezvoltatorii se confruntă cu faptul că clienții insistă asupra faptului cross-browser utilizînd soluțiile CSS3, cerînd punerea lor în aplicare, chiar și în IE6. În acest caz, am colectat o serie de opțiuni care dezvoltatorii pot lua în considerare atunci cînd se lucrează în aceste condiții, atunci cînd sprijinul CSS3 este necesar în toate versiunile de Internet Explorer (IE6, IE7, IE8 – toate au un număr semnificativ de utilizatori).

Opacity / Transparency

Probabil, că toți dezvoltatorii sunt uimiți de faptul ca Internet Explorer încă nu acceptă aceastră populară proprietate(deși e problematic). Aceasta este ulitilizată peste tot atît de mult timp că toți au uitat că, de fapt este proprietatea din CSS3. Deși nu suportă propietatea opacity, el ne oferă efect asemănator cu ajutorul proprietății lui filter:

#myElement {
	opacity: .4; /* Alte browsere */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* Funcționează în IE6, IE7, și IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Functionează numai în IE8 */
}

Defapt aveți nevoie doar a doua linie, care lucrează în toate cele trei versiuni de Internet Explorer.  Dar dacă dintr-un motiv trebuie folosiți transparența numai în IE8, va trebuie doar linia a treia, pe care versiunile mai vechi nu recunosc.

Valoarea opacity care este la sfîrșitul fiecărei linie pentru IE, lucrează ca și opacity luînd un număr de la 0-100(proprietatea opacity se un numar între 0 – 1 . De exemplu “44″  pentru IE este echivalent cu  “0.44 ” pentru alte browsere ). Proprietatea opacity va fi moștenită de toți copii, ceea ce poate să ne ducă în eroare.

Demonstrație

Dezavantaje

• Proprietatea filter este folosită doar în produsele Microsoft, ceea ce face ca CSS -ul sa nu treacă validarea
• Ca și în cazul folosirii opacity , valoarea proprietății filter IE este moștenită de toții copii.

Rounded Corners (border-radius)

Proprietatea border-radius (des întîlnită în CSS3 ca colțuri rotunjite) – altă prorietate populară în CSS3. Această proprietate a permis dezvoltatorilor să evite scriputuri în JavaScript sau poziționarea de elemnte suplimentar pentru a atinge acest efect. Dar încă o dată, Microsoft nu vrea să coopereze, astfel IE nu suportă această proprietate.

Din fericire, cel puțin o persoană a venit cu o soluție foarte utilă. Remiz Rahnas a creat un fişier de HTC care este numit colţuri rotunjite (îl puteți descărca de pe Google Code)

Cel mai mare lucru despre această bucată de cod este că nu necesită întreținere din partea dvs. Trebuie doar linkul către CSS și scriptul va analiza automat codul CSS, pentru a găsi proprietatea border-radius.

Codul va arăta cam asa:

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

În mod ideal, utilizați proprieatea behavior doar ăn foia de stil pentru IE, folosînd aceeși selectori în CSS, astfel script-ul va prelua volorile razelor
.

Demonstrație

Avînd în vedere că tehnica necesită utilizarea unui fișier HTC extern, demonstrația poate fi gasită aici (pagina trebuie să fie deschisă în IE).

Dezavantaje

• fișierul HTC are 142 de linii de cod(minimizarea sau arhivarea pot ajuta, dar nu elimină problema complet)
• proprietatea behavior face ca CSS-ul sa nu fie validat
• serverul dvs. trebuie sa poată încărca fișierul HTC pentru a utiliza această tehnologie
• se pare că IE8 are aceeși problemă atunci cînd se utilizează fișierul HTC elemente cu colțuri rotunjite, care au valoarea negativă la proprietatea z-index

Shadow Box

Proprietatea box-shadow este o altă proprietate utilă din CSS3, care va adăuga elementului o umbră naturală. IE nu acceptă propietatea box-shadow, dar proprietatea filter oferă o alternativă decentă.

Trebuie remarcat faptul că proprietatea box-shadow a fost  scoată din Backgrounds CSS3 şi Module Borders astfel încît nu se știe viitorul în prezent.

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* pentru Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /*pentru Safari и Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

Demonstrație

Dezavantaje

• Setările pentru umbră în IE nu corespunde cu proprietatea box-shadow. Pentru ca să arate la fel, trebuie să vă jucați cu volorile care poate provoca dureri de cap.
• Proprietatea filter nu este validată , dar nici proprietățile webkit și Mozilla, astfel încît aceasta este un neajuns la toate browserele

Text Shadow

Adăugarea umbră la etichetele text în design și paginele web se practică de mulți ani. În web design de obicei problema este rezolvată prin imagini sau duplarea textului și pozitionarea lui. CSS3 oferă dezvoltatorilor un mod simplu de a adăuga umbre la text, cu o proprietate simplă și flexibilă text-shadow.

Din păcate, adăugînd o umbră la text în Internet Explorer nu este un proces simplu, chiar și cu folosirea unui filtru. Pentru a rezolva aceastră problemă există un plugin jQuery scris de un web designer Kilian Valkhof
În primul rînd trebuie în CSS să setați proprietatea text-shadow:

.text-shadow {
text-shadow: #aaa 1px 1px 1px;
}

Valorile specifică culoarea umbrei, poziția pe axa orizontală, poziția pe axa verticală și gradul de neclaritate.
După conectarea bibliotecii jQuery și a plugin-ului, dumneavoastră puteți apela cu jQuery plugin-ul:

// include bliblioteca jQuery
// include link la plugin
$(document).ready(function(){
$(".text-shadow").textShadow();
});

Plugin-ul vă permite să utilizați opțiunie

Demonstrație

Deoarece această tehnică necesită utilizarea bibliotecii jQuery și un plugin extern, puteți vedea o demonstrație aici

Dezavantaje

• Pentru ca umbrele să arate asemănător in toate browserele, trebuie să utilizați setări doar pentru IE, adăugînd la timpul de dezvoltare și întreținere
• Trebuie de conectat bibliotica jQuery, plus plugin-ul care are 61 de linii
• Umbra în IE nu va arata exact ca în celelalte browsere
• Utilizarea parametrilor pentru plugin care modifică valorile proprietăților în CSS, plugin-ul nu funcționează corect, afișarea umbrelor este urităi
• Spre deosebire de CSS3, plugin-ul nu suportă mai multe umbre
• Indiferent de motive, în scopul ca în IE sa lureze este nevoie elementul de dat proprietatea z-index

Gradients

Createa unui gradient pentru fundal este o tehnică excelentă în CSS3, care ajută la scutirea timpului de dezvoltare. Deși Internet Explorer nu suține proprietatea din CSS3, se face foarte ușor folosind o sintaxă specifică.

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Pentru IE GradientType poate avea valori “1″(orizontal) sau “0″(vertical).

Demonstrație

Dezavantaje

• CSS-ul nu va trece validarea, de asemenea și WebKit și Mozilla
• Cod suplimentar pentru IE, care crește timpul de dezvoltare
• Gradientul WebKit și Mozilla va permite să declarați un stops, care nu este posibil în IE

Transparent Background Colors (RGBA)

CSS3 are altă metodă de a folosi transparența, se face acest lucru printr-un canal alpha pentru culori de fundal. Internet Explorer nou acceptă aceastră proprietate, dar se poate de facut

Sintaxa CSS3 pentru stabilirea canalului alpha

#rgba p {
	background: rgba(98, 135, 167, .4);
}

Pentru a simula în Internet Explorer se poate utiliza un filtru pentru a crea un gradient cu aceleaşi culori iniţiale şi finale care corespund la valoarea de transparenţă. O astfel de proprietate poate fi incluse în foaia de stil, numai pentru IE, care ar anula setările anterioare.

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Gradient arată la fel în IE și alte browsere, dublicînd efectul de transparenţă RGBA.

Demonstrație

Primul exemplu lucrează in browserele care suportă RGBA, iar al 2-lea lucrează numai în Internet Explorer

• Proprieatea filter nu trece validarea
• Aveți nevoie de linii suplimentare de CSS pentru IE

Multiple Backgrounds

Aceasta este o altă tehnică CSS3, poți găsi multe aplicații practice utiizînd aceasta metodă. În prezent IE și Opera nu acceptă această tehnică. Dar este interesant că IE versiunea 5.5 a fost posibil folosirea de fundaluri multiple pentru același element.
În Firefox, Sahari, Chrome pentru utilizarea fundalurilor multiple trebuie de urmat următoare regulă CSS:

#multi-bg {
	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

Pentru aplicarea a două fundaluri pentru același element în IE este următorea regulă:

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 numai*/
}

Demonstrație

Mai jos este un element cu fundaluri multiple care va fi vizibil în Chrome, Safari și Firefox(în IE nu se va putea vedea)

Mai jos este un elemnt cu două fundaluri care se va vedea numai în IE (în alte browsere va fi doar un fundal).

Dezavantaje

• CSS nu va trece validarea
• A doua imagine, folosind proprietatea filter, apare întotdeauna sus și nu se repetă. Astfel metoda este foarte limitată în utilizare
• Pentru a plasa elementul în centru (ca în alte browsere), aveți nevoie de a crea o imagine cu un spatțiu alb suplimentar în jurul ei, pentru a imita o centrarea

Element Rotation (CSS Tranformations)

CSS3 are un set de transformări și animații care unele pot parea nepotrivite pentru CSS. Cu toate acestea, există o modalitate de a simula rotația elementului în Internet Explorer? deși într-o formă limitată
Rotația elementului la 180 grade (rotire pe verticală):

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

Pentru o astfel de acțiune în IE se folosește filtru:

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

Parametrul rotation poate avea valori 1,2,3 sau 4. Care corespunde rotației la 90, 180,270 sau 360

Demonstrație

Elementul de mai jos ar trebui să apară cu susul în jos în Internet Explorer utilizînd proprietatea filter

Dezavantaje

• CSS nu va trece validarea
• În timp ce Mozilla și WebKit permite modificări de rotație la creștea cîte un grad(de exemplu 33grade), filtru IE permite rotație doar 4 etape, minimizînd flexibiliatatea

Concluzii

Deși IE nu suportă CSS3, aceasta nu înseamnă ca este imposibil de implimentat astfel de proprietăți

SURSA:

aici

În acest articol vom explora aceste 2 metode. Ca exemplu vom folosi arborele unui magazin alimentar fictiv. Acest magazin își sorteaza produsele dupa categorie, culoare și tip

Acest articol conține o serie de exmple de cod, care arată cum se salvează și se restabilesc datele. Deoarece folosesc eu însumi acest limbaj și mulți alți oameni îl folosesc sau îl cunosc, am ales să scriu exemple în PHP. Putem cu ușurință sa-l traducem in limbajul care îl doriți.

Metoda recursivă

Prima și cea mai elegantă metodă pe care o vom încerca se numește metoda recursivității. Este o metodă elegantă pentru ca avem nevoie de o simplă funcție care să se repete în arborele dumneavoastră.  În magazinul nostru de alimente tabelul arată astfel:

După cum vedeți  salvați “părintele” fiecărui nod. Putem vedea că “Pear” este copil al lui “Green” care este un copil al “Fruit” s.a.m.d Nodul rădăcină “Food” nu are o valoare parentală. Pentru simplificare, am folosit valoarea “title” pentru a identifica fiecare nod. Bineînțeles, într-o bază de date reală ar trebui să folosiți id-ul numeric al fiecărui nod.

Dați-mi arborele

Acum că am introdus arborele nostru în baza de date, e timpul sa scriem funcția de afișare. Această funcție va trebui să înceapă de la nodul rădăcină – nodul fără nici un părinte – și ar trebui să afișeze apoi toți copiii din acel nod.  Pentru fiecare dintre acești copii, funcția va trebui să restabilească și să arate toate nodurile copii ale acelui copil. Pentru acești copii, funcția ar trebui să arate din nou toți copiii și așa mai departe.

După cum s-ar putea să fi observat, există un model regulat în descrierea funcției. Putem scrie pur si simplu o singură funcție, care preia copiii unui anumit nod părinte. Această funcție ar trebui să pornească o altă instantă a ei însăși pentru fiecare dintre acești copii, pentru a-i arăta pe toți copii acestora. Acesta este mecanismul recursiv care-i dă metodei numele de metoda recursivității.

<?php
// $parent este parintele copiilor pe care vrem sa-i vedem
// $level creste cand inaintam in arbore, pentru a arata arborele frumos
function display_children($parent, $level)
    {
    // restabileste toti copiii $parent
    $result = mysql_query('SELECT title FROM tree '.'WHERE parent="'.$parent.'";');
    // arata fiecare copil
    while ($row = mysql_fetch_array($result))
        {
        // indenteaza si arata titlul acestui copil
        echo str_repeat(' ',$level).$row['title']."\n";

       // copiii acestui copil
        display_children($row['title'], $level+1);
        }
    }
?>

Pentru a afișa întregul arbore, vom rula funcția cu un șir gol cur ar fi $parent și $level = 0; display_children(‘ ‘,0).

Pentru arborele magazinului nostru funcția returnează:

Food
Fruit
Red
Cherry
Yellow
Banana
Meat
Beef
Pork

Rețineți că, dacă vreți să vedeți un sub-arbore, puteți indica funcția să pornească cu-n alt nod. De exemplu, pentru a arăta sub-arborele Fruit, ar trebui să puneți în aplicare display_children(‘Fruit’,0);

Calea către un nod

Aproape cu aceeași funcție, este posibil pentru a căuta calea spre un nod dacă știi doar numele sau id-ul acelui nod. De exemplu calea spre “Cherry” este “Foot” > “Fruit” > “Red“. Pentru a obține această cale, funcția noastră va trebui sa înceapă de la nivelul cel mai profund: “Cherry”. Dupa care, ea  se uită in sus la părintele acestui nod și-l adaugă la această cale. În exemplul nostru, acest lucru ar fi “Red” este părinte pentru “Cherry“, putem calcula calea spre “Cherry“, folosind calea spre “Red“. Și acest lucru ne este dat de funcția care am folosit-o: căutînd în mod recursiv părinții, vom obține calea către orice nod din arbore.

// $node este numele nodului a carui cale o dorim
function get_path($node)
    {
    // cauta parintele acestui nod
    $result = mysql_query('SELECT parent FROM tree '.'WHERE title="'.$node.'";');
    $row = mysql_fetch_array($result);
    // salveaza calea in aceasta ordine
    $path = array();
    // continua numai daca acest Snod nu este nodul radacina
     if ($row['parent']!='')
        {
        // ultima parte a caii spre $nod, este numele
        // parintelui lui $node
        $path[] = $row['parent'];
        // ar trebui sa adaugam calea spre parintele acestui nod la cale
        $path = array_merge(get_path($row['parent']), $path);
        }
    // returneaza calea
    return $path;
    }

Această funcție returnează calea spre un nod dat. Returnează calea în array, pentru a arăta aclea putem folosi print_r(get_path(‘Cherry’));

Dacă facem acest lucru pentru “Cherry”, vom vedea:

Array
(
[0] => Food
[1] => Fruit
[2] => Red
)

Dezavantaje

După cum ați văzut, aceasta este o metodă excelentă. Este ușor de  înțeles, și codul de care avem nevoie este simplu. Atunci care sunt dezavantajele modelului acestei structuri de date? În majoritatea limbajelor de programare, este lentă și ineficientă. Aceasta se datorează recursivității. Avem nevoie de o interogare în baza de date pentru fiecare nod din arbore.

Fiecare interogare ia ceva timp, acest lucru face foarte lentă funcția atunci cînd se aplică la arbori foarte mari.

Al doilea motiv pentru care această metodă nu este atît de rapidă, este limbajul de programare pe care probabil îl veți folosi. Spre deosebire de limbajele cum ar fi Lips, cele m ai multe limbaje nu sunt proiectate pentru recursivitate. Pentru fiecare nod, funcția pornește o altă instanță a ei însăși. Deci, pentru un arbore cu patru nivele, veți pune în aplicare patru instanțe ale funcției in același timp. Și cum fiecare funcție ocupă o felie de memorie și are nevoie de ceva timp pentru a porni, recursivitatea este foarte lentă atunci cînd este aplicată pentru arbori mari.

Parcurgerea în preordine modificată a arborelui

Acum, haideți să aruncăm o privire asupra altei metode de stocare a arborilor. Recursivitatea poate fi lentă, așă că n-ar trebui să folosim o funcție recursivă. Am dori de asemenea să micșorăm numărul interogărilor în baza de date. Preferabil ar fi dacă am avea o singură interogare pentru fiecare activitate.

Vom începe prin așezarea aborelui nostru în poziție orinzontală. Pornim de la nodul rădăcină (“Food“) și scriem 1 în stînga lui. Urmăm arborele spre “Fruit” și scriem 2 lîngă el. În acest fel, mergem de-a lungul marginilor arborelui în timp ce scriem cîte un număr în stînga și în dreapta fiecărui nod. Ultimul număr este scris în dreapta nodului “Food“. În această imagine, putem vedea întregul arbore numerotat și cîteva săgeți care arată ordinea numerotării.

Vom numi aceste numere la stînga și la dreapta. (de exemplu valoarea stînga pentru “Food” este 1, valoarea dreapta este 18 ). După cum puteți vedea, aceste cifre indică relația dintre fiecare nod. Deoarece “Red” are numerele 3 și 6, este un descendent a 1-18 “Food“. În același fel, putem spune că toate nodurile cu valorile de stînga mai mari decît 2 și valorile din dreapta mai mici decît 11 sunt descendenți ai nodului 2-11 “Fruit“. Structura arborelui este acum stocată în valorile din stînga și din dreapta. Această metodă de a merge imprejurul arborelui și de a număra nodurile se numește algoritmul “Parcurgerea în preordine modificată a arborelui“.

Înainte de a continua, să vedem cum arată aceste valori în tabelul nostru:

Rețineți că termenii left și right au o semnificație specială în SQL. Prim urmare, vom utiliza “lft” și “rgt” pentru a identifica coloanele. Observați de asemenea că nu prea avem nevoie de coloana părinte. Avem acum valorile  “lft” și “rgt” pentru a stoca structura arborelui.

Extragerea datelor din arbore

Dacă doriți să afișați arborele cu ajutorul unui tabel cu valorile stînga și dreapta, va trebui mai întii mai întii să identificați nodurile pe care vreți să le restabiliți. De exemplu, dacă vreți subarbore “Fruit“, vei avea pentru a selecta numai nodurile cu o valoare de stînga între 2 și 11. În SQL, aceasta ar însemna:

SELECT * FROM tree WHERE lft BETWEEN 2 AND 11;

Această interogare returnează:

Ei bine, iată un arbore întreg într-o singură interogare. Pentru a arăta acest arbore așa cum am procedat cu funcția noastră recursivă, va trebui să adăugam o clauză ordonara după (order by) pentru această interogare. Dacă adăugați și ștergeți rînduri din tabelul dvs, probabil că el nu va fi în ordinea corectă. De aceea, ar trebui să ordonăm rîndurile după valoarea lor din stînga.

SELECT * FROM tree WHERE lft BETWEEN 2 AND 11 ORDER BY lft ASC;

Singura problemă care ne-a mai rămas este identarea.

Pentru a arăta structura arborelui, copiii ar trebui indentați ceva mai mult decît părintele lor. Putem face aceasta, păstrînd o stivă a volorilor din dreapta. De fiecare dată când începeţi cu copiii unui nod, adăugaţi valoarea din dreapta a acelui nod la stivă. Ştiţi că toţi copiii acelui nod au o valoare-dreapta mai mică decât valoarea din dreapta a părintelui, aşa că, dacă o să comparaţi valoarea din dreapta a nodului curent cu ultimul nod din dreapta aflat în stivă, o să puteţi vedea dacă încă mai arătaţi copiii acelui părinte. Când aţi terminat de arătat un nod, îndepărtaţi valoarea sa din partea dreaptă din stivă. Dacă veţi număra elementele din stivă, veţi obţine nivelul nodului curent.

function display_tree($root)
    {
    //restabileste toti descendentii nodului $root
    $result = mysql_query('SELECT lft, rgt FROM tree '.'WHERE title="'.$root.'";');
    $row = mysql_fetch_array($result);
    // incepe cu o stiva goala  $right
    $right = array();
    // restabileste toti descendentii nodului $root
    $result = mysql_query('SELECT title, lft, rgt FROM tree '.
        'WHERE lft BETWEEN '.$row['lft'].' AND '.
        $row['rgt'].' ORDER BY lft ASC;');
    // arata fiecare rand
    while ($row = mysql_fetch_array($result))
        {
        // verifica stiva numai daca exista una
        if (count($right)>0)
            {
            // verifica daca ar trebui sa indepartam un nod din stiva
            while ($right[count($right)-1]<$row['rgt'])
                {
                array_pop($right);
                }
            }
        // arata titlul nodului indentat
        echo str_repeat(' ',count($right)).$row['title']."\n";
        // adauga acest nod la stiva
        $right[] = $row['rgt'];
        }
    }

Dacă veţi folosi acest cod, veţi obţine exact acelaşi arbore pe care l-aţi obţinut cu funcţia recursivă discutată mai sus. Noua noastră funcţie va fi probabil mai rapidă, nu este recursivă şi foloseşte doar două interogări

Calea către un nod

Cu acest nou algoritm, va trebui de asemenea să găsim un nou mod de a obţine calea către un anumit nod. Pentru a obţine această cale, vom avea nevoie de o listă a tuturor strămoşilor acelui nod.

Cu structura noului nostru tabel, nu este foarte greu. Când vă uitaţi, de exemplu, la nodul 4-5 ”Cherry“, o să vedeţi că valorile din stânga ale tuturor strămoşilor sunt mai mici decât 4, în timp ce toate valorile din dreapta sunt mai mari decât 5. Pentru a obţine toţi strămoşii, putem folosi această interogare:

SELECT title FROM tree WHERE lft < 4 AND rgt > 5 ORDER BY lft ASC;

Observaţi că, întocmai ca în investigaţia noastră precedentă, trebuie să folosim clauza ORDONEAZA DUPA pentru a sorta nodurile. Această interogare va returna:

+——-+
| title   |
+——-+
| Food |
| Fruit |
| Red   |
+——-+

Acum nu ne rămâne decât să intrăm pe fiecare rând pentru a găsi calea spre “Cherry“.

Cîţi descendenţi

Dacă îmi daţi valorile din stânga şi din dreapta ale unui nod, vă pot spune căţi descendenţi are, folosind puţină matematică.
Deoarece fiecare descendent incrementează valoarea din dreapta a nodului cu 2, numărul descendenţilor poate fi calculat cu:

$descendants = (right – left – 1) / 2

Cu această formulă simplă, vă pot spune că nodul 2-11 “Fruit” are 4 noduri descendenţi şi că nodul 8-9 “Banana” este doar un copil, nu un părinte.

Automatizarea parcurgerii arborelui

Acum că aţi văzut câteva dintre lucrurile uşoare pe care le puteţi face cu acest tabel, e timpul să învăţăm cum putem automatiza crearea acestui tabel. Cu toate că este un exerciţiu plăcut atunci când e făcut prima dată şi cu un arbore mic, avem cu adevărat nevoie de un scenariu care să facă toată această numărătoare şi înconjur al arborelui pentru noi.

Să scriem un scenariu care transformă o listă adiacentă într-un tabel traversal al arborelui cu preordine modificată.

function rebuild_tree($parent, $left)
    {
    // valoarea din dreapta a acestui nod este valoarea din stanga + 1
    $right = $left+1;
    // obtine toti copiii acestui nod
    $result = mysql_query('SELECT title FROM tree '.'WHERE parent="'.$parent.'";');
    while ($row = mysql_fetch_array($result))
        {
        // executarea recursiva a acestei functii pt fiecare copil al acestui nod
        // $right este valoarea dreapta curenta, care este incrementata de functia rebuild_tree()
        $right = rebuild_tree($row['title'], $right);
        }
    // am obtinut valoarea din stanga, si acum ca am procesat
    // copiii acestui nod stim si valoarea din dreapta
    mysql_query('UPDATE tree SET lft='.$left.', rgt='.$right.' WHERE title="'.$parent.'";');
    // returneaza valoarea din dreapta a acestui nod + 1
    return $right+1;
    }

ceasta este o funcţie recursivă. Ar trebui s-o porniţi cu

rebuild_tree(‘FOOD’,1);

atunci funcţia restabileşte toţi copiii nodului “Food”.
Dacă nu există copii, ea stabileşte valorile din stânga şi din dreapta ale acestui nod. Valoarea din stânga este dată, 1, iar valoarea din dreapta este valoarea din stânga plus 1. Dacă există copii, această funcţie se repetă şi ultima valoare din dreapta este restabilită. Această valoare este folosită atunci ca valoare din dreapta a nodului “Food”.

Recursivitatea face ca această funcţie să fie, prin complexitatea ei, destul de greu de înţeles. Totuşi, ea ajunge la acelaşi rezultat la care am ajuns noi manual la începutul acestui capitol. Ea merge în jurul arborelui, adăugând câte un nod pentru fiecare nod pe care îl vede. După ce aţi pus în aplicare această funcţie, veţi vedea că valorile din stânga şi din dreapta rămân aceleaşi (o verificare rapidă, valoarea din dreapta a nodului rădăcină ar trebui să fie egală cu de două ori numărul nodurilor).

Adăugarea unui nod

Cum adăugăm un nod la arbore? Există două abordări: puteţi păstra coloana părinte în tabelul dvs şi doar să porniţi din nou funcţia rebuild_tree() – o funcţie simplă dar nu aşa de elegantă; sau puteţi reactualiza valorile din stânga şi din dreapta ale tuturor nodurilor în partea dreaptă a fiecărui nod nou.

Prima opţiune este simplă. Folosiţi metoda listei adiacente pentru reactualizare şi algoritmul parcurgerii arborelui cu preordine modificată pentru restabilire. Dacă vreţi să adăugaţi un nou nod, adăugaţi-l la tabel şi setaţi coloana părinte. Apoi, nu vă rămâne decât să reporniţi funcţia rebuild_tree(). Această opţiune este uşoară, dar nu foarte eficientă cu arbori mari.

Cea de-a doua modalitate de a adăuga şi şterge noduri constă în reactualizarea valorilor din stânga şi din dreapta ale tuturor nodurilor în partea dreaptă a noului nod. Să ne uităm la un exemplu. Vrem să adăugăm un nou tip de fruct, o “Strawberry“, ca ultim nod şi copil al “Red“. Mai întâi, va trebui să facem puţin loc. Valoarea – dreapta de la “Red” ar trebui schimbată din 6 în 8, iar nodul 7-10 “Yellow” ar trebui schimbat în 9-12 etc. Reactualizarea nodului “Red” înseamnă că va trebui să adăugăm 2 la toate valorile din stanga şi din dreapta mai mari decât 5.
Vom folosi interogarea:

UPDATE tree SET rgt=rgt+2 WHERE rgt>5;
UPDATE tree SET lft=lft+2 WHERE lft>5;

Acum putem adăuga un nou nod “Strawberry” pentru a umple noul spaţiu. Acest nod are valoarea – stânga 6 şi valoarea – dreapta 7.

INSERT INTO tree SET lft=6, rgt=7, title=’Strawberry’;

Dacă pornim funcţia noastră display_tree();, vom vedea că noul nostru nod “Strawberry” a fost introdus cu succes în arbore:

Food
  Fruit
    Red
      Cherry
      Strawberry
    Yellow
      Banana
  Meat
    Beef
    Pork

Dezavantaje

În primul rând, algoritmul parcurgerii arborelui cu preordine modificată pare greu de înţeles. Este cu siguranţă mai greu decât metoda listei adiacente. Totuşi, odată ce v-aţi obişnuit cu proprietăţile valorilor din stânga şi din dreapta, este evident că puteţi face cu această tehnică aproape tot ce făceaţi cu metoda listei adiacente şi că algoritmul traversal al arborelui cu preordine modificată este mult mai rapid. Reactualizarea arborelui impune mai multe investigaţii, ceea ce durează mai mult, dar restabilirea nodurilor se realizează cu o singură interogare.

Concluzie

Acum v-aţi familiarizat cu ambele metode de stocare a arborilor într-o bază de date. Deşi prefer oarecum parcurgerea arborelui cu preordine modificată, în cazul dvs. metoda listei adiacente ar putea fi mai bună. Vă las să judecaţi singuri.

Lecturi suplimentare

Mai multe despre Arbori în SQL de specialistul în baze de date Joe Celko:
http://searchdatabase.techtarget.com/tip/1,289483,sid13_gci537290,00.html

Alte două metode pentru a opera cu datele ierarhice:
http://www.evolt.org/article/Four_ways_to_work_with_hierarchical_data/17/4047/index.html

Xindice, baza de date XLM nativă:
http://xml.apache.org/xindice/

O explicaţie a recursivităţii:
http://www.strath.ac.uk/IT/Docs/Ccourse/subsection3_9_5.html

Sursa:aici

Hai sa incepem de la inceput. Stii elementele de baza HTML/CSS ? Atunci incepe de la ele.

Eu am vazut o pagina WEB am salvat pagina si am zis: Da eu ce nu pot sa fac asa ceva ?Daca altii au facut inseamna ca este posibil si pentru mine. De aici rezulta ca in primul rind este DORINTA.

In primul rind propuneti un proiect de exemplu un CMS. Desigur o sa zici ca este plin internetul de ele si sunt open-source, dar cite din ele sunt facut de tine. Pentru a face un CMS de la zero ai nevoie de cunostinte tot ce tine de web.  Vreau sa spun ca numai prin munca si efort vei avea rezultate. Nu are rost sa citesti carti care sunt intinse pe sute de pagini. Eu am invat in felul urmator. Am vazut ceva am zis: Cum este facut ? hai sa incer sa fac si eu. Si asa a inceput cunostintele.

Ar fi bine totusi sa inveti citeva CMS-uri cum ar fi Joomla, WordPress, Drupal. Iti pui intrebarea DE CE? Pentru ca sunt clienti care au auzit de aceste CMS-uri si doresc sa fie facut pe ele …

Dupa ce ati capatat cunostinte pentru rezolvarea unor probleme standart, nu stati locului cautati probleme mai greu de rezolvat.  Sa fii la curent cu tot ce este nou in domeniul WEB. Foloseste un feed reader pentru  a stii tot ce se misca in domeniul tau.

SUCCES!!!

P.S. Nu toate mustele fac miere

Asa ca o sa incep fac o analiza la o serie de Editore.

1.Dreamweaver CS5

Ce-mi place:

1. “live view” – poti vedea in timp real modificarile facute de tine

2.BrowserLab – poti  testa site-ul tau in diferite rezolutii si browsere

3.Inspectia codului CSS.

Ce nu-mi place:

1. Nu pot sa pun teme pentru sintaxa. De exemplu vreau pentru php sau CSS. Trebuie pentru fiecare imparte eu sa fac si nu le pot exporta ca si altii sa le foloseaca.

2. Nu are expand/collapse la div-uri. Cum este la Eclipse ….

3.Nu are autocomplete la functiile de tine.

4.Cind lucrezi in regim Split se desparte codul / design pe verticala.

Pentru monitoarele wide este bine, dar pentru standarte de exemplu ca la mine ma deranjeaza, macar sa fie undeva din optiune de schimbat. (Eu nu am gasesc. Poate gasiti voi. ). Versiunele vechi era pe orizontal.

Si nu in ultimul rind este cu bani

2Eclipse PHP

Ce-mi place:
1.Este gratuit

2.Are expand/collapse la div-uri

3.Autocomplete la functiile tale, chiar si titind apasat tasta CTRL + Click  se deschide fisierul unde este functia. (un avataj foarte mare)

Ce nu-mi place :

1.Nu are implicit autocomplete la CodeIgniter,  se poate de pus, dar oricum nu lucreaza suta la suta.

3. Php Designer

Ce-mi place:

1.Are implicit autocomplete la CodeIgniter

2.Theme pentru sintaxa, Import / Export

Ce nu-mi place:

1.Nu are exapand la div-uri

2.Nu este gratuit

Si mai sunt o multime de PHP editore

Apatana Studio, Zend Studio, Net Beans. NotePad++. Toate aceasta sunt gratuite.

Eu ma folosesc de phpDesigner(pentru CodeIgniter) si Apta Studio pentru ca are aceleasi plusuri ca la Eclipse.

2. Ce este CodeIgniter?

3. Ce este MVC ?

4. De ce CodeIgniter?

Ce este un Framework PHP?

Mai intii de toate, ce este PHP? PHP (acronim recursiv pentru PHP: Hypertext Preprocessor) este un limbaj de scripting de uz general, cu cod-sursă deschis (open source), utilizat pe scară largă, și care este potrivit în special pentru dezvoltarea aplicațiilor web și poate fi integrat în HTML.

Un Framework PHP este o colectie de metode si clase pre-scrise, care sunt deja securizate, optimizate si bine documentate si sunt gata de utilizare.

Ce este CodeIgniter?

Este un Framework PHP care lucreza pe PHP4 si PHP5.  El ofera un set bogat de librarii ceea ce ofera posibilitatea de a crea cele mai frecvente sarcini intilnite. Se poate de creat foarte repede aplicatii mici si mijlocii. El foloseste tiparul MVC.

Ce este MVC?

MVC, sau Model-View-Controller este un sablon arhitectural folosit in industria de software development(inclusiv si web development). Aceasta modalitate de lucru reuseste cu succes izolarea partii logice de interfata proiectului, rezultind in aplicatii extrem de usor de modificat. In MVC, modelul reprezinta informatia (datele) de care are nevoie aplicatia, viewerul corespunde cu elemente de interfata iar controller-ul reprezinta sistemul comunicativ si decizional ce proceseaza datele informationale, facind legatura intre model si view.

Modelul reprezinta partea de hard-programming, partea logica a aplicatiei. El are in responsabilitate actiunile si operatiile asupra datelor, autentificarea utilizatorilor, integrarea diverselor clase ce permit procesarea informatiilor din diverse baze de date.

View-ul se ocupa de afisarea datelor, practic aceasta parte a programului va avea grija de cum vede end-userul informatia procesata de controller. O data ce functiile sunt executate de model, viewului ii sunt oferite rezultatele, iar acesta le va trimite catre browser. In general viewul este o mini-aplicatie ce ajuta la randarea unor informatii, avand la baza diverse template-uri.

Controller-ul reprezinta creierul aplicatiei. Aceasta face legatura intre model si view, intre actiunile userului si partea decizionala a aplicatiei. In functie de nevoile utilizatorului, controllerul apeleaza diverse functii definite special pentru sectiunea de site in care se afla userul. Functia se va folosi de model pentru a prelucra (extrage, actualiza) datele, dupa care informatiile noi vor fi trimise catre view, ce le va afisa apoi prin template-uri.

De ce CodeIgniter?

Mai intii de toate are structura MVC.

Este foarte usor de invatat, are o documentatie foarte bogata (ceea ce face mai usor de invat). Are o comunitate puternica si activa de useri.

Foarte putin ocupa fata de celelalte framework-uri 2.1mb (asta tot cu documentatie). Faceti comparatie cu celelalte:

1. Zend Framework 1.10.2 Full – 24 MB

2. symfony 1.4.3 – 5.1 MB

3. CakePHP 1.2.6 – 4.5 MB

CodeIgniter consuma foarte putine resurse in comparatie cu alte framework-uri. Librariile aditionale, necesare anumitor sarcini, sunt incarcate in mod dinamic, doar la cerere.

Cu siguranta cel mai rapid framework PHP. Un motiv important pentru viteza foarte buna il reprezinta consumul mic de resurse.

Este foarte usor de instalat si de configurat, dar asta poate in alt articol .

Surse: CodeIgniter.com

http://www.worldit.info

http://www.thetechlabs.com

Ne punem intrebarea ce este UML?

UML este un limbaj vizual de modelare, el nu este inca un limbaj vizual de programare, deoarece nu dispune de intreg sprijinul semantic si vizual pentru a inlocui limbajele de programare. Limbajul este destinat vizualizarii, specificarii, construirii si documentarii sistemelor de aplicatii, dar are limitari in ceea ce priveste generarea codului. UML reuneste cele mai bune tehnici si practici din domeniul ingineriei programarii, care si-au dovedit eficienta in construirea sistemelor complexe.

Pentru elaborarea unui sistem este un curs intreg. Acest curs eu il am la UTM si se numeste Ingineria programarii

Mai mult despre acest curs puteti sa cititi aici Ingineria programarii

Proiectul consta din elaborarea a 7 lucrari de laborator. De aceea voi incerca si eu sa fac proietul in baza acestor 7 lucrari de laborator(doar la nivel de documentare).  Dar mai tirziu voi face si la nivel de programare.

Diagrama cazurilor de utilizare (Use Case Diagram).

In doua cuvinte o sa spun despre Use Case. Elementele componente ale unei diagrame use case sunt:

-use case-uri;

-actori;

-relatiile care stabilesc intre use case-uri, intre actori si intre use case-uri si actori

Mai multe detalii gasiti L1_diagrame_use_case

Use Case pentru Utilizator

Use case pentru administrator

P.S. Pe parcurs vor aparea modificari. Nu este diagrama finala.