дизайнер — это… Что такое Веб-дизайнер?
Пример веб-страницы, использующей CSS лейаутВеб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации, а так же занимаются художественным оформлением веб-проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.
В настоящее время услуги веб-дизайна предоставляют как специальные компании, так и частные лица (фрилансеры веб-дизайнеры или веб-мастеры).
Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет, растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров и таковым может работать человек, с совершенно не связанным с дизайном образованием.
Объяснение термина
В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств [1], а также кроссплатформенность [2] вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация. Таким образом визуальными средствами решаются самые разнообразные задачи, такие как, повышение продаж, укрепление доверия, создание определенного имиджа и другие.
Формулировка задачи веб-дизайна
Создание технического задания
Составлением технического задания для специалистов занимается менеджер проекта. Работа с заказчиком начинается с заполнения брифа, в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объем сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.
Этапы проектирования
- Дизайн основной и типовых страниц сайта
Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции).
При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект менеджером. Так же менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап так же заканчивается утверждением эскиза заказчиком.
Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых в последствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны.
В небольших студиях, html-кодированием занимается веб-дизайнер.
Далее html-кодер передает HTML-файлы программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS «движком».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS, должен заменить стандартный шаблон, поставлявшийся с CMS на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «вебдизайна».
При программировании сайта специалисту назначаются контрольные точки сроков.
- Завершающим этапом разработки сайта под ключ является конечно же тестирование.
Вебдизайн сайта должен адекватно выглядть в различных браузерах, особенно в браузерах IE 6 (Интернет-эксплорер) и Opera.
Упомянутый IE 6 слишком по-своему видит HTML стандарты — отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, создает много проблем для вебдизайнера, и его хотели чуть ли не объявить вне закона. Но поскольку он в стандартной поставке Windows XP, и стоит на более чем половине всех компьютеров, — никуда не дется, приходится в нем тестировать обязательно. Далее тестируется вид с увеличенными шрифтами, при отсутствующем флешь-плеере и тому подобное. Обнаруженные ошибки отправляются на исправление до тех пор пока не будут устранены.
Сроки контролирует менеджер проекта. Так же на этом этапе привлекают к работе дизайнера, чтобы он провел авторский надзор.
Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.
Сайт наполняют контентом — текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.
- Внутренняя SEO-оптимизация.
Связана с некоторыми изменениями самого сайта. Начинается она с определения т.н. семантического ядра (У SEОшников своя феня:)). Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, что бы поисковые системы могли их успешно находить по ключевым словам.
- Внешняя SEO-оптимизация.
Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма — она как магия, классифицируется на «белую» и «черную» -такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.
- Сдача проекта
Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Так же на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоны сайта.
Процесс и результат
Иногда дизайнер может предложить дизайн-решение на основе шаблонов (своих или даже чужих), это ускоряет работу и обойдется заказчику дешевле. Некоторые дизайнеры даже специализируются на изготовлении дизайн-макетов для продажи в качестве готовых шаблонов, которые затем могут быть куплены и использоваться менее опытными дизайнерами или веб-мастерами для изготовления типовых сайтов (по сути, без уникального дизайна).
Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.
Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop или другом визуальном редакторе, но для верстальщика изображение, как правило, переводится в растровый формат.
Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.
Примечания
Ссылки
Литература
- Якоб Нильсен Веб-дизайн. — СПб: Символ-Плюс, 2003. — 512 с. — ISBN 5-93286-004-9
- Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6
- Роббинс Д. Web-дизайн. Справочник.. — «КУДИЦ-ПРЕСС», 2008. — С. 816. — ISBN : 978-5-91136-039-9
- Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник.. — «КУДИЦ-ПРЕСС», 2007. — С. 320. — ISBN : 978-5-91136-024-5
См. также
Wikimedia Foundation. 2010.
К 20-летию Википедии планируется обновление дизайна для настольных ПК
- 23 Сентября 2020
- выбор редакции
- просмотров 987
Основные усилия сфокусированы на облегчении навигации по сайту и упрощении доступа к контенту — с применением принципов адаптивного дизайна (adaptive web design), когда шаблон подстраивается под параметры экрана. Среди новаций — перенастраиваемый логотип, фиксированная область заголовка при прокрутке страницы, сворачивающаяся боковая панель, ограничение ширины контента (снижение нагрузки на глаза), доступ к оглавлению вне зависимости от прокрутки страницы, выпадающее пользовательское меню, отдельное меню для переключения между языковыми версиями публикации, перемещаемая область поиска, аннотированные и иллюстрированные (превью) результаты поиска, а также некоторые другие идеи, которые изложены на специальной странице MediaWiki. Ольга Василева, ведущий продакт-менеджер Фонда ВикимедиаБудут ошибки, доработки и итерации.
Изменения будут внедряться постепенно. Обновление декстопной версии дизайна планируется завершить к 20-летию ресурса, в 2021 году.
Первые апдейты прошли в баскской, персидской, французской и ивритской Википедиях, а также во французском Викисловаре и португальском Викиверситете. Оценить разработку смогут зарегистрированные пользователи, если выберут последнюю версию темы для оформления ресурса «Вектор» (Vector).
Стоит напомнить, что предыдущие значительные изменения дизайна Свободной энциклопедии и дочерних проектов Викимедии произошли 10 лет назад. В конце 2008 года Викимедиа получила грант в размере $ 890 000 от Фонда Стентона (Stanton Foundation) — на проведение редизайна сайта. В 2009 году пользователям предлагалось попробовать его beta-версию. В 2010 году в блоге Викимедии появились посты о новой теме для оформления ресурса «Вектор». В марте 2010 года прошли первые изменения в англоязычной Википедии. В июне 2010 года стиль «Вектор» был активирован на страницах русской языковой версии.В настоящее время Википедия включает около 53 млн статей на более чем 300 языках.
Упомянутые персоны, псевдонимы и персонажи
Дизайн «Википедии» обновится впервые за десять лет
Почти двадцать лет интернет-энциклопедия «Википедия» остаётся важным ресурсом, помогающим получать знания людям по всему миру. В настоящее время она располагает примерно 53 млн статей на более чем 300 языках, и количество опубликованных материалов продолжает расти. В скором времени взаимодействовать с ресурсом станет проще, поскольку впервые за последние десять лет дизайн сервиса будет обновлён.
Некоммерческая организация «Фонд Викимедиа», являющаяся владельцем «Википедии», объявила о реализации многолетнего проекта, цель которого заключается в том, чтобы сделать ресурс более современным и удобным для пользователей. Веб-энциклопедию ждут серьёзные изменения, которые коснутся многих элементов интерфейса сервиса, в том числе боковой панели, оглавления и др. Ознакомиться с полным списком планируемых изменений можно на официальной странице проекта. Нововведения будут вводиться постепенно в течение длительного времени, поскольку разработчики намерены проводить широкое пользовательское тестирование всех грядущих изменений. Если всё пойдёт согласно первоначально плану, то новый дизайн «Википедии» станет доступен пользователям по всему миру к концу 2021 года, в котором интернет-энциклопедии исполнится 20 лет.
Не так давно первое изменение интерфейса «Википедии» появилось в версиях ресурса на некоторых языках. Речь идёт о возможности свернуть боковую панель, которая располагается в левой части рабочего пространства. Такой подход делает более удобным взаимодействие с контентом, а также помогает сосредоточиться на содержании статьи, независимо от того, читает ли её пользователь или редактирует. Ещё разработчики изменили максимальную ширину области, в которой излагается содержание статей, ограничив её. Утверждается, что ограниченная ширина строк помогает удерживать внимание на контенте, а также снижает нагрузку на глаза.
Это лишь первые изменения, которые стали доступны ограниченному числу пользователей. Впереди «Википедию» ждут другие изменения пользовательского интерфейса, которые станут общедоступными в следующем году.
Если вы заметили ошибку — выделите ее мышью и нажмите CTRL+ENTER.
Веб-версия «Википедии» получит обновление дизайна впервые за 10 лет
dennizn / DepositPhotos Интернет-энциклопедия «Википедия» получит ряд обновлений облика веб-версии, который не менялся в течение последних 10 лет
dennizn / DepositPhotos
Интернет-энциклопедия «Википедия» получит ряд обновлений облика веб-версии, который не менялся в течение последних 10 лет. Об этом сообщается в блоге некоммерческой организации Wikimedia Foundation, которая управляет «Википедией».
Планы редизайна веб-версии объяснили необходимостью сделать сайт более удобным для новых пользователей. На отдельной странице разработчики также продемонстрировали некоторые из запланированных изменений. В частности, в новом дизайне появится дополнительное меню разделов читаемой статьи, которое позволит не прокручивать страницу к началу для навигации между ними. Кроме того, разработчики откажутся от левой колонки с большим количеством ссылок, отвлекающих внимание. Возможность переключения между различным языками будет существенно упрощена.
Веб-версия «Википедии» получит новый дизайн. pic.twitter.com/ugZHNKF1io
— 12_white (@mikky_nn) September 24, 2020
В Wikimedia Foundation уточнили, что запланированные изменения будут внедряться постепенно, после тестирования. Ожидается, что редизайн веб-версии завершится к концу 2021 года.
4.4.7 Инструменты для создания веб-страниц
Рисунок 4-19. Вид HTML редактора (Microsoft Expression Web). Источник: http://expression.microsoft.com/en-us/dd450355
Для создания веб-страницы можно использовать различные инструменты от простых до самых сложных. Выбор инструментов зависит от того, кому и для какой цели создаётся сайт (сайты фирм создают профессиональные специалисты при помощи дорогих программ, сайт сделанный руками любителя создаётся при помощи простых инструментов). Простой программой может быть, например, текстовый редактор Notepad, к числу сложных принадлежат MS Expression Web и Adobe DreamWeaver.
Простые и дешёвые инструменты не всегда просто использовать. Для того чтобы создать веб-страницу при помощи Notepad, необходимо очень хорошо знать язык HTML, что при использовании Expression Web совершенно не обязательно. Тут необходимость использования языка HTML зависит от настроенного комплекта инструментов.
Программы, необходимые для разработки веб-сайтов, делятся на две категории: визуальные и невизуальные.
Визуальные редакторы называют также WYSIWYG-редакторами («What You See Is What You Get» — «Что ты видишь, то и получишь). При администрировании сайта проще и легче использовать визуальные программы, которые позволяют с веб-страницей в окне дизайна. Пользователь редактирует и оформляет текст, добавляет картинки, таблицы как в текстовом редакторе (например, Word) и программа сама создаёт HTML код. Веб-страница выглядит в браузере такой же, как и в окне программы, при помощи которой страница создавалась. Распространённые визуальные программы это DreamWeaver, MS Expression Web и SeaMonkey.
- Достоинства:
- просты в использовании
- не требуют знания HTML.
- Недостатки:
- не оптимизированный код, в результате которого увеличивается размер файла
- код страницы трудно редактировать
- отображение документа в разных браузерах может быть разным.
HTML был изначально предназначен для ручного написания кода и плохо поддаётся автоматизации. Поэтому ни один визуальный редактор не обеспечивает полного использования HTML и не гарантирует полностью корректного кода. Поэтому необходимо в конце каждую страницу редактировать вручную. При использовании невизуальных редакторов можно создавать оптимальный код, в котором можно избежать лишних конструкций и который позже просто редактировать. Для облегчения работы предусмотрено быстрая вставка тегов, выделение ключевых слов цветом, контроль полученного кода и ссылок. Невизуальные редакторы называются зачастую просто HTML-редакторами. Редакторами этого типа являются к примеру AceHTML, 1st Page, HotDog, Arachnophilia. В профессиональных программах, как правило, есть обе возможности — как визуальные, так и редактирование кода.
- Достоинства
- оптимальный код
- используются все возможности для редактирования
- использование подсвечивания синтаксиса, проверки корректности кода и ссылок
- многие редакторы доступны бесплатно.
- Недостатки
- необходимо знать HTML.
Сравнения различных редакторов доступны в Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors
Наконец-то удобная и красивая Wikipedia — Look At Me
Анализ «Википедии» сегодня. Мы выявляли сильные и слабые стороны. Сильных сторон у «Википедии» огромное множество. Из слабых — она не очень удобна в навигации, очень не удачная типографика, безличность, ввиду чего не всегда релевантный контент (скажем, если школьник ищет информацию по фотосинтезу, но получает огромную сложную научную статью на Wikipedia), сложность в работе с прочитанной информацией.
Создание User Cases. Мы посадили перед компьютерами несколько человек из целевой аудитории «Википедии», предложив им найти что-то из того, что им в данный момент нужно по учёбе или по работе (или просто что-то интересное). Записывали их действия, сравнивали их ожидания с тем, что они находили, фиксировали проблемы, с которыми они сталкивались, узнавали, для каких целей они используют сайт. Например, для меня стало неожиданностью, что более 60 % наших опрошенных используют «Википедию» как развлекательную страницу для занятия свободного времени. Поэтому наша стартовая страница выглядит сейчас так красочно, позволяет при помощи слайдера перемещаться по контенту во времени, есть сетка из Featured Articles. Текстовые страницы, напротив, выдержаны в строгом стиле, без отвлекающих элементов, с вниманием к типографике.
Генерация и сортировка идей. Пару раз мы встречались и просто сваливали в кучу свои идеи, призванные решить проблемы наших респондентов, придумывали функции, которые могли бы им помочь. Идей было много, мы их отсортировали по приоритетности. Реализованы были только совсем немногие.
Информационная архитектура. Далее мы несколько раз продумывали IA (Information Architecture) «Википедии» с целью привести навигацию в понятный и логичный вид. Параллельно с этим я начал рисовать Wireframes.
Wireframes. Вначале создавались эскизы от руки, нужно было найти оптимальную форму для идей, которые мы напридумывали. Потом, когда форма была найдена, эскизы были перенесены в Illustrator, чтобы определить, насколько реальны пропорции. Интернет бороздился на предмет вдохновения, создавались мудборды для того, чтобы определить look and feel будущей «Википедии» (Moodboards).
Дизайн. После того как Wireframes были утверждены, началась фаза дизайна. Очень большое внимание уделялось, конечно, типографике. Дизайн был наполнен реальными текстами и картинками из «Википедии», что являлось дополнительной проверкой на реализуемость.
Лендинг — wiki студи Клондайк
Лендинг — целевая страница (от англ. landing page) — веб-страница, спроектированная определенным образом. Одной из задач лендинга является сбор контактных данных целевой аудитории. Также лендинг используется для усиления эффективности интернет-рекламы и увеличения аудитории. Целевая страница обычно содержит информацию о каком-либо одном конкретном товаре или услуге. Переход на целевые страницы часто осуществляется из социальных сетей, email-рассылок и рекламных кампаний в различных поисковых системах. Главной задачей целевых страниц является конвертация посетителя в покупателя или клиента компании, побуждение к целевому действию. Анализ действий пользователей на целевой странице позволяет маркетологам определить успешность рекламы.
Типы лендингов
- Главный сайт
- В этом случае, в качестве целевой страницы используют одну или несколько страниц основного сайта. Однако, в дизайне основного сайта присутствует слишком много отвлекающих внимание элементов навигации, поэтому такой тип лендинга обладает достаточно низкой эффективностью. Но эта технология позволяет сочетать более высокую конверсию, по сравнению с обычной страницей сайта плюс удобность для SEO, такая же как и у обычного сайта.
- Автономный лендинг
- Самый популярный тип лендинга. Представляет собой полностью развернутое рекламное предложение. Главной задачей такой целевой страницы является побуждение пользователя к совершению действия прямо сейчас — покупка, подписка на новости или услуги компании, загрузка пробной версии программного обеспечения и т. д. Для усиления эффекта используются побуждающие и призывающие к действию слоганы, яркие и крупные кнопки, минималистичный дизайн, акценты на основных преимуществах предложения, таймеры обратного отсчета.
- Лендо-сайт
- Сайт целиком состоящий из автономных целевых страниц. Обладает очень высокой конверсией, но крайне не удобен для SEO оптимизации
- Микросайт
- Это отдельный сайт посвященный только рекламируемой услуге или товаре, состоящий из 3–5 страниц. Обычно такие микросайты содержат минимум текста. Упор сделан на большое количество красочных изображений товара или услуги, видео-ролики. Этот тип целевых страниц используется чаще всего крупными компаниями для рекламы своих отдельных проектов.
Виды лендингов
- Рекламный лендинг
- Тип целевых страниц, содержащий большое количество текстовой, видео, графической информации о товаре (или услуге). Подобные страницы работают за счет потерянности посетителя в мощном потоке информации. Покупка чаще всего происходит для оправдания пользователем усилий и времени, затраченных на сайте.
- Целевые лид-страницы
- Страницы, созданные для сбора информации о целевой аудитории товара или услуги. Используются при разработке маркетинговой стратегии для сокращения рисков в области продаж. На основе собранной о посетителе информации, маркетологи формируют предложение, ориентированное на конкретного потребителя. На лид-страницах обычно содержится краткая информация о предложении и простая форму опросника с минимальным количеством полей. Для мотивации посетителей лид-страницы к заполнению опросника служат призывы оставить свои данные в обмен на скидки и подарки от компании при совершении покупки товара или услуги.
- «Вирусные» лендинги
- На целевых страниц данного типа не содержится рекламы продукта в открытом виде. Чаще всего на странице ненавязчиво расположен логотип или слоган компании. «Вирусный» лендинг воспринимается как интерактивное развлечение или досуг. Такие целевые страницы активно распространяется пользователями через социальные сети, электронную почту, чаты и т. д. Реклама маскируется под интересную статью, видеоролик, картинку или игру. Постепенно привыкания к развлечению, представленному на такой странице, пользователь подсознательно проникается доверием к бренду.
Показатель эффективности лендинга называется конверсия. Это число которое показывает отношение количества пользователей, совершивших целевое действие (регистрацию, покупку и т. д.), к количеству посетителей целевой страницу и умноженное на 100%. Чем лучше спроектирована целевая страница, тем выше показатель конверсии.
Адаптивный веб-дизайн в масштабе Википедии — Diff
Фото Александра Бьюссе (Наттфодд), CC BY-SA 4.0.
В Википедии много контента, но часть его не читается на смартфонах из-за их маленьких экранов. В течение многих лет в нашем программном обеспечении был скрытый контент, несовместимый с мобильными дисплеями. Этот подход всегда нас беспокоил, потому что мы хотим, чтобы пользовательский контент был видимым. Наконец, мы нашли способ решить эту проблему: TemplateStyles, технологию, с помощью которой редакторы могут форматировать контент для мобильных презентаций.
Что было до TemplateStyles?
Брэд Йорш : Исторически существовало два способа стилизации контента на сайте MediaWiki, таком как Википедия: везде использовать встроенный CSS или добавлять его в глобальные файлы сайта, такие как MediaWiki: Common.css. Первый вариант проблематичен, потому что он означает, что вам нужно повторять эти стили каждый раз, когда вы хотите использовать их на разных страницах или даже на одной странице. Первое также является проблемой, потому что некоторые функции, такие как возможность указывать стили для разных размеров экрана, недоступны для встроенных стилей.Второй вариант проблематичен, потому что только администраторы вики могут редактировать эти глобальные файлы сайта, и CSS мог бы быстро вырасти до огромных размеров, если бы туда были добавлены все особые случаи.
Какую проблему решает TemplateStyles?
Брэд : Мы хотели, чтобы участники, не являющиеся администраторами, могли создавать повторно используемые таблицы стилей, которые могут быть включены в статьи только по мере необходимости, с возможностью указывать стили для устройств разного размера. Поскольку имеет смысл использовать это вместе с существующими шаблонами вики-текста MediaWiki, мы назвали его TemplateStyles .Это была одна из тех идей, которые какое-то время витали в воздухе, ожидая, пока у кого-нибудь появится время подхватить ее.
В начале 2016 года User: Coren подхватил идею в качестве волонтерского проекта. Корен создал первоначальный прототип программного обеспечения, но было выявлено несколько проблем безопасности, которые необходимо будет решить в будущем. У Корена, к сожалению, не было времени идти дальше. Команда Reading Infrastructure Фонда Викимедиа позже взяла его, чтобы завершить проект. В первой половине 2017 года Брэд Йорш написал основанную на стандартах библиотеку синтаксического анализатора и дезинфицирующего средства CSS для PHP для решения проблем безопасности и написал новую версию расширения TemplateStyles в сотрудничестве с Герго Тисой для его использования.
Герго Тиса : Это была самая большая часть работы. Это не только решило проблему безопасного CSS, созданного пользователями для Викимедиа, но и решило ее для всех, у кого есть PHP-сайт любого типа. Я думаю, что это единственный в своем роде — есть еще несколько синтаксических анализаторов CSS, написанных на PHP, но ни один из них не предназначен для работы с ненадежным вводом.
Кто будет использовать TemplateStyles?
Брэд : Основная аудитория — это редакторы сайтов MediaWiki, в частности те, кто создает шаблоны, требующие стилизации.Он также может найти хорошее применение для главных страниц и порталов вики.
Крис Кернер: Как упомянул Брэд, люди, которые поддерживают мета-шаблоны — например, те, которые касаются проблем со страницами ({{Статья для удаления}}, {{Hoax}} и т. Д.), Средств навигации и отображения данных в статье, например, климат данные или рейтинги — могли бы извлечь выгоду из использования TemplateStyles для повышения доступности их работы на нескольких устройствах. Существует много возможностей для использования шаблонов в вики-сайтах.
Каков был ответ на данный момент?
Крис: Пользователь: Нирмос, шведский Wikipedian, с которым мы работали, был впечатлен готовностью команды по производительности контролировать производительность во время работы.Они также подали задания и остались довольны командой (в частности, Брэдом и Герго) и их отзывчивостью. Nirmos внедряет TemplateStyles в шведской Википедии, что с точки зрения принятия — это здорово!
Как TemplateStyles помогают читателям и разработчикам шаблонов?
Brad: Авторы шаблонов и люди, склонные к дизайну, смогут легче стилизовать шаблоны и смогут создавать шаблоны, которые будут хорошо смотреться как на настольных компьютерах, так и на мобильных устройствах.Кроме того, копирование некоторых шаблонов (например, шаблонов окон сообщений английской Википедии) в другие вики может стать проще, поскольку тем, кто выполняет импорт, не нужно будет искать нужные фрагменты MediaWiki: Common.css для копирования вручную.
Читатели должны извлечь выгоду, так как авторы шаблонов смогут лучше адаптировать стили к различным устройствам.
Gergő: Я также хочу отметить, что это улучшит ремонтопригодность шаблонов. MediaWiki: изменения * .css сложно протестировать, потому что они загружаются как внешние таблицы стилей, кэшируются и не интегрированы с обычным процессом рендеринга страницы.Стили TemplateStyle включены в страницу и отображаются с помощью обычного механизма, благодаря чему стандартный набор инструментов редактирования (например, TemplateSandbox) работает. Кроме того, для редактора вики-текста не существует простого способа поддерживать встроенные стили. Страницы CSS могут иметь специальный редактор, который помогает редакторам с подсветкой синтаксиса, проверкой, вводом текста и т. Д.
- Что дальше?
Brad: Прямо сейчас он развернут на mediawiki.org, wikitech.wikimedia.org и в шведской Википедии.Далее следует развернуть его на других вики.
Крис / Адам: У вас хорошо получается писать CSS, который работает как на ноутбуках, так и на смартфонах? Хотите помочь облегчить чтение статей Википедии на смартфонах с помощью TemplateStyles? Отправьте задачу в Phabricator, программе отслеживания задач Викимедиа, с запросом на включение TemplateStyles.
- Хотите что-нибудь добавить?
Адам Басо: TemplateStyles помогает решить проблему размещения сложной информации на смартфонах.Но у нас все еще есть проблема с тяжелым HTML, который требует больших затрат на оборудование мобильных устройств (процессор, оперативную память и т. Д.). Даже если макет выглядит хорошо, HTML может оказаться излишним. В будущем мы хотели бы выяснить, как использовать TemplateStyles, чтобы уменьшить разметку HTML, фактически отправляемую на мобильные устройства, или, по крайней мере, минимизировать влияние оборудования на мобильные устройства. Для устройств с еще меньшей площадью, таких как смарт-часы и встраиваемые устройства, будет необходима технология, которая может автоматически изменять HTML в соответствии с ограниченным оборудованием и ожидаемым форматом.
———
Брэд Йорш, старший инженер-программист, платформа MediaWiki
Адам Басо, директор, инженерная система чтения
Крис Кернер, специалист по связям с общественностью
Герго Тиса, старший инженер-программист, инфраструктура чтения
Wikimedia Foundation
Уведомление об архиве: Это заархивированное сообщение с сайта blog.wikimedia.org, который действовал в соответствии с другими редакционными правилами и правилами содержания, чем Diff.
Википедиявпервые за десятилетие модернизирует интерфейс рабочего стола, чтобы сделать его «более гостеприимным»
Википедия представила предложения по изменению своего интерфейса, включая новые функции и макеты страниц, которые направлены на то, чтобы соответствовать ожиданиям современного Интернета. пользователей и сделать его страницы «более гостеприимными». Впервые за десять лет макет Викимедиа по умолчанию переработан, чтобы включить в него множество дополнений, привинченных за эти годы, но более продуманным образом, и в структуру страницы вносятся изменения, чтобы сделать ее более удобной для пользователя.В заявлении на MediaWiki платформа объясняет, что «веб-дизайн, а также ожидания читателей и редакторов претерпели изменения. Мы думаем, что пора взять некоторые из этих идей и привести их к стандартному опыту всех пользователей на всех вики-сайтах организованным и последовательным образом ».
«Наша цель состоит в том, чтобы сделать вики-сайты Викимедиа более приветливыми, повысить их полезность для читателей и сохранить полезность для существующих редакторов», — говорится в заявлении, в котором говорится, что команда будет измерять «рост доверия и положительных настроений» по отношению к сайтам.
Изменения включают реорганизацию ссылок навигации и интерфейса, которые, по его словам, в настоящее время организованы «бессистемно», включая перемещение панели поиска из менее очевидного выравнивания по правому краю в центральную часть заголовка. Также в заголовке логотип и словесный знак отображаются меньшего размера и в другом соотношении, взятом из квадратного формата на боковой панели в прямоугольный формат с логотипом на одной линии со словесным знаком. Заголовок также липкий и остается доступным во время прокрутки.
Также появилась новая складывающаяся боковая панель, которая делает страницу чище и менее насыщенной текстом, что улучшает читаемость. Это является частью миссии платформы по очистке интерфейса, которая, по ее словам, «отвлекает пользователей от того, за чем они пришли». Это даже доходит до того, что сравнивают редизайн с уборкой грязного гардероба с насмешливыми наглядными пособиями.
Дополнительные новые функции будут представлены в раскрывающемся меню в соответствии с заголовком статьи, что позволит пользователям легко переключать языки одним щелчком мыши на странице; более понятное раскрывающееся меню пользователя, оглавление для более удобной навигации по статьям и улучшенная функция поиска.
Команда читателей будет внедрять улучшения в течение следующих двух лет, с изменениями по умолчанию для всех статей и страниц с 2021 года.
Ранее в этом году некоммерческая организация Wikimedia Foundation, управляющая Википедией, объявила о своей работе. с международной студией дизайна и архитектуры Snøhetta в процессе ребрендинга, который будет задокументирован и распространен среди сообщества добровольцев.
Как создавать ссылки в Википедии
Википедия сегодня — один из самых авторитетных веб-сайтов, занимающий седьмое место в списке 500 лучших сайтов Alexa.Практически невозможно найти информационный поисковый запрос, не включивший Википедию где-нибудь в первой десятке результатов.
Однако создание ссылок в Википедии — нелегкая задача. Все изменения и дополнения к статьям подлежат строгой проверке специальной группой редакторов-добровольцев. Они очень серьезно относятся к своей работе по поддержанию целостности и качества Википедии, поэтому вы получите ссылку только в том случае, если у вас есть действительно ценный контент.
К счастью, есть несколько вещей, которые вы можете сделать, чтобы точно определить, где существуют лучшие возможности для построения ссылок в Википедии.
Позвоните по телефону 888-601-5359 , чтобы поговорить со стратегом о том, как WebFX может помочь вам в достижении ваших целей цифрового маркетинга, или продолжайте читать, чтобы узнать больше о том, как ваша компания может начать получать ссылки из Википедии.
Свяжитесь с нами!
Быстрый отказ от ответственности
Некоторые из вас, возможно, уже думают: «Но разве не все ссылки Википедии являются nofollow? В чем смысл?»
Однако ссылки nofollow могут быть такими же мощными, как ссылки dofollow, во многих отношениях.Если вы все еще настроены скептически, вы можете изучить множество литературы о nofollow и dofollow.
Но это не основная тема данной статьи.
Мертвые ссылки
Мертвые ссылки — это способ номер один для построения ссылок в Википедии. Сайт настолько большой, с таким количеством входящих и исходящих ссылок, что поддерживать все в актуальном состоянии практически невозможно.
Как и любой другой веб-сайт в Интернете, многие исходящие ссылки Википедии указывают на местоположения, которые больше не существуют, или на веб-сайты, которые полностью не функционируют.
Вы можете воспользоваться этими мертвыми ссылками, определив их местонахождение и разместив соответствующий контент на своем собственном веб-сайте, который можно заменить мертвой ссылкой.
Отличный способ убедиться, что созданный вами контент будет принят добровольными редакторами Википедии в качестве замещающего справочника, — это проверить, как выглядел исходный контент с помощью службы кэширования.
Это продемонстрирует исходное качество и оформление содержания, которое было сочтено достойным ссылки в Википедии, а затем вы сможете сравнить его со своим собственным содержанием, чтобы убедиться, что вы на правильном пути.
Информация, требующая цитирования
Подобно мертвым ссылкам, информация, требующая цитирования, — это точки, которые были добавлены в статьи Википедии без первоначального цитирования или источника ссылки.
Может быть сложнее добиться того, чтобы ваш контент был принят в качестве справочного материала для определенной части информации, потому что для прямого цитирования обычно используются авторитетные веб-сайты и исследования.
Доверие предприятий-партнеров
Их нацеленность на рентабельность инвестиций и врожденная способность передавать эту информацию так, как я понимаю, были недостающим звеном с другими цифровыми маркетинговыми фирмами, которые я использовал в прошлом.
Лия Пикард. ABWE
См. Тематическое исследованиеТем не менее, все же стоит продолжать предлагать свой контент в качестве справочного источника для страниц, нуждающихся в цитировании. Все, что нужно, — это несколько успехов, чтобы получить несколько мощных ссылок из Википедии!
Как найти мертвые ссылки и страницы, требующие цитирования
оптимизаторов поисковых систем находили эти возможности во множестве статей Википедии вручную, просматривая отдельные страницы или используя умные поисковые запросы.
К счастью, теперь есть инструмент, который значительно сокращает объем утомительной ручной работы.
WikiGrabber — это простой, бесплатный инструмент, который сканирует Википедию для поиска всех статей, связанных с заданным ключевым словом. Затем он компилирует все случаи мертвых ссылок и отсутствия цитирования в этих статьях. Вам представлен легко читаемый список, так что вы можете сразу приступить к рассмотрению каждой возможности.
Готовы улучшить свою стратегию цифрового маркетинга?
WebFX может помочь.У нас есть многолетний опыт оказания помощи нашим клиентам в улучшении их видимости в Интернете, привлечении большего числа клиентов и увеличении их доходов — и мы можем сделать то же самое для вас.
Как разместить ссылку
Теперь, когда у вас есть точно настроенный список возможностей WikiGrabber, вы можете приступить к созданию ссылок.
Сначала создайте (бесплатную) учетную запись в Википедии и ознакомьтесь с процессом редактирования. Хорошая идея — исправить несколько страниц, которые вам интересны, даже если вы не собираетесь использовать их для создания ссылок.
Вы сможете освоить передовые методы редактирования, и это будет сигналом команде редактирования, что вы заботитесь о помощи не только себе, но и проекту Wikipedia.org в целом.
После того, как вы освоитесь с процессом редактирования и рекомендациями, вернитесь к своим результатам WikiGrabber и начните проверять их по одному. Если предмет не имеет ничего общего с вашим бизнесом, пропустите эту статью и перейдите к следующей возможности.
Если вы обнаружите неработающую ссылку или упущенную возможность цитирования, имеющую отношение к вашей отрасли, вы можете:
- отправить ссылку на соответствующий контент, который уже существует на вашем веб-сайте
- создайте новый контент на своем веб-сайте, специально предназначенный для использования в качестве замены неработающей ссылки или в качестве авторитетного источника цитирования.
Затем расслабьтесь и дождитесь завершения процесса утверждения.Если ваш контент на законных основаниях приносит пользу статье, он, скорее всего, будет принят в качестве замены неработающей ссылки или в качестве источника цитирования. Если нет, вернитесь к доске для рисования, чтобы воспользоваться этой возможностью, или перейдите к следующей неработающей ссылке.
Вы готовы начать создание ссылок в Википедии?
Если проявить некоторую настойчивость, описанный выше процесс предоставит вам несколько ссылок на Википедию, прежде чем вы об этом узнаете.
Следует иметь в виду одну вещь: методы серой или черной шляпы, хотя и никогда не являются хорошей идеей, особенно неэффективны при построении ссылок с помощью Википедии.Редакторы-добровольцы умны и жестко обрушатся на любого, кто пытается сыграть в Википедию для личной выгоды.
Когда вы будете готовы предложить свой контент в качестве нового места назначения для мертвых ссылок или пропущенных цитат, сделайте паузу на минуту и спросите себя: «Это что-то, что способствует образовательному видению Википедии?» Если ответ будет чем-то другим, кроме громкого «да», ваше редактирование будет быстро отклонено.
Если вам нужна помощь профессионала в тонкостях построения ссылок в Википедии, мы будем рады помочь! В WebFX наша команда опытных интернет-маркетологов провела множество успешных кампаний по построению ссылок для наших клиентов.Мы точно знаем, что нужно для того, чтобы ваша компания получила ссылочный профиль, необходимый для успеха в поисковой игре. Свяжитесь с нами сегодня, чтобы получить дополнительную информацию!
Википедия впервые за 10 лет модернизирует рабочий стол
Википедия была неотъемлемой частью веб-культуры на протяжении почти двадцати лет, позволяя пользователям просматривать миллионы текстовых статей из краудсорсинговых энциклопедий со своих компьютеров, планшетов или телефонов. Теперь общий вид Википедии на рабочем столе впервые за десятилетие изменился, чтобы сделать сайт более доступным для новых пользователей.
Вы можете просмотреть все предлагаемые новые функции в этом сообщении MediaWiki, и есть несколько анимированных GIF-файлов, чтобы показать вам, как они могут выглядеть. Лично мне очень нравится, как выглядит новое оглавление. Я с любопытством читаю вики-страницы публичных деятелей, и это может значительно упростить пропуск определенных разделов страницы без необходимости прокручивать страницу вниз на моем компьютере.
Это упростит навигацию по более длинным страницам! Изображение: ВикипедияСкладная боковая панель будет первым изменением, которое будет выпущено; это позволит пользователям сворачивать меню в левой части каждой страницы, чтобы свести к минимуму отвлекающие факторы и ограничить нерелевантный контент и ссылки в левой части экрана, чтобы упростить фокусировку.На сайте также будет добавлена удобная кнопка для переключения языка страницы, которую вы читаете.
Википедия также добавит улучшения в инструмент поиска на сайте, чтобы упростить поиск других страниц, и изменит конфигурацию логотипа, чтобы уменьшить его на каждой странице Википедии.
Изображение: ВикипедияWikimedia Foundation, компания-учредитель сайта, объявила в своем блоге, что изменения будут происходить «постепенно в течение длительного периода времени», что позволит пользователям тестировать новые функции до их официального развертывания, но планирует полностью изменить дизайн. облик десктопной версии Википедии к концу 2021 года.При этом не сообщается, получит ли мобильная версия такой же редизайн.
принципов веб-дизайна — EduTech Wiki
Этот раздел статьи или является незавершенным. Он еще не содержит достаточно информации, чтобы считаться настоящей статьей. Другими словами, это краткая или недостаточная информация, требующая дополнений.
1 Введение
Принципы веб-дизайна — это общие правила дизайна веб-медиа, которые включают основные рекомендации по дизайну макетов и интерактивному дизайну.
2 Определение
Принципы дизайнаоснованы на таких разнообразных областях, как взаимодействие человека с компьютером, удобство использования и дизайн взаимодействия с пользователем, графический дизайн и типографика, теория цвета и процессы и модели дизайна. Они могут выступать в качестве общих правил или служить основой для разработки методологий проектирования.
3 Принципы веб-дизайна, ориентированного на пользователя
На основе выбранных дополнительных чтений ниже
- Видимость состояния системы — система должна позволять пользователям знать, где они находятся на сайте, в рамках взаимодействия или процесса,
- Соответствие между системой и реальным миром — система должна использовать язык, термины и рабочие процессы, основанные на действиях пользователей в реальном мире.
- Пользовательский контроль и свобода — позволяют пользователям прерывать или перезапускать взаимодействия.
- Предотвращение ошибок и обработка — когда ошибки все же возникают, помогите пользователям распознать, диагностировать и исправить ошибки
- Признание, а не отзыв
- Гибкость и эффективность использования — система адаптируется к возможностям пользователя (новичка и эксперта), которые со временем могут меняться.
- Эстетичный и минималистичный дизайн — используйте дизайн осмысленно, чтобы предоставить пользователям необходимую информацию, а не отвлекать или сбивать с толку излишней визуальной информацией.
- Предоставление справки и документации
- Полезность, эффективность, результативность — позволяет пользователям достичь своей цели в кратчайшие сроки
- Простота обучения и использования, распознавание, а не повторение — пользователи могут легко научиться использовать систему, не полагаясь только на запоминание процедур для достижения желаемых целей.
- Согласованность и стандарты — система использует ожидаемые и принятые стандарты и соглашения
4 Принципы графического дизайна
Примеры руководств для печати и Интернета.
4.1 «Принципы орнамента»
Принципы улучшения макета и дизайна страницы можно найти еще в 1905 году. Дж. Вуллискрофт Рхед изложил 9 руководящих принципов под названием Принципы орнамента (в Wolper, 2011), которым необходимо следовать для обеспечения успешного графического дизайна:
- Симметрия и баланс
- Пропорции и шаг
- Подчинение (иерархическое представление информации)
- Отдых
- Соответствие
- Радиация
- Контраст
- Повторение
- Unity
Мы считаем, что эти элементы данного руководства перекликаются с более современными принципами.
4.2 Принципы CRAP для графического дизайна
- Контрастность — Избегайте на странице просто похожих элементов. Если элементы не совпадают, сделайте их очень разными
- Повторение — Повторение визуальных элементов по всему произведению. Это развивает организацию и укрепляет единство.
- Выравнивание — Каждый элемент должен иметь некоторую визуальную связь с другим элементом на вашей странице.
- Близость — элементы, относящиеся друг к другу, должны быть сгруппированы близко друг к другу.
4.3 Принципы визуального дизайна
Из журнала Digital Web Magazine — Принципы дизайна
- Остаток
- Ритм
- Пропорции
- Доминирование
- Unity
4.4 Ссылки для дальнейшего чтения
4.4.1 Принципы
4.4.2 Ошибки, которых следует избегать
5 Ссылки
Эта статья или раздел в разработке
В принципе, кто-то над этим работает, и в не столь отдаленном будущем должна быть версия получше.
Если вы хотите изменить эту страницу, обсудите это с человеком, работающим над ней (см. «Историю»).
Wikipedia получит первый существенный редизайн своего веб-сайта за десятилетие
Впервые за 10 лет один из наиболее широко используемых веб-сайтов ресурсов будет существенно обновлен.
«В то время как содержание Википедии стремительно растет, наш интерфейс не успевает за ними», — написала Ольга Васильева, менеджер проекта Фонда Викимедиа, в сообщении в блоге, объявляющем об изменениях.«Дизайн настольной Википедии [не] … не претерпел каких-либо существенных изменений за последние 10 лет, в результате чего некоторые элементы навигации сайта кажутся неуклюжими и подавляющими», — сказала Василева.
С момента запуска в 2001 году онлайн-энциклопедия опубликовала более 50 миллионов статей и доступна почти на 300 языках. Записи создаются, редактируются и обновляются волонтерами, а хостинг веб-сайта осуществляется некоммерческой организацией Wikimedia Foundation.
Сайт заявляет, что его «основная цель — создавать, изучать и курировать контент», и с учетом этого обещает упростить навигацию, стремясь «создать более гостеприимный опыт для всех, кто приходит на наши проекты.»
Среди изменений, которые могут ожидать пользователи:
- Перенастроенный логотип
- Улучшенные функции поиска
- Складывающаяся боковая панель
- и упрощенное переключение языков
Сайт описывает свой редизайн как многолетний проект, ориентированный на настольный интерфейс с общей целью создания «опыта, который будет похож на наших давних пользователей, но при этом простой и интуитивно понятный для новичков». Приглашая пользователей на обратную связь, Википедия признала, что процесс обновления одного из самых надежных в Интернете — на устаревших веб-сайтах будет долгим и сложным, и предупрежденные пользователи должны ожидать «ошибок, корректировок и итераций.
Хотя Википедия может похвастаться желанием создать новый сайт, достаточно современный, чтобы обслуживать новых пользователей, страница будет стараться оставаться в основном верной своей истории происхождения, развиваясь «таким образом, чтобы конечный продукт бесспорно выглядел и похоже на проект Викимедиа », — написала Василева.
Ранние изменения были развернуты через проекты первых пользователей, включая французскую, иврит и португальскую версии продукта, при этом сайт надеется, что улучшения появятся по умолчанию на всех страницах Википедии в 2021 г.
Почему Википедия не обновляет пользовательский интерфейс своего веб-сайта
Почему Википедия не обновляет пользовательский интерфейс своего веб-сайтаСеть обмена стеков
Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.
Посетить Stack Exchange- 0
- +0
- Авторизоваться Зарегистрироваться
User Experience Stack Exchange — это сайт вопросов и ответов для исследователей и экспертов в области пользовательского опыта.Регистрация займет всего минуту.
Зарегистрируйтесь, чтобы присоединиться к этому сообществуКто угодно может задать вопрос
Кто угодно может ответить
Лучшие ответы голосуются и поднимаются наверх
Спросил
Просмотрено 1к раз
Закрыт .Этот вопрос основан на мнении. В настоящее время он не принимает ответы.Хотите улучшить этот вопрос? Обновите вопрос, чтобы на него можно было ответить с помощью фактов и цитат, отредактировав это сообщение.
Закрыт 4 года назад.
С тех пор, как я начал пользоваться Википедией, еще в 2007 году, я не думаю, что когда-либо видел существенное (или незначительное) изменение внешнего вида их сайта.
Почему бы им не обновить свой стиль до более современного? Это не обязательно выглядит плохо, это просто снимок 2000 веб-сайтов.
Тим Грант3,78211 золотых знаков1616 серебряных знаков3131 бронзовый знак
Создан 07 янв.
матеосматеос15377 бронзовых знаков
2 User Experience Stack Exchange лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
.