Util pentru webdesign

Pentru webdesign sunt câteva părţi din documente disponibile gratuit, ale celor de la Sitepoint.
http://www.sitepoint.com/

Fragment dintr-una din coperţile prezentate în această postare.

Publicitate

Google la 1 decembrie

Uneori lucrurile mărunte fac mult. Azi am avut surpriza să văd că Google.ro are logo personalizat pentru Ziua Naţională a României.

Personalizarea Google de Ziua României.

Frumos.
Dar nu despre asta voiam să scriu.

CSS3 – Fonturi disponibile online

Textele pot fi scrise online (în paginilie web) cu fontul dorit (numai sa fie gratuit).

Un exemplu de font şi detaliu din pagina online.

Asta înseamnă că nu mai trebuie ca textele să fie imagini care să

Ghid de Design

Am mai găsit pe net un site în care sunt prezentate lucruri utile designerilor.

Captură de ecran de pe prima pagină a Ghidului de design

Nu este un site cu

Snippets – cod util

M-am hotărât să le postez pentru ca şi alţii să poată profita de ele. Când am avut nevoie, le-am căutat pe net şi le-am găsit. Probabil unii le ştiu deja, nu am pretenţia că sunt noi şi îmi puteţi trimite şi voi trucuri care pot fi de folos.

Centrarea unui DIV

Pe măsură ce voi găsi şi altele utile am să le adaug aici.

Creator de fonturi online

Azi căutam pe Typophile, prin forum, dacă ştie cineva un program pentru creat caligrafie digital.

Fragment de interfata

Am dat peste un link spre un site cu aplicaţie web (flash) în care oricine îşi poate crea fontul şi-l poate descărca.

Unelte pentru caligrafie

Unealta influenţează ductul liniei şi în cele din urmă forma literelor.

Marker lat

În ce fel atinge suportul (hârtia) şi presiunea exercitată sunt la fel de importante.

Webware – bunuri online

Am fost plăcut surprins să descopăr, pe site-ul celor de la Cnet, o mulţime de link-uri care se pot vota, aranjate pe categorii, către diverse site-uri care se ocupă de câte un domeniu. Printre ele unele despre care încă nu auzisem.

Webware - bunuri online, la Cnet.

De la muzică online (de ascultat, sau cumpărat), la browsere şi navigare, sau servicii legate de transfer de fişiere,

Website layout şi CSS

Mai ales pentru învăţarea programării pentru web dar şi pentru rezolvarea rapidă a unor probleme, sunt utile câteva layout-uri aflate la îndemână.

Css Tab Designer 2 (program pentru creat meniuri). Link la final.

Layout-urile lui IronMyers (fragment). Link la final

Pe unele din ele le-am mai testat şi cu alte ocazii şi am mai învăţat din codul lor. Altele le-am descoperit recent. Am să postez aici link-urile către site-urile unde se găsesc astfel de informaţii utile celor care au de făcut pagini web.

În lumea simbolurilor

Pagina principală a site-ului Symbols (link la sfârşitul postării).

Pentru cei care au de creat identităţi vizuale este important ca în etapa de documentare să afle cât mai multe despre domeniul de activitate al clientului dar şi despre forme, simboluri şi semnificaţiile lor.
Nimic nu e întâmplător, sau nu ar trebui să fie.

GIMP şi Krita- manipularea imaginilor

Deşi e de multă vreme disponibil (1996) nu m-a tentat până de curând să-l încerc.

GIMP (GNU Image Manipulation Program)

Acum câteva luni am făcut un test. E drept că mi-a luat ceva timp însă până la urmă rezultatul mi s-a părut OK.

CSS şi web design-ul

Încă de la începuturile folosirii CSS-ului (Cascading Style Sheets), prin 1998 a fost înregistrat la W3C, site-urile au început să se schimbe în privinţa aspectului şi al optimizării paginii. Paginile web au devenit mai suple prin separarea conţinutului de design (grafică şi layout).

Css Zen Garden

Csszengarden a avut un rol determinant în evoluţia designului de pagini web. Dave Shea este iniţiatorului acestui proiect care a ambiţionat o mulţime de designeri să îşi încerce forţele în CSS.

Inkscape

Trebuie să mărturisesc, la un moment dat am fost foarte impresionat de programul ăsta gratuit. Nefiind bazat pe PS (PostScript) ca Illustrator, Freehand sau CorelDraw ci pe SVG (Scalable Vector Graphics), o variantă de XML care mai este şi suportată (prin plugin-uri) de unele browsere (la Firefox nativ) permite afişarea direct a desenelor vectoriale în paginile web.

Însă nu asta m-a impresionat.

Inkscape - desen vectorial cu Gaussian Blur (Luciano Lourenco)

Scurtături de căutare în Iron, Chrome sau Chromium

Nu mai ştiu dacă am văzut undeva sau m-am jucat pur şi simplu cu motoarele de căutare ce se pot instala în browser. Frumuseţea e că în browserele astea poate fi inclus orice motor de căutare. În plus, se pot face scurtături care să uşureze căutarea.

Exemplu.

Site-ul Google Translate (nu ştiu dacă e cel mai bun sau nu la traducerea în sine) http://translate.google.com/ se poate include astfel:

http://translate.google.com/translate_t#ro|en|

este comanda pentru traducere din română în engleză.
În plus, în Iron, Chrome şi Chromium se mai poate adăuga un parametru „%s” care face ca după ce am scris în caseta adresei scurtătura ROEN
– fie să dau Tab şi să scriu cuvântul căutat;
– fie scris în continuare cuvântul şi apăsat Enter.

Scris scurtătura "roen"

pasul 1

După tasta Tab apare aşa. Se poate scrie cuvântul de tradus.

 
 

Opera 10 Alpha

Opera 10 alpha este disponibil pentru testare (din 5 dec.). Anul viitor va apărea versiunea oficială iar până atunci cei de la Opera Software ASA îşi propun să lanseze versiuni beta.

Opera 10 alpha

Iron, Chrome şi Chromium versiunea 1

E oficial. Au ieşit din teste. Nu mai sunt în Beta. Prima versiune oficială.

SRWare Iron versiunea 1 (portabilă)

Google Chrome versiunea 1 (portabilă)

Chromium versiunea 1 (ultima compilare)

Pinky Flo Chrome skin (theme)

Pinky Flo skin (theme) pentru Chrome sau Iron

Un skin pe care l-am făcut pentru Google Chrome, Chromium sau Iron.
L-am numit Pinky Flo. Îl ofer gratuit dacă vă place.

Uneltele web designer-ului

Pentru prezentarea site-urilor în portfolio sau clienţilor, aveam nevoie de capturi de ecran pentru imagile paginilor. Din fericire există 2 moduri prin care acestea se pot obţine.

1. În stadiu de proiect grafic e nevoie de imagini grafice ale capturilor de ecran pentru browserele existente. Cu ele se pot face mock-up sau dummy (aproximări) ale felului în care arată site-ul.

capturi de ecran de pe Webdesigners Toolkit