Webmastering. Практика построения и продвижения сайтов.

Количество пар на 2012 г.

1-й семестр 2-й семестр
сентябрь 3 февраль 2
октябрь 5 март 4
ноябрь 5 апрель 5
декабрь 3 май 5
  16   16
Всего 32 пары, 72 часа

 

План занятий по курсу Webmastering

Пара Тема, содержание
1 0. Введение
Три порядка Web-дизайна.
1. Платформа
Аппаратные средства
Операционная система
2 2. ППП (прикладные программные средства)
Вебсервер
База данных
Язык программирования
Высоконагруженная система
Безопасность
3 3. Проектирование
3.0. Управление проектом
4 3. Проектирование
3.1. Архитектура web-проекта или дизайн второго порядка (дизайн, который не дизайн).
3.1.1. Функционал
5 3. Проектирование
3.1. Архитектура web-проекта или дизайн второго порядка (дизайн, который не дизайн).
3.1.2. Структура данных
6 3. Проектирование
3.1. Архитектура web-проекта или дизайн второго порядка (дизайн, который не дизайн).
3.1.3. Фронтенд и бэкенд. Установка, конфигурация, админка.
7 3. Проектирование
3.1. Архитектура web-проекта или дизайн второго порядка (дизайн, который не дизайн).
3.1.4. Web-дизайн (дизайн, который дизайн).
8 3. Проектирование
3.2. Кодинг
3.2.1. HTML - шаблон
9 3. Проектирование
3.1. Кодинг
3.2.2. Ядро и библиотеки, в т.ч. сторонние
10 3. Проектирование
3.1. Кодинг
3.2.3. Отладка
3.2.4. Публикация проекта в интернете
11 3. Проектирование
3.3. Тестинг
3.3.1. Средства тестинга
3.3.2. Тестировщики
3.3.3. Контрольный пример и опытная эксплуатация
12 Семинар по проектированию сайта
13 Защита проектов (курсовая работа)
14 4. Эксплуатация
4.1. Контент-менежмент
4.2. Мониторинг, модерация
4.3. Развитие проекта (перманентный webmastering).
15 5. Продвижение и монетизация
5.1. PR-менежмент. Онлайн и офлайн реклама.
5.2. Способы и методы монетизации
5.3. Юридические аспекты онлайн-бизнеса.
16 Зачет по курсу
Всего: 5 тем, 21 раздел, 1 семинар, 1 курсовая работа, 1 зачет.

 

Webmastering. Введение.

Аналогия:
Скорость - суть первая производная расстояния по скорости.
Ускорение - производная второго порядка.
Вначале движения автомобиля, когда "газ в пол" - ускорение также меняется от нуля до максимума и затем падает до нуля, когда движение становиться равномерным. Это ускорение ускорения - есть производная третьего порядка.

  • Просто web-дизайн (шаблон сайта) - это дизайн первого порядка.
  • Архитектура web-проекта - дизайн второго порядка.
  • Webmastering, как средство реализации инвестиционного web-проекта - дизайн третьего порядка.

Низшие порядки вложены в высшие, как матрешки.

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

 

Цитата:

Вольное обобщение технологий MSF, RUP, ГОСТ:

Этап 1: Видение проекта — цели, задачи, аудитория, ограничения на ресурсы (временные, денежные, человеческие и другие).
Этап 2: Концептуальный дизайн — сценарии использования, основные модели поведения, уточнение данных первого этапа.
Этап 3: Логический дизайн — модели форм, диалогов, общая архитектура, потоки данных.
Этап 4: Физический дизайн — конкретные языки программирования, основные библиотеки, архитектура проекта и т.п.

исходник: http://habrahabr.ru/post/111481/#comment_3556626

 

Работы Чеповского, Немченко & Ko

 

Webmastering. Платформа.

Аппаратные средства

Сервер это не ПК, хотя оба они компьютеры. Так грузовик не легковушка, но оба суть автомобили.
19 дюймов, 2 юнита. Шасси сервера: 2 блока питания, охлаждение, IPMI (Intelligent Platform Management Interface). 2 камня - 4 ядра. Серверная память. RAID.
Лезвия. Кластеры.

 

Виртуализация

