Самый простой сайт – 8 конструкторов сайтов, с которыми справится каждый

Самый простой способ создать сайт / Habr

Хотелось бы поделится собственным велосипедом.

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

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

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

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

Работу с файлами портальной системы удалось упростить посредством упаковки базовой системы цмс в php phar архим. Разворачивание сайт при этом свелось к копированию одного файла в директорию проекта. Обновление всей портальной системы свелось к замене одного единственного файла обновленной версией цмс.

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

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

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

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

Файловая система сделана по мотивам файловой системы unionFS в которой система считает файловой системой сразу несколько уровней. Первым наиболее приоритетным является уровень файловой ситемы проекта. Размещенный в общей директории файл путь которого совпадает с системный будет являтся более приоритеным чем лежащий в phar архиве. Для изменения работы любого файла достаточно разсестить его измененную копию по такому же пути, что и в phar архиве. При этом он начитает работать сразу же. Подобным образом на сайт добавляются собственные шаблоны, собственные модели и даже основной файл ядра для изменения достаточно разместить index.php в директории проекта рядом с index.phar

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

Index.phar — cms
.htdb — файл бд (полный доступ)
.htaccess — файл перенаправление на исполняемый файл движка

/include/images Директория для заливаемый файлов (полный доступ)

Как то так должна выглядеть файловая система.

Адрес на 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

Leave a Reply