Уеб дизайн от Станислав Кирилов - Уеб дизайнер на свободна практика » Browser http://collapse.bg Уеб дизайн, изработка на уеб сайтове, онлайн магазини, фирмени сайтове и SEO оптимизация. Sat, 30 Oct 2010 18:24:04 +0000 en hourly 1 http://wordpress.org/?v=3.3 10 задължителни Firefox plugins за уеб дизайнери http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/ http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/#comments Thu, 29 Oct 2009 22:08:11 +0000 Станислав http://collapse.bg/?p=601 Firefox е най-популярния браузър за уеб дизайнерите, не само защото визуализира страниците по начина по който трябва да бъдат, но и защото неговите функционалности лесно могат да бъдат разширени. След като уеб дизайнерите прекарват по-голямата част от ежедневието си пред уеб браузъра, полезно ще бъде да разширят неговите функции и да могат лесно да валидират кода на страницата която пишат само с един клик или лесно да анализират нейното съдържание. Това са 10 от разширенията, които ще ви помогнат по-лесно да се справяте с работата си на уеб дизайнер.

1. Firebug

firebug-scr
Firebug служи за лесно анализиране на страниците, дебъгване на HTML, CSS и JavaScript и тяхното променяне директно в браузъра.

2. Web Developer

webdeveloper-scr
Web Developer добавя допълнителен toolbar в Firefox с множество опции. Едни от любимите ми са, че може да редактирам CSS кода директно в браузъра и да виждам резултата, както и да включа много други допълнителни атрибути.

3. Pixel Perfect

pixelperfect-scr
Pixel Perfec е добавка към Firebug която позволява лесно да се добави нещо най-отпред в сайта.

4. ColorZilla

colorzilla-scr
ColorZilla добавя пипетка към браузъра с която лесно може да изберете който и да било цвят и да вземете неговия код и да го сложите в която и да било друга програма или текстов редактор.

5. YSlow

yslow-scr
YSlow анализира защо дадена уеб страница се зарежда бавно.

6. IE Tab

ietab-scr
IE Tab позволява да видите как се визуализират страниците в Internet Explorer директно в Firefox.

7. MeasureIt

measureit-scr
MeasureIt може да сложи линия за да измерите височината и широчината на който и да е елемент.

8. Window Resizer

windowsresizer-scr
Window Resizer променя размера на браузъра в различни стандартни резолюции.

9. Extended Statusbar

extendedstatusbar-scr
Extended Statusba добавя допълнителна информация в статусбара на Firefox.

10. Live PageRank

livepagerank-scr
Live PageRank показва ранка на текущо заредената страница в Google.

]]> http://collapse.bg/%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/10-%d0%b7%d0%b0%d0%b4%d1%8a%d0%bb%d0%b6%d0%b8%d1%82%d0%b5%d0%bb%d0%bd%d0%b8-firefox-plugins-%d0%b7%d0%b0-%d1%83%d0%b5%d0%b1-%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd%d0%b5%d1%80%d0%b8/feed/ 12 CSS Reset http://collapse.bg/css/css-reset/ http://collapse.bg/css/css-reset/#comments Tue, 02 Jun 2009 11:06:46 +0000 Станислав http://collapse.bg/?p=221 Всеки браузър има някакви настройки по подразбиране. За да се обедите в това, примерно инсталирайте Web Developer Toolbar-а на Mozilla Firefox, заредете някоя страница и отидете на CSS -> Disable Styles -> Browser Default Styles. Това ще покаже страницата без абсолютно никакви margin, padding, font-style, font-weight зададени по-подразбиране от Firefox.
Абсолютно всички браузъри имат такъв лист със стилове по подразбиране и всеки е различен от останалите.
За да избегнем повечето от тези настройки по-подразбиране се използва CSS reset. Това е stylesheet който може да бъде вмъкнат(@Import) в основния ни или просто написан в него. Той се грижи да премахне всички неща, които биха възпрепятствали или усложнили писането на код за нашия дизайн. Освен, че може да разгледате тази огромна колекция от най-различни CSS reset стилове, ще ви предоставя два CSS stylesheet-а, които аз използвам.

Първия е на Ерик Мейер и се прави reset на абсолютно всичко.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Втория е master stylesheet и добавя основните неща, разделени в категории, които трябва да се допълнят и напаснат.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

