Самый простой способ создать сайт / Habr
Хотелось бы поделится собственным велосипедом.Залогом успеха в любой профессии в наше время является максимальная оптимизация производственного процесса. Но есть вещи которые стали стандартом в определенной сфере. Работа с ними требует долгого изучения и продолжительной практики. Одной из таких слабых мест веб разработки является база данных. Сопровождение и администрирование вносит огромные накладные расходы тем временем в подавляющем большенстве проектов функционал баз данных остается не востребованным. Как привлекательно совместить простоту работы с файлами, гибкость и функционал реляционных баз данных. Как хочется свести создание резервной копии базы данных к простому копированию одного единственного файла.
В момент установки сайта время для него замирает. Большая часть сайтов никогда не обновится. Обновление программного обеспечения становится нетривиальным делом которое легче каждый раз откладывать, чем запустить обновление и неделю потратить на поиск ошибок обновления и обяснения заказчику причин простоя. Если код ядра или часть файлов были модифицированны в процессе работы обновление становится невозможным.
Простота установки, сопровождения и обновления сайта стала задачей нашей дальнейшей разработки. Сделать процесс запуска сайта простым даже для человека ничего не знающих о базах данных, портах подключения и паролей доступа. Свести обновление к копированию одного файла и созданию резервной копии до нажатиу кнопок копи паст.
Для решения поставленной задачи отлично подошли два решения. В качестве хранения данных была выбрана бд sqlite. Данная бд совмещает максимальную простоту эксплуатации и все плюсы полноценной базы данных.
Работу с файлами портальной системы удалось упростить посредством упаковки базовой системы цмс в php phar архим. Разворачивание сайт при этом свелось к копированию одного файла в директорию проекта. Обновление всей портальной системы свелось к замене одного единственного файла обновленной версией цмс.
Так как sqlite не требует авторизации конфигурационный файл не требуется. Вместе с двумя указанными файлами нам потребуется директория где хранятся все загруженные изобрадения сайта а также файл .htaccess который покажет веб верверу откуда начинать загрузку.
Все свелось к четырем файлам в папке проекта. Одному файлу бд где будут хранится файлы, одному файлу цмс, файлу .htaccess и директории с полным доступом для загрузки файлов.
Создание страниц сводится к выбору адреса для с траницы. Войдя на адрес вновь создаваемой страницы администратору будет предложено одним кликом создать новую страницу. Посде создания для ее редактирования достаточно нажать на карандаш в верхней правой чати страницы для ее редактирования.
Файловая система сделана по мотивам файловой системы unionFS в которой система считает файловой системой сразу несколько уровней. Первым наиболее приоритетным является уровень файловой ситемы проекта. Размещенный в общей директории файл путь которого совпадает с системный будет являтся более приоритеным чем лежащий в phar архиве. Для изменения работы любого файла достаточно разсестить его измененную копию по такому же пути, что и в phar архиве. При этом он начитает работать сразу же. Подобным образом на сайт добавляются собственные шаблоны, собственные модели и даже основной файл ядра для изменения достаточно разместить index.php в директории проекта рядом с index.phar
Данное решение можно назвать самый простой установкой файловой системы их всех существующих. Для этого достаточно залить три файла в директорию хостинга.
Index.phar — cms
.htdb — файл бд (полный доступ)
.htaccess — файл перенаправление на исполняемый файл движка
Как то так должна выглядеть файловая система.
Адрес на github — github.com/mpak2/mpak.su
Зайти в админку можно тут http://phar.mpak.su/admin пользователь/пароль admin/admin
К сожалению в рамках комментарий не удается озвучить все интересующие темы. Контакты для общения сможете найти в вышестоящей ссылке.
habr.com
Подборка простых и удобных сайтов
Конечно же, всем без исключения нравятся красивые и впечатляющие дизайны. Но основным элементом его, все же, является контент, и каждый дизайнер должен относиться к этому с ответственностью. И тут появляются вопросы: где необходимо расположить контент, как облегчить к нему доступ, добиться четкой структуры и юзабельности в навигации, какие использовать цвета и шрифты. И сделать это надо так, чтобы все гармонировало и дополняло дизайн.
В этой подборке представлены 63 примера уже созданных элегантных, простых, удобных и юзабельных сайтов.
Эти сайты сочетают в себе гармонию цветов и шрифтов, обладают четкой структурой, доступны и легки в навигации для посетителя.
1. 31Three
2. North x East
3. Youtilize.com
4. Oaktree Creative
5. CodeIgniter
6. WebRevolutionary
7. Pop Labs
8. nPanorama.ru
9. Creative Binge
10. Designwise Studios
11. Mike McFarlane Landscape Photography
12. Pearsonified
13. BlogMinistry
14. html life
15. Infected-FX
16. Devlounge
17. Putput Comunicacions
18. Savana webhosting
19. Infekta
20. Stoodeo
21. Microsoft Corporation
22. Koder
23. Tappity: Mobile Homepage
24. WorkOne Central
25. Rifidi | Software Defined RFID
26. Pixel House
27. ~ VEDA ~ Healthy Indian Takeout & Eatery
28. Gaby Lopez
29. Versions — Mac Subversion Client
30. Ted Lermontov
31. Pozycjonowanie INHEAD Krakow
32. WorkHabit.org
33. Sonze
34. Corporate Image
35. Frazier Media
36. KellerAdv
37. Made by Cocoon
38. elan3.com
39. Erratic Wisdom
40. Design View / Andy Rutledge
41. Systima Technology
42. Eden Creative Communities
43. Pownce
44. Waggener Edstrom Worldwide
45. WallCandyArt
46. EMS | Matthew Soriano
47. Blues Sklep
48. plasq.com
49. sr28 Web Design
50. Warpspire
51. MacZone
52. The 5th Avenue Theatre
53. The Knowledge Well
54. Palm, Inc.
55. Dion.nu Design
56. FreeSwell Studios
57. Knoxville Life Church
58. Startup Search
59. Footnote
60. troovy
61. FF Maria Raisenmarkt
62. JoshLockhart.com
63. Made by Mark Dearman
Автор – smashingmagazine
Комментарии
Оставить ответ
Похожие статьи
Случайные статьи
www.dejurka.ru
Создаем простой сайт. Часть 1. Первая html страничка ‹ Asterial Web. IT блог
Начинать принято всегда с чего-нибудь простого и понятного, чтобы не потерять мотивацию и убедиться в своих способностях. Также и с созданием своего сайта, сделаем простейший html макет, усложним его, добавив цвета и картинку, а потом добавим оформления, используя таблицы каскадных стилей — css. Не будем тратить время на долгое вступление и перейдем к созданию сайта.
Как ни удивительно, но для того, чтобы научиться делать простые html странички не нужно ни хостинга, ни каких-либо специальных программ. Все, что нам потребуется — это программа для редактирования текста, например, самый обычный блокнот. Но, стоит заметить, удобнее использовать специальный блокнотс подсветкой синтаксиса: Notepad++ или Sublime Text. Если вы хотите заниматься созданием сайтов и в будущем, то советую использовать Sublime Text, который я всегда использую для редактирования и создания сайтов. Просматривать html страничку можно в любом интернет браузере, просто открыв ее двойным щелчком.
Перейдем непосредственно к созданию страницы. Создаем новую папку, назовем ее Test. В этой папке будут лежать файлы сайта. Теперь в папке test создайте файл с названием index.html. Этот файл будет содержать html теги, описывающие основную структуру сайта. Именно его мы будем потом открывать в браузере, чтобы посмотреть получившуюся html страницу. Открываем файл index.html в текстовом редакторе, в данной статье будем работать только с этим файлом. Обратите внимание на кодировку файла, желательно, чтобы была кодировка UTF-8, иначе могут быть проблемы с отображением русских букв.
Первое, что мы сделаем — укажем тип документа с помощью тега <!DOCTYPE>, в нашем случае используется html5, так что достаточно написать <!DOCTYPE html>. Подробнее о типах html-документов читайте в статье Информация о DOCTYPE в Html5 и xhtml. Далее обязательно идет открывающий тег <html>, который укажет компьютеру, что теперь ему придется иметь дело с html кодом. Закрывающий тег </html> будет в самом конце, указывая, что html код завершен. Следующий тег — <head></head>, в котором в нашем случае будет указано название страницы, отображаемое в заголовке браузера, а в прочих случаях также указываются мета-описание, ключевые слова, пути к скриптам, css, лентам новостей и т.д. Чтобы было понятно скажу сразу — внутри тега <head> подключаются файлы и скрипты, необходимые для работы сайта, а не выводится шапка, как могло бы показаться на первый взгляд. Как говорилось выше, внутри тега <head> напишем заголовок страницы <title>Заголовок страницы</title>. Заголовок пишется внутри тега <title>. Остановимся отдохнуть и посмотрим, что получилось на данный момент:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> </html>
Сохраните файл, откройте его в браузере. Пока ничего интересного не видно, но, если будем внимательнее, увидим, что в заголовке окна браузера, в котором открыта наша страница, уже отображается указанный нами текст. Если русские буквы все-таки отображаются криво, проверьте, сохранили ли вы файл в кодировке UTF-8.
Продолжаем редактировать файл index.html и, наконец, перейдем к видимой части страницы. Она начинается с тега <body>, который закрывается, соответственно после того, как видимая часть страницы закончится. Часто это бывает сразу перед закрывающим тегом </html>, и в данном примере так и сделаем:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> <body> </body> </html>
Тег <body> — это тело сайта, именно в нем отображаются все видимые элементы, такие как шапка, контент, футер и многое другое. Приступим к разметке сайта: теперь будем использовать теги <div>, которые позволяют выделять блоки и разделы в структуре html страницы. Оперируя тегами <div>, можно присваивать им имена — айди, которые позволят лучше ориентироваться в структуре страницы, а также использовать каскадные таблицы стилей в будущем. Айди тегу div присваивается следующим синтаксисом: <div>, а закрывается тег вот так — </div>
У нашей страницы будет простейшая структура — шапка, блок контента и футер. В шапке обычно размещают информацию о сайте, например, его название, логотип, адрес фирмы и т. д., в контенте выводится различная информация, а футер — это нижняя часть сайта, в нем может быть как просто картинка или текущая дата, так и какая-либо другая более сложная информация. Вышесказанное будет проще понять на наглядном примере — добавляем новые теги <div> в файл index.html:
<!DOCTYPE html> <html> <head> <title>Заголовок страницы</title> </head> <body> <div>Шапка сайта. Добро пожаловать на мой сайт</div> <div>Контент. Здесь может быть абсолютно любая информация.</div> <div>Футер. Подвал. Нижняя часть сайта</div> </body> </html>
Сохраним файл index.html и посмотрим на результат — в окне браузера будут выведены друг под другом в заданном порядке шапка, контент и футер.
Таким образом, мы сделали html разметку, необходимую для дальнейшей работы со страницей. В следующей части мы рассмотрим оформление страницы с помощью html тегов, изменим высоту созданных блоков, их цвет и выравнивание текста, установим кликабельное изображение в шапке сайта.
Перейти ко второй части — Создаем простой сайт. Часть 2. Простое оформление
Третья часть урока — Перейти
Возможно, вам также будут интересны статьи:
asterial.ru
Страница 1
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Название сайта</title>
</head>
<body>
<table
border="1"
align="center"
rules="rows"
>
<tr>
<td>
<!--ШАПКА САЙТА-->
<table
border="1"
background="images/168.png"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h2>Название сайта (организации)</h2>
<h4>Описание сайта</h4>
</th>
</tr>
</table>
<!--ОСНОВНОЙ КОНТЕНТ-->
<table
border="1"
bgcolor="#e6e6fa"
cellpadding="10"
>
<tr>
<td
rowspan="2"
>
<h3>Страница 1</h3>
<p>
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.</p>
<p>Почему я решил его сделать?
За те 3 месяца, пока разбирался в
сайтостроении и создавал этот ресурс обнаружилось,
что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание
А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали больше всего
времени.</p>
</td>
<!--САЙДБАР-->
<td bgcolor="#e6e6fa">
<h4>Меню</h4>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Страница</span></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/00/06/f4fffdb5.png">
<span>Cтраница 1</span;></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Страница 2</span></a>
</p>
</td>
</tr>
<tr>
<td
bgcolor="#e6e6fa"
align="center">
<h4>Дополнительная информация</h4>
<p>Текст дополнительной информации</p>
</td>
</tr>
</table>
<!--ПОДВАЛ-->
<table
border="1"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h4>Подвал</h4>
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Рекомендую: Готовые HTML шаблоны на русском
Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.starper55plys.ru
Страница 2
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Название сайта</title>
</head>
<body>
<table
border="1"
align="center"
rules="rows"
>
<tr>
<td>
<!--ШАПКА САЙТА-->
<table
border="1"
background="images/168.png"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h2>Название сайта (организации)</h2>
<h4>Описание сайта</h4>
</th>
</tr>
</table>
<!--ОСНОВНОЙ КОНТЕНТ-->
<table
border="1"
bgcolor="#e6e6fa"
cellpadding="10"
>
<tr>
<td
rowspan="2"
>
<h3>Страница 2</h3>
<p>
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.</p>
<p>Почему я решил его сделать?
За те 3 месяца, пока разбирался в
сайтостроении и создавал этот ресурс обнаружилось,
что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание
А мне, учитывая возраст и «опыт», было не просто
понять как раз эти нюансы, они отнимали больше всего
времени.</p>
</td>
<!--САЙДБАР-->
<td bgcolor="#e6e6fa">
<h4>Меню</h4>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Главная</span></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span>Cтраница 1</span;></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/00/06/f4fffdb5.png">
<span>Страница 2</span></a>
</p>
</td>
</tr>
<tr>
<td
bgcolor="#e6e6fa"
align="center">
<h4>Дополнительная информация</h4>
<p>Текст дополнительной информации</p>
</td>
</tr>
</table>
<!--ПОДВАЛ-->
<table
border="1"
bgcolor="#7FFFD4"
cellpadding="10"
>
<tr>
<th>
<h4>Подвал</h4>
</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Рекомендую: Готовые HTML шаблоны на русском
Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.starper55plys.ru