• Categorie - Internet 17.02.2010 2 comentarii

    Vimeo.com a lansat astăzi în versiune beta playerul pentru HTML5, ca alternativă pentru Flash.
    Se au în vedere:
    - încărcare instant;
    - posibilitatea de a sări oriunde în videoclip fără a aştepta ca acesta să se bufereze;
    - funcţionare “smooth”, de fineţe, fără frame-uri sărite.

    Momentan funcţionează doar pe ultimele versiuni de browsere Safari, Chrome, sau IE cu Chrome Frame instalat.

    Pentru a face un test, există un link dedesuptul videoclipului, “Switch to HTML5 player” care este vizibil doar în browsere cu suport HTML5. Am făcut un test în Chrome ultima versiune, funcţionează, consumă resurse cu aprox 15% mai puţin decât în mod FLASH.

    Codul de embed se găseşte momentan doar în flash, tot ca până acum.
     

    Try our new HTML5 player! Staff Blog

    TEST HTML5 PLAYER

     

    Etichete: , , , ,

  • Categorie - Tutoriale 11.01.2010 Nici un comentariu

    Cu ajutorul proprietăţii Border Radius în CSS3 se pot crea casete cu colţuri rotunjite fără a avea nevoie de nici o imagine, totul se face din CSS.
    Proprietatea Border Radius funcţioneaza pentru versiunile superioare de browsere: Firefox 3.0, Safari 3.1, si Chrome.
    Internet Explorer este exclus, ar fi trebuit implementat si in Opera 10 dar am constatat ca nu merge deocamdata.
    Nici in Chrome nu merg decât primele 2 exemple.

    Începem prin a crea HTML-ul pentru un BOX:

    <div id="box"></div>

    Si css-ul aferent:

    #box {
    width:400px;
    height:100px;
    background-color:#91C8FF;
    }

    De unde rezultă o casetă normală cu colţuri drepte:

     

    Un Border Radius se poate concepe în mai multe feluri adăugând în CSS o singură linie, în funcţie de ce dorim să obţinem. De fapt doua linii, una pentru Firefox si alta care este de fapt acelasi lucru pentru Safari si Chrome. E necesar deoarece CSS3 nu este inca un standard.
    Mai jos urmează 7 exemple care sper să vă convingă de utilitatea proprietăţii Border Radius.

    #box { -moz-border-radius: 20px; } /*pt Firefox*/
    #box { -webkit-border-radius: 20px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius:20px 40px; } /*pt Firefox*/
    #box { -webkit-border-radius:20px 40px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius:20px 40px 5px; } /*pt Firefox*/
    #box { -webkit-border-radius:20px 40px 5px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius:10px 20px 30px 40px; } /*pt Firefox*/
    #box { -webkit-border-radius:10px 20px 30px 40px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius-topright: 30px; } /*pt Firefox*/
    #box { -webkit-border-radius-topright: 30px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius-topleft: 30px; } /*pt Firefox*/
    #box { -webkit-border-radius-topleft: 30px; } /*pt Safari si Chrome*/

     

    #box { -moz-border-radius: 30px / 15px; } /*pt Firefox*/
    #box { -webkit-border-radius: 30px / 15px; } /*pt Safari si Chrome*/

     

    La ce se poate folosi o asemenea casetă?
    La multe, mai jos un exemplu.
    Si css-ul complet utilizat pentru a printa ce se vede.

    #box {
    width:400px;
    height:100px;
    background-color:#91C8FF;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    line-height:1.2em;
    padding:10px;
    border:3px solid #0000FF;
    }
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis lobortis tempor. Nam porta quam at dui. Aenean tincidunt ultrices ultrices. Aliquam magna enim, rhoncus quis pretium sit amet, consectetur sit amet felis. Pellentesque congue tortor nec eros eleifend ac auctor consectetur adipiscing elit odio blandit.

     
    Tutorial este tradus şi adaptat după: bloggingcss.com

    Am testat functionalitatea Border Radius in Firefox 3.5.6, Chrome last vers, Netscape.

    În browserele la care nu funcţionează, la toate exemplele de mai sus de casete cu colţuri rotunjite, colţurile se văd drepte la 90 grade.

    Eventual vă rog lăsaţi un comentariu pentru alte tipuri de browsere, sisteme de operare, pentru e se cunoaşte cu exactitate problema. Teoretic ar trebui să meargă şi pe Safari/MAC dar n-am MAC, n-am cum sa ştiu.

    Etichete: , ,

  • Categorie - Webdesign 07.12.2009 10 comentarii

    Iarna bate la uşă. Dacă doriţi ca blogul dumneavoastră să arate în ton cu anotimpul, puteţi instala acest script, este simplu chiar şi pentru un începator şi efectul va fi acela care îl ve-ţi vedea accesând linkul DEMO de mai jos.

    1. Una din imaginile de mai jos care reprezintă fulgul de zăpadă, la alegere se salvează cu right click “Save Image As” şi se uploadează în public_html. Nu redenumiţi poza!

    tip 1 tip 2 tip 3 tip 4 tip 5

     
    2. Scriptul practic se află într-o filă de notepad în zip-ul care se descarcă de la link-ul de mai jos, se copiază Select all, copy/paste deasupra tag-ului </body> în fila footer.php din folderul temei (la wordpress).

    Configurare:
    Din script se poate seta numărul de fulgi care doriţi să apară pe pagină.
    Mai exact din aceasta linie: (var SNOW_no = 4;) – eu am setat 4 fulgi. Un număr mai mare de fulgi accentuează efectul artistic dar poate induce un CPU usage de 50%(!), chiar mai mult.

    Scriptul l-am testat şi funcţionează în Firefox, IE, Netscape, Chrome.

    DEMO – Zăpadă pe blog!

    Descarcă script

    Etichete: , , , ,

  • Categorie - Tutoriale 21.11.2009 8 comentarii

    Cum afişez tweets, twitter pe blog

     
    Pentru a afişa pe blog ultimele tweet-uri ale contului tău de twitter voi prezenta mai jos procedura de instalare/configurare a script-ului necesar, este un script, practic nu este plugin de wordpress cu toate că se numeşte
    Tweetable – A jQuery plugin.
    Nu vă sfătuiesc să citiţi sfaturile de instalare de la pagina autorului deoarece tot scriptul a fost conceput şi explicat pentru a fi introdus în pagină separat pe un document .html. WordPress-ul nici măcar nu îl vede ca plugin. Se instalează manual urmând paşii de mai jos.

    1. Se descarcă zip-ul care conţine întreg scriptul, se dezarhivează.
    2. Fila index.php se deschide cu notepad şi se modifică ({username: ‘andrianz’, cu user-namele dvs de twitter. Se mai poate modifica numărul de tweet-uri afişate, limit:10 Se salvează şi se închide.
    3. ÎNTREG FOLDERUL tweetable cu toate filele incluse se urcă pe server în root sau public_html.
    4. Pentru a afişa pe blog/site se copiază linia de mai jos în locul unde doriţi să apară, header, footer, sidebar, post, etc:

    <iframe src='http://www.blogultau.ro/tweetable/' width=510 height=230 scrolling='no' frameborder='0'></iframe>

    În linia de cod de mai sus, deasemenea se configurează:
    - www.blogultau.ro cu adresa blogului tău (posibil subfolder);
    - width=510 , lăţime casetă în pixeli;
    - height=230 , înălţime casetă în pixeli;
    - scrolling=’no’ sau scrolling=’yes’ , scrollbar vertical casetă, da sau nu.

    Scripul este full custom, utilizatorii mai pretenţioşi cu oarece cunoştinţe de HTML, CSS, mai pot schimba câte ceva în fila style.css din folder tweetable:
    - font, culoare, culoare linkuri, distanţa dintre tweet-uri, etc.
    - dacă se şterge linia background-color: #FFFFFF; din body, fereastra devine transparentă.

    La unele site-uri am vazut acest script implementat sus în header, o bară de 1 cm înălţime, lată cât ecranul care arată doar ultimul tweet, totul pe o singură linie text, cu sau fără poză/icon. Se poate configura orice combinaţie de stil.

    Etichete: , , , , ,

  • Categorie - Tutoriale 31.10.2009 10 comentarii

    Motivele pentru care la un moment dat cineva este nevoit să schimbe adresă, domeniu blog/site pot fi multiple (we know things changes) cum spune şi google, iar în această situaţie se impune redirectarea traficului de la vechea spre noua adresă, absolut necesar măcar pentru o perioadă de timp până cei care vă vizitau blogul vor lua notă de schimbare, modifică linkuri, Favorites, Bookmarks, etc.

    În cazul blogurilor cel mai adesea am văzut situaţia în care bloggerul care se mută scrie un ultim post şi-l lasă deasupra.
     

    Blogul meu s-a mutat la http:// , click aici.

     
    Cu puţin rafinament, Redirectarea se poate face automat, extrem de simplu:
    Cu siguranţă a-ţi accesat măcar o dată un site “expirat” unde a-ţi fost întâmpinat cu mesajul:
     

    Site-ul cutare s-a mutat la http://
    ve-ţi fi redirectat automat în 5 secunde.

     
    Redirectul în 5 secunde (sau câte doriţi) se face adăugând în HEAD la vechiul blog/site o singură linie de cod:

    <meta content='5;url=http://adresa-noua.ro/' http-equiv='refresh'/>

    La orice site în HTML (sau PHP) se copiază linia manual cu un editor HTML în fila index, în HEAD, adică pe un rând gol deasupra </head>

    La WordPress se editează fila header.php din Wp-admin/Appearance/Editor
    Se copiază linia manual, copy/paste pe un rând gol deasupra </head>
    Dupa care se apasă Update file
    Sau se editează fila în pc după care se urcă pe server modificată, (overwrite).

    La Blogger.com (blogspot) modificarea se face în panoul de control Aspect/Editaţi HTML/Editaţi Şablon
    Se copiază linia manual, copy/paste pe un rând gol deasupra </head>
    După care se apasă SALVAŢI ŞABLON

    Etichete: , , ,

  • Categorie - Tutoriale 26.10.2009 14 comentarii

    Un alt tutorial “how to”, să învăţăm să facem lucruri simple fără să apelăm la pluginuri consumatoare de resurse.

    Implementarea unui script de pop-up window pe blogul tău se face în trei paşi deosebit de simpli.

    Pasul 1:

    Codul de mai jos este un cod javascript care se copiază cu copy/paste în head-ul siteului între tagurile <head> şi </head> indiferent că avem un site simplu în HTML sau platforma WordPress.
    În cazul WordPress codul trebuie copiat în fila header.php din folderul temei, prin editare în wp-admin/Appearance/Editor, sau editarea separat cu notepad şi upload (owerwritte) pe server pentru cei mai experientaţi care folosesc curent un program FTP Uploader.
    Deci copy/paste pe un rând gol imediat deasupra </head>


    <script language='javascript'>
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0, scrollbars=0, location=0, statusbar=0, menubar=0, resizable=0, width=430, height=530, left=300, top=50');");
    }

    </script>

    Se pot edita/modifica următorii parametrii:
    width=430 (lăţime fereastră pop-up)
    height=530 (înălţime fereastra pop-up)
    left=300 (poziţia faţă de margine stânga ecran în pixeli unde să apară)
    top=50 (poziţia faţă de margine sus ecran în pixeli unde să apară)

    Pasul 2:

    Pop-up window-ul respectiv trebuie să se deschida atunci când dau click pe un link text sau poză cu link. Indiferent de unde, din post, din sidebar, etc.
    În loc de un link normal link-ul text (în caz de text) trebuie scris în felul următor:
    <a href="javascript:popUp('http://www.site.ro/folder/document.html')">Click aici</a>

    Se configurează:
    nume document.html (poate fi şi .php), DOCUMENTUL DIN CARE ESTE CONSTITUIT POP-UP-UL propriu-zis
    folder, numele folderului unde se află documentul
    Dacă am nevoie de o simplă poză care să se deschidă în pop-up, nu mai am nevoie de nici un document, în loc de document.html scriu direct numepoza.jpg , dar trebuie corelată dimensiunea pop-up-ului (la pasul 1) cu dimensiunea în pixeli a pozei. (să nu fie fereastra mai mică decât poza).

    Pasul 3:

    Crearea documentul .html sau .php din care este constituit pop-up-ul.
    Dau un exemplu simplu mai jos, se poate edita cu notepad şi se salvează cu numele document.html sau document.php

    În cazul salvării acestuia ca document.html documentul nu se mai poate deschide ulterior cu notepad pentru o eventuală modificare ulterioară, doar cu un program editor html. Odată creat documentul, se urcă pe server la locul dorit.

    Mai jos, exemplu de document pentru pop-up, se schimbă conţinutul în funcţie de necesităţi: (normal asta necesită abilităţi de webdeveloper dar dacă aveti nevoie de ceva simplu nu cred că nu vă daţi seama ce trebuie schimbat)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Titlu Pop-Up Window care apare sus in Title bar</title>
    </head>
    <body>
    <h2>Acesta este un Pop-Up Window</h2>
    <br><br>
    <h3>Text</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <br>Pellentesque facilisis iaculis molestie.
    <br>Nullam non justo quis leo accumsan rutrum a non nisl.
    <br><br>
    <h3>Imagine</h3>
    <a href="http://www.blogwidget.ro/" target="_blank" title="Un widget cool pentru blogul tau!"><img src="http://www.blogwidget.ro/wp-banners/bwr125_new.png" border="0" alt="Un widget cool pentru blogul tau!"></a>
    </body>
    </html>

    Test:

    Click aici, testează Pop-Up Window

    Etichete: , , , ,

  • Categorie - Tutoriale 24.10.2009 6 comentarii

    Cum aranjez bannerele pe două coloane în sidebar

    Cum poziţionez imagini în post, orizontal, vertical

     
    Table înseamnă tabel. Cunoaşterea modului în care se scrie un table în cod HTML direct în post la WordPress este deosebit de utilă atunci când doresc să poziţionez nişte elemente în post cum doresc, să am controlul total asupra lor.

    O altă situaţie des întâlnită este atunci când doresc să aşez bannerele din sidebar pe două coloane verticale (sau câte două pe un rând), bineînţeles dacă lăţimea sidebarului permite acest lucru, caz în care editez cu notepad codul respectiv direct în fila sidebar.php

    În primul caz, dacă doresc să scriu orice fel de cod în post trebuie selectată în wp-admin opţiunea “HTML”. Dacă vreau s-o scot de tot se poate din wp-admin/profile, se bifează “Disable visual editor”.
     

    Visual editor

     
    Mai jos avem un table care conţine 2 imagini pe orizontală şi două pe verticală. Fără fond colorat, fără border.

    p1 p2
       
    p3 p4

     
    Pentru a insera acest table am utilizat codul de mai jos, care poate fi folosit aşa cum este atât într-un post, cât şi la aranjarea de bannere în sidebar. El este scris într-un anume fel, ceva cât se poate de simplist, fără elemente custom, care în cazul utilizării în post ar fi restricţionate oricum de CSS-ul temei.

    <div align="center">
    <table width="220">
    <tr>
    <td>
    <img src="http://www.site.ro/folder/poza1.jpg">
    </td>
    <td>
    <img src="http://www.site.ro/folder/poza2.jpg">
    </td>
    </tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr>
    <td>
    <img src="http://www.site.ro/folder/poza3.jpg">
    </td>
    <td>
    <img src="http://www.site.ro/folder/poza4.jpg">
    </td>
    </tr>
    </table>
    </div>

    Unde fiecare element înseamnă:

    <div align="center"> – div de poziţionare table în centrul postului
    <table> – început table
    <tr> – început rând
    <td> – început coloană
    </td> – sfârşit coloană
    </tr> – sfârşit rând
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr> – un rând gol de doua coloane pentru a crea un spaţiu pe verticală între imagini (in sidebar se poate utiliza si <br><br> în loc de rând gol)
    </table> – sfârşit table
    </div> – sfârşit div centru
    width=220 – lăţime table în pixeli pe orizontală, am folosit o valoare ceva mai mare decât suma lăţimilor pozelor pentru a crea un spaţiu pe orizontală între imagini.

    Prin analogie se poate modifica codul exemplificat în funcţie de numărul de coloane şi rânduri dorit.

    Mai pot utiliza la wordpress în post următoarele elemente:

    <table bgcolor="#FF0000"> – pentru a seta un background colorat, (culoarea exprimată în HTML).

    <table background="http://site.ro/folder/imagine.jpg"> – pentru a seta un background o imagine oarecare, (dacă imaginea este mai mică în dimensiuni decât table, aceasta se va repeta pe orizontală şi verticală).

    <tr height="200"> – stabilirea unei înălţimi custom pentru un anume rând.

    Restul elementelor care contribuie la crearea unui table “Full Custom”, precum border, border-color, padding, margin, position, align, formatare font, etc, se pot configura numai prin intermediul CSS, prin adăugare şi configurare parametrii în fila style.css din folderul temei. Subiectul este vast, ar putea face parte dintr-un tutorial viitor.

    În acest tutorial, cum e precizat şi în titlu am descris doar ce e testat şi merge la wp în post fără a modifica sau a crea conflicte cu css-ul temei.

    Etichete: , , , ,

  • Categorie - Tutoriale 17.10.2009 5 comentarii

    Acest mic tutorial ar putea fi considerat un update tutorialului precedent Cum fac banner pentru blog, tutorial pentru că este util în cazul în care există un text de preluat dintr-un TextArea (casetă text) cu copy/paste.

    Aceast feature HTML ca să-i zic aşa îmbunătăţeşte “User experience” pe un site web şi scuteşte utilizatorul să “tragă” cu mouse-ul de la prima literă până la ultima peste textul care se doreşte copiat.

    Poate fi utilizat în toate cazurile unde avem de-a face cu un
    <textarea></textarea>

    Trebuie făcută o modificare extrem de simplă:
    În loc de:
    <textarea>Textul din caseta</textarea>
    Adăugăm:
    onfocus="select();"
    Să avem în final:
    <textarea onfocus="select();">Textul din caseta</textarea>
    (cu un space după textarea neapărat)
    Asta este tot.

    Funcţionează şi in IE6 şi Firefox.

    Exemplu, click mai jos pentru a testa,
     

     

    Etichete: , , , ,

Pagina 1 din 212
Go to Top

Web conections

Alte articole

Comentarii recente

  • Imi plac la nebunie motoarele, dar mi-e frica de d... »
  • @yooo - absolut toate detaliile sunt descrise aman... »
  • Daaaa m-am convins.....si eu am primit unul din pl... »
  • Salut all...am si eu o intrebare...cum fac sa moni... »
  • @Dyeve - si mie imi place vintage-ul, o lume facin... »
  • Awwww! Ce mistoace sunt! Benefice sau nu aceste re... »
  • @Versuri - se spune Hayabusa, aia le da clasa la t... »
  • Le-am mai vazut:)).Caterinci pe acolo. »

Mie îmi plac filmele vechi!