bogdan_constantinescu

idei binare

Wireless şi Slax

  • Author: Bogdan CONSTANTINESCU
  • Filed under: Linux
Friday
Sep 26,2008
Slax

Slax - your pocket operating system

De câteva zile am început să fiu foarte entuziasmat de Slax, o distribuţie live bazată pe Slackware. Din cauza unei tentative eşuate cu BackTrack şi convins de Bytz@ am încercat să descopăr care e treaba cu Slax.

Am văzut că are module, ştie destul de multe pentru o distribuţie live, aşa că am început să mai fac câte ceva. O parte din modulele la care am lucrat într-un fel sau altul le găsiţi în pagina de Slax modules. Ca utilizator convins de laptop (şi n-o să încep discuţia pe această temă pentru ca e irelevantă momentan) am vrut de la Slax ceea ce multe distribuţii nu mi-au oferit sau m-au pus să fac căutări zile întregi pentru a găsi o soluţie: wireless.

Deşi Slax vine cu KWifiManager, o aplicatie pentru uşurarea accesului la o reţea wireless, mie mi se pare total nefolositoare şi stupidă. Haideţi să vă spun şi de ce...KWifiManager e echivalent cu `no WPA`, adică tot ce ştie să facă e ceea ce se poate face relativ uşor cu `ifconfig`. Read the rest of this entry »

  • 5 Comments

    • Linkuri cu jQuery

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Friday
    Sep 19,2008

    Aseară a început o mică discuţie pe Twitter referitor la o problemă de validare în cazul linkurilor care conţin `target="_blank"`. Dicuţia a început de la întrebarea lui Radu Ceucă şi au fost sugerate câteva soluţii.

    Prima dintre ele îi aparţine lui @extraordinaire care a propus clasicul `window.open`. Din păcate problema e că arată urâţel un onclick care conţine un `window.open` şi presupun că va fi tratat ca pop-up de majoritatea adblock-urilor. O altă soluţie primită am înţeles că a fost clasicul `rel="external"` tratat cu Javascript.

    Eu vreau să vă arat cea mai simplă şi curată soluţie folosind jQuery. Respectând zicala jQuery, `let's write less and do more` :) 

    $(document).ready(
   function ()
   {
       $("a[@rel*=external]").attr( { target: "_blank" });
   }
);

    Ne mai rămâne doar să includem libraria jQuery şi să punem acest script între <head> şi </head> şi totul e gata. Orice link care va avea `rel="external"` va fi deschis într-o pagină nouă. Simplu şi curat!

    Cu un pas mai aproape de `Javascript Rockstar` :D

  • 2 Comments

    • jQuery tooltip – dezvoltare

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Tuesday
    Sep 2,2008

    În ultimul post am realizat un mic tooltip cu ajutorul jQuery, caruia îi vom aduce nişte modificări în tutorialul de azi.

    În unul din comentarii Brayn sugera ca tooltip-ul să funcţioneze în felul următor:

    • textul din alt să fie înlocuit cu un id
    • tooltip-ul va afişa în final textul dinamic (în cazul nostru îl vom scoate dintr-o bază de date MySQL)

    În consecinţă am aflat că avem nevoie de câteva lucruri...

    • o bază de date MySQL
    • un fişier care interacţionează cu serverul MySQL
    • o funcţie Javascript care face cererea către acest fişier

    1. Baza de date

    Bun, haideţi să facem o bază de date nouă şi s-o populăm cu nişte informaţii (textele pe care le vom afişa mai apoi în tooltip).

     CREATE DATABASE `tooltip` ;

    Acum vom face şi o tabelă pe care eu am numit-o definition. Pe scurt este vorba de 2 câmpuri: uid - "unique id" (în care se va afla id-ul pe care noi îl vom citi din proprietatea alt a imaginii) şi text - "informaţia ce se va afişa în tooltip".

     CREATE TABLE `tooltip`.`definition` (
`uid` INT NOT NULL AUTO_INCREMENT ,
`text` TEXT NOT NULL ,
PRIMARY KEY ( `uid` )
) ENGINE = MYISAM

    Dacă aveţi vreo nelamurire despre SQL puteţi consulta nişte manuale online. OK, acum mai trebuie să populăm baza de date proaspăt creată...

    INSERT INTO `definition` (`uid`, `text`) VALUES
