Web 2.0

Technorati Profile

noreply@blogger.com (KiberNetsha) — Sat, 9 Aug 2008 12:44:00 +0300

HTML-шаблоны

noreply@blogger.com (KiberNetsha) — Sat, 10 May 2008 11:39:00 +0300

В последнее время мне все чаще попадаются сайты, HTML-содержимое которых я бы назвал безликим. Например, встречая конструкции вида <div class=”h2”></div>, я не могу логически объяснить их появление. Чем не угодил <h2></h2> разработчику?

Да, конечно, при современном уровне развития CSS можно обойтись парочкой тегов. Можно даже устроить конкурс на самый куцый HTML — у меня вышло 10 тегов для сайта с полной функциональностью. А раз так, то потребность в них все-таки есть. И существуют спецификации, в которых они перечислены. А их осмысленное использование, как минимум, позволит старым браузерам или устройствам, не умеющим работать с CSS, подать информацию в приемлемом виде. Не многие сайты могут похвастаться версиями оформления для КПК или для людей, имеющих ограничения по здоровью.

А что же это даст разработчикам? Скорее всего, CSS-правила станут более компактными. Доступ к элементам через DOM в скриптах также упростится.

Можно еще пофантазировать на счет более интеллектуальных поисковых систем, но это тема для отдельной статьи. Поэтому вернемся к нашим тегам.

Перепробовав множество вариантов использования тех или иных тегов, я выработал устойчивые комбинации, которые позволяют унифицировать создание сайтов и, как следствие, сокращать срок разработки при сохранении уровня качества.

Расскажу о некоторых из них. Начнем с таблиц. Их можно разделить на два типа: макетные и таблицы с данными.

HTML-шаблоны

Создано в браузере Flock

Про PNG. Часть 1

noreply@blogger.com (KiberNetsha) — Sat, 10 May 2008 11:29:00 +0300

Общаясь со своими коллегами на различных семинарах и в студии, я пришел к выводу, что для многих единственным преимуществом формата PNG является наличие честной полупрозрачности. Если поискать в интернете информацию об этом формате, несложно заметить, что веб-разработчики разделились на два лагеря. Первые пишут о том, какой этот формат замечательный, оперируя чисто техническими данными, непонятными обычным кодерам и дизайнерам (к примеру, о превосходстве deflate-алгоритмов сжатия над LZW), другие же оставляют комментарии разной степени глупости о бесполезности PNG, не потрудившись даже вникнуть в суть вещей, описанных в спецификации.

Попробуем разобраться, какие преимущества дает этот формат, чтобы научиться ими пользоваться при подготовке иллюстраций для веба.

Начнем с терминологии. Предполагаю, что большинство читателей пользуются фотошопом и встречали там названия PNG-8 и PNG-24. Это не два разных формата, а всего лишь вариации одного и того же PNG. Формат позволяет хранить три типа изображений: greyscale (для описания изображения используется один канал — белый), indexed-colour (используется палитра цветов, как в GIF) и truecolor (используется три канала — RGB).

Самое главное преимущество формата PNG — это, конечно же, новые алгоритмы сжатия. Все помнят, что GIF эффективно сжимает только горизонтальные одноцветные области? Про это ограничение теперь можно забыть:

GIF, 2568 байт

PNG-24, 372 байта

Продолжение Про PNG. Часть 1

Создано в браузере Flock

BubbleShare.com еще один сервис в духе web 2.0

noreply@blogger.com (KiberNetsha) — Fri, 21 Dec 2007 01:19:00 +0200

BubbleShare - сервис для хранения фотографий в духе web 2.0.
Альбомы можно оформить в флеш рамку, можно сделать 3 вида слайдшоу (сразу дается html код для публикации на сайте или блоге).
Фотографии можно украсить: сделать рамку или надпись.
И конечно же там присутствует рейтинг, т.е. можно оценивать фотки.
Один минус - нет перевода на русский, но там и так все понятно:)

Вот пример:
корпоративная вечеринка по случаю Нового Года
BubbleShare: Share photos - Delicious Christmas Recipes.

Как сделать комментарии в блоге аля Хабрахабр

noreply@blogger.com (KiberNetsha) — Tue, 27 Nov 2007 12:57:00 +0200

Автор Рома в 12:19

