Создание веб – Создание веб-сайта. Курс молодого бойца / Habr

Веб-разработка – с чего начать? / Habr

Бекэнд

Языков программирования тут множество, вот самые распространенные из них:

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

Сервер во многом используется для работы с данными. Поэтому нужно будет выучить как минимум бы одну из реляционных баз данных:

• Oracle
• MSSQL
• MYSQL
• Postgres

По сложности это примерно тоже, что и освоить язык программирования. Во всех перечисленных БД есть часть, которая одинакова везде – так называемый sql (язык запросов), а так же процедурный язык который в каждой базе свой. Так как sql все-таки един, а он основа всему, что связано с обработкой данных, то переход на другую базу данных, не является такой уж и проблемой. Поэтому выбрать для начала можно любую, но и тут бы я пошел по принципу анализа вакансий.

Лично я ставлю плюс в сторону изучения бекенда, так как навыки тут более статичны и изучив, что-то единожды вы сможете проработать на этом длительное время.

Фронтэнд

JavaScript на текущий момент времени имеет два стандарта, которые широко используются: ECMAScript 5 и ECMAScript 6. Разница между ними состоит в том, что в ECMAScript 5 отсутствует полноценное ОПП. В ECMAScript 6 оно есть, но поскольку этот стандарт появился относительно недавно, уже большая часть приложений написана на ECMAScript 5, в результате чего нужно будет освоить оба стандарта и как следствие два разных подхода к разработке.

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

Описанные мною проблемные моменты решены в современных js фреймворках (например в таких как ангуляр и реакт). Но в проектах, которые написаны без использования фреймворков эти моменты остаются.

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

Фулстек

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

habr.com

Этапы разработки веб-проекта: сайт и приложение

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

Индивидуальность с опорой на шаблон

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

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

Посоветуйся с заказчиком: определение задач

Как правило, веб-разработчик выполняет разработку не для себя и своего бизнеса, а по заказу. Потому важно понимать, какого результата от него ожидают. Как правило, предприниматель, которому нужен веб-продукт, уже давно нарисовал его у себя в воображении (или даже сделал текстовые и графические наброски). Потому стоит выяснить, чего именно он хочет.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

В то же время, бывают ситуации, когда девелопер получает полную свободу действий и творчества, если заказчик полностью полагается на его знания и опыт. Как правило, это более тяжелый вариант: трудно угодить, получив такое задание. В ваших интересах «выудить» всю информацию, которая может быть полезна. Переделывать всегда трудно. Важнее всего узнать целевую аудиторию, для которой предназначено приложение. Тогда можно сразу определить, насколько простым должен быть дизайн, какие эмоциональные триггеры использовать. Разумным будет узнать об аналогичных проектах конкурентов и о том, какие приемы используют они.

После уточнения задания нужно посчитать, сколько материальных, временных и человеческих ресурсов потребует проект. Уместно будет установить бюджет, график работ и дедлайны, а также заняться подбором нужных специалистов — команды. Рассмотрев детально все камни преткновения, необходимо создать план и утвердить его вместе с заказчиком.

Как подать материал пользователю?

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

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

покажите роботу. Если вашу страницу не найдет поисковая система, то и пользователи не переходят по ней. Потому, важно создавать продукт, максимально видимый для кроулеров. Если структура будет сложной, а путь к основной информации извилистым, то ИИ от Google посчитает сайт плохим. Пусть даже контент и дизайн будут на высшем уровне;

вложенность, как основа популярности. Для того чтобы сайт был легким в продвижении, главная информация должна быть на первом месте. Если же для перехода к основным данным нужно будет больше одного клика, продвинуть такой проект на первые позиции поиска будет весьма трудно.

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

Этап чистого творчества

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

Как правило, девелопер работает в одном из профессиональных графических редакторов, например, Adobe Photoshop. Он позволяет создавать на высоком уровне все необходимые составляющие финального UI. Разнообразие графических и декоративных элементов ограничено лишь фантазией автора и требованиями заказчика.

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

Пора верстать!

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

Верстка — это превращение рисунка будущего сайта в код, понятный браузерам — HTML/CSS. Она требует специальных знаний и понимания современных тенденций процесса. Например, сегодня никто не верстает так, как это делали пятнадцать лет назад. Разнообразие девайсов заставляет создавать адаптивный дизайн, который одинаково хорошо отображается на разных устройствах. Это дополнительная задача для верстальщика, ведь он должен учитывать множество аспектов, таких как минимальная/максимальная ширина, пользовательские шрифты, плагины воспроизведения и прочие.

Программирование — и сайты «оживают»

Даже обычный лэндинг будет выглядеть невзрачно в 2018 году, если сделать его статическим. При таком подходе вам никогда не стать девелопером, который выполняет дорогие заказы известных компаний. А делать обычные странички сейчас умеют даже новички, настолько это тривиальная вещь. Статические сайты — это просто страницы, размещенные на сервере, которые полностью загружаются при запросе браузера. Они имеют свои преимущества: не требуют много ресурсов, быстро загружаются, а их разработка не отбирает много средств у заказчика.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Сценарий поведения сайта на машине пользователя зависит от скриптов, выполняемых на машине пользователя и на серверной стороне. В первом случае, используются JavaScript технологии, а во втором, один из «серверных» языков. Такая страница реагирует на различные факторы: дата, время, поведение пользователя, различные события. Например, изменение логотипа Google и автоматический выбор языка интерфейса, являются ярким примером динамически построенного сайта.

Но такой подход не всегда разумен. Такие страницы требуют значительной производительности: как на клиентской стороне, так и на бэкенде. Для полноценной загрузки сайта нужно быстрое соединение с Интернетом, как и современный браузер на девайсе. Потому, не стоит создавать что-то сложное и «тяжелое» для простых целей.

