Сама идея сделать свой ToDo у меня пришла после того, как на хабре опубликовали пост про microToDo. Основным недостатком я считал то, что все сохраняется на куках. Вот потом и появилось мое решение 
... Читать дальше »
Недавно посетила мысль сделать редизайн, так как тот дизайн очень долго загружался.
И вот сегодня я это воплотил.
Дизайн стал еще минималистичней.
Вообщем смотрите
Если есть какие-то ошибки, то пишите в комментарии, буду исправлять.
PS: Сейчас еще пару фич добавлю.
UPD: У отрицательных комментариев теперь добавляется прозрачность, чтобы они были менее заметные
Тот, кто вошел ко мне в блог и удалил полностью все записи, оказался редкою тварью.
Как пароль был взят? Наверное перебором. Стоял пароль в админку не очень сложный, поэтому его можно было и подобрать.
Восстановить материалы я то смогу, только все комментарии - увы, нет 
Постараюсь все исправить в последнее время.
А это может и к лучшему.
Теперь начну почти все с нуля.
Вот теперь я и понимаю, зачем нужны бекапы
будет полезно для варезников, так как почти у всех изображения лежат на фотохостинге, в котором изображения хранятся не всегда.
Для этого нам пригодится:
- Сайт на uCoz;
- Активированный модуль "почтовые формы". (Через него мы будем получать уведомления на почту)
Итак, приступим. Для начала активируем модуль почтовых форм и создадим форму.
Желательно заполнять в таком порядке как показано на скриншоте.
Когда сделали, то можно приступать к установке на ваш сайт.
Заходим в быструю замену и заменяем:
Режим замены: Многострочный
Что заменить: <body>
На что заменить:
<body> <script type="text/javascript">
$(document).ready(function() {
$('img').error(function() {
$.post('/mail/', {
f1: 'mail@vadimklimenko.com',
f2: 'Недоступное изображение',
id: 1,
a: 1,
f4: $(this).attr('src'),
f5: window.location.href,
f3: 'Привет!\n\n На твоем сайте появилось недоступное изображение. Ссылка на само изображение написана ниже. Быстрей исправляй:)\nС уважением, бот.',
o: 1
});});});
</script>
Не спешите нажимать на кнопку "Произвести замену". Теперь нужно скрипт настроить.
Итак, расписываю что где и как.
f1 — Почтовый ящик, из которого будут приходить письма о недоступности изображения. Особой разницы от этого нету, поэтому можно оставить все как есть.
f2 — Тема сообщения. Можно изменить на свою.
id — айди формы обратной связи.Например, у меня в форме из названием "Название 1" ID формы — 1. А у формы з названием "Связаться со мной", айди формы — 2.
f3 — Здесь само сообщение. У меня просто приходит текст такого вида:
Привет!
На твоем сайте появилось недоступное изображение. Ссылка на само изображение написана ниже. Быстрей исправляй:)
С уважением, бот.
Примечание: \n означает перевод строки (Аналог <br> в html)
Все остальное вам не нужно.
После того, как все сделали, можно смело нажимать на "Произвести замену".
Вставим для примера на страницу любое несуществующее изображение. Должно будет на почту прийти вам такое письмо:
На этом все. Если появятся какие-то вопросы, то прошу задавать их в комментариях.
При копировании, активная ссылка на блог — обязательна!
1. Кросc-браузерное тестирование
Тестирование в разных браузерах - это, как мне кажется, самое скучное занятие что есть в веб-дизайне. Когда верстаешь дизайн, то обязательно нужно проверять его во всех основных браузерах, в зависимости от того, с каких браузеров к вам заходят посетители. Убедитесь, что сайт отображается одинаково в браузерах.
2. Установите счетчики посещаемости
Статистика может предоставить вам все сведения о посетителях, переходах из поисковых систем, популярности статей и следить за посетителями в режиме онлайн.
Ресурсы:
Google Analytics
Woopra
Из русскоязычных:
Я.Метрика
LiveInternet
3. Создайте Favicon
Именно Favicon отображается в адресной строке возле вашего адреса сайта и в избранном. Она помогает укреплять ваш бренд, когда пользователи добавляют ваш сайт в избранное
Favicon должна быть простая и запоминающаяся. В ней можно использовать, как и использовал автор, букву "N". Также можно использовать этот значок в twitter и в Gravatar.
4. Удаление границ в ссылках и изображениях
Если в вашем дизайне по умолчанию в изображениях и ссылках используются границы, хорошая идея удалить эти границы. Это можно сделать двумя строчками в CSS:
img a { border:none; }
a { outline:none; } 5. Обратная связь
Иногда веб-мастера забывают создавать форму обратной связи для связи с авторами сайта. Для того что-бы можно еще и отвечать на вопросы в обратной связи, то нужно еще будет отдельное поле добавить, где посетитель будет вводить свой E-mail адрес.
6. Проверка правописания
Всегда требуется и нужно выделять время на проверку правописания. Для этого можете проверять свой текст в разных браузерах, которые на ходу проверяют текст на наличие ошибок.
7. Проверка на битые ссылки
При смене дизайна веб-мастера часто забывают менять ссылки. В Dreamweaver есть возможность проверять ссылки на битость. Что-бы проверить, нужно зайти в File > Check Page > Links.
Онлайн-ресурсы:
W3C Link Checker
8. Информация в META-тегах
Не забывайте добавлять meta-теги на каждую страницу сайта, так как это полезно для SEO. Они никак не могут повредить содержимое страницы.
9. Установите свою 404 страницу
Иногда все-таки есть ссылки на несуществующие страницы. В таком случае у вас должна быть 404 страница. Именно она поможет узнать, этой страницы не существует. В ней можно предложить перейти на главную страницу или перейти на подходящие ссылки.
10. Используйте 301 редирект
Если у вашего сайта изменился адрес, то нужно уведомить пользователей об этом и из старого адреса сайта поставить 301 редирект на новый. Редирект поможет перенести все показатели PR и тИЦ ну и не потерять пользователей
Установить его можно так - создать в корне файл .htaccess и в него добавить такое содержимое:
Redirect 301 /oldpage.html http://www.yoursite.com/newpage.html
Начну издалека.
Был у меня когда-то аккаунт продвинутого на фтп, крутая подпись и самообновляющийся аватар (ава, которая изменялась при обновлении страницы). Потом я еще сидел на файрфоксе, и вдруг... Мой аватар сменился на такой.. После ожидания я получил свой ответ. Оказывается, у меня было в подписи изображение, которое мол портило страницу с моим профилем. И администрация не подумав изменила изображение на свою картинку.
На второй раз уже было что-то посерьезней. Как-то у меня репутация более 30000 и я два дня просидел с таким аватаром. Потом моя репутация из 108 (с самого начала) опустилась до 10. Задал в лаборатории (раздел для продвинутых) свой вопрос. Чуть позже получил ответ. Ну вообщем свалили, что все это сделал я. Ну а потом уже попросил что-бы поставили 0. Все равно особого смысла не вижу
После повторной установки снова моего самообновляющегося аватара, я добавил еще одно изображение.
Вроде я НИКАКОГО правила не нарушал
Вчера получился еще один прикол.
Снова удалили мой аватар (им он не понравился) ну и Уважаемая Елена написала в личку (Орфография сохранена):
Можете не поднимать очередной скандал - ваше чувство юмора вас уже который раз подводит.
Я: А что там у меня не так в аватаре?
Елена: Сами не знаете?
Я: Какие именно пункты правила я нарушил?
Елена: Пункт о введении в заблуждение похожестью.
Это вы Толику можете голову морочить, он доверчивый, а мне не стоит. Поэтому надеюсь это ваш последний вопрос.
Я: Я ему ничего такого не говорил... Говорил то, что было на самом деле.
Какое еще заблуждение? На нем написано, что аватар не нарушает правила сообщества. Как я ввожу в заблуждение?
Елена: Короче, без этого изображения можете вернуть свой выклянченный аватар.
Я: Но все же, я хочу разобраться :-)
Елена: Дальнейшее разбирательство приведёт к вашему бану. Вы мне мешаете работать.
Ну а теперь ПОКАЖИТЕ где такое правило вообще существует?
Вот такая у нас отзывчивая Администрация...
Вот ссылка на правила на момент написания поста.
PS: Как бы то ни было, но теперь я уважаю только Meddy, Themis, zvirus'a, kankord'a, Кински, Kron'a и Женю Курта
UPD: Сообщество «у коз» - АлмЛекс
UPD 2: Ternox кагбе начал флешмоб. Поставил вместо своего аватара мой бывший авик. К нему присоеденился amenhaton :D
Вот пример. Как видно, второго изображения не существует, поэтому отображается выбранное мною изображение.
Для того, что-бы себе такое поставить, нужно подключить JQuery (в uCoz она подключена) и сразу после него поставить код:
<script type="text/javascript">
$(document).ready(function() {
$('img').error(function() {
$(this).attr({
src: 'http://vadimklimenko.com/Example/missing-img/no.jpg',
style:'border:3px solid #999;width:140px;height:105px;'
});
});
});
</script>
http://vadimklimenko.com/Example/missing-img/no.jpg - заменяем на адрес своего изображения
border:3px solid #999;width:140px;height:105px; - настраиваем под себя
Оригинал: Use Custom Missing Image Graphics Using jQuery
Многие из вас видели сайты, где есть авторизация по OpenID. Например, тот же ИШ.
Что это вообще такое?
OpenID — это открытая децентрализованная система единого входа. Поддержка сайтами технологии OpenID позволяет пользователю использовать единый логин для авторизации на любом из этих сайтов.
Для того, что-бы создать возможность входить на сайт с помощью OpenID, нам потребуется наш сайт (на php, на юкозе, на народе — неважно) и желание :)
Существует много OpenID провайдеров, которые предоставляют хостинг OpenID URL.
Кстати, вот инструкция о том, как создать OpenID с помощью Яндекса. Мне Яндекс не понравился тем, что там все запутанно и я не смог никак оставить комментарий. Тем более нужно для авторизации на сайте вводить логин и пароль, заместо просто пароля.
Каким сервисом лучше пользоваться? myOpenID
Он позволяет входить на OpenID-сайты с помощью своего домена и смотреть логи (кто, куда и когда вошел)
С регистрацией проблем возникнуть не должно.
После авторизации заходим по ссылке Register a New Domain и вводим:
Your domain name — адрес вашего сайта. Например: vadimklimenko.com
Choose how you'd like your OpenIDs to look — выбираем второе: http://<username>.<your-domain>/
И нажимаем на Configure Your Domain.
Теперь нам показали, какую запись нужно добавить
Заходим в админку, Перенос домена » Редактирование записей домена (режим эксперта) и добавляем так, как показано на скрине:
---скрин---
Почти готово! :)
Теперь нам нужно подтвердить, что сайт наш.
Verification method: None selected (справа есть ссылка change — нажимаем на нее и выбираем второй вариант.)
В моем варианте мне нужно создать .html файл с текстом r88jqo7cawdzg. Открываем блокнот, в нем пишем наш код и сохраняем в формате html, название файла: myopenid-hosted-verification. Потом загружаем помощью файлового менеджера на наш сайт в корень и
Теперь должно быть написано, что все успешно подтверждено.
---скрин---
Теперь нам нужно добавить код на главной странице между тегами <head> ... </head> :
<link rel="openid.server" href="http://www.myopenid.com/server" />
<link rel="openid.delegate" href="http://username.myopenid.com/" />
<link rel="openid2.local_id" href="http://username.myopenid.com/" />
<link rel="openid2.provider" href="http://www.myopenid.com/server" />
<meta http-equiv="X-XRDS-Location" content="http://www.myopenid.com/xrds?username=username.myopenid.com" />
Где вместо username вставляем свой логин, который вы вводили при регистрации.
Ну вот и все!
Теперь когда вы пишете комментарии в блоге или на сайте, вам нужно просто ввести адрес своего сайта.
Кстати - вот классный проект, который позволит вам найти интересные ссылки на темы web, дизайна, разработки и информационных технологий. Поддерживается OpenID :)
Я зашел под своим логином и выбрал новый пароль. Попал на главную страницу.
Разберем ее по частям.
Левая часть — здесь находятся навигация и ваши контакты. Папки можно переименовать и изменять им цвет. Также можно увидеть контакты (сейчас у меня там никого нет, поэтому ничего сказать не могу).
Средняя часть — отображаются волны. Слева отображаются аватары тех, кто создал волну (могу и ошибаться, но после 5 минут обновления страницы ничего не изменилось), справа — название волны и часть последнего сообщения. Если волна непрочитанная, то название становится жирным. После сообщения есть маленькие иконки, которые показывают, есть ли в волне гаджеты или прикрепления. А справа — количество сообщений и время публикации последней.
Правая часть — самая основная. Там находятся волны и их комментарии. На моем изображении, я никакую волну для показа не выбрал, поэтому отображается текст "Создать волну"
Вверху — аватары тех, кто отписался. А внизу — комментарии пользователей. Как видно, туда можно вставлять изображения. Самой классной штукой есть то, что у каждого есть возможность редактировать эти комментарии
При создании или редактирования комментария можно использовать разметку (делать текст жирным, курсивом, подчеркнутым и т.д.)
Еще одним преимуществом есть подсказки о вводе неправильного слова (как в FireFox) и при правом клике мышью показываются слова, которыми вы могли ошибиться при вводе (Пока что только английский язык)
Любителей поиграть команда Google не забыла — есть пока что только одна игра в шахматы. Так как мне не с кем поиграть, то я ничего про нее сказать не могу.
Есть также много функций, о которых можно говорить и говорить. Так что, если вы есть в Google Wave, не забываем меня добавлять в контакты ( klimenko@wavesandbox.com )
На этом я закончу делать обзор. Всем пока. До скорых встреч :)
После небольшого отдыха я продолжаю вести свой блог.
За эти две недели отдыха от блоггерства много чего случилось
1. Наконец купил себе домен http://vklimenko.tel/ . Все остальное было занято.
2. Написал 1000 твит. О да, это достижение
3. В юкозе сменили шрифт, которому никто не рад и добавили возможность скрыть рекламу за 1 бакс.
4. И в Украине пытаются ввести новый налог на интернет, на свои потребы развитие театрального искусства.
5. Получил два плюса на ФТП
Чо нового в блоге?
Наконец сделал само описание чуть покрасивей (задумываюсь о смене этого описания )
Вид комментов тоже немного сменил (теперь они выглядят получше, чем было). Потом еще займусь комментариями и добавлю опцию
"Ответ на комментарий" и "Оценка комментария".
Когда-то из-за тупости использовал модуль "Новости сайта". Теперь я исправил свою ошибку и сейчас я нахожусь в модуле "Блог".
Убрал меню. Теперь думаю, куда его можно впихнуть.
Что-то еще добавлял, но не помню что именно. Поэтому в этом пункте - много мелких дополнений
Впереди еще задача обновить блог-ролл и пойти поспать)
Пост, обновление
Используются технологии uCoz