May

08

Зручний онлайн-інструмент для html-верстки: csstool.ru

web-розробка

Tagged Under : , , , ,

Я професійно займаюсь веб-розробкою (веб-програмуванням). У моїй діяльності мені доводиться займатись як програмуванням на стороні сервера (server-side: PHP, MySQL), так і програмуванням на стороні клієнта (client-side: HTML, CSS, JavaScript). Сьогодні ми поговорим про client-side, а саме про html-верстку.

csstool.ru CssLayoutGenerator

Практично завжди є речі, які повторюються у кожному проекті і які можна оптимізувати. Це твердження справедливе і відносно html-верстки: основи (кістяки) майже усіх веб-сторінок схожі між собою, і відрізняються лише деталями. Так от, дозвольте представити інструмент, який дозволяє значно птимізувати роботу на початковому етапі html-верстки – CSSLayoutGenerator. На сайті, в режимі онлайн, Ви вибираєте тип верстки (резинова чи фіксована), вказуєте де повинні розміщуватись сайдбари, та обираєте додаткові фішки (наприклад, прижати футер до низу). Як результат, генерується html/css-файл, який можна скачати на свій комп’ютер і продовжити на його основі html-верстку. Дуже зручний, і абсолютно безкоштовний інструмент, який я вже встиг успішно випробувати на одному проекті, – в ньому потрібно було зробити кілька макетів. Залишається лише сказати “дякую” розробникам – Dimox & molodoy.

Користуйтесь – CSSLayoutGenerator.

2 Комментарий
Apr

21

Проблеми з прозорістю малюнків формату PNG в браузері IE6

web-розробка

Tagged Under : , , , , , , ,

Мабуть, кожен веб-розробник, який займається html-версткою, помічав неприємну помилку в роботі браузера Microsoft Internet Explorer 6. Браузер цієї версії не відображає прозорість у png-файлах. Незважаючи на те, що шоста версія IE на теперішній час вважається застарілою, нею все ще користується близько 18% людей у всьому світі (дані на 21 квітня 2009 року – Net Applications). IE6 досі такий популярний зовсім не завдяки якимось перевагам, – справа в тому, що компания Microsoft поставляла цей браузер разом з Windows протягом декількох років, причому в цей час не було конкуренції на ринку веб-браузерів. Існує навіть проект під назвою “Досить IE6“, що веде боротьбу за те, щоб цей браузер перестали використовувати – на сайті проекту приведено достатньо аргументів з цього приводу.

Але, якщо ви вважаєте, що створені вами веб-сторінки повинні нормально відображатись у всіх популярних браузерах (і в IE6 в тому числі), тоді давайте повернемось до теми даної статті. Проблеми з прозорістю PNG-малюнків в MSIE6 вирішуються з допомогою підключення до html-сторінки спеціального JS-скрипта: в заголовку html-документа (між тегами <head> і </head>) потрібно вставити наступний код:

<!--[if lte IE 6.0]>
<script type="text/javascript" language="javascript" src="pngfix.js"></script>
<![endif]-->

Думаю, все зрозуміло – якщо IE 6.0, тоді підключається спеціальний JS-скрипт.
Ну, і власне сам файл pngfix.js

2 Комментарий
Mar

23

Зручна навігація з допомогою JavaScript: Ctrl + Вправо: наступна сторінку (+ Вліво: попередня)

web-розробка

Tagged Under : , , , , , ,

ctrl_prev_next

Днями займався створенням презентації. В силу декількох причин, робив її у вигляді послідовно з’єднаних між собою html-сторінок. У навігації між сторінками було використано кнопки “вперед” і “назад“, розташовані знизу, щоб не забирати важливе місце зверху сторінки. Але, як то часто буває, деякі сторінки вийшли більші за розміром і повністю не вміщались на екрані. Тобто вийшло так, що для того, шоб перейти на іншу сторінку, потрібно перемотати її вниз і там клікнути мишкою по кнопочці “вперед”. Трохи незручно, правда? Потрібно було знайти рішення, яке б покращило зручнісь у переміщенні по сторінках презентації (usability). Згадалась популярна фіча з навігацією по сторінках з допомогою клавіш Ctrl + Вправо для переходу на наступну сторінку або Ctrl + Вліво для переходу на попередню відповідно.

Отож, результат більш-менш візуалізувався, залишилось лише реалізувати його. Почав шукати в Гуглі. Але на мої запити типу “js ctrl клавиша вправо”, “js следующая страница” нічого корисного не знайшлось. Довелось йти на сайт, на якому я бачив це рішення – сайт студії Артемія Лєбєдєва.

[Доречі, коли я по-пам'яті набрав адресу сайту Лєбєдєва, - помилився і набрав через дефіс (art-lebedev.ru замість artlebedev.ru), - мене перекинуло на сайт компанії що займається виготовленням підлог. Як міг перший веб-дизайнер рунету Тьома Лєбєдєв припуститись такої помилки - не зареєструвати подібне доменне ім'я. (Хоча хто зна, може це така накрутка відвідувань сайту від його студії!?) Ок, щось я відхилився від теми.]

читати далі про JS-навігацію: Ctrl + Вправо…

1 Комментарий
Jan

30

CAPTCHA на PHP

web-розробка

Tagged Under : , , , , ,

Виявляється, далеко не всі знають, що таке c.a.p.t.c.h.a. Мій знайомий недавно мене запитав, для чого на веб-сайтах, – особливо коли щось треба скачати чи опублікувати коментар, – потрібно ввести цифри з картинки, які до того ж так погано видно. Отож ліквідація безграмотності – зараз спробую пояснити, що значить картинка з цифрами, і далі розкажу, як зробити captcha з допомогою PHP. Хто теоритично готовий – може переходити зразу до технічної частини.

Отож, згідно вікіпедії, CAPTCHA (англ. “completely automated public Turing test to tell computers and humans apart” — повністю автоматизований публічний тест Тюринга для розрізнення комп’ютерів і людей) — торгова марка Університету Карнегі-Меллона, комп’ютерний тест, який використовується для того, щоб визначити, хто використовує систему — людина чи комп’ютер. Термін з’явився у 2000 році.

У більшості випадків captcha – це така невеличка картинка з набором букв і цифр, які потрібно ввести в полі вводу, розташованого поряд. При правильному вводі відбувається певна дія (наприклад скачування файлу або публікація коментаря), при неправильному – пропонується ввести циферки ще раз. Це робиться для того, щоб впевнитись, що циферки вводить саме людина а не зла компютерна програма, спам-бот. Цифри важко прочитати – це робиться спеціально для того, щоб і компютерній програмі було важче просканувати цифри на малюнку. Загалом капчі не обмежуються лише картинками. Зустрічаються captcha у вигляді загадок, прохань доповнити фразу або легкі арифметичні задачі (1 + 2 = *) – завдання, які зазвичай без найменших проблем вирішуються звичайними людьми, зате не вирішуються не підготовленими спеціально для цього програмами. Наприклад, хіба важко доповнити таке (ввести те, що має бути на місці трьох крапок):
“Столиця Сомалі – …”
Жартую. Це повинне бути щось дійсно легке, таке, як, наприклад, “Д’Артаньян і … мушкетери”. (Кому все ж цікаво, столиця Сомалі – Могадішу:)

Але ми зараз розглядаємо капчу в її класичному вигляді, тобто як малюнок. Тому приступимо до створення captcha з допомогою PHP.

читати далі про CAPTCHA на PHP

5 Комментарий