VMWare
Виртуальный хост.

 

Операционные системы

Windows vs. Unix.
Какой из *nix`ов. Понятие рута, юзеров и их прав.

 

О дизайне, web-дизайне и вообще.

Дизайн вообще.

Энциклопедическое определение

Дизайн процессора

 

 

 

Стул

Кухня

Город

 

 

 

Интернет

 

 

Глазами дизайнера. Обзор сайтов.

Официоз почти всегда плох

Лучшие сайты 2014

 

 

Apache and edit zone DNS

Если вы думаете, что интернет работает так

то вы ошибаетесь.

На самом деле все куда сложнее:

Прежде чем результат ваших трудов попадет к клиенту, много пакетов протечет по меди и оптоволокну между многими компьютерами.

Задание:

  1. Выложить свое произведение на хост-продакшн.
    - backup
    - FTP
    - востановление из бэкапа
  2. Прописать в апаче место, где расположен сайт
    - создать для своего сайта файл-конфиг апачи
    - прописать в нем виртуалхост
    - прописать в нем домен и путь к сайту (directory)
    - перезапустить апачу, чтобы измменения вступили в силу
  3. Прописать в зоне DNS домен и IP хоста (сервер)

Все это подробно описано здесь, с примерами и видеороликами.

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

Задание рассчитано на две пары.

 

Прикладные программные средства применяемые в Web

Вебсервер Apache

Установка - 1 минута.
Настройка кодировки сайта.
Настройка разных кодировок для разных директорий.
Запрет просмотра каталога.
Виртуальный хост.
Домены, DNS. Настройка зоны.
 

Язык программирования PHP

Установка - 0 минут - входит в состав апачи.
 

База данных MySQL

Установка - 1 минута.
Смена пароля рута. Отличие системного рута от мускульного.
Права на доступ к базе.
Создание базы и таблиц.
Команды SQL: select, update, delete
Администрирование базы данных.
 

CMS и фреймворк Drupal

Установка
Приемы работы
Темы
Модули
Комьюнити
 

Средства обеспечения работоспособности сайта под большой нагрузкой

Проблеммы производительности платформы.
Проблеммы производительности CMS.
Измерение производительности, определене узких мест.

Инструменты: top, netstat, nginx
 

Средства обеспечения безопасности

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

iptables

 

Приемы работы редактора контента

1. Вставка фотографии внутрь текста возможна только в режиме FullHTML:

На панели инструментов наживаем кнопку Изображение

  • В окрывшемся окне находим синюю кнопку Выбор на сервере
  • Откроется интерфейс управления файлами на сервере, где можно закачать и/или выбрать закачанный файл для вставки в текст
  • Далее, в том же окне Свойство изображения обязательно необходимо указать:
    • Горизонтальный отступ: 7-10
    • Вертикальный отступ: 2-3
    • Выравнивание: По левому или По прарвому краю (это неодходимо, чтобы фотография не торчала над текстом, а обтекалась им).

Видеоролик - иллюстрация к вышеизложенному
 

2. Пользуйтесь возможностью размещения документов

Ссылка прямо над кнопкой Сохранить:

По умолчанию для статьи настройки такие:

Настройки публикации
Опубликовано
Помещено на главную страницу
Закреплять вверху списков

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

Видеоролик - иллюстрация к вышеизложенному
 

3. Вставка видеоролика с Ютуба (или откуда еще)

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

При повторном редактировании адрес будет норовить стать ссылкой - это надо пресекать - поставить курсор на ссылку (в любом месте) и нажать кнопку Убрать ссылку.

Как это выглядит можно посмотреть здесь.

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

Это работает потому, что у нас стоит модуль Video Filter, именно он перехватывает строку в квадратных скобках и выводит ролик вместо нее.

Видеоролик - иллюстрация к вышеизложенному

4. Видеоролики не с ютуба, а размещенные у нас сервере

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

Не забывайте поставить в окне ссылке Цель - всплывающее окно, и для него ширину, высоту (600-800) и отступы (20-50)

Например: Видеоролик - иллюстрация к вышеизложенному

 

5. Копировать контент с чужого сайта на свой

вообще говоря бессмысленно - яндекс такие тексты не индексирует.

Но если очень хочется, то правильно это делать так:

  1. Отдельно скопировать и вставить в своем редакторе (Формат ввода - Full HTML) заголовок публикации.
  2. Копирование. Если в исходном тексте есть фотографии, картинки или вставки рекламы, оглавлений, лозунгов, то текст придется копировать по частям, выбирая чистые от всего этого участки.
  3. Вставка. Каждый скопированный фрагмент в своем редакторе пропускать через фильтр - кнопка Вставить только текст. Это гарантирует избавление от чужих стилей, шрифтов, верстки.
  4. Картинки вставляются отдельно, предварительно сохранив на свой комп.
  5. Если есть таблицы их копировать и вставлять каждую в отдельности через фильтр Вставить из Word
  6. Выделения и прочую разметку сделать заново у себя, не пытаясь скопировать чужую.

Видеоролик - иллюстрация к вышеизложенному

Учебный скрипт "Выборы президента США"

<?php // index.php - Допуск к голосованию
error_reporting ( E_ERROR | E_WARNING | E_PARSE );
 
// объявление переменных
$ok  = "" ;
$err = "" ;
$title = "Выборы президента США" ;
 
// ловим данные отправленные из формы проверки возраста
if ( isset ( $_GET['buttn'] ) ) { // если нажата кнопка
 
  // если поле old непусто и содержит только буквы русского алфавита
  if ( $old = 0 + $_GET['old'] ) {
    // допустимый диапазон возрастов
    if ( $old < 0 ) $err = "<font color=red>Ты еще не родился малыш - посиди пока в мамином животике.</font>" ;
    elseif ( $old < 6 ) $err = "<font color=red>Ты еще маленький, пойди раскрась картинку.</font>" ;
    elseif ( $old < 15 ) $err = "<font color=red>Ты еще не дорос до выбора президента, пойди почитай книжку.</font>" ;
    elseif ( $old < 18 ) $err = "<font color=red>Рановато. Займись пока спортом.</font>" ;
    elseif ( $old > 200 ) $err = "<font color=red>Врешь старик - столько не живут.</font>" ;
    else $ok = 1 ;
  }
  else { // если после очистки $old пусто
    $err = "<font color=red>Вы забыли вписать свой возраст или использовали недопустимые символы.</font>" ;
  }
}
 
// ловим данные отправленные из формы проверки возраста
if ( isset ( $_GET['buttn2'] ) ) { // если нажата кнопка
 
    $vote = $_GET['vote'] ;
 
    if ( "1" == $vote ) $mes = "<font color=green>Вы проголосовали за Клинтон.</font>" ;
    elseif ( "2" == $vote ) $mes = "<font color=green>Вы проголосовали за Трампа.</font>" ;
    else $mes = "<font color=red>Вы не проголосовали.</font>" ;
 
    if ( "1" == $vote or "2" == $vote ) {
 
        // подключаем PHP к mysql DB
        mysql_connect ( "localhost", "root", "1q2w3e" ) ;
        mysql_select_db( 'vote' ) ;
 
        // устанавливаем кодировку utf8
        mysql_query ( "SET  character_set_connection = 'utf8'" ) ;
        mysql_query ( "SET  character_set_results = 'utf8'" ) ;
        mysql_query ( "SET  character_set_client = 'utf8'" ) ;
 
        if ( "1" == $vote ) {
            $sql = "select clinton, tramp from vote" ;
            $res = mysql_query ( $sql ) ;
            $rec = mysql_fetch_row ( $res ) ;
            $clinton = $rec[0] + 1 ;
            $tramp   = $rec[1]     ;
            $sql = "update vote set clinton=" . $clinton ;
        }
        elseif ( "2" == $vote ) {
            $sql = "select clinton, tramp from vote" ;
            $res = mysql_query ( $sql ) ;
            $rec = mysql_fetch_row ( $res ) ;
            $clinton = $rec[0]     ;
            $tramp   = $rec[1] + 1 ;
            $sql = "update vote set tramp=" . $tramp ;
        }
 
 
 
        // выполняем запрос к базе MYSQL средствами PHP
        // если запрос не выполнился - будет выдана ошибка
        if ( mysql_query ( $sql ) ) $ok = 2 ;
        else $err = "Error=$sql=" ;
    }
}
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title><?php echo $title ?></title>
</head>
 
<body>
 
<h1><?php echo $title ?></h1>
 
<?php if ( 1 == $ok ) { ?>
        <h2><font color=blue>Голосование</font></h2>
        <form>
            <input type="radio" name="vote" value="1" checked>Клинтон<br>
            или<br>
            <input type="radio" name="vote" value="2">Трамп<br><br>
            <input type="submit" name="buttn2" value="Голосовать">
        </form>
<?php }
    if ( 2 == $ok ) {
        echo "<h2>$mes</h2>" ;
        echo "<h3><font color=blue>Результат: Клинтон = $clinton, Трамп = $tramp</font></h3>" ;
    }
    elseif ( $err ) echo "<h4>" . $err . "</h4> <a href=\"JavaScript:history.back();\">Назад</a>" ;
    elseif ( ! $ok ) {
?>
    <h3>Проверка возраста</h3>
    <form action="index.php">
        Сколько вам лет: <input type="text" name="old">
        <input type="submit" name="buttn" value="Go">
    </form>
<?php } ?>
</body>
</html>
<?php
 
/*
 
Подготовка базы проекта "Голосование"
 
create table vote (clinton int, tramp int);
 
insert into vote values(0,0);
 
select * from vote;
 
+---------+-------+
| clinton | tramp |
+---------+-------+
|       0 |     0 |
+---------+-------+
 
*/
 
?>
 

Установка Drupal

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

Пропишу основные этапы:

1. Скачать с http://drupal.org ядро. Это файл с расширением .tar.gz, т.е. затаренный и запакованный юниксовым архиватором gzip набор папок и файлов - установочный пакет друпала.

2. Распаковать сей файл в папку на сервере (там уже настроенная апача, mysql, домен).

3. Найти файл sites/default/default/settings.php и скопировать его в туже папку под именем settings.php. Установить права владельца этого файла апач (www-data).

4. Создать папку sites/default/default/files и дать ей теже права www-data.

5. Скачать с drupal.org файл drupal-версия.ru.po последней версии и положить его на свое место: profiles/standard/translations

6.Создать базу данных: create database db_ваш_проект DEFAULT CHARACTER SET = utf8 DEFAULT COLLATE = utf8_unicode_ci;
и
назначить ей юзера с правами: GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER  ON db_ваш_проект.*  TO 'usr_ваш_проект'@'localhost' IDENTIFIED BY 'psw_ваш_проект';

7. Отрыть в браузере подготовленный домен и ответить на все вопросы которые задаст инсталятор друпала.

Если чего-то не получилось посмотрите еще раз внимательно этот ролик.

Если и этого мало - пишите  - отвечу.

 

Проектирование

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

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

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

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

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

Архитектура web-проекта или дизайн второго порядка (дизайн, который не дизайн).

Странные выражения "дизайн второго порядка" и "дизайн, который не дизайн" объясняются во введении.

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

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

Цитата:

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

Слабая связанность - достигается должной степенью абстракций. Отказом от конкретных способов реализации. Т.е. новостную ленту мы можем сделать на Django+MySQL. А вот счетчик посещений реализуем комплексом из C+libevent+NoSQL DB+python+Postgresql.
...
Веб-программисты постепенно объеденили в себе множество профессий: верстальщиков, JS-программистов и флеш-аниматоров, программистов бизнес-логики, DB-администраторов, системных администраторов и местами даже проектировщиков-архитекторов и менеджеров.
...
Идея заложенная в паттерне проектирования MVC - весьма прозрачна. Мы создаем код, который умеет работать с данными (Models/Controllers), мы создаем код который умеет управлять контекстом исполнения (Controller), и пишем код который ответственен за отображение данных (Views/Templates).

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

исходник: http://kerah.redpandaz.net/2011/02/creatio-ex-nihilo.html

 

Анализ задачи на примере романа Льва Толстого "Анна Каренина"

Публикация проекта в интернете

Публикация проекта в интернете, это не совсем тоже самое, что публикация статьи на сайте. Точнее это совсем другое.

  1. Для сайта необходимо выбрать/купить/зарегистрировать имя - домен, например: site.ru
  2. Готовый сайт (он может состоять из одной странички или из сотен файлов и папок + БД) необходимо перенести на хостинг (сервер умеющий отдавать html-странички по запросу браузеров пользователей).
  3. На одном железном сервере может под управление вебсервера (например apache) работать множество сайтов (виртульных хостов) - нужно прописать в один из них путь к папке нашего сайта и указать домен
  4. Чтобы сайт стал видим в интернете необходимо настроить DNS, т.е. связать действительный адрес сервера - IP с человеческим именем - доменом.

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

Для начала познакомимся с несколькими утилитами - это видеоуроки (классический образец - http://www.youtube.com/watch?v=3I8CTfHhbwE - скринкаст установки убунты).

Практическое занятие. Подготовка к отладке вебпроекта на локальном компьютере.

Здесь собраны все видеоуроки (скринкасты - озвученные ролики, записанные с экрана во время работы), относящиеся к созданию и оживлению вебпроекта.
Для учебы это очень удобно, т.к. ролик можно перемотать назад, поставить на паузу и рассмотреть картинку или десять раз прослушать, что там шепелявит преподаватель.

Контекст: 
Вы работает на своем персональном компьютере с операционной системой Linux (на скринах дистрибутив Ubuntu, но это не принципиально).
В ней установлен вебсервер apache с поддержкой скриптового языка PHP и СУБД MySQL.

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

Термины:
Хост - компьютер, настроенный для работы в качестве вебсервера, обеспечивающий доступ к сайтам через интернет.
Хоститься - располагать свой сайт (файлы и папки) на хосте.
Локальный хост - компьютер имеющий все признаки хоста, кроме доступа сайтов через интернет. Используется разработчиком сайтов для отладки проектов.
Виртуальный хост - часть ресурсов (память, процессор) хоста выделенная вебсервером для отдельного домена (проекта).
Вебсервер - программа-демон запущенная на хосте и обеспечивающая выдачу по запросам браузеров HTML-страниц (вебстарниц). Обычно это apache, но есть и другие.
Сайт - совокупность .вебстраниц связанных гиперссылками, имеющий адрес в интернете - домен. Все страницы одного сайта располагаются на одном домене.
Домен - человеко-понятное имя сайта на естественном языке.
IP-адрес - физический адрес, номер компьютера (хоста) в едином для всего интернета адресном пространстве. Состоит из 4-х групп чисел по 1-3 цифре в каждой, разделенных точками, наример сайт mgimo.ru имеет IP 212.16.16.172, localhost всегда (так принято) 127.0.0.1

Вопросы можно задавать в комментах к этой странице. Но вначале необходимо просмотреть все пронумерованные (1-12) ролики и попытаться повторить описанные там действия. Ролики короткие (от 5 секунд до 5 минут), действия несложные - если все это занятие (в обозначенном выше контексте) займет у вас больше 15 минут, значит вы полный тупица или просто записались не на тот курс :-)


Утилиты командной строки Unix

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

Ролики №№ 1-10:
  1. Открыть терминал
  2. Что в нем?
  3. Подстроим профиль под свой вкус
  4. Просмотр листинга текущей папки (каталога, директории - это синонимы)
  5. Просмотр листинга текущей папки в деталях
  6. Открыть существующую папку
  7. Создать новую папку
  8. Создать новый файл
  9. Очистить экран
10. Универсальный справочник

Midnight Commander

В mc можно работать с помощью одних только клавиш или использовать мышь или и то и другое вперемежку.

Ролик №11: Повторить операции выполненные в пп. 4-8 в mc

Apache и файл hosts

Для того чтобы иметь возможность готовить проект к публикации на своем компе, нужно настроить вебсервер apache.
Еще желательно вместо настоящего DNS прописать в локальном файле /etc/hosts какой-нибудь домен. Поскольку он будет работать только у вас и никто в большом мире его не увидит, это домент может быть каким угодно, хоть mgimo.ru или google.com. Лично я придумал себе зону .xx и все свои проекты отлаживаю в ней.

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

Техника настройки апачи заключается в том, чтобы прописать в файле конфигурации (можно сделать под каждый проект отдельный файл, при запуске апач считывает их все) вот такой блок:

<VirtualHost *:80>
    ServerName test.xx
    DocumentRoot /var/www/test
    DirectoryIndex index.php index.html
    AddDefaultCharset UTF8
</VirtualHost>

Настройка локального хоста разжевана в ролике.

Ролик №12: Подготовка к отладке вебпроекта на локальном хосте

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

Видеоуроки по темам: Терминал, Midnight Commander, Apache, Hosts

Смотреть можно прямо с ютуба или скачать на свой компьютер (они довольно тяжелые).

1. Необязательная утилита key-mon (вспомогательный инструмент для визуализации нажатых клавиш - очень помогает при создании видеоуроков - скринкастов)

Скачать в высоком качестве 246Мб

2. Утилита clear - очищает дисплей

Скачать в высоком качестве 148Мб

3. Утилита ps - показывает запущенные процессы (демоны)

Скачать в высоком качестве 452Мб

4. Утилита top - показывает запущенные процессы в динамике. Обновляет информацию каждую секунду. Остановка клавишей Q

Скачать в высоком качестве 332Мб

5. Midnight Commander - файловый менеджер. В нем можно на сервере создать простой web-проект. В mc можно работать с помощью одних только клавиш или использовать мышь или и то и другое вперемежку

Скачать в высоком качестве 390Мб

6. Настройка apache и localhost`а для запуска/прогона на нем тестового проекта.
В этом ролике рассказано и показано, как можно на своем локальном компьютере запустить свой проект. Придется настроить апач точно как на сервере (да это и есть сервер), а вместо DNS, прописать домен в файле /etc/host