Недавно из закрытого бета-тестирования вышли 2 новых web 2.0 - проекта : Intense Debate и Disqus. Оба они имеют схожий функционал и предлагают кардинально по-новому взглянуть на систему комментариев в блогах.
С помощью нескольких кликов мыши блоггер может установить на свой блог систему комментирования с огромными функциями и вебдванольным содержанием.
Рассмотрим подробнее сервис Intense Debate (изначально эта статья планировалась как сравнительная для обоих сервисов, но по непонятным причинам Disqus отказался нормально работать на моем блоге, даже запуск на специально заведенном тестовом блоге со стандартным шаблоном не помог.Не исключаю, что причина банально в моих кривых ручках. Disqus ничем не уступает своему конкуренту по функциональности, а даже имеет ряд уникальных функций.По-этому предлагаю всем обратить на него внимание).
После установки виджета в свой блог (поддерживается Blogger, Wordpress, TypePad), я получил комментарии с такими функциями :
1.Красивый дизайн, который автоматически подстраивается под шрифты и цвета блога.
2.Древовидная структура комментариев ( аля Хабрахабр) - теперь в блоге читатели могут вести словесные баталии между собой.
3.Система оценки "за/против".
4.Система репутации (для зарегистрированных пользователей)
5.Комментарии автора блога выделяются отдельным цветом.
6.Возможность подписаться на RSS-фид как ко всем комментариям в посте, так и к какой-либо понравишейся внутренней дисскусии.
7.Аватары (для зарегистрированных пользователей).
8.Кнопка "меню" рядом с аватаром, по которой любой желающий может попасть на любой ваш сайт,блог, подписаться на RSS-ленту с комментариями или даже подписаться на фид другово вашего блога даже не заходя на него.

Непосредственно на сайте Intense Debate блоггер получает в свое распоряжение систему учета и менеджмента комментариев в своем блоге :
1.Статистика (количество комментариев,их процентное соотношение,среднее количество символов в комментариях,среднее значение репутации ваших комментаторов, последние 5 комментариев вашего блога, самые комментируемые посты блога...)
2.Модерация комментариев.(как каждого в отдельности, так и всех скопом)
3.История комментариев.
4.Антиспам-защита (все - на модерацию; все новые комментаторы - на модерацию; количество ссылок в комментарии, по достижении которых комент уходит на модерацию; ключевые слова, по которым комент уходит на модерацию; черный список слов, по которым комментарий автоматически удаляется;полный бан определенного комментатора). Я проверил систему защиты на расспознавание кириллицы - все работает !
5.Импорт/экспорт комментариев.
6.Скины формы комментариев ( пока в наличии только 2 темы). Возможность продвинутым пользователям самим поиграться с CSS-стилями (правда разратчики настойчиво просят не делать этого, пока система не выйдет из беты)
7.Виджеты для вашего блога.

Но это лишь вершина айсберга. Главное предназначение Intense Debate и Disqus - создать всемирную социальную сеть блоггеров и их комментаторов.Читатель, который решит зарегистрироваться в системе, получает в свое распоряжение единую учетную запись для всех блогов, где размещены системы Intense Debate или Disqus - единый аватар, единую систему репутации, которая учитывает все комментарии и их оценки на всех блогах, где читатель оставил комментарий.При этом общатся можно как непосредственно в блогах, так и на самих сайтах-сервисах : в Intense Debate предусмотрена система "друзей",а Disqus вообще предлагает уникальную функцию - форум ваших читателей.

Короче говоря, на суд общественности предложен новый тип взаимодействия интернет-общественности - на основе системы комментирования.И его успех в первую очередь зависит от блоггеров, которые будут решать : переходить или нет на эти уникальные сервисы.Достоинства очевидны - комментировать действительно становиться интересно. А главное: блоггер получает не просто комментаторов, а настоящее социальное сообщество.
На мой взгляд - это второй по значимости и действительно полезности для интернет-сообщества web 2.0-концепт после идеи социальных закладок.
И я им уже возпользовался.
И не только я, но уже и милая девушка nordnati
И Бизнес переводов
И Дневник самоучки
И Блог Сущука

P.S. Забавно, но на одном из 3 блогов, которые Intense Debate предлагает пользователям в качестве примеров для ознакомления с их новой системой, можно встретить в комментаторах вездесущего Коперника.

Утечка личной информации на Одноклассники.ru

noreply@blogger.com (KiberNetsha) — Fri, 16 Nov 2007 13:39:00 +0200

Довольно забавная ошибка, хотя потенциально применимая для целенаправленного использования. Проявилась в тот момент, когда Антон Носик опубликовал в своем журнале ссылку на одноклассническую страницу организатора беспорядков, случившихся на вчерашних политических дебатах. В ссылку был включен идентификатор сессии, что привело к весьма своеобразным последствиям.

