bOntONweb » Технологии http://www.bontonweb.com development Thu, 28 Oct 2010 18:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 bOntONweb development : старт нового проекта http://www.bontonweb.com/programmirovanie/bontonweb-development-start-novogo-proekta.html http://www.bontonweb.com/programmirovanie/bontonweb-development-start-novogo-proekta.html#comments Thu, 01 Oct 2009 13:46:54 +0000 coder http://www.bontonweb.com/programmirovanie/bontonweb-development-start-novogo-proekta.html Сегодня торжественно запущен наш официальный сайт компании bOntONweb development.

На этом сайте Вы найдете полное портфолио работ, которые систематизированы по разделам. Ко многим работам прилагается детальное описание процесса разработки, скриншоты, ключевые моменты, интересные проблемы и пути их решения. На данный момент нами выполнено более 250 проектов, поэтому портфолио будет наполняться постепенно, но оперативно  :)

Кроме этого – на новом сайте опубликованы полные тексты аудитов сайтов. Думаю многим будет интересно посмотреть на типичные ошибки, встречающиеся на сайтах и почитать рекомендации по их устранению.

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

]]> http://www.bontonweb.com/programmirovanie/bontonweb-development-start-novogo-proekta.html/feed 10 Неподвижный фон при прокрутке страницы http://www.bontonweb.com/texnologii/css/nepodvizhnyj-fon-pri-prokrutke-stranicy.html http://www.bontonweb.com/texnologii/css/nepodvizhnyj-fon-pri-prokrutke-stranicy.html#comments Thu, 10 Jul 2008 14:25:22 +0000 coder http://www.bontonweb.com/texnologii/css/nepodvizhnyj-fon-pri-prokrutke-stranicy.html Постовой: Скачать на халяву
скрипт форума
строительные вагончики бытовки

Проблема: сделать неподвижный фон при использовании вертикальной прокрутки.
Решение: воспользуемся таким css свойcтвом, как background-attachment: fixed.

В общем виде получаем такой код:

PLAIN TEXT
CSS:
  1. body{
  2. background-attachment: fixed;
  3. background-color: #009900;
  4. background-image: url(../img/bodyBack.jpg);
  5. background-repeat: no-repeat;
  6. background-position: center top;
  7. }

или в сокращенном виде

PLAIN TEXT
CSS:
  1. body{
  2. background: #000000 url(../img/bodyBack.jpg) no-repeat fixed center top;
  3. }

]]> http://www.bontonweb.com/texnologii/css/nepodvizhnyj-fon-pri-prokrutke-stranicy.html/feed 1 День Загрузки 2008: Firefox 3 ставит рекорд http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html#comments Thu, 12 Jun 2008 10:12:45 +0000 coder http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html firefox.png
17 июня 2008 года выходит официальный релиз Firefox 3. В этот день мы можем помочь горячо любимому браузеру установить рекорд как самой загружаемой программе за 24 часа.
Присоединиться к сообществу пользователей Firefox и внести посильный вклад в установление мирового рекорда можно здесь: http://www.spreadfirefox.com/ru/worldrecord/

]]> http://www.bontonweb.com/texnologii/html/den-zagruzki-2008-firefox-3-stavit-rekord.html/feed 1 Шрифты для WEB: правила использования http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html#comments Fri, 16 May 2008 16:11:39 +0000 coder http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html Занимаясь непосредственно версткой сайтов, часто сталкиваюсь с тем, что многие разработчики не знают основных правил использования шрифтов для html страниц. Это приводит к тому, что во-первых сайт по-разному отображается в разных браузерах и на разных платформах. Во-вторых, неуместное применение нестандартных шрифтов снижает семантичность верстки (например, заголовки приходиться делать не текстом, а картинками) и ведет к утяжелению кода (из-за использования дополнительных скриптов и технологий, например, sIFR и т.д.).

Поэтому при разработке дизайна страниц необходимо всегда помнить и неукоснительно соблюдать следующие правила:

  1. размер основного шрифта документа – не менее 10 px;
  2. запрещается применение сглаживания и эффектов для шрифтов размером менее 14 рх;
  3. запрещается применение сглаживания и эффектов в основном тексте и заголовках сайта;
  4. цвет указвыается явно в свойствах шрифта, а не через эффекты слоя;
  5. запрещается использовать эффекты прозрачности для основного текста сайта;
  6. не допускается растеризовывать текст;
  7. все шрифты, использованные в дизайне, должны быть приложены к макету в отдельной папке fonts;
  8. для основного текста сайта, заголовков и ссылок необходимо использовать безопасные шрифты (таблицу безопасных шрифтов смотрим  здесь).

У Вас наверное возник вопрос - что такое безопасные шрифты?  Это шрифты которые одинаково (или практически одинаково) выглядят в разных браузерах и на разных платформах. Использование этих шрифтов обеспечивает корректное отображение сайта у любого посетителя.

    ]]>     http://www.bontonweb.com/texnologii/html/shrifty-dlya-web-pravila-ispolzovaniya.html/feed 3     jQuery API расширение для Dreamweaver http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html#comments Mon, 21 Apr 2008 12:17:59 +0000 coder http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html Постовой: рецепты народной медицины
    частное фото

    Задача: максимально упростить использование JavaScript-библиотеки jQuery при верстке сайтов в Dreamweaver.
    Решение: для этого удобно установить специальное расширение для Dreamweaver, которое значительно упрощает и ускоряет процесс разработки скриптов на базе библиотеки jQuery

    Скачать расширение

    ]]>     http://www.bontonweb.com/texnologii/html/jquery-api-rasshirenie-dlya-dreamweaver.html/feed 1     Conditional Comments http://www.bontonweb.com/texnologii/html/conditional-comments.html http://www.bontonweb.com/texnologii/html/conditional-comments.html#comments Tue, 08 Jan 2008 17:38:21 +0000 coder http://www.bontonweb.com/texnologii/html/conditional-comments.html Проблема: подключать разные таблицы стилей в зависимости от браузера (версии браузера).
    Решение: используем условные коментарии (conditional comments)

    PLAIN TEXT
    HTML:
    1. <!--[if IE]>
    2. Код для IE 5+
    3. <![endif]-->
    4.  
    5. <![if !IE]>
    6. Код для всех браузеров, кроме IE
    7. <![endif]>
    8.  
    9. <!--[if IE 5.5000]>
    10. Код для IE версии 5.5
    11. <![endif]-->
    12.  
    13. <!--[if IE 6]>
    14. Код для IE версии 6
    15. <![endif]-->

    Операторы:
    ! - оператор логического отрицания "НЕ"
    lt - оператор "младше чем"
    lte - оператор "младше чем или равен"
    gt - оператор "старше чем"
    gte - оператор "старше чем или равен"

    ]]>     http://www.bontonweb.com/texnologii/html/conditional-comments.html/feed 0     Применить стиль только в Opera http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html#comments Tue, 18 Dec 2007 23:35:46 +0000 coder http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html Проблема: необходимо применить стиль style_01 только в браузере Opera.
    Решение: для этого используем CSS хак следующего вида:

    PLAIN TEXT
    CSS:
    1. html:first-child .style_01{
    2.     margin: 0px 0px 0px 288px;
    3.         }

    ]]>     http://www.bontonweb.com/texnologii/html/primenit-stil-tolko-v-opera.html/feed 0     Layout #1. Резина. Три колонки (ширина в %) http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html#comments Thu, 13 Dec 2007 07:47:01 +0000 coder http://www.bontonweb.com/texnologii/html/layouts/33.html Layout #1
    Резина 100%. Ширина всех колонок в %.

    PLAIN TEXT
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    4. <title>Layout 1</title>
    5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    6. <style type="text/css">
    7. html, body {
    8.     margin:0;
    9.     padding:0
    10. }
    11. div#wrapper {
    12.     float:left;
    13.     width:100%
    14. }
    15. div#content {
    16.     margin: 0 25%
    17. }
    18. div#navigation {
    19.     float:left;
    20.     width:25%;
    21.     margin-left:-100%
    22. }
    23. div#extra {
    24.     float:left;
    25.     width:25%;
    26.     margin-left:-25%
    27. }
    28. div#footer {
    29.     clear:left;
    30.     width:100%
    31. }
    32. </style>
    33. </head>
    35. <div id="container">
    36.   <div id="header">
    37.     <h1>Header</h1>
    38.   </div>
    39.   <div id="wrapper">
    40.     <div id="content">
    41.     </div>
    42.   </div>
    43.   <div id="navigation">
    44.   </div>
    45.   <div id="extra">
    46.   </div>
    47.   <div id="footer">
    48.   </div>
    49. </div>
    50. </body>
    51. </html>

    ]]>     http://www.bontonweb.com/texnologii/html/layouts/layout-1-rezina-tri-kolonki-shirina-v.html/feed 0     Шаблоны разметки страниц. Вступление. http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html#comments Tue, 11 Dec 2007 13:57:46 +0000 coder http://www.bontonweb.com/layouts/shablony-razmetki-stranic-vstuplenie-2.html На этапе верстки сайта возникает проблема создания разметки которая должна соответствовать следующим требованиям:

    1. Валидность HTML
    2. Валидность CSS
    3. Кроссбраузерность.
    4. Отсутствие CSS-хаков.


    В сети есть множество библиотек с шаблонами лейаутов. Наиболее оптимальным на мой взгляд решением является галерея лейаутов http://blog.html.it/layoutgala/ .Эти лейауты выполнены с использованием отрицательный отступов и обеспечивают:

    1. Валидный HTML и CSS
    2. Совместимость с браузерами Internet Explorer/win 5.0, 5.5, 6, 7; Opera 8.5+, Firefox 1.5+, Safari 2.
    3. Семантический код.

    В общем виде разметка страницы имеет вид:

    PLAIN TEXT
    HTML:
    1. <div id="container">
    2.   <div id="header">Header</div>
    3.   <div id="wrapper">
    4.     <div id="content">Content</div>
    5.   </div>
    6.   <div id="navigation">Navigation</div>
    7.   <div id="extra">Extra stuff</div>
    8.   <div id="footer">Footer</div>
    9. </div>

    Я буду выкладывать исходные коды лейаутов, использованных мною при разработке сайтов и давать описания по кастомизации этих шаблонов.

    ]]>     http://www.bontonweb.com/texnologii/html/layouts/shablony-razmetki-stranic-vstuplenie-2.html/feed 0     Выпадающее меню. Качественная реализация. http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html#comments Wed, 21 Nov 2007 22:51:44 +0000 coder http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html При работе над проектами часто возникает необходимость создания выпадающего меню. Существует большое количество скриптов, реализующих этот функционал. Но при их практическом применении необходимо чтобы скрипт соответствовал следующим требованиям:

    1. Кроссбраузерность - корректная работа скрипта в необходимых браузерах.
    2. Правильное позиционирование меню при изменении разрешения экрана (особенно актуально при резиновой верстке).
    3. Стабильное поведение меню при наведении курсора.
    4. Простая смена оформления через редактирование CSS.
    5. Легкость добавления новых пунктов.
    6. Семантика (это сейчас модно).
    7. Простая настройка дополнительных параметров (временных задержек, дополнительных эффектов и т.д.)


    Я изучил большое количество скриптов выпадающего меню. Наиболее качественная и практичная реализация (на мой взгляд) представлена здесь . Очень просто интегрируется в верстку.
    Пример:

    PLAIN TEXT
    HTML:
    1. <p class="chromestyle" id="chromemenu">
    3.     <li><a href="http://www.dynamicdrive.com">Home</a></li>
    4.     <li><a href="#" rel="dropmenu1">Resources</a></li>
    5.     <li><a href="#" rel="dropmenu2">News</a></li>
    6. </ul>
    7. <!--1st drop down menu -->
    8.  
    9. <p id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    10. <a href="http://www.cssdrive.com">CSS Drive</a>
    11. <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    12.  
    13. <!--2nd drop down menu -->
    14.  
    15. <p id="dropmenu2" class="dropmenudiv" style="width: 150px"> <a href="http://www.cnn.com/">CNN</a>
    16. <a href="http://www.msnbc.com">MSNBC</a>
    17. <a href="http://news.bbc.co.uk">BBC News</a>
    18.  
    19. <script type="text/javascript">
    20. cssdropdown.startchrome("chromemenu")
    21. </script>

    Содержимое выпадающего меню находится в дивах div id="dropmenu1",id="dropmenu2". К конкретному пункту меню привязывается строкой rel="dropmenu1" (показывает div id="dropmenu1"). Настройку оформления производим в css файле. Также возможно настроить задержку сворачивания меню, подключить эффекты и анимацию.
    Этот скрипт использовал при верстке сайта http://mntk.rosenergoatom.ru/ и других проектах.

     

    ]]>     http://www.bontonweb.com/texnologii/html/vypadayushhee-menyu-kachestvennaya-realizaciya.html/feed 3