Плюсы и минусы html: HTML5 плюсы и минусы

Содержание

HTML5 плюсы и минусы — Верстка HTML / CSS

HTML5

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

Достоинства HTML5

Те, кто перешел на HTML5 уже увидел одним из достоинств кода простоту создания, использование чистого кода. Пятое обновление лучше прежних версий языка HTML тем, что таблицы div были вычеркнуты навсегда. Теперь используются такие элементы как footer, aside, а также nav, article, header. Самым глобальным изменением, которые почувствуют даже пользователи далекие от программирования, стало воспроизведение flash анимации, видео, а также онлайн прослушивание музыки без дополнительных драйверов в самом окне интернет браузера. Передача данных на сервер также для удобства ввода была улучшена и оптимизирована. Теперь в HTML5 все ошибки в срочном порядке будут уведомлять пользователя, что облегчает работу с сайтом. Расширить границы удалось и в WEB дизайне: настолько богатый выбор оформления игр, собственных сайтов, что доказывает эффективность 5 версии. Как и говорилось выше теперь без дополнительного софта можно реализовать красивую анимацию или оригинальную игру на своем сайте с помощью нововведения canvas. Данный модуль откроет новую эру в создании качественных приложений, а также украсит пользовательскую часть в совершенно ином цвете.

Минусы HTML5

Особое внимание следует уделить безопасности в новом языке. Сайты на HTML5 будут создавать огромные файлы, на продолжительное время, да и к тому же с секретными данными (логины и пароли от сайтов) что является лакомым куском для злоумышленников. Аналогично обстоят дела и в играх, написанных на этом же языке. Коэффициент полезного действия контента желает оставлять лучшего, а на разработку уходят долгие месяцы и большие суммы. Маленький выбор браузера поддерживающих данную технологию сужает круг использования таких сайтов. Конечно же, разработчики браузера стараются не отставать от прогресса, но далеко не все успевают сделать поддержку HTML5. Самой распространенной программой для использования данного языка является Хром от Google, так как в него встроен мощный модуль canvas 2D для упрощения работы с сайтом. Все перечисленные минусы HTML5 дают обратный ход крупным поисковым системам и прочим.

Использование в повседневной жизни HTML5

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

Разумеется, если бы не было тега canvas, возможно многие браузеры не смогли бы перейти на обновление до текущей версии HTML.

Как самому создать свой сайт

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

Существует несколько способов самому создать сайт.

Сделать свой сайт на HTML страницах.

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

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

Плюсы сайта на чистых HTML страницах +

+ Сделать, таким образом, сайт состоящий из нескольких десятков страниц, для человека владеющего технологиями HTML и CSS, не составит труда.

+ При этом сам сайт будет очень быстро грузится и не требовать много ресурсов.

Минусы сайта на чистых HTML страницах —

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

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

А если таких страниц 100 или 200, только представьте сколько на это уйдет времени.

— Вам необходимо будет изучить HTML и CSS.

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

Поэтому данный тип сайтов давно устарел и не пользуется популярностью.

Создать свой сайт при помощи конструктора сайтов.

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

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

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

Видео

Попробуйте данный конструктор сайтов в действии.

Плюсы создания сайта при помощи конструктора +

+ Не нужны специальные технические знания.

+ Быстрое создание сайта в несколько кликов.

+ Огромное множество вариантов дизайна сайта.

+ Легкое администрирование.

Минусы создания сайта при помощи конструктора —

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

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

Учитывая данные недостатки данный способ создания сайта может подойти далеко не всем.

Создание сайта при помощи CMS.

CMS можно расшифровать как: Система Управления Контентом. Очень часто еще употребляется название «движок сайта». В настоящее время сайты созданные при помощи CMS обрели огромную популярность. В случае использования того или иного движка для сайта все данные не хранятся в файлах, как в случае с сайтом на чистом HTML, который мы рассмотрели выше, а в специальной базе данных.

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