Управление контентом

…производится с помощью специального программного обеспечения — CMS, или Content Management System. Это программы, на которые «натягивают» сайты, чтобы обеспечить быстрое размещение статей, рисунков и видеозаписей. Их разнообразие впечатляет: от сложных систем, то решений для новичка.

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

Например, всем известный WordPress позволяет работать даже тем, кто недавно освоил работу с компьютером. В то же время, программа способна выполнять весьма сложные задачи, которые требуют определенной компетентности. К недостаткам WP, как правило, относят его увесистость. Из-за этого, программа часто тормозит на пользовательских машинах. Но все баги, как правило, быстро исправляются, ведь новые версии выходят регулярно. Последняя, под названием Типтон, вышла чуть меньше года назад.

Более «легковесным» вариантом является CMS Joomla, которую значительно легче освоить. Но и на нее ругаются: низкую функциональность можно исправить лишь бесконечным добавлением плагинов, что неудобно для разработки и создает захламленность компьютера.

Альтернатив очень много, но их обзор — тем для отдельной статьи.

Работа с версиями

Программирование — долгий процесс, для которого нормально ошибаться и исправлять. Но если делать это непосредственно в текстовом редакторе или IDE, то можно быстро потерять основное направление и не узнать причин «лага». Однако, если постоянно создавать версии приложения или сайта, можно продолжить разработку с любого места.

Самой популярным софтом для управления версиями в веб-разработке, является программа Git. Ее преимущества трудно описать в масштабах одного раздела статьи, но опыт девелоперов по всему миру — яркое подтверждение качества.

Время старта

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

Например, нужно обеспечить защиту сайта от атак (вы же сделали хороший продукт — кто-то захочет его разрушить ). Самым известным способом атаки является произвольный запрос злоумышленника в СУБД. Такой способ получил название SQL-инъекция и, несмотря на возраст, до сих пор активно используется.

С помощью такой манипуляции, хакер может изменять, удалять жизненно важную информацию, а также получить больше несанкционированных прав. Для юзеров это может означать потерю контроля над своими аккаунтами и даже финансовые потери. Разработчики продолжают работу на web-продуктом и после финальных стадий девелопмента. Это не всегда та же команда, что и создала сайт/приложение: чаще, это специалисты по безопасности.

Поисковая оптимизация

Теперь пришло время наполнять сайт контентом. Это уже может сделать владелец сайта, или контент-менеджер, отвечающий за данный этап. Но наполнить продукт простым текстом — не лучшая идея. Пришла пора посоревноваться за первое место в результатах поиска.

Этот процесс называется SEO-оптимизацией и включает:

семантическую составляющую. Ключевые слова на сайте, правильность оформления;

внешние факторы: то, насколько страница посещаема, и как часто пользователи сети делятся ссылками на представленный там контент.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

webformyself.com

Проектирование и разработка веб структуры сайтов и приложений: основные правила

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

Приложение и сайт: есть ли разница в структуре

Многие продвинутые пользователи сети до сих пор не могут определить, чем отличается приложение от сайта. Наверное, это один из самых распространенных запросов относительно веб-разработки, которые вбивают юзеры. И правда, разница размыта настолько, что даже сам создатель перед проектированием не всегда знает, что он будет разрабатывать. Самый распространённый ответ: это почти одно и тоже. Только сайт не всегда приложение, а приложение всегда сайт. Если вы знакомы с кругами Эйлера, то такой рисунок сможет вам немного прояснить ситуацию.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

По сути, с веб-приложением все так же. Но, проектируя приложение, нельзя забывать, что оно должно выполнять и определенные бизнес-функции. Например, покупка цветов, заказ услуг и прочее. Для приложения характерна динамика — страница в браузере изменяется соответственно с личностью пользователя и его поведенческими реакциями. Для этого нужно правильно обустроить архитектуру системы «вопрос-ответ», которая и будет частью web-структуры, о которой поговорим сегодня.

Но динамический веб-сайт — норма для нашего времени. «Статика» используется лишь на сайтах-визитках, но даже их пытаются украсить динамическими элементами. Конечно, если есть динамика, построенная на HTML-файлах, которые ссылаются друг на друга, это можно называть «чистым» сайтом. Но в целом, если говорить о современной web-структуре, настоящей разницы между сайтом и приложением просто не существует.

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

Многогранная структура

Итак, определились, что для приложения и сайта будем описывать одинаковую web-структуру. Более правильно для восприятия можно сказать, что та архитектура, которая применима для приложения, подходит для описания сайта. Но нельзя сказать, что web-структура состоит из одного только SEO наполнения. Потому рассмотрим весь сайт полностью, включая основные его компоненты.

Все, из чего состоит сайт

…или приложение, если так удобнее. Несмотря на то, что подходы в разработке совершенно разные, как и инструменты, которыми пользуется создатель, можно выделить три основных элемента при проектировании:

клиентская часть, или фронтенд. Сюда входит и GUI для пользователя, и весь интерактив страницы. Как правило, с него начинается создание проекта, его концепт. Сначала автор видит у себя в голове внешность сайта и то, что он будет выполнять. Тем более, что для визиток разработкой фронтенда может закончиться создание страницы;

бэкенд, или серверная сторона. По сути, это программное обеспечение для сайта, которое расположено на сервере и выполняет функцию ответа на запрос. Допустим, вы играете на сайте в игру: своими действиями пользователи отправляют запросы, которые обрабатываются на игровом сервере. После обработки программа генерирует скрипт для кода, который получит каждый игрок в виде результата или дальнейшего этапа игры;

система управления базой данных. Это компонент web-структуры, который хранит всю необходимую информацию для работы приложения. Новичкам сложно понять, для чего он нужен: можно ведь просто создать папку с нужными файлами и ссылаться на них в коде. Но если бы такой подход использовали при создании ВКонтакте, вы бы увидели этот сайт примерно в 2028 году. К тому же, работал бы он медленно и не всегда корректно. СУБД позволяет не только оперативно работать с готовыми данными, но и постоянно пополнять базу. Наиболее популярными СУБД являются MySQL и MariaDB.

Все эти элементы взаимодействуют между собой при работе веб-приложения. Пользователь при помощи браузера взаимодействует с сервером. Браузер, получив данные от юзера, отправляет соответствующий запрос на сервер. Сервер запрашивает соответствующую программу, которая решает, как поступать с данным запросом. Если ей нужно дать информативный ответ, она вызывает СУБД и получает его. Имея достаточное количество данных, серверная программа генерирует HTML-код и отправляет браузеру для отображения на пользовательском девайсе.

Для каждой из сторон этого процесса характерны свои языки программирования. Для фронтенда это формальные HTML/CSS + JavaScript. Для серверной части все гораздо разнообразнее. По сути, на «бэке» можно использовать любой из языков общего назначения, но, как правило, это PHP, Java, Python, Ruby и С-подобные PL.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Семантическая структура

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

Семантическая структура — единственный из элементов, вид которого нужно подбирать согласно тому, какое предназначение имеет сайт или приложение. К примеру, web-структура интернет-магазина и блога — радикально разные вещи.

Самым простым примером логической структуры является линейная. Все понятно, как 2х2: одна страница ссылается на следующую и так далее, словно книга. Но такой подход не совсем то, что представляет человек под веб-сайтом. Работать с такой структурой не очень удобно, потому вы, возможно, никогда таких страниц и не видели. Они создаются для нужд компании или предпринимателя: для презентаций, портфолио, каталогов и прочего. Существуют и линейные структуры с ответвлениями. Но и это не лучший вариант: для того же портфолио с изюминкой . К таким же трудночитаемым структурам относят и блочную, где все страницы зациклены вокруг равнозначных им в плане родства с главной.

Наиболее распространенной является древовидная структура. Видели генеалогическое древо? Схема точно такая же, только «родитель» один — главная страница. Здесь все подразделы логически распределены. Такое проектирование наиболее предпочтительно для всех веб-проектов. Даже если у вас простая визитка и несколько ссылок в меню — лучше создавать ее на основе «дерева». Например, у вас сайт тату-салона. Логично будет поделить блоки на мастеров, им дать ссылки на эскизы и работы, а остальные ветки распределить на ценовую политику и отзывы на работу.

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

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

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

Файлы в системе

Это та часть web-структуры, над оптимизацией которой трудятся программисты. Не то, чтобы это был критический момент, но когда над продуктом работает не один создатель, то файловая структура определяет львиную долю скорости разработки. При ее проектировании нужно учитывать потребности каждого специалиста, который участвует в разработке.

Как вы уже понимаете, здесь находятся различные мультимедийные файлы, которые будет отображать сайт, а также все остальные документы, с которых он состоит. Здесь и HTML/CSS разметка, и клиентские сценарии, с которыми взаимодействуют пользователи.

На самом деле, не существует универсального совета по созданию толковой структуры для сайта. Но некоторым принципам все же нужно следовать. Для начала необходимо распределить данные по категориям. Не стоит хранить музыкальное оформление, иллюстрации и видеоролики в «корне» вместе с index.html. Будет намного лучше, если для каждого вида данных вы создадите отдельную папку. Еще лучше, если внутри таких папок вы создадите еще и подвиды.

При проектировании приложения становится понятно, что все изображения нельзя хранить в одном месте. Некоторые из них вы будете использовать при создании «каркаса» продукта. Сюда входят фоновые изображения, логотип, «менюшки», если они нарисованы, и прочее. Также будут и «контентные» изображения. К примеру, для оформления статьи — фотографии создателя и прочие иллюстрации.

Толковая web-структура отличается также и тем, что имена папок и файлов в ней несут смысловую нагрузку. Ни к чему называть каталог «one» и помнить его содержание. Если есть возможность разгрузить голову — сделайте это. Тем более, если после вас с проектом будет работать другой разработчик. Ему безымянное проектирование доставит немало хлопот. Также стремитесь называть все английскими словами. Русскоязычный человек без труда поймет, что находится в папке predriyatiye. Но для иностранца это будет бессмысленный набор символов, который он не сможет перевести без посторонней помощи.

Структурный помощник

Для человека, который никогда не работал с web-структурой, ее написание кажется непосильным логическим трудом, особенно если есть трудности с объектным мышлением. Но, как уже говорилось в одной из наших статей, выдумка велосипеда — порок веб-разработчика. Если что-то уже написано до вас — лучше использовать это решение (совершенствуйте его!).

К примеру, вы создаете приложение и знаете, что у конкурента оно уже есть и хорошо работает. Подсмотрите структуру у него! Для таких целей существует специальное ПО, которое скачивает сайт со всеми его элементами. Примером такой программы может служить Teleport Pro для Windows, которая успела себя хорошо зарекомендовать. От аналогов ее отличает корректность скачивания и высокая скорость. Так что некогда придуманную структуру можно рассмотреть и применить для своего кейса.

На этом заканчиваем нашу статью о создании web-структуры. Помните, что правильно структурированный сайт убивает сразу двух зайцев: его легче продвигать и просматривать. Поисковик хорошо индексирует страницы, если они находятся в четкой иерархии. Ну, а если вы, отбросив бритву Оккама, сделаете все сложным, Google просто проигнорирует сайт. Точно так же поступит и пользователь: зачем ему ходить по неудобным страницам, если он может чувствовать себя комфортно на сайте у конкурента? Создавайте простые и удобные продукты!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

webformyself.com

8 шагов к созданию собственного сайта / Habr

Идея

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

Полезные статьи:

Контент

Контент — основа вашего сайта. Будь это авторские статьи или пользовательские статьи — пользователь в первую очередь приходит за информацией, и мы должны в приятной форме её преподнести.

Полезные статьи:

Интерфейс

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

Полезные статьи:

Дизайн

Идеальным будет вариант, если у вас есть знакомый дизайнер, с которым вы договоритесь за небольшое вознаграждение оформить макет с учетом ваших пожеланий.
Если у вас нет друзей дизайнеров, но есть желание и время для создания своего дизайна — рекомендую статью «Используем Adobe Illustrator для создания макета страницы»

Вёрстка

О идеальной вёрстке можно говорить бесконечно, напишу о том, с чем я чаще всего сталкиваюсь:
Кроссбраузерность
Обычно я проверяю, как отображается наш сайт в последних сборках Firefox, Opera, IE, Chrome (если вы ориентируетесь только на русскую аудиторию — актуальная статистика по браузерам для рунета). Затем используя multi IE, проверяю как сайт выглядит в версиях до 6 включительно (В 6 версии устраняю только проблемы, из за которых сайт нереально прочитать). После запуска проекта удобно использовать сервис http://browsershots.org/

Полезные статьи:

Первая версия

Закрытая среда разработки
При разработке сайта на локальной машине в первую очередь я беспокоюсь о том, что бы исходники не утекли в сеть раньше времени. Даже если ваш сайт доступен только в локальной сети (например по адресу 192.168.1.100), закройте доступ извне. Также я до запуска сайта не устанавливаю счётчики и отключаю в браузере режим «слежения» — например в Google Chrome.
Имея сверстанный шаблон и контент, которую мы собираемся разместить на сайте, самое время проявить наши таланты в web-программировании на вашем любимом языке.
К этому моменту вы должны определится, какую базу данных вы будете использовать, или хранить всё в файлах.
Для своих сайтов я всегда использую MySQL, которая с большей долей вероятности уже установлена на дешевых хостингах, желательно что бы вы уже представляли какие таблицы в базе данных у вас будут.
Если у вас уже есть избранная CMS или Framework, не составит проблем адаптировать html шаблон и приступить к написанию необходимых модулей. Если вы делаете сайт с нуля, и при этом у вас нет наработок прошлых проектов — делаем выбор, будем изучать CMS/Framework или писать свой велосипед, учась на своих ошибках.
Не стоит проводить преждевременную оптимизацию кода (конечно, если у вас уже сейчас код страницы генерируется 5+ секунд, стоит задуматься), лучше займитесь оптимизацией изображений.
Немаловажно определится с кодировкой, в настоящий момент UTF-8 становится стандартом де-факто, так что подумайте перед тем, как выбрать windows-1251, что бы потом не было проблем с переходом.

Полезные статьи:

Запуск

Перед непосредственно загрузкой файлов я проверяю сайт на битые ссылки и закрываю от индексации необходимые разделы.
Стоит позаботиться о переносе файлов и структуры базы данных MySQL на боевой сервер и не накосячить. Прежде чем удалять заглушку, необходимо удостоверится, что загруженная конфигурация корректно работает.
Обратите внимание на конфигурацию, которую вы используете на боевом сервере. Вывод ошибок и отладочной информации может дорого стоить, особенно если ошибку сперва проиндексирует поисковый робот.

Полезные статьи:

Поддержка

Сайт работает на своём собственном домене, и в вашем распоряжении 2 идентичных версии сайта — на боевом сервере и на локальной машине. Этого достаточно для перехода к следующему логичному шагу.
Для себя я создал три инструмента, которые создают комфортные условия при синхронизации

• серверных скриптов (в моём случае PHP)
• статики (javascript, css, изображения)
• таблиц в базе данных (в моём случае MySQL).

Полезные статьи:

UPD: Уверен, большинство опытных хабраюзеров не узнают ничего нового, но хабр читают и начинающие вебмастера.

UPD(2): Обновил некоторые устаревшие ссылки на материалы.

habr.com

Создание универсальных веб-приложений при помощи Web App Template / Microsoft corporate blog / Habr

Сегодня мы с вами будем знакомиться с инструментом для создания веб-приложений для Windows и Windows Phone – Web Application Template.

В этой статье мы с вами разберемся, что такое веб-приложения и зачем они нужны, а также посмотрим, как Web Application Template может помочь вам при создании веб-приложений.

Зачем нужны веб-приложения, если есть веб-сайты

Попытки использовать веб-стек для разработки приложений имеют уже давнюю историю: вспомнить хотя бы HTA для Windows. Аналогично время от времени предпринимаются и попытки «превратить» сайты в приложения, причем не только с точки зрения внутреннего наполнения (к примеру, outlook.com – это фактически почтовое приложение, а веб-версия Microsoft Office действительно позволяет редактировать и просматривать офисные документы), но и с точки зрения интеграции таких сайтов в операционную систему под видом приложений (тут достаточно вспомнить идею закрепленных сайтов в Internet Explorer, хотя это не единственный заход к этой идее в индустрии). С развитием магазинов приложений эти идеи приобретают новые черты, как маркетингового характера (а что, если мы будем распространять сайт через магазин приложений), так и технического, особенно в случае платформ без нативной поддержки HTML/JS (обычно решается через WebView или аналоги и обвязки над ними).

Сегодня за стремлением превратить веб-сайт в (нативное) веб-приложение стоит множество возможностей по расширению взаимодействия с людьми по ту сторону сенсорных экранчиков:

1. (Контролируемый) доступ к различным функциям устройства и операционной системы, которые обычно спрятаны за песочницой браузера, не имеют еще аналога в виде соответствующего веб-стандарта или просто не поддерживаются браузером посетителя сайта. Например, вы можете получить доступ к адресной книге пользователя или камере.
2. Веб-сайту, как правило, нужен постоянный доступ к интернету (удобство использования AppCache – это тема для отдельного разговора). В случае приложения, разработчику доступна гибкая настройка работы приложения в оффлайн режиме – можно заранее закэшировать необходимые ресурсы, в том числе в фоне.
3. Вы можете интегрировать в веб-приложение элементы управления системы, под которую вы делаете приложение, мимикрируя таким образом под привычное окружение.
4. Еще один плюс в копилку веб-приложений – поддержка push-уведомлений. Push уведомления являются дополнительной возможностью взаимодействия с пользователем. Расскажите им об акциях вашего интернет-магазина или обновите информацию о новых сообщениях на плитке телефона!

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

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

В принципе, в том, чтобы самостоятельно обернуть своей веб-сайт в приложение, нет ничего сложного. Берете Webview – и оборачиваете.

Дьявол, однако, как всегда зарыт в деталях, поэтому мы сделали готовый движок для таких задач. Движок называется WAT (хотя в названии есть слово template, там реально целый движок!). Кстати, с открытым кодом.

Шаблон для создания веб-приложений – Web App Template

Для работы вам понадобятся:

1. Ваш сайт (в идеале, с адаптивной версткой)
   
2. Windows 8.1
   
3. Visual Studio 2013+
   
4. Расширение WAT
   

Установка дополнения Web App Template

Для того, чтобы установить WAT, вам необходима Windows 8.1 и Microsoft Visual Studio с последними обновлениями. Загрузите установочный VSIX файл с сайта wat.codeplex.com и установите шаблон.

Создание проекта Web Application Template

Будет создано универсальное приложение для Windows и Windows Phone, состоящее из пяти проектов – проект Windows, проект Windows Phone, общие файлы для проектов Windows и Windows Phone, а также внутренние C#-проекты.

Если сейчас запустить проекты для Windows и Windows Phone, то запустится приложение и загрузится страница с документацией по шаблону Web App Template.

Давайте посмотрим на структуру проектов Windows и Windows Phone и проекта с общими файлами (Shared), а также разберемся с настройками шаблона.

Структура проектов Windows и Windows Phone и Shared

Файлы, находящиеся в проекте Windows и Windows Phone, идентичны, в основном они относятся к общим настройкам приложения для конкретной платформы. Обратите внимание на файл package.appxmanifest – файл манифеста приложения, который нужен при подготовке приложения к публикации. В нем указываются основные настройки вашего приложения, информация о необходимых для его работы функциях, устройствах, а также файлах картинок (для иконок, бейджев, тайлов). Подробно о нем можно узнать в MVA курсе «Размещение и продвижение приложений в Windows Store.

Давайте перейдем к проекту с общими файлами. Первая папка в нем – папка config, с файлами config.es.json, config.json, config.sample.json и files.json.

config.json – главный файл приложения. Он используется для добавления основных настроек приложения – определения веб-сайта приложения (главной страницы), добавления элементов управления (панелей управления, навигации, кнопки назад), поддержки оффлайн режима, уведомлений и т.д.

Файл config.es.json отвечает за локализацию приложения, в нем прописаны основные языковые настройки (перевод фраз, подсказок). В стандартном шаблоне в качестве примера находится файл для языковых настроек испанского языка. Вы можете создавать файлы локализации для каждого поддерживаемого языка, он будет применяться в приложении автоматически. В файле config.sample.json находятся примеры всех настроек, которые вы можете применить в вашем приложении.

Следующая папка, CSS – папка с файлами, определяющими стиль вашего приложения. Injected-styles.css отвечает за CSS стили сайта, для которого вы делаете приложение, а файл wrapper-styles.css используется для стилизации таких объектов приложения, как navbar и appbar и т.д.

В папке template находятся JavaScript файлы реализации WAT, например, обработка геолокации, уведомлений, оффлайн режима, поиска и т.д.

Если уже использовали WAT ранее, обратите внимание на папки, которые добавились в WAT версии 2.2:

• Папка schema в проекте с общими файлами. В ней содержится файл schema-manifest.json. Это файл схемы для файла config.json. В нем описывается каждая функция, ее тип, описание и значение по умолчанию.
  
• Папка strings. Там находятся папки с доступными локализациями, т.е. файлы, в которых мы указываем перевод стандартных фраз в приложении.

Также обратите внимание на возможность удаленного редактирования файла config.json. Для того, чтобы заменить файл, в панели настроек выберите пункт «Change Config Host Address»

Затем введите адрес нового config файла:

В таблице, расположенной ниже, представлено описание всех основных файлов проекта. Мы же перейдем к знакомству с файлом config.json и посмотрим доступные для нашего приложения настройки.

Структура файла config.json

В нем вы определяете главную страницу вашего приложения, навигацию по странице, настройки панели приложения и панели навигации панели чудо-кнопок, а также поддержку оффлайн режима и т.д.

Полную документацию по файлу config.json вы можете найти здесь — http://wat-docs.azurewebsites.net/, а ниже я приведу таблицу с частичным переводом документации:

"wat_navigation": {
"hideOnPageBackButton": false,
"hideBackButtonOnMatch": [
"{baseURL}/Json#livetiles"
],
"pageLoadingPartial": "/template/partials/page-loading.html"
},

"wat_errors": {
"showAlertOnError": false,
"alertMessage": "Произошла ошибка. Приносим извинения.",
"redirectToErrorPage": false,
"errorPageURL": "error-example.html"
	},

"wat_logging": {
"enabled": true,
"level": "log",
"disableWithoutDebugger": false,
"hideTagDisplay": true,
"ignoreTags": [
"winjs"
	],
"logErrorsForIgnoredTags": true,
"overrideConsoleMethods": true,
"disableConsoleLog": false,
"fileLog": {
"enabled": true,
"level": "info",
"filename": "logs\\wat-docs_%D.log",
"format": "%L on Line %l of %f\r\n%D %T: %M (%t)",
"maxLogFiles": 7
}
},

"wat_offline": {
"enabled": true,
"message": "Отсутствует интернет соединение. Переподключитесь для дальнейшей работы приложения.",
        "superCache": {
    "enabled": false,
            "baseDomainURL": "http://wat-docs.azurewebsites.net/",
    "addIndexedDBSupport": true,
    "imagesGuardBand": true,
            "preCacheURLs": [],
            "ignoreURLs": []
        }
}, 

"wat_geoLocation": {
 "enabled": true
},

"wat_customScript": {
"scriptFiles": [
"injection-script-example.js"
	]
},

"wat_appBar": {
"enabled": true,
"makeSticky": false,
"buttons": [
{
"label": "Settings",
"icon": "edit",
"action": "settings"
},
]
},

"wat_navBar": {
"enabled": true,
"maxRows": 2,
"makeSticky": true,
"buttons": [
{
"label": "home",
"icon": "home",
"action": "home"
}]
},

"wat_livetile": {
"enabled": true,
"periodicUpdate": 1,
"enableQueue": true,
"tilePollFeed": "http://wat-docs.azurewebsites.net/feed"
},

" wat_redirects": {
"enabled": true,
"enableCaptureWindowOpen": true,
"refreshOnModalClose": true,
"rules": [
{
"pattern": "http://getbootstrap.com?",
"action": "showMessage",
"message": "Sorry, but you can't access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net"
},
{
"pattern": "http://msdn.microsoft.com/*",
"action": "popout"
}]
},

"wat_settings": {
"enabled": true,
"privacyUrl": "http://wat-docs.azurewebsites.net/Privacy",
"items": [
    {
"title": "Support",
"page": "http://wat-docs.azurewebsites.net/Support",
"loadInApp": true
    },
    {
"title": "Codeplex Site",
"page": "http://www.codeplex.com"
    }
]
},

"wat_share": {
"enabled": true,
"showButton": true,
"buttonText": "Share",
"buttonSection": "global",
"title": "WAT Documentation",
"url": "{currentURL}",
"screenshot": true,
"message": "{url} shared with {appLink} for Windows Phone and Windows 8 Store apps."
},

"wat_search": {
"enabled": true,
"searchURL": "http://wat-docs.azurewebsites.net/search/?query=",
"useOnScreenSearchBox": true,
"onScreenSearchOptions": {
"chooseSuggestionOnEnter": true,
"focusOnKeyboardInput": true,
"placeholderText": "What are you looking for?",
"searchHistoryDisabled": true
}
},

"wat_secondaryPin": {
        "enabled": true,
"buttonText": "Pin It!",
        "tileTextTheme": "light", 
        "buttonSection": "global",
"squareImage": "/images/logo.scale-100.png",
"wideImage": "/images/widelogo.scale-100.png"
},

"wat_header": {
        "enabled": true,
        "backgroundColor": "#478EFF",
        "navDrawerBackgroundColor": "#375569",
        "logo": "/images/widelogo.scale-100.png",
        "title": {
            "enabled": true,
            "displayOnHomePage": true
        }
    }

Как вы видите header добавился. Видно, что для Windows приложения этого сайта он выглядит симпатично, а для Windows Phone приложения header явно лишний.

Обратите внимание:

Чаще всего config.json находится в проекте с общими файлами (shared). Но, иногда, бывают случаи, когда мы разделяем файл config.json на два проекта – отдельно для проекта Windows и отдельно для проекта Windows Phone. К разделению файла по проектам мы прибегаем, например, в случае, если у нас есть специальная мобильная версия сайта, соответственно, стартовые страницы (startURL) для Windows и Windows Phone проекта будут разными. Иногда также удобно разделить файлы по проектам, когда в разных проектах нам необходимы разные элементы управления (приведенный выше пример с header).

Мы с вами разобрались с тем, что такое веб-приложения и как научиться создавать их при помощи шаблона Web App Template. В следующей статье мы посмотрим, как применить полученные знания и создать веб-приложение сайта Habrahabr.ru.

Дополнительные ссылки

habr.com

Создание веб-сайта для бизнеса | Сайт с нуля

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

Перед созданием представительства своей компании в интернете, задайте себе следующие важные вопросы:

• Кто те люди, с которыми я хочу общаться через свой сайт?
• Как нужно структурировать информацию, чтобы было удобно перемещаться между разделами и читать?
• Как я сообщу людям о существовании своего сайта?
• Как я буду обновлять контент своего сайта и сообщать людям об этих обновлениях?

Вопросы и ответы

Сколько информации нужно разместить на веб-сайте?

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

Как часто нужно обновлять контент веб-сайта?

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

Можно ли перенести на сайт мои печатные материалы?

Да, это возможный исходный пункт для наполнения веб-сайта контентом, однако структуру и объем печатных материалов придется изменить. Людям нравится читать в Сети короткие, написанные живым языком заметки, поэтому броские заголовки и краткое изложение печатных версий рекомендуются. Чтобы веб-сайт был действительно эффективным, вы также должны использовать гипертекст, т.е. когда посетители могут щелкнуть ссылку и перейти к разделу с более подробной информацией по заинтересовавшей их теме.

Что нужно делать?

Понять, каких потенциальных потребителей вы хотите охватить

Прежде всего решите, каких потенциальных потребителей вы хотите охватить. Определите, какую информацию надо сообщить важнейшей для вас аудитории. Задайте себе ряд вопросов:

• Хочу ли я охватить новых потребителей, в том числе на новых рынках?
• Что я могу сказать на своем веб-сайте, чтобы превратить потенциального потребителя в реального?
• Хочу ли я предлагать поддержку существующим потребителям?
• Хочу ли я размещать на сайте информацию для привлечения нового персонала?

Веб-сайт должен быть простым

Веб-сайт нужен, чтобы информировать потребителей, а не восхищать их графическим дизайном. Если Интернет не широкополосный, то причудливый дизайн веб-сайта и движущиеся изображения замедляют загрузку страниц, что раздражает посетителей, ищущих необходимую им информацию. Качественные сайты просты по дизайну, но богаты хорошо организованным полезным контентом. На лучших и самых успешных в мире вебсайтах (компаний Yahoo, Microsoft, Amazon) отсутствуют причудливые ухищрения; обойдетесь без них и вы. Будьте проще, и к вам потянутся люди (читай — потребители). Вот правильный принцип: максимум контента и информативная форма подачи материала.

Продуманная структуризация информации

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

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

Важные разделы и ссылки веб-сайта

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

Главная (домашняя) страница

Это первая страница веб-сайта и самая важная. Еще ее называют «стартовой». Обычно эту страницу первой видят посетители сайта. Ссылка на нее называется «Ноте» («Домашняя страница»), В списке важных ссылок она всегда расположена первой. А сама домашняя страница должна быть заполнена броскими, привлекающими внимание заголовками и краткими заметками, которые быстро информируют посетителя сайта, например, о роде деятельности вашей компании, о том, какие товары и услуги вы продаете, о специальных предложениях. Отличный пример правильного использования домашней страницы вы найдете на сайте компании Microsoft.

Что нового

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

О компании

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

• Миссия. Краткое описание организации и целей, которых она хочет достичь.
• Основные сильные стороны. Ключевые товары, рыночная позиция, производство, компетенция, распространение.
• История и профиль компании.
• Руководство. Фотографии и краткие биографии основных членов управленческой команды.
• Финансовая информация. Ежегодные результаты.
• Контактная информация и место расположения. Это ссылка на раздел «Контактная информация» веб-сайта.

Товары

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

• Описание товаров и услуг.
• Области применения товаров.
• Экономический эффект и рентабельность инвестиций: т. е. как использование этого товара поможет заработать или сэкономить деньги.
• Технические характеристики.
• Информация о процессе покупки и доставке.

Раздел с FAQ

• Цена (не забудьте указать, в каких денежных единицах).
• Расширенный обзор товаров.
• Места продажи; следует указать страны или регионы, в которых вы продаете (или не продаете) свои товары.

Покупка

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

Потребители

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

Партнеры

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

Контактная информация

В этом разделе приведены основные сведения, такие как:

• адрес электронной почты;
• почтовый адрес и карта, на которой показано расположение вашей компании;
• номера телефонов и факса.

Поиск

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

Предложение о рассылке электронных информационных бюллетеней

Каждый веб-сайт должен предлагать рассылку информационных бюллетеней по электронной почте. Если посетители в свой первый визит сообщат вам электронный адрес, вы сможете регулярно — еженедельно или ежемесячно — отправлять им информационный бюллетень со свежими новостями.

Используйте метаданные

У каждой веб-страницы должно быть название. При необходимости контент должен включать в себя классификацию, заголовок, краткое изложение, дату публикации, имя автора, ключевые слова. Это так называемые метаданные; без них поисковая программа не снабдит указателями части сайта, и посетители не найдут быстро то, что ищут.

Информация в нижнем колонтитуле

Нижний колонтитул, который виден на каждой странице, должен содержать следующую информацию:

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

Не забывайте рекламировать свой веб-сайт. Для этого используются следующие стратегии:

• Нужно зарегистрироваться на основных поисковых сайтах (Alta Vista, Google, Yahoo), а также на специализированных для вашей отрасли или сектора.
• Не забывайте на всей своей рекламной печатной продукции указывать адреса веб-страницы и электронной почты.

Создание веб-сайта для бизнеса —  самостоятельно или нанять фирму по веб-дизайну?

Если вы уверенный пользователь компьютера, то вполне выполните эту работу самостоятельно, используя
такие программные пакеты как Microsoft FrontPage или Dreamweaver от компании Macromedia, но вам, возможно, потребуется помощь графического дизайнера для художественного оформления сайта.

Типичные ошибки при создании сайта для бизнеса

Слишком много «выкрутасов»

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

Неэффективная классификация, навигация, поиск

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

Неудобочитаемый контент

Многие веб-сайты пытаются произвести впечатление на пользователей разноцветным дизайном, однако текст легче всего читать на белом фоне. Еще одно правило: абзацы, строки и документы должны быть короткими.

Также стоит прочитать

sitesnulya.ru

Создание Web-сайтов

Внимание! Предварительный просмотр слайдов используется исключительно в ознакомительных целях и может не давать представления о всех возможностях презентации. Если вас заинтересовала данная работа, пожалуйста, загрузите полную версию.

Раздел программы: Технология создания Web-сайтов. Основы языка разметки гипертекста HTML.

Тип урока: урок закрепления и развития умений и навыков.

Вид урока: практикум.

Технология: проектное обучение с применением современных информационно-коммуникационных технологий.

Оборудование и программное обеспечение: компьютеры, интерактивная (электронная) доска, проектор, операционная система MS Windows XP, MS Office.

Дидактическое сопровождение: презентация к уроку (сценарий урока в Московской электронной школе, ID урока 197456), плакаты, таблицы, схемы, учебные пособия по теории языка HTML, карточки с заданиями, тесты.

Цель урока: формирование у обучающихся знания об основных правилах Web-дизайна, закрепление и развитие знаний, умений и навыков создания простейшего Web-сайта с использованием языка разметки гипертекста HTML.

Задачи урока:

1) Образовательная – создать условия для дальнейшего ознакомления с технологией создания Web-сайтов, укрепить и применить приобретенные знания, умения и навыки при создании простейшего Web-сайта с помощью языка HTML на практике;

2) Развивающая – способствовать расширению кругозора обучающихся, развитию их эстетического восприятия и творческих способностей; развитию логического мышления: анализу, синтезу, обобщению; развитию памяти, внимательности.

3) Воспитательная –  содействовать воспитанию активности обучающихся, стремления к реализации себя в обществе; содействовать совершенствованию навыков делового взаимодействия, выработки собственной точки зрения и аргументированного её отстаивания; способствовать воспитанию организованности, самостоятельности и стремления представить результаты своих творческих работ в хорошем и качественном виде.

Подготовка к уроку:

1) Для урока были подготовлены презентация к уроку (сценарий урока в МЭШ, ID урока 197456). Слайды презентации (сценария урока) демонстрируются обучающимся с помощью интерактивной доски и проектора (электронной доски). Также в качестве наглядного дидактического материала используются плакаты, таблицы, схемы.

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

3) В качестве раздаточного материала обучающимся были подготовлены учебные пособия с теорией по языку HTML и основным правилам Web-дизайна, карточка с таблицей для оценивания Web-сайта по основным критериям (см. Приложение 1), карточка с инструкцией и рекомендациями по созданию простейшего Web-сайта (см. Приложение 2).

4) Примеры наиболее посещаемых и непосещаемых сайтов, удачных и неудачных проектных творческих работ обучающихся были подобраны из Интернета, из копилки учителя с творческими работами обучающихся, выполненных ими ранее.

План урока

Ход урока

1. Организационный этап.

Приветствие.

Учитель: Здравствуйте, ребята! Я рада приветствовать всех на этом уроке!

2. Вступительное слово учителя. Мотивация обучающихся.

Постановка темы, цели и задач урока.

Учитель формулирует тему урока и ставит перед обучающимися цели и задачи урока. Проверяет готовность домашнего задания — заготовки для будущего проекта.

Учитель: Сегодня мы продолжим с вами изучать одну из интересных тем информатики «Создание Web-сайтов». К сегодняшнему дню мы уже знаем с вами, что представляют собой Web-сайты и для каких целей они создаются. Знаем, какими способами можно создавать Web-сайты. И выбрали для себя один из способов — язык разметки гипертекста HTML. Так как, не зная кодов HTML, нам трудно будет внести какие-либо изменения в уже готовый Web-сайт. Технология HTML позволяет создать нам простые и небольшие Web-сайты. И если мы захотим научиться создавать качественные по стилю и содержанию Web-сайты, то нам нужно изучить не только язык HTML, но и рассмотреть элементы каскадных стилей CSS, визуальные Web-редакторы MS Front Page или Adobe Dreamweaver. А также в дополнение к ним изучить программы для обработки графических изображений — Adobe Photoshop и программы для создания различного рода анимации — Macromedia Flash.
Кто разрабатывает Web-сайты? Web-сайты могут разрабатываться как web-программистами и web-дизайнерами, так и обычными пользователями Интернета, так как вопрос создания сайтов становится в наше время всё более актуальным. Интернет всё прочнее входит в нашу жизнь и предоставляет возможности дополнительного заработка тем, кто владеет собственными сайтами, и тем, кто занимается профессиональным их созданием.

А сложно ли создавать сайты? Нам предстоит выяснить это на данном практическом занятии. Каждый из вас продолжит создание персонального Web-сайта, в котором можно будет разместить информацию о себе, своей семье и друзьях, о своих интересах и увлечениях, фотографии, формы и т.д. Для этого на предыдущих уроках мы разработали с вами проект вашего будущего сайта, который представлен на доске и в учебных пособиях. Некоторые из Web-страниц сайта мы уже с вами заполнили на предыдущем уроке. На дом вам было дано задание подобрать соответствующую информацию о себе, фотографии, рисунки и всё то, что вы хотели бы представить на своём сайте.

Каждому из вас предоставляется возможность проявить все свои творческие и дизайнерские способности при создании и оформлении сайта. В конце урока мы вместе оценим ваши проекты, выделим среди них самые лучшие и «не очень», обсудим трудности, с которыми вы, может быть, столкнетесь при создании сайта.       

3. Актуализация знаний. Повторение пройденного материала. Индивидуальный (фронтальный) теоретический опрос обучающихся.

Учитель: Для проверки вашей готовности к созданию сайтов проведем небольшой тест на проверку знаний основных понятий по созданию Web-сайтов. Для этого я вам подготовила несколько вопросов с вариантами ответами, среди которых вы выбираете правильный. И подготовила интерактивное задание на знание основных тэгов языка HTML, в котором нужно будет установить соответствие указанного тэга на совершаемое им действие.

Учитель открывает соответствующие слайды презентации (сценария) урока и проводит индивидуальный (фронтальный) теоретический опрос обучающихся.

1) Тестовый контроль на знание основных понятий по созданию Web-сайтов.

urok.1sept.ru