/* Table of Contents:
	Global Settings
	Wrapper
	Headings
	Common Formatting
	Links
	Forms
	Tables
	Global Classes	
*/
/********** Global Settings **********/
html, body {
	border:0;
	margin:0;
	padding:0;
}
body {
	font:100%/1.25 Arial, Helvetica, sans-serif;
}
/********** Wrapper **********/
#wrap {
	width:960px;
	margin:0 auto;
}
/********** Headings **********/
h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-weight:normal;
}
h1 {
	padding:30px 0 25px 0;
	letter-spacing:-1px;
	font-size:2em;
}
h2 {
	padding:20px 0;
	letter-spacing:-1px;
	font-size:1.5em;
}
h3 {
	font-size:1em;
	font-weight:bold;
}
/********** Common Formatting **********/
p, ul, ol {
	margin:0;
	padding:0 0 1.25em 0;
}
ul, ol {
	padding:0 0 1.25em 2.5em;
}
blockquote {
	margin:1.25em;
	padding:1.25em 1.25em 0 1.25em;
}
small {
	font-size:0.85em;
}
img {
	border:0;
}
sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
acronym, abbr {
	cursor:help;
	letter-spacing:1px;
	border-bottom:1px dashed;
}
/********** Links **********/
a, a:link, a:visited, a:hover {
	text-decoration:underline;
}
/********** Forms **********/
form {
	margin:0;
	padding:0;
	display:inline;
}
input, select, textarea {
	font:1em Arial, Helvetica, sans-serif;
}
textarea {
	width:100%;
	line-height:1.25;
}
label {
	cursor:pointer;
}
/********** Tables **********/
table {
	border:0;
	margin:0 0 1.25em 0;
	padding:0;
}
table tr td {
	padding:2px;
}
/********** Global Classes **********/
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }
]]> http://collapse.bg/css/css-reset/feed/ 1 Съвместимост на кода под различни браузъри http://collapse.bg/%d0%b5%d0%b6%d0%b5%d0%b4%d0%bd%d0%b5%d0%b2%d0%b8%d0%b5/cross-browser-compatibility/ http://collapse.bg/%d0%b5%d0%b6%d0%b5%d0%b4%d0%bd%d0%b5%d0%b2%d0%b8%d0%b5/cross-browser-compatibility/#comments Tue, 14 Apr 2009 21:20:47 +0000 Станислав http://collapse.bg/?p=211 Въпреки ясното познаване на уеб стандартите, уеб браузърите винаги могат да ни изненадат с тяхното неразбиране на XHTML и CSS кода който пишем. Има разлика между рендването на кода от различните браузъри, както и от едни и същи, инсталирани на различни операционни системи. Валидирането на кода е задължително, но то може само да ни каже дали сме допуснали грешка в писането на кода или кой браузър как ще прочете кода. Знаете, че не може да инсталирате две различни версии на IE на една и съща машинанa но именно IE6 и IE7 все още държат солиден дял от интернет потребителите (статистика). Разбира се винаги може да си пуснете виртуална машина и да инсталирате на нея всичко което желаете. Можете да намерите списък с безплатни емулатори за PC на thefreecountry.com, но аз лично предпочитам да, не се занимавам чак до там и да върша всичко което ми е необходимо от едно PC.
Ето и моят метод за борба с различните браузъри. Аз тествам кода задължително под следните браузъри: Firefox, Opera, Google Chrome, Safari и разбира се Internet Explorer. Всички браузъри се инсталират безпроблемно на една и съща машина едновременно с изключение на MS IE-то, но пък за него има една много интересна безплатна програма – IETester. В нея можете да стартирате едновременно версиите 5.5, 6, 7 и отскоро присъединилата се 8ма версия, която с нищо не блесва пред останалите. Няма смисъл да коментирате техните бъгове или както от Microsoft го наричат, „специфично рендване на кода“. PIE (www.positioniseverything.net) има огромна база с бъгове и опътвания как да се спраим с тях. CSS-Discuss.com е създаден през 2002г и в него участват много дизайнери и разработчици, които се стремят да помогнат на останалите. На www.browsershots.org може да видите скрийншот на желания сайт под различни браузъри и резолюции. И накрая, нещо весело, поздрав за всички уеб девелопъри: RIPIE6.com.

]]> http://collapse.bg/%d0%b5%d0%b6%d0%b5%d0%b4%d0%bd%d0%b5%d0%b2%d0%b8%d0%b5/cross-browser-compatibility/feed/ 0