Существуют платные и бесплатные виды CMS. Наибольшее распространение получили такие бесплатные движки как Joomla, WordPress и Drupal. Смотрите материал «Лучшие бесплатные CMS», он позволит вам более подробно узнать все особенности данных систем и сделать свой выбор в пользу той или иной системы.

Плюсы создания сайта при помощи CMS +

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

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

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

+ Существует множество шаблонов дизайна. Установив шаблон на свою CMS вы получите готовый профессионально оформленный сайт.

+ Бесплатные CMS не чуть не уступают, а в некоторых случаях даже превосходят платные версии движков.

Минусы создания сайта при помощи CMS —

— Необходимо обладать определенными знаниями и разбираться в данной CMS. Однако в настоящий момент есть множество уроков посвященных созданию сайта на том или ином движке. У нас на сайте вы можете ознакомиться с уроками по Joomla и уроками WordPress.

— Для создания определенного функционала могут понадобиться некоторые знания HTML и CSS.

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

Материал подготовлен проектом: WebMasterMix.ru

Ещё материалы по созданию сайта:

Подробности: Опубликовано: 10 Январь 2012; Обновлено: 14 Октябрь 2013; Просмотров: 17338

Как верстать красиво или чем плохи css-фреймворки / Хабр

Преимущества дивной вёрстки, семантичной разметки и разделения содержимого и дизайна описаны десятки, сотни раз, но все-равно находятся люди, которые не понимают самой идеи html и css, пишут в коде такие ужасные вещи, как

<span>

, когда хотят расскасить текст в синий цвет и искренне считают, что эта запись чем-то лучше, чем

<font color="blue">

, наивно веря в этом деле валидатору. А ведь правильный подход в написании html и css лежит на поверхности. Достаточно просто посмотреть историю развития этого языка, почитать статьи десятилетней давности и проанализировать. Я, при поддержке theshock, постаралась в этот статье упорядоченно и коротко изложить наше видение этого вопроса.

Краткая историческая справка

html создавался академиками, как средство описания данных для обмена по сети на базе языка SGML. Изначально никто не думал, что он будет использоваться для чего-то большего, чем обычный текст. Если посмотреть на большинство современных книг, то можно увидеть каким эти люди представляли себе будущий интернет. Из сорока тегов первого стандарта предназначением только трёх было изменения внешнего вида текста, остальные описывали что этот текст значит и не было возможности отобразить текст так, как вы хотели. Согласно стандарту некоторые теги могли делать текст курсивным или жирным, но такое поведение было только в рамках рекомендаций. Но по-другому развитие интернета видели разработчики Netscape. Они понимали, что сАйтИКи доЛжнЫ быТь пРивлЕКаТЕльНЫМи для того, чтобы в интернете сидели не только суровые профессора, но и блондинки.
Netscape ввёл достаточно много тегов, которые изменяли внешний вид текста, но не несли за собой никакой логической нагрузки. В статьях тех лет можно прочитать, что идеологам html категорически не нравился такой вектор развития. На самом деле W3C вели себя очень по-старпёрски и не далекоглядно, а Netscape тем временем слишком увлёкся раскрашиванием. Обе компании впали в крайности и не могли прийти к консенсусу.
Помощь пришла неожиданно в лице компании Microsoft. Она практически выкупила W3C, инвестировав в него кучу денег и человеческих ресурсов, удалила устаревшую ещё до выхода спецификацию html 3.0 и по-быстренькому выпустила более приближённую к жизни спецификацию html 3.2, которая принесла с собой css. IE 3 и NN 4 уже более-менее поддерживали возможности стилевого оформления.
Ну, потом осёл быстро вытеснил Netscape и, как только занял монопольное положение, заснул на 6-й версии лет, эдак, десять назад. Потом возродился Netscape в лице Firefox, отвоевал значительную часть рынка у IE за счёт кучи преимуществ и, в итоге, всё пришло к тому, что мы сейчас имеем.
Разработчикам браузеров на заметку: в лидеры выбивался тот браузер, который поддерживал стандарты лучше всего.

А имеем мы сейчас вполне неплохую ситуацию. Хотя, перспективы css 3 очень радостные и приятные и мы с нетерпением ждём его прихода, даже то, что даёт шестой ослик вполне достаточно для красивого и расширяемого кода.

Почему оформлять лучше в css, чем в html

В истории очень показателен период сложного оформления сайтов при помощи одного html. Верстальщики тех годов использовали огромное количество тегов , , , вложенных друг в друга таблиц для задания таких границ и разметки, как они хотели и много чего такого, что в итоге приводило к коду, который очень тяжело поддерживать. Очень интересный цикл статтей перевода «A List Apart» на html+css. Посмотрите пример оттуда:

<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td 
bgcolor="#ffffcc"> </td>
<td bgcolor="#ffffcc" 
valign="top">
<!-- Your actual content -->

Сейчас с современными возможностями этот участок выглядел бы так:

<div>

Такое изящество принёс нам язык css. Так в чём же основной принцип подхода html+css? В html-файле мы описываем только логическую часть документа и ничего из оформления (да-да, это именно то, о чём мечтали те старые пердуны из W3C). Оформление ложится полностью на плечи css. Какие преимущества нам это принесёт:
1. Как видно на примере выше, html-код теперь не загромождён, а логичен и понятен.
2. Мы не повторяем описание внешнего вида каждый раз, когда встречается html-елемент. Например, если мы хотим заголовок сделать подчёркнутым и зелёным — достаточно описать это в css-файле, а не указывать соответствующие параметры каждый раз, когда встречается заголовок. Принцип «don’t repeat yourself» показал себя очень эффективным не только в разметке, но и в программировании. На самом деле, очень тяжело найти противников этого принципа среди профессионалов.

3. За счёт этого мы можем давать нашим пользователям возможность к оформлению своих сообщений, не выходя за рамки дизайна сайта (посмотрите на хабр и его оформление заголовкамив статьях). Автор просто указывает тег, например, &lth3> там, где хочет выделить заголовок раздела статьи и он выделяется так, как лучше всего подходит для даного сайта.
4. Вес html-файлов уменьшается очень значительно, а сss-файлы кешируются браузерами и загружаются только один раз, отчего у пользователей значительно ускоряется загрузка страниц, а на сервере уменьшается нагрузка.
5. То, что мы вынесли всё оформление в css-файл позволяет с лёгкостью его изменять при необходимости. Достаточно в одном месте css-файла подправить значение и новый стиль применится ко всем html-страницам, которые его используют
6. Можно полностью поменять оформление сайта просто подключив другой css-файл на сервере администратором или на клиенте пользователем (с помощью user-css). Например, как сделано на ibash.org.ru.
7. Для устройств с маленьким экраном достаточно просто подключить другой файл стилей.

Так почему же плоха запись ? Не потому что так сказал валидатор, или написали умные мужчинки на Хабре. Причина отказа от этой записи содержится очень близко к идеологии html. А именно в том, что тут смешивается контент и дизайн! И предпочитаемая многими(валидная, но ужасная) запись  — это возврат к тому, от чего с ужасом бежали «A List Apart» 10 лет назад. Каждый раз, когда вы в html-файле задаёте оформление css или в названии класса содержится эпитет, который хоть как-то намекает на внешний вид элемента — вы что-то делаете не так. Просто подумайте, почему вы решили делать его таким. Если вы хотите сделать красный цвет, то, наверное, это обозначает ошибку и ему больше подойдёт . А если вы решили выделить жирным, то этот текст важнее, чем тот, что по-соседству и тут больше подойдёт  или даже . А html5 принесет еще серию актуальных логических тегов, которые помогут отказатся даже от классов.

Верстаем по-порядку

Так как же добится изящного кода? Надо полностью отделить содержимое от представления. Подумайте, какие логические блоки будут на странице и опишите их в html. Не описывайте то, как они будут выглядеть. Представте, что у вас будет два совершенно разных дизайна на базе одного и того же html, но разных css. Возьмем, к примеру, Хабр. Представим, что один дизайн будет очень похож на тот, что есть, а другой будет с навигацией слева, а правая боковая панель уйдёт вниз. И он будет в тёмных цветах, а не светлых, как сейчас. Начнём с html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Habrahabr</title>
	</head>
	<body>
		<header>
			<img src="logo. png" alt="Habrahabr logo" />
			<ul>
				<li>Nutochka</li>
				<li>выйти</li>
				<li>настройки</li>
				<li>личная почта</li>
				<li>хабралента</li>
				<li>избранное</li>
			</ul>
		</header>
		<nav>
			<ul>
				<li><span>посты</span></li>
				<li><a href="#">q&a</a></li>
				<li><a href="#">блоги</a></li>
				<li><a href="#">люди</a></li>
				<li><a href="#">компании</a></li>
			</ul>
		</nav>
		<section>
			<article>
				<h2><a href="#">{Article.title}</a></h2>
				<div>{Article.content}</div>
				<div>{Article.tags}</div>
				<div>{Article.footer}</div>
			</article>
		</section>
		<aside>
			<div>
				<ul>
					<li>
						<a href="#">{Best. blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
					<li>
						<a href="#">{Best.blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
					<li>
						<a href="#">{Best.blogname}</a>
						» <a href="#">{Best.article}</a>
					</li>
				</ul>
			</div>
			<!-- Other blocks -->
		</aside>
		<footer>
			© 2006–2010 «Тематические Медиа»
		</footer>
	</body>
</html>

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

css-фреймворки

Последнее время некоторой(к счастью, небольшой) популярностью пользуются css-фреймворки. Например, 960 grid system

<div> 
	<h3> 
		24 Column Grid
	</h3> 
	<div> 
		<p> 
			950
		</p> 
	</div> 
	<!-- end .grid_24 --> 
	<div></div> 
	<div> 
		<p> 
			30
		</p> 
	</div> 
	<!-- end .grid_1 --> 
	<div> 
		<p> 
			910
		</p> 
	</div> 
	<!-- end .grid_23 -->

и blueprint:

    <div> 
      <h2>Blueprint Tests: grid.css</h2> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
      <div> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> 
      </div>

Основной проблемой есть то, что эти фреймоворки нарушают основной принцип разделения содержимого и представления и пропагандируют принципы, которые использовались до изобретения html3.2. Вместо внятного и очевидного описания, что каждый из блоков значит мы видим в html-коде то, как эти блоки выглядят и сколько места занимают. Все преимущества css, описанные выше, разрушаются при таком подходе. Css-фреймворки в том виде, котором они сейчас есть — зло и уход в прошлое.
Какие есть альтернативы? Оставить html языком разметки, а дизайн оставить полностью на совести css, как оно и должно быть. Но как сделать фреймворк на CSS? Для этого можно воспользоватся одним из препроцессоров, которые сейчас набираюсь популярность и вводят в css много вещей,

Бесплатный движок для сайта-визитки и блога. Плюсы и минусы

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

Платные и бесплатные движки – в чем разница?

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

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

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

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

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

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

Узнать подробнее

Бесплатные движки могут быть хорошими

Это то правило, которое вы должны для себя запомнить. Если на хостинге, за который вы не платите, вам никто ничего не гарантирует, то бесплатная cms не означает такой же плохой выбор. Нет, существует как минимум десяток замечательных открытых систем, за использование которых не надо платить. Самые популярные – WordPress, Joomla, Drupal, MODX и OpenCart (для интернет-магазинов).

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

Многие называют лучшей системой управления 1C Bitrix. Это платная профессиональная система у нее на самом деле есть много преимуществ. Это платный продукт, причем один из самых дорогостоящих. Подходит для серьезных проектов.

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

Самый популярный движок

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

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

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

WordPress – идеальный выбор

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

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

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

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

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

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

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

Узнать подробнее