(1, 'First tooltip information coming from a mysql database.'),
(2, 'We also have a second database entry
for showing you the text you were looking for!'),
(3, 'And some more information. You like it, huh? <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> '),
(4, 'Showing possible thanks to jQuery ajax httprequest <img src='http://www.bogdanconstantinescu.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ');

    Acestea fiind făcute nu ne rămâne decât să trecem la urmatorul pas, realizarea fişierului care va face legătura cu serverul MySQL.

    2. Scriptul server-side

    Această etapă o puteţi face utilizând orice limbaj de programare server-side care vă place. Personal o să aleg php pentru că pe el îl stăpânesc cel mai bine. Pe scurt ceea ce trebuie să realizăm va arăta cam aşa:

    • aşteptăm sa fie transmis un parametru la chemarea fişierului
    • ne conectăm la serverul MySQL
    • facem interogarea şi afişăm rezultatul.

    Treabă simplă. În consecinţă ajungem la un rezultat asemănător cu cel de mai jos.

    /* ne conectam la serverul mysql si
selectam baza de date pe care vom lucra */
$dbh = mysql_connect("localhost", "user", "parola");
mysql_select_db("tooltip");
 
/* verificam sa fie curat inputul si ii
scoatem spatiile goale din jurul sau */
$request = strip_tags(trim($_POST['uid']));
 
/* facem select-ul in functie de ID */
$qry = mysql_query("
		SELECT
			text
		FROM
			`definition`
		WHERE
			uid='". $request ."'");
 
/* afisam textul pentru tooltip aferent ID-ului cerut;
daca ID-ul cerut nu exista ii spunem acest lucru*/
if(mysql_num_rows($qry) != 0)
	echo mysql_result($qry, 0);
else
	echo "Sorry, that does not exist!";
 
/* si in final inchidem conexiunea la server */
mysql_close($dbh);

    Fişierul în cauză eu l-am denumit tooltip.php (ne va fi de folos în ultimul pas) :)

    3. Let's do some Javascript magic

    Bun, deci avem baza de date, avem fişierul care face output în funcţie de parametrul care îi este trimis (în cazul nostru metoda este POST) şi ne rămâne de făcut doar o funcţie nouă în script şi nişte mici modificări.

    function request(id)
{
	/* realizam pachetul de optiuni pentru functie */
	var data = {
			type: "POST",
			url: "tooltip.php",
			data: "uid="+id,
			async: false
		}
 
	/* chemam functia si ii preluam raspunsul */
	var response = $.ajax(data).responseText;
 
	/* si il intoarcem */
	return response;
}

    Ne mai rămâne ca în funcţia din eventul mouseover să schimbăm valoarea variabilei text cu urmatoarea secvenţă.

    var text = request(parseInt(this.alt));

    În principu dacă am ajuns aici totul ar trebui să fie în regulă. :) Pentru a vă demonstra ceea ce tocmai am realizat puteţi vedea un exemplu sau puteţi downloada scriptul Javascript si scriptul php.

    Pentru orice nelămurire, sugestie sau "reclamaţie" foloseşte formularul de mai jos!

  • 1 Comment

    • jQuery tooltip

    • Author: Bogdan CONSTANTINESCU
    • Filed under: Javascript
    Monday
    Sep 1,2008

    În acest post o să vă arăt flexibilitatea lui jQuery care vine în ajutorul developerului pentru a simplifica anumite etape ale procesului de dezvoltare.

    Despre jQuery în câteva cuvinte

    • jQuery este o librarie de Javascript redusă ca mărime ( 15kb )
    • una din primele librării de Javascript crossbrowser (IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+)
    • compatibilă cu toate versiunile de CSS

    Ce fel de tooltip ne dorim?

    Mi-am propus să realizez un tooltip simplu şi eficient pentru lamuriri adiţionale în completarea unui formular. În principiu am 2 soluţii de a realiza apariţia tooltip-ului:

    1. tooltip-ul apare la click (în situaţia în care userul simte nevoia unor explicaţii suplimentare dă un click pe icon-ul de help)
    2. tooltip-ul apare la mouseover

    Dintre cele 2 opţiuni eu am ales-o pe cea de-a doua pentru ca îmi place să nu pun userul să facă acţiuni în plus pentru a vedea nişte informaţii pe care le doreşte (doar de-asta trăim în vremurile în care cuvântul de ordine în webdevelopment este uzabilitate). Ne dorim ca user-ului să-i fie cât mai uşor să utilizeze toate funcţiile site-ului.

    Realizarea tooltipului cu ajutorul jQuery

    În primul rând trebuie să ne punem scriptul să ruleze după încărcarea completă a paginii.

            $(document).ready(function ()
	{ });

    Pentru realizarea apariţiei tooltip-ului la mouseover vom folosi proprietatea obiectului object.mouseover(); iar selecţia o vom face după un pattern simplu: "selectează-mi toate imaginile care au clasa 'tooltip' ". În consecinţă codul nostru va arăta în felul următor.

     $("img.tooltip").mouseover(
/* $("img.tooltip") este selectorul nostru care face
selectia imaginilor care au clasa 'tooltip' */
function (event)
{
});

    În pasul următor vom lua de pe imaginea noastră atributul alt a cărui valoare o vom afişa cu ajutorul tooltip-ului. Pentru asta va trebui să facem un <div> în care să afişăm informaţia explicativă. Vom avea nevoie şi de cunoştinţe de CSS pentru a putea stiliza obiectul şi pentru a-l putea duce în poziţia dorită de afişare. În cazul meu, CSS-ul este aşa:

    #tooltip {
	position: absolute;
	font-family: Verdana, sans-serif;
	font-size: 10px;
	max-width: 150px;
	border: 1px solid #91C2DC;
	z-index: 10000;
	color: #333333;
	background:
 url('information.png') center left no-repeat #FFFFFF;
	margin: 10px 5px 5px 10px;
	padding: 20px 3px 3px 3px;
}

    Să vedem cum arată Javascriptul pentru cele descrise mai sus:

    $("img.tooltip").mouseover(
function (event)
{
   var text = this.alt;
/* tinem continutul proprietatii
alt in variabila 'text' */
   x = event.pageX+10;
/* sa mutam tooltipul putin mai la dreapta
 ca sa nu fie acoperit de cursor */
   y = event.pageY+10;
/* si putin mai jos... */
   $("body").append("
<div id='tooltip'>"+text+"</div>
 
");
/* mai intai facem un div [asta reprezentand
alternativa jQuery la DOM] */
   $("#tooltip").css("left", x).css("top", y);
/* si ne mai ramane doar sa-l mutam langa cursor */
}
);

    OK, am făcut tooltip-ul, dar va trebui să-l distrugem la acţiunea object.mouseout(); şi cu asta suntem aproape gata.

    $("img.tooltip").mouseout(
function (event)
{
  $("#tooltip").remove();
/* cand se intampla mouseout distrugem div-ul */
}
);

    În funcţie de preferinţe mai rămâne doar să aranjăm totul într-o funcţie şi s-o folosim. Pentru asta eu am făcut un exemplu si de aici puteţi downloada scriptul complet.

    Ceea ce tocmai am realizat e o variantă simplă şi nu se vrea în nici un caz o concurenţă la scripturile de tooltip existente, ci o aplicaţie a unor simple cunoştinţe de jQuery.

    Orice părere, sugestie sau "reclamaţie" e bine-venită (folosiţi formularul din josul paginii)!

  • 10 Comments
    • Pages (3): « 1 2 3

    Categories

    Archives

    Links

    TwittME ( learn more: en / ro )

    • Accept invitatii la bere, cafea, cola etc :)) 8hours ago from Tweetie
    • @andistancu Transmission rulez! :D din pacate versiunea de ubuntu nu arata nici pe departe atat de bestial ca aia de os x :)March 12, 2010 13:29 from Echofon in reply to andistancu
    • Zi de excel :)) N-are cineva sa-mi dea altceva mai interesant de facut, pweeety pweaseeeeeee about 2days ago from Echofon
    • Genial...am ramas blocat :) http://bit.ly/b7lGQDMarch 11, 2010 18:39 from Tweetie
    • @AlexBuga daca era de plastic acum aveai amprenta dentara lasata custom pe macbook :))daca ma gandesc bine asta e mai tare ca kensington :))March 11, 2010 17:22 from Tweetie in reply to AlexBuga
    • See more...

    Meta


    Recent Comments

    Copyright © 2008 - bogdan_constantinescu - is proudly powered by WordPress
    Smashing Theme is created by: Design Disease brought to you by Smashingmagazine.com