Во-первых, страница стала доступна и незарегистрированным пользователям (возможно, идентификатор сессии и был включен ради этого, а не просто по неосторожности). Во-вторых, после ее открытия переход по ссылкам верхнего меню ("Моя страница", "Мои сообщения") приводит к отображению соответствующих страниц случайных (или не очень) пользователей сервиса, дает просматривать личные сообщения, фотографии, редактировать профиль и т.п.

По одной из версий, таким образом засвечивается страница пользователя, перед этим прошедшего по ссылке с идентификатором сессии. Если это предположение правильно, то существует возможность целенаправленной атаки путем заманивания на соответствующую ссылку. Звучит вполне правдоподобно, впрочем, однозначно подтвердить эту версию, попеременно заходя с нескольких аккаунтов, лично мне не удалось - то ли поток желающих пройтись по ссылке стал слишком велик, то ли источник проблемы все-таки в чем-то другом.

Похоже, что ошибки вокруг запоминания логина становятся настоящим бичом онлайновых сервисов.

Update. Дырку довольно оперативно закрыли, но, судя по интенсивно меняющимся в последние минуты ее существования фотографиям и именам, желающих покуражиться над чужими аккаунтами оказалось не так уж мало (а что было бы, попади эти 3.5 часа на пик рабочего времени, и представить страшно). Так что пользователям из "группы риска", сходившим по носиковской ссылке, как минимум стоит наведаться на свою страницу.
Источник: dolboeb lj

Что такое MySQL?

noreply@blogger.com (KiberNetsha) — Fri, 16 Nov 2007 13:24:00 +0200

Что такое MySQL. Взаимодействие с PHP: "Что такое MySQL. Взаимодействие с PHP Итак, для начала ответим на вопрос: что такое MySQL? MySQL – это одна из самых популярных и самых распространенных СУБД (система управления базами данных) в интернете. Она не предназначена для работы с большими объемами информации, но ее применение идеально для интернет сайтов, как небольших, так и..." Читать далле

CSS Dock Menu

noreply@blogger.com (KiberNetsha) — Sun, 11 Nov 2007 02:57:00 +0200

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

Перевод: Если вы большой любитель Mac, вам нравится эта дока CSS меню. Она использует Jquery Javascript библиотеку и Fisheye компонент, интерфейс и некоторые мои иконки. Она поставляется с двумя дока стилями - сверху и снизу.

Download CSS Dock Menu

Zip package included JS, CSS, and icons

1. Download source files

Download the CSS dock menu zip package.

Словарь тэгов

noreply@blogger.com (KiberNetsha) — Sat, 10 Nov 2007 19:37:00 +0200

Первые Шаги - Словарь тэгов.

Тэг

Назначение и атрибуты, рассматриваемые в учебнике

Ступеньки

ссылка
href="другой_документ.html" - путь к документу
target=_blank - открывает ссылку в новом окне
name="anchor1" - имя закладки
title="Ваша подсказка" - подсказка к ссылке (текстовой)

13, 15, 17, 18, 19
16
20
14

AREA

определяет геометрические области внутри карты и ссылки для них
shape="rect" (circle, poly) - тип области
coords="x1,y1,..." - координаты области
alt="описание" - описание, подсказка
href="document.html" - ссылка

17, 18, 19

выделение текста полужирным шрифтом

BIG

выделение текста более крупным шрифтом, чем основной

BODY

тело документа, обязательный тэг
text="#cc0000" - задает цвет текста всего документа
bgcolor="#000000" - задает цвет фона документа
background="картинка.jpg" - задает фоновую картинку
link="#ff9999" - задает цвет ссылки
alink="#ff9999" - задает цвет активной (нажатой) ссылки
vlink="#ff9999" - задает цвет посещенной ссылки
topmargin="0" - ширина верхнего и нижнего полей документа для IE
leftmargin="0" - ширина левого и правого полей документа для IE
marginheight="0" - ширина верхнего и нижнего полей документа для NN
marginwidth="0" - ширина левого и правого полей документа для NN

3
4
5
11
13

31

принудительный перенос текста на другую строку
clear="all" (left, right) - завершение обтекания текстом объекта

CENTER

центрирование текста и объектов

DIV

выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа

EMBED

внедрение объектов в документ
src="mult.swf" - указывает местоположение объекта
type="application/x-shockwave-flash" - тип подгружаемого объекта
width="500" - ширина объекта
height="100" - высота объекта
align="left" - выравнивание
vspace="10" - расстояние от объекта до текста по вертикали
hspace="30" - расстояние от объекта до текста по горизонтали
hidden=”true” (false) - отображать указанный объект (да/нет)
pluginspace=”http://…” - путь к плагину

FONT

управление шрифтами
color="#cc0000 - задает цвет для блока текста
size="+0" - задает размер шрифта текста (от -2 до +4)
face="Arial" - задает определенный тип шрифта

4
7
9

FRAME

определяет содержимое и вид одного фрейма
marginheight="0" - ширина верхнего и нижнего полей фрэйма
marginwidth="0" - ширинау левого и правого полей фрэйма
scrolling="yes" (no, auto) - линейка прокрутки
name="window-1" - имя фрейма
noresize - запретить посетителю менять размеры фреймов

35, 36, 37, 38, 39, 40

FRAMESET

определяет макет основного окна в виде прямоугольных пространств
rows="100,200,*" - определяет расположение горизонтальных фреймов
cols="10%,20%,70%" - определяет расположение вертикальных фреймов
border - определяет ширину рамок фрэймов в пикселах

35, 36, 37, 38, 39, 40

заголовки (H1, H2, H3, H4, H5, H6)

HEAD

голова документа, обязательный тэг

линия
align="right" (center или left)
width="30%" (ширина линии в процентах)
size="6" (толщина линии)
NoShade (отмена объемности)
color="cc0000" (цвет линии, только в IE)

HTML

указывает на тип документа, обязательный тэг

выделение текста курсивом

IFRAME

"плавающий" фрейм
src="ancorpri.html" - путь к подгружаемому документу
width="300" - вширина "плавающего" фрейма
height="250" - высота "плавающего" фрейма
scrolling="auto" (yes, no) - полоса прокрутки
frameborder="1" (0) - отображать или нет границы фрейма

IMG

подгрузка изображений (картинок)
Border="5" - рамка покруг картинки
width="500" - ширина картинки
height="100" - высота картинки
align="left" - расположение текста по отношению к картинке
vspace="10" - расстояние от картинки до текста по вертикали
hspace="30" - расстояние от картинки до текста по горизонтали
alt="описание" - описание картинки
usemap="#karta1" - ссылка на карту

10, 11, 12

17, 18, 19

определяет элемент списка

32, 33

LINK

вводит в документ внешние таблицы стилей
href=”http://…” – пусть к файлу со стилями
rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа.
type="text/css" – тип содержимого, подгружаемой информации.

MAP

определяет клиентскую навигационную карту
name="karta1" - имя карты

17, 18, 19

MARQUEE

бегущая строка текста (только IE)
bgcolor - цвет фона бегущей строки
height - высота строки
width - ширина строки
behavior="scroll" обычная прокрутка
behavior="slide" - строка пробегает до края и останавливается
behavior="alternate" - строка будет двигаться от края к краю
scrollamount="1" (1-10) - скорость движения строки
direction="left" (right, up, down) - движение влево (вправо, вверх, вниз)

упорядоченные списки
type="I" (i, 1, a, A) - стиль элемента списка

OBJECT

общее внедрение объектов в документ
data="sobaka.jpg" - указывает местоположение данных для объекта
type="image/jpeg" - тип содержимого для данных, указанных в data (тип объекта)

параграф, выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа

PRE

форматированный текст

перечеркнутый текст

SCRIPT

внедрение скриптов в документ
type="text/javascript" - тип содержимого / язык скрипта src="http://site.ru/put_k_sciptu/" - путь к внедряемому скрипту

SMALL

выделение текста более мелким шрифтом, чем основной

STRIKE

перечеркнутый текст

STYLE

информация о стиле в заголовке
type="text/css" - тип содержимого

SUB

нижний индекс

SUP

верхний индекс

TABLE

таблица
bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина таблицы
height="45" или height="45%"- высота таблицы
cellspacing="5" - расстояние между ячейками
cellpadding="5" - расстояние внутри ячеек
border="3" - задает толщину рамки таблицы
bordercolor="#000000" - задает цвет рамки таблицы

21, 22, 23, 24, 25, 26, 27, 28

ячейка данных таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота
align="center" (right, left) - горизонтальное выравнивание содержимого
valign="middle" (top, bottom) - вертикальное выравнивание содержимого
colspan="2" - растянуть ячейку на несколько стобцов
rowspan="2" - растянуть ячейку на несколько рядов
cellspacing="5" - расстояние между ячейками

21, 22, 23, 24, 25, 26, 27, 28

TITLE

заголовок документа

строка таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота

21, 22, 23, 24, 25, 26, 27, 28

шрифт пишущей машинки (моноширинный)

подчеркнутый текст

UL	неупорядоченные списки type="disk" (circle, square) - стиль элемента списка