Arhive blog

Responsive Web Design


Responsive Web Design

Responsive Web Design (Photo credit: adactio)

In unul dintre ultimele proiecte am dat peste Responsive Web Design… si am ramas putin 😐 .

Dar dupa o cautare pe Google am gasit ce inseamna Responsive Web Design.

2. Responsive design. Asa cum spuneam mai inainte, termenul de responsive design se refera la adaptarea continutului pentru orice tip de device, indiferent de rezolutia ecranului. Principalele avantaje ale acestei tehnologii sunt:

– Fluidizarea continutului si a nivelului de date indiferent de dimensiunile ecranului device-ului folosit.
– Imaginile sunt de o calitate ridicata, flexibile, astfel ca urmarirea stirilor sau parcurgerea unor galerii foto se poate face in conditii optime, la rezolutii ridicate.
– Dat fiind faptul ca este un upgrade al Mobile Firts, principalele capacitati ale acestei tehnologii au fost imbunatatite, adaugandu-se alte facilitati care sa optimizeze continutul nu doar pentru telefoanele mobile ci si pentru tablete, indiferent de natura si dimensiunea display-ului.

http://blogatu.ro/2013/02/responsive-web-design.html

Eu aveam de modificat o tema premium astfel incat sa ramana responsive, sa fie designul mai ok si sa primeasca cateva modificari usoare cum ar fi schimbarea culorii fundalului, a fontului si alte lucruri.

Peste ce m-am lovit mai tare a fost sa fac o imagine dintr-un articol Responsive si mi-a luat cateva minute pana am gasit pe tatal Google ceva interesant, desi nu foarte practic. Nu era prea practic pentru ca trebuia la fiecare imagine inserata sa mai adaugi niste taguri in articol si asta putea fi chiar enervant. Totusi pentru moment solutia e ok si o recomand si voua.

Ca sa faci o imagine responsive trebuie sa facem un shortcode:

  1. adaugi la sfarsitul fisierului functions.php din dosarul temei tale activate urmatorul cod:

     function responsive_images($atts, $content = null) {
    return ‘<div>’ . $content .'</div>’;
    }
    add_shortcode(‘responsive’, ‘responsive_images’);

  2. adaugi la sfarsitul fisierului style.css din dosarul temei tale activate urmatorul cod:

    @media only screen and (max-width:767px) {
    .image-resized img{
    width:100%;
    height:auto;
    }
    }

  3. in articol adaugati shortcodeul [responsive] ca in exemplul de mai jos:
[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

Ca sa testati siteul vostru pe mai multe rezolutii folositi aplicatia online al lui Matt Kersley : http://mattkersley.com/responsive/.

Multumesc lui Lorin de la key27 pentru acest proiect care mi-a largit viziunea.

Multumiri celor care au creat si promovat articolul initial:

Cea mai usoara metoda de a fura favicon


English: A screenshot of English Wikipedia in ...

English: A screenshot of English Wikipedia in Firefox on KDE, showing the favicon next to the address bar. (Photo credit: Wikipedia)

Am mai scris in engleza despre favicon pe aici si aici.

Am avut de transferat un site dintr-o parte in alta si cea mai usoara metoda a fost sa preiau favicon dintr-un site direct folosind google.

Introduceti in browser:

http://www.google.com/s2/favicons?domain=www.website.com

sau

http://www.google.com/s2/favicons?domain=website.com

unde website.com este siteul de la care vreti sa luati faviconul.

Dupa ce ai luat faviconul foloseste sintaxa:After getting the favicon you can use it by embedding in the head section of your website using the following syntax.

<link rel="shortcut icon" type="image/ico" href="http://URL-OF-THE-IMAGE-HERE"/>

Aceasta sintaxa o puneti in head si schimbi url imaginii unde scrie URL-OF-THE-IMAGE-HERE .

Totusi ar fi bine sa nu copiati  faviconurile datorita drepturilor de autor.

Scurtaturi utile


English: Globe illustration used to identify t...

English: Globe illustration used to identify the Mozilla Firefox browser and other Internet-related software. Español: Ilustración de un globo terraqueo, utilizado para identificar el navegador Mozilla Firefox y otro software relacionado con Internet. (Photo credit: Wikipedia)

De multe ori, un web designer are deschise mult prea multe programe… o fereastra de Photoshop, o fereastra de Firefox, o fereastra de Dreamweaver, o fereastra de Skype… si tot asa.

Iata cateva scurtaturi (shortkeys/ shortcuts) foarte utile:

– pentru a te muta de la un tab la altul in Firefox foloseste combinatia de taste:

Ctrl+ Tab

– pentru a minimiza ferestrele tuturor programelor deschise, foloseste combinatia de taste:

windows(steagul) +M sau windows+ D

– pentru a minimiza doar fereastra activa foloseste combinatia:

Alt+ Space + N

– pentru a te muta intre ferestre foloseste combinatia:

Alt + Tab

3 scripturi interesante: Editorul HTML online Wyzz WYSIWYG, jocului Dots si scriptul jocului X si 0


Editorul HTML online Wyzz WYSIWYG

Mai jos aveti scripturile pentru Editorul HTML online Wyzz WYSIWYG( What you see is what you get = Ceea ce vezi, este ceea ce primesti).

Implicit te afli în modul Sursă al editorului.

Pentru a fi în modul WYSIWYG apasă ‘< >’ .

Pentru a fi în modul Sursă din nou, apasă ‘< >’ .

Demo:wyzz0.65

Descarca-l

 Dots

Mai jos aveti un script pentru jocul Dots. Il puteti pune pe siteul vostru pentru amuzament.

Demo: dots.

Jocul suporta un jucator uman si calculatorul.

Jocul are trei nivele.

Descarca-l

X si 0

Mai jos aveti un script pentru jocul X si 0. Il puteti pune pe siteul vostru pentru amuzament.

Jocul suporta 2 jucatori umani sau 1 jucator uman si calculatorul.

Demo: xsi0

Descarca-l

%d blogeri au apreciat asta: