Метка «сайтостроение»

Следить в режиме реального времени за развитием событий в любой точке мира? Реально с помощью тематических лент социальных медиа. К грядущему «событию года» – Олимпиаде в Сочи — мы подготовили специальный виджет — фото, видео и текстовые сообщения пользователей из социальных сетей об Олимпийских играх в режиме реального времени в одной ленте.

Олимпийские виджеты для вашего сайта: прямая трансляция из соцмедиа

Лента содержит самый интересный, актуальный (real time) и популярный контент соцсетей – посты, фото, видео об Олимпиаде-2014. Делитесь с вашими посетителями самыми свежими и комментируемыми постами, будьте в курсе и болейте за наших!
Читать полностью »

Тема вроде бы уже избитая, но думаю лишним не будет напомнить себе и другим, об очень важной составляющей жизни любого IT-специалиста – оценке стоимости его работы.

Так сколько же стоит создание моего сайта? Этим вопросом задается каждый бизнесмен, который сталкивается с необходимостью запуска собственного сайта компании или его изменения. Современный рынок разработки настолько разношерстный, что зачастую возникает больше вопросов, чем существует ответов о том, почему один и тот же сайт может в разных компаниях стоить 20 000 рублей и с тем же успехом может стоить 1 000 000 рублей.
Читать полностью »

Реализация e mail оповещений в ImageCMS
В этой публикации мы расскажем о том, как среднестатистический ведущий программист ImageCMS Андрюша реализовал удобную систему e-mail-оповещений пользователей Интернет-магазина. Сам он теперь утверждает, что не программист, а фея.

В чем заключалась проблема до реализации нового функционала?
Немало огорчало, что отправка e-mail пользователям не имела централизованного места управления, ведь это создавало определенные неудобства администратору и наличие множества лишнего кода, который дублировался.
Смотрим-с:
Читать полностью »

imageМы не раз встречали жалобы на сложности от пользователей разных cms, возникающие в процессе обновления версий системы — и далеко не всегда трудности вызваны нехваткой опыта юзера. Парадоксально, но эти проблемы лишь усугубляются в случае с автоматическим апдейтом (если он вообще доступен). Хотя, по идее разработчиков, данный инструмент наоборот должен упрощать работу пользователей, отсеивая всю возможную мишуру этого процесса.
Попробуем разобраться в алгоритме установки свежей версии, он общий для большинства систем управления сайтами.

Запустили svsite.com — сервис для размещения сайтов из одной страницы. Очень удобно, когда нужно быстро поднять сайт или html5-приложение. Для сайтов-визиток — вообще идеальный вариант. Одностраничные сайты сейчас в тренде.

Что сейчас можно делать:

  • Редактировать исходный код сайта (html, css, javascript) с подсветкой синтаксиса.
  • Править содержание страницы с помощью WYSIWYG-редактора прямо на сайте. Чтобы редактировать текст на сайте, нужно поместить его в html-тег с любым id и css-классом sv. С тегом <img> такое тоже работает — появляется меню загрузки изображения.
  • Читать полностью »

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

7. Карта ума.

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

Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.

Для начала нужно взять несколько наших документов с идеями, которые мы сделали на прошлых этапах, их мы будем систематизировать. Все идеи необходимо разбить на глобальные блоки (разделы). Например, представим, что мы проектируем портал недвижимости, глобальными блоками которого могут быть: каталог недвижимости; сообщество; статьи-новости; база знаний и т.д. Все идеи мы должны распределить по этим глобальным блокам. Взаимоисключающие идеи объединяем или выбираем одну из них. По принципам мозгового штурма отбрасываем малополезные идеи, вернее оставляем до лучших времен. Общее количество блоков должно соответствовать будущим разделам сайта, у каждого из разделов могут быть подразделы. В идеале количество разделов не должно превышать 7-8 для большого портала, если мы проектируем, например, СМИ, там может быть много разделов, которые по сути отличаются только тематикой контента, но имеют одинаковое назначение, такие варианты тоже допустимы, но с ними нужно быть очень осторожным, важно, чтобы пользователь не запутался.

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

Сразу скажу, что статья получилось очень большая. В моем духе. Поэтому я решил разбить её на две части: аналитика и визуализация. А после еще будет несколько статей с логическим продолжением. Первая может показаться сухой из-за большого количества текста, но без неё не сможет существовать вторая. Поэтому, если вы действительно интересуетесь проектированием сайтов, читать нужно обе и внимательно, я постарался избавиться от «воды» и рассказать только о полезном.

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

Вступление

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

Прежде всего, давайте разберемся, кто именно должен заниматься проектированием сайтов. Существует особая специальность для этого вида работ, а соответствующий человек называется проектировщик. Я сознательно не употребляю модных понятий типа UI (UX), потому что в статье речь будет идти не только об интерфейсах. Данный специалист должен обладать хорошей логикой, аналитическим складом ума, иметь очень богатый пользовательский опыт, мыслить предпринимательскими (экономическими) масштабами, быть внимательным к деталям. Кроме этого, он должен хорошо разбираться в интерфейсах и юзабилити, технологиях веб-разработки, маркетинге и многих других сферах. В процессе работы проектировщик, конечно, может советоваться с разными экспертами: дизайнерами, верстальщиками, программистами и т.д., дабы спроектировать продукт наивысшего качества. Получился довольно широкий образ идеального проектировщика, однако «из песни слов не выкинуть».

Процесс проектирования

В методологии ниже я буду описывать теорию, и сразу практический пример результатов работы по конкретному этапу для одного из наших проектов.
Читать полностью »

Ниже представлены полезные ссылки и советы исходя из моего личного опыта. Старался указать только то что может быть новым для разработчиков, поэтому ресурсов типа FireBug и других общеизвестных в списке нет.

NounProject — лучшая и наибольшая коллекция SVG картинок

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

Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.

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

Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.
Особенность в том что можно разделять одно окно как вертикально так и горизонтально, то есть можно сделать во весь экран и поделить его на несколько частей разных размеров для использования для различных назначений.

Web developer — плагин для Firefox дающее множество возможностей.
Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.

ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.

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

DataUrl — генерирует код из изображения.

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

Spritebaker — кодирует CSS файл в Base64 что значительно уменьшает время загрузки.

Советую использовать когда CSS файл достаточно большой, 100 строк к примеру.

Pjax — плагин которой позволяет изменять содержимое страницы без ее перезагрузки.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js