Скачать в высоком качестве 700Мб

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

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

Эту статью нужно прочитать, чтобы получить представление о практике управления web-проектом. (взято отсюда: http://www.webmascon.com/topics/business/8a.asp )

 

Цитата с хабра:

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

— нужно ясно представлять что будет являться продуктом (продукт может быть бесплатным, но должен иметь ценность и интерес для пользователя)

— нужно ясно представлять кто твой «покупатель», что должно побудить его воспользоваться твоим продуктом (идея продукта может быть не уникальной если планируется уникальный способ продвижения который позволит набрать достаточную аудиторию).

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

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

И еще, без сильного разработчика способного поднять проект (в одиночку или с командой) имеющего долю в проекте скорее всего не обойдется.

исходник: http://habrahabr.ru/post/111481/#comment_3556836

 

Пример формального ТЗ "сделанного по ГОСТу": http://www.rugost.com/index.php?option=com_content&view=article&id=182:4...

Пример (на англ. яз.): грамотной спецификации

Техническое задание на проектирование портала МГИМО: http://soft4edu.org/?q=ru/book/export/html/11

Мастер-класс в МГИМО 31.11.2014.

Создание и публикация сайта в интернете - полный цикл.


Теория

Совсем чуть-чуть: http://an2k.ru/?q=node/118


Задача

Создать систему регистрации присутствия студентов на занятиях


Техническое задание (ТЗ)

Требования

  1. студент должен на сайте, написать свою фамилию и нажать кнопку "Запись";
  2. система должна зафиксировать присутствие данного студента;


Спецификации

Domen: aut.an2k.ru
Зона DNS: pdd.ya.ru
Host: 176.9.152.239


Форма

Состав:
Поле для ввода: ФИО
Кнопка "Запись"


База данных

Имя базы: reg_students
Состав: одна таблица
Имя таблицы: list_students
Состав полей:
ФИО студента: fio

 

Журнал работ


0. Применяемые технологии

LAMP
т.е.
Linux
Apache
MySQL
PHP
и
DNS

 

1. Domen и DNS

a) На nic.ru [экаунт: 385646 ] регистрируем домен an2k.ru
и делегируем его на  dns1.yandex.net
изменения вступают в силу в течении нескольких часов, иногда дней.

b) На pdd.ya.ru в зоне an2k.ru добавляем
запись типа A субдомен aut IP 176.9.152.239
изменения вступают в силу для доменов 2-го уровня в течении нескольких часов,
а для субдоменов (т.е. доменов 3-го и последующих уровней) немедлено.

c) На хосте 176.9.152.239 под рутом редактируем файл /etc/apache2/sites-available/allsites
если его нету - создаем (директория эта обязательно, а имя файла может быть любым) и добавляем в него строки:

<VirtualHost *:80>
    ServerName aut.an2k.ru
    DocumentRoot /home/an2k/www/reg_students/
    DirectoryIndex index.php index.html
    AddDefaultCharset UTF8
</VirtualHost>

проверяем, чтобы ссылка с этого файла была в этой директории: /etc/apache2/sites-enabled
если нету - создаем;

перезагружаем Апач, чтобы изменения вступили в силу:
service apache2 restart


2. Cоздание БД и таблицы

Используя putty и mysql-клиент

putty

mysql --default-character-set=utf8 -uroot -p

create database db_reg_students COLLATE utf8_general_ci;

GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER  ON db_reg_students.*  TO 'usr_mysql'@'localhost' IDENTIFIED BY 'usr_mysql_passw';

use db_reg_students

create table list_students (fio char(64));

3. В своем хоме на сервере в папке www создадим новую папку для нового проекта, назовем ее reg_students и перейдем в нее:

mkdir ~/www/reg_students
cd ~/www/reg_students


4. Создание файла index.php

В ранее созданной директории проекта создаем файл index.php, используя cat

cat > index.php

<?php // index.php - Страница регистрации присутствия студентов на занятиях
 
// объявление переменных
$ok  = "" ;
$err = "" ;
 
// ловим данные отправленные из формы
if ( isset ( $_GET['buttn'] ) ) { // если нажата кнопка
 
  // если поле fio непусто и содержит только буквы русского алфавита
  if ( $fio = ereg_replace (
                "[^йцукенгшщзхъёфывапролджэячсмитьбю ЁЙЦУКЕНГШЩЗХЪФЫВАПРОЛДЖЭЯЧСМИТЬБЮ]",
                "",
                $_GET['fio'] ) ) {
 
    // подключаем PHP к mysql DB
    mysql_pconnect ( "localhost", "dbusr", "dbpsw" ) ;
    mysql_select_db( 'dbname' ) ;
 
    // устанавливаем кодировку utf8
    mysql_query ( "SET  character_set_connection = 'utf8'" ) ;
    mysql_query ( "SET  character_set_results = 'utf8'" ) ;
    mysql_query ( "SET  character_set_client = 'utf8'" ) ;
 
    // формируем запрос
    $sql = "insert to list_students values( '" . $fio . "' )" ;
 
    // выполняем запрос к базе MYSQL средствами PHP
    // если запрос не выполнился - будет выдана ошибка
    if ( mysql_query ( $sql ) ) $ok = true ;
    else $err = "Error=$sql=" 
 
  }
  else { // если после очистки $fio пусто
    $err = "Вы забыли вписать свои ФИО или использовали символы нерусского алфавита." ;
  }
}
 
?>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Регистрации присутствия студентов на занятиях</title>
</head>
 
<body>
 
<h1>Регистрация студента на занятии</h1>
<?php
if ( $ok ) echo "<h3>Регистрация завершена успешно.</h3>" ;
elseif ( $err ) echo "<h4>" . $err  "</h4> <a href=\"JavaScript:history.back\">Назад</a>" ;
else {
?>
  <form action="index.php">
    ФИО студента: <input type="text" name="fio">
    <input type="submit" name="buttn" value="Запись">
  </form>
 
<? } ?>
</body>
</html>
 
Ctrl z - прерывание ввода в index.php

 


5. Тестирование

a) в браузере: http://aut.an2k.ru
вводим несколько фамилий на русском языке

b) на сервере
mysql -pusr_mysql_passw -uusr_mysql --default-character-set=utf8 db_reg_students

select * from list_students;

в таблице должны быть те фамилии, которые вводили в браузере.

Вот как-то так.

 

PS: текст на бледно-зеленом фоне вводится в командной строке Линукса, а на бледно-голубом - в mysql-клиенте.

 

Ролик иллюстрирует этот текст. Здесь все то-же, только в динамике и с комментами моим голосом.