Результати пошуку за запитом: domain drive design*
Як створити веб-сайт за допомогою AJAX
Автор: Редакция ITVDN
Создания простого чата
Для начала создадим простой чат с помощью HTML&CSS и PHP&MySQL
Проектирование Базы Данных
Переходим к phpMyAdmin.
Создаем новую базу данных, называем “chatdb”.
Создаем новую таблицу, называя “Posts”, включая в себя 4 столбца:
“id” тип колонки INT, автоматическое увеличение на 1 (задаем A_I в ячейку с флажком) основной ключ (index);
“nick” тип колонки VARCHAR и длина 100;
“post_text” тип колонки TEXT;
“post_dt” тип колонки DATETIME по умолчанию является CURRENT_TIMESTAMP.
Создание веб-сайта.
Во-первых, создадим главную страницу. Список комментариев и отправка формы, используя кнопку. Всё будет находится в файле “index.php” . Давайте создадим этот файл и напишем что-то вроде этого:
<html>
<head>
head>
<body>
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
php
if ($result) {
while ($post = $result->fetch_object()){
$nick = $post->nick;
$post_dt = $post->post_dt;
$post_text = $post->post_text;
echo "<b>$nickb> ($post_dt):<br>";
echo "$post_text<br>";
echo "<br>";
}
$result->close();
}
?>
div>
php
$mysqli->close();
?>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
divComments.scrollTop = divComments.scrollHeight;
script>
body>
html>
2. Дальше давайте создадим “post.php” файл и напишем такое:
php
$nick = $_POST['nick'];
$post_text = $_POST['text'];
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
$nick = $mysqli->real_escape_string($nick);
$nick = htmlspecialchars($nick);
$post_text = $mysqli->real_escape_string($post_text);
$post_text = htmlspecialchars($post_text);
$mysqli->query("INSERT INTO posts (nick, post_text) VALUES ('$nick', '$post_text');");
$mysqli->close();
/* Redirect To Main Page */
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
3. Откроем ваш чат в любом продвинутом браузере. Вся работа:
4. Напишите ник и текст, а потом нажмите на кнопку отправки.
Когда отправили форму, сразу же происходит перенаправление формы главной страницы в “post.php”. “Post.php” моментально наполняет данными таблицу и перенаправляет на главную страницу. Также “post.php” содержит начальный XSS и SQL защищенный вход. Для упрощения не отправляем клиентам время с JS на “post_dt” на внесения данных, а указываем значение по умолчанию – CURRENT_TIMESTAMP, который предоставляет нынешнюю дату и время на сервер.
Когда количество комментариев больше, чем экран может вместить, то комментарии переполнены в div, используется вертикальный скроллбар. Во время загрузки страницы JS автоматически опускает скроллбар вниз к недавнему комментарию.
Что тут не так?
Проблема номер 1. Новый непрочитанный комментарий от пользователя не загружается в базу данных автоматически, без ручной перезагрузки страницы.
Это очень, очень серьезная проблема для любого чата.
Как это исправить?
Очевидно, один из путей сделать это - использовать HTTP-запрос к фоновой работе автоматически (с помощью JS) и асинхронно, то есть это один из способов обеспечить выполнение AJAX в любой form.
Проблема номер 2. Также неправильно то, что кнопка отправки перезагружает страницу (перенаправляет на вторую страницу и следующим шагом возвращает назад).
При перезагрузке страницы сбрасывает “Nick” в поле (также, как любые другие изменения, те, что сделали с пользователем)
Как это исправить?
Конечно, можно обеспечить выполнение обхода для сохранения изменений и перезагрузки на перезагружаемой странице. Но не эффективнее ли устранить причину, чем последствие? Можно только убрать перезагружаемую страницу и эта проблема будет решена автоматически.
Проблема номер 2.1. Видите ли что-то необычное тут?
Это слишком быстро?
Дело с чатом очень простое – загружаем только два маленьких текстовых параметра. Что делать, если нужно улучшить чат с помощью добавления присоединения, а конкретно - изображений и видео? Видео может иметь объем в размере нескольких мегабайт, что тогда в этом случае?
Давайте попробуем. Давайте немного изменим “post.php”, после $mysql->query() добавив это:
for ($i = 0; $i < 1000000000; $i++) { }
Старайтесь размещать какие-либо комментарии. Что мы видим? Нет, UI не остановилось (заморозилось), но браузер ждет до того, как закончится подключение:
Да, если “post.php” вызывает какую-то необработанную ошибку, то чат исчезает, и пользователь видит пустое окно с сообщением о непонятной ошибке. Чтобы вернуться к чату, пользователю стоит нажать кнопку “Back” в браузере. И это проблема номер 2.2.
Давайте уберем петлю с “post.php” и исправим эти проблемы.
Реализация легкого AJAX в простой чат
Автоматическое обновление комментариев
Эта веб-страница без AJAX? Это веб-страница, которая полностью перезагружается.
Эта веб-страница c AJAX? Это веб-страница, что перезагружается частично.
Где же взять части этих страниц? Стоит разделить нашу страницу на части, в этом случае сервер генерирует страницу частично.
Страница будет состоять из двух частей – блок комментариев и другой контент страницы. Комментарии будут загружаться и перезагружаться отдельно от другой страницы.
Давайте сделаем первую часть, то есть блок комментариев.
Для начала создадим пустой файл, назовем “getcomment.php”.
Дальше переходим в “index.php” для того, чтобы вырезать комментарии и далее отделить его.
1. Вырезаем инициализированный блок MySQL с “index.php"
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
вставляем в “getcomments.php”.
2. Следующее, вырежем контент div c комментариями с “index.php”:
php
if ($result) {
while ($post = $result->fetch_object()){
$nick = $post->nick;
$post_dt = $post->post_dt;
$post_text = $post->post_text;
echo "<b>$nickb> ($post_dt):<br>";
echo "$post_text<br>";
echo "<br>";
}
$result->close();
}
?>
И вставим (добавим) в “getcomments.php” после инициализации MySQL.
3. Дальше, вырежем недалекий блок MySQL с “index.php”:
php
$mysqli->close();
?>
Вставим его в конец файла “getcomments.php”.
4. Наконец-то, убираем JS-скрипт, который опускает скролл в самый низ.
<script type="text/javascript">
var comments = document.getElementById('comments');
comments.scrollTop = comments.scrollHeight;
script>
Не переживай, это только временно.
5. Сделано. Теперь имеем что-то наподобие этого:
<html>
<head>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
body>
html>
getcomments.php:
php
$mysqli = new mysqli("127.0.0.1", "root", "", "chatdb");
/* "127.0.0.1" is MySQL host name. In local servers (XAMPP, Ampps, etc.) it is 127.0.0.1. If you using a dedicated hosting, see it in admin panel. */
/* "root" and "" is login and password for DB's user. In local servers usually default DB user is "root" with empty password. */
/* "chatdb" is DB's name. */
/* Warning: in XAMPP you should manually run MySQL server (from xampp-control.exe) to get it work. */
$result = $mysqli->query("SELECT * FROM posts;");
?>
Вероятно, теперь наша страница разделена.
Давайте проверим её. Переходим http (точнее ССЫЛКА для локального сервера).
Дальше, переходим на главную страницу, http:///index.php
Это удивительно! Всё удачно получилось, разделив страницу на части за пару минут!
Не останавливаемся на этом. Теперь “glue” эти части с помощью AJAX. Как это сделать?
1. Для начала стоит создать пустой JS-скрипт на главной странице:
<script type="text/javascript">
alert('Test');
script>
Добавив это после тега div, перед закрывающимся тегом .
2. Сделаем HTTP GET запрос от JS к “getcommet.php”
Для этого используем XMLHtttpRequest (XHR) класс:
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getcomments.php', false);
xhr.send(null);
if (xhr.status == 200) {
alert(xhr.responseText);
}
script>
Это работает, но не читает старые версии IE те, что не поддерживают такую инициализацию.
Для получения более кросс-браузерного пути переходим в
и добавляем это:
<script type="text/javascript">
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
И главный скрипт (в конце)
<script type="text/javascript">
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', false);
xhr.send(null);
if (xhr.status == 200) {
alert(xhr.responseText);
}
script>
Как видно, теперь JS получает контент со страницы “getcomments.php” и показывает это в предупреждении.
2.1. Вопрос: «Это на самом деле AJAX (Asynchronous Javascript And Xml)?»
Это AJAX, потому что запрос сервера отформатирован в HTML (который основан на XML).
Но действительно ли это AJAX, это асинхронно?
Проверим. Добавим эти уже знакомые строки в любое место между в “getcomments.php”:
for ($i = 0; $i < 1000000000; $i++) { }
Что теперь видно на загружаемой странице?
Вначале страница зависает, его замораживает UI (становится не реагирующим на нажатие левой/правой кнопки мыши):
Дальше Chrome показывает навязчивое всплывающие окно, сообщающее об удалении страницы:
Это не AJAX! Это JAX! Как его сделать асинхронным?
К счастью, ХHR также поддерживает асинхронный режим:
<script type="text/javascript">
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true); /* true for asynchronous */
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if(xhr.status == 200) {
alert(xhr.responseText);
}
}
};
xhr.send(null);
script>
В этом случае браузер не ждет ответа с главного потока пользовательского интерфейса, он запускает в другом (асинхронно) и вызываемым событием “onreadystatechange” в главном контексте UI.
Теперь всё в порядке, страница полностью доступна, пока запрос запущен, и после ответа получит предупреждение.
for ($i = 0; $i < 1000000000; $i++) { }
И продолжаем работу.
3. Добавляем этот контент в div вместо предупреждения. Заменить это:
alert(xhr.responseText);
C этим:
var divComments = document.getElementById('comments');
divComments.innerHTML = xhr.responseText;
Возвращаем назад, клиент видит “glued” страницу с блоком комментариев.
4. Дальше следует установить интервал для автоматической проверки новых комментариев время от времени… и также восстановить удаленный сценарий автоматической прокрутки.
<html>
<head>
<script type="text/javascript">
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<form action="post.php" method="post" style="height: 0; display: table-row;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
function loadComments() {
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText !== divComments.innerHTML) {
divComments.innerHTML = xhr.responseText;
divComments.scrollTop = divComments.scrollHeight;
}
}
}
};
xhr.send(null);
};
loadComments();
setInterval(loadComments, 1000)
script>
body>
html>
Теперь проблема исправить это. Новые комментарии с другого пользовательского чата (другие вкладки браузеров, окон и экземпляров) получают каждые 1000 миллисекунды (1 секунду) автоматически.
Но отправка комментариев уже вызывает перезагрузку нашей страницы.
Отправка комментариев без перезагрузки
Как написано выше, XHR помогает отправлять HTTP GET-запросы без перезагрузки страницы и GUI заморозки (асинхронно).
Теперь отправляем HTTP-запрос асинхронно, но на этот раз POST запрос, а не GET.
И, естественно, XHR позволяет это. Используем метод send(). Для GET указываем null. Для POST устанавливаем запрос “body”.Также нужно добавить “Content-Type:application/x-www-from-urlencoded” в header для того, чтобы разрешить серверу знать, какой формат использовать для отправки данных.
Заметка: если не знаете, что отправлять, то можно захватить регулярный запрос с помощью “Fiddler” или же любой другой HTTP-перехватчик и только просимулировать запрос. HTTP-перехватчик — это незаменимый инструмент для работы с HTTP/HTTPS. Это позволяет увидеть все headers и bodies по всем HTTP(S)-запросам, что отправляются в систему. Лучше использовать “Fiddler”, это бесплатное, современное и очень простое приложение, что может поддерживать HTTP/HTTPS и оба Win x86/x64.
1. Для начала создадим пустой JS скрипт в HTML. Разместить до самого
тега, потому что этот скрипт будет использован для отправки формы комментария (форма будет вызывать этот скрипт при отправке).2. В этом скрипте, реализуем функцию, что будет отправлять ник и комментарии в “post.php”
<script type="text/javascript">
function postComment(nick, text) {
var xhr = getXmlHttp();
xhr.open('POST', '/post.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */
}
}
};
xhr.send('nick=' + nick + '&text=' + text); /* joining the data in format simulates form */
};
script>
3. Следующие, перезагружая страницу при отправке:
... onsubmit="return false;">
Также добавим вызов “postComment’s”:
action="post.php" method="post" style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
4. Наконец, необязательно, но можно убрать “action” и “method” с формы:
<form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
5. Результат:
<html>
<head>
<script type="text/javascript">
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
};
script>
head>
<body>
<style>
/* All CSS is very simplified. I provide it for example and no more.
* In Chrome it works tolerably, but in IE and Firefox it works very poorly.
*/
.content {
display: table;
width: 50%;
min-width: 400px;
height: 80%;
/* Center horizontally and vertically */
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
/* Design */
border: 1px solid;
background-color: silver;
padding: 5px;
}
/* For mobile devices */
@media (max-width: 400px) {
.content {
width: 100%;
min-width: 0;
padding: 0px;
}
}
style>
<div class="content">
<div id="comments" style="overflow-y: scroll; height: 100%;">
div>
<script type="text/javascript">
function postComment(nick, text) {
var xhr = getXmlHttp();
xhr.open('POST', '/post.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/* it isn't required to add comment to DOM manually, it will done automatically on next refresh via AJAX */
}
}
};
xhr.send('nick=' + nick + '&text=' + text);
};
script>
<form style="height: 0; display: table-row;" onsubmit="postComment(this.nick.value, this.text.value); return false;">
Nick:<br>
<input type="text" name="nick" style="width: 100%;">input><br>
<br>
Text:<br>
<textarea name="text" style="width: 100%;">textarea><br>
<br>
<input value="Submit" type="submit">input>
form>
div>
<script type="text/javascript">
var divComments = document.getElementById('comments');
function loadComments() {
var xhr = getXmlHttp();
xhr.open('GET', '/getcomments.php', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText !== divComments.innerHTML) {
divComments.innerHTML = xhr.responseText;
divComments.scrollTop = divComments.scrollHeight;
}
}
}
};
xhr.send(null);
};
loadComments();
setInterval(loadComments, 1000)
script>
body>
html>
Теперь простая реализация AJAX подошла к концу. Это ещё не конец, это только начало. Есть ещё достаточно всего для изучения и улучшения.
Як розпочати навчання веб-розробці
Автор: Редакция ITVDN
Введение
В этой статье мы рассмотрим некоторые инструменты, книги и ресурсы о том, как начать обучение веб-разработке. Эта статья направлена на тех, кто уже работал с HTML, CSS и JavaScript.
Зачем учиться веб-разработке?
Одно из главных преимуществ обучения веб-разработке – Вы получите навыки работы с большим количеством клиентов, проектов, а также научитесь контролировать собственный рабочий процесс.
С чего начать?
Ниже мы рассмотрим четыре языка программирования, которые стоит рассматривать прежде всего.
HTML5
HTML5 – последняя спецификация HTML. Он идет рука об руку с CSS3, новейшим образцом CSS. Новая спецификация HTML позволяет создавать приложения для браузера и мобильного устройства.
CSS3
С помощью CSS3 Вы сможете сделать разметку более стильной и профессиональной. Если Вы чувствуете себя достаточно опытным в CSS3, Вам стоит прочитать SVG книги.
LESS
LESS – это надстройка CSS, она расширяет язык CSS, добавляет в него динамику. Он вводит переменные, операции, function-like элементы. Возможность писать таблицы стилей упростит и улучшит написание кода.
Less работает в браузере, в Node и Rhino.
SASS
Таблицы стилей становятся больше и сложнее. В работе с ними может помочь препроцессор. Sass позволяет использовать функции, не существующие в CSS, например, переменные, возможность наследования и многое другое.
Составители для LESS и SASS
LESS и SASS - надстройки, поэтому Вам понадобится компилятор для преобразования результата.
CodeKit
CodeKit – одно из лучших приложений для разработчиков и дизайнеров, работающих на Mac. CodeKit следит за всем, что Вы создаете. Приложение может исправлять ошибки и составлять код самостоятельно.
Prepros
Prepros – GUI-компилятор, предназначенный для предварительной обработки таких языков: Compass, LESS, Sass, Jade, Stylus, Slim, Markdown, CoffeeScript и Haml. Prepros также может обновить браузер, когда Вы меняете свой код в редакторе. С Prepros можно работать и тем, у кого система Windows.
Текстовые редакторы для веб-разработчиков
Sublime Text
Sublime Text – текстовый редактор для кода разметки. В нем легкий пользовательский интерфейс, он удобен в эксплуатации.
Atom
Этот современный текстовый редактор начал пользоваться успехом совсем недавно, и этот проект пока не идеален. Он был создан веб-сервисом GitHub. Atom состоит из 50 модулей вокруг небольшого ядра с открытым кодом. Его цель - глубоко расширяемая система, стирающая различие между пользователем и разработчиком.
Обучение веб-разработке с помощью книг
Book Apart управляют люди, знающие веб лучше, чем 99% пользователей. Содержание этих книг всегда наивысшего качества, их легко читать, и они обеспечивают понимание процесса создания веб-сайтов.
HTML5 для веб-дизайнеров
Спецификация HTML5 состоит из 900 страниц, достаточно трудных для понимания. HTML5 для веб-дизайнеров - 85 интересных страниц. Когда Вы закончите ее читать, Вы не будете задавать себе вопрос, что такое HTML5, как он работает, или что нужно делать, чтобы стать лучшим веб-разработчиком. Эта небольшая книга рассказывает про все в легкой и сжатой форме.
CSS3 для веб-разработчиков
Если Вы не знаете, с чего начинать обучение CSS3, купите книгу Дэна Седерхольма (Dan Cederholm) (соучредитель Dribbble). Она содержит информацию о расширенных функциях, селекторах, а также о CSS3-анимации.
Sass для веб-дизайнеров
Sass может помочь создать интерактивные элементы. Дэн Седерхольм (Dan Cederholm) выпустил книгу, рассказывающую о Sass — процессоре предварительной обработки CSS. Это поможет нам взглянуть на CSS с другой стороны.
Адаптивный веб-дизайн
Чем больше предприятий создают страницы в интернете, тем больше спрос на разработчиков, способных написать код на современных языках программирования. Автор книги по адаптивному веб-дизайну - Итан Маркотт (Ethan Marcotte).
Источник: http://codecondo.com/web-designers-want-become-web-developers/
Безкоштовні онлайн інструменти для дизайнерів
Автор: Редакция ITVDN
Введение
В статье мы рассмотрим бесплатные инструменты для редактирования изображений, выбора цветов и шрифтов, работы с CSS, FTP и другие полезные сервисы. Благодаря их использованию дизайн Вашего веб-ресурса станет интереснее и привлекательнее.
Pixlr
Pixlr – мощное приложение для онлайн редактирования изображений. Оно проигрывает в функциональности Photoshop-у, но некоторые функции Pixlr впечатляют.
Typetester
Typetester – интерактивный сервис сравнения шрифтов. Он значительно облегчает подбор шрифтов веб-дизайнеру.
CSS Type Set
CSS Type Set дает Вам возможность работать с текстом в интерактивном режиме и превращать его в CSS.
net2ftp
net2ftp – полнофункциональный FTP-клиент в браузере. Подходит также для iPhone.
WhatTheFont
WhatTheFont определяет шрифт по картинке или URL.
Color Scheme Designer
Color Scheme Designer недавно был обновлен. Разработан новый дизайн и система определения цветовой схемы.
Fontstruct
С FontStruct можно создавать уникальные шрифты из геометрических форм, расположенных в сетке.
Kuler
Kuler позволяет просматривать цветовые палитры, созданные другими пользователями. Можно также создать свою собственную палитру, используя цветовое колесо и цветовые ползунки.
W3C Markup Validation Service
The Markup Validator – бесплатный сервис по W3C. С его помощью можно проверить XHTML и CSS валидность веб-документов.
ViewLikeUs
ViewLikeUs позволяет проверить, как Ваш сайт выглядит в распространенных форматах разрешения.
ColoRotate
Веселый сервис выбора цвета.
Pingdom Tools
Инструменты PingDom позволяют запускать тесты времени загрузки на веб-страницах. Они имитируют загрузку страницы в веб-браузере. Визуально показано время загрузки каждого объекта. Список объектов можно просмотреть или в порядке загрузки, или в виде визуальной иерархии.
Источник: http://webdesignledger.com/tools/15-free-online-tools-for-web-designers-on-a-budget
Порівнюємо браузерні двигуни
Автор: Редакция ITVDN
Введение
В данной статье сравнивается четыре самых популярных браузерных движка для WinForms, а именно WebBrowser, Gecko, Awesomium и OpenWebKitSharp.
Исходники для работы:
WebBrowser - 75.9 KB
Awesomium - 16.7 MB
GeckoFX - 9.9 MB
OpenWebKitSharp - 24.6 MB
Небольшие сравнительные характеристики
WebBrowser
Стандартный браузерный движок .NET фреймворка.
Ядро – MSHTML + Active-X, включающий в себя COM IWebBrowser2 MSHTML IWebBrowser2.
Может использоваться для Winforms и WPF.
Gecko
Сторонний браузерный движок.
Ядро – XULRunner, используемый в браузере Firefox.
Имеет только поддержку Winforms.
Awesomium WebControl
Сторонний браузерный движок с настраиваемым внешним ядром.
Ядро - .NET, WebKit.
Поддерживается Mono, WPF и Winforms.
OpenWebKitSharp
Сторонний браузерный движок.
Ядро – WebKit, используемый в браузерах Safari и Chromium (Chrome).
Имеет только поддержку Winforms.
WebBrowser
Gecko
Awesomium
OpenWebKitSharp
Лицензия
Бесплатная
Бесплатная. Open-source: MPL 1.1/GPL 2.0/LGPL 2.1
Бесплатная, если Ваш проект имеет прибыть в $100 тис. (можно купить за $2900)
Бесплатная
Платформы
Winforms, WPF
Winforms
Winforms, WPF, Unity, Mono, SDL
Winforms
Тип процессора
Любой
?
X86
?
Скорость загрузки страницы
Низкая
Средняя
Высокая
Высокая
Требуемые размеры библиотеки DLL
0MB
22.4MB
40.5MB
64.6MB
Остановка GUI при загрузке страницы
Нет
Нет
Да
Да
Минимальная требуемая версия .NET
.NET 2.0 или более ранняя
.NET 2.0 или более ранняя
.NET 4.0
?
Объект, метод, свойство модели
-
WebBrowser-identical
Не WebBrowser-identical
WebBrowser-identical, но многие методы и свойства не работают
Использование контента DOM – set HTML
Да
Да
Да
Только с помощью JS
Использование контента DOM – get HTML
Да
Да
Да, но не работают с отключенным JS
Только с помощью JS
DOM – GetElementById
Да
Да
Только с помощью JS
?
DOM – GetElementsByClassName
Только с помощью JS
Да
Только с помощью JS
?
DOM – GetElementsByTagName
Да
Да
Только с помощью JS
?
Встраивание JavaScript
Да
Да
Да
Да
Отключение JavaScript
Нет
Да
Да
?
Настройка прокси-сервера
Нет
Да
Да
?
Встроенный визуальный редактор HTML
Да
?
Нет
Нет
Проверка HTML синтаксиса
Нет
?
Да
Да
Встроенный менеджер загрузок
?
?
?
Да
Использование WebBrowser
Встроенный визуальный редактор HTML
webBrowser1.Document.DomDocument.GetType().GetProperty("designMode").SetValue
(webBrowser1.Document.DomDocument, "On", null);
Программная вставка HTML элемента
// appends:
//
//
// src="http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif" />
//
var mylink = webBrowser1.Document.CreateElement("a");
mylink.Id = "mylink";
mylink.SetAttribute("href", "http://codeproject.com/");
var myimg = webBrowser1.Document.CreateElement("img");
myimg.Id = "myimg";
myimg.SetAttribute("src",
"http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif");
mylink.AppendChild(myimg);
webBrowser1.Document.Body.AppendChild(mylink);
Выбор DOM элемента – GetElementById
var id = "mylink";
var el = webBrowser1.Document.GetElementById(id);
if (el != null) {
MessageBox.Show("Element with id=\"" + id + "\" has innerHTML: " + el.InnerHtml);
}
else {
MessageBox.Show("Element with id=\"" + id + "\" not found.");
}
Выбор DOM элемента – GetElementsByTagName
var tag = "img";
var elz = webBrowser1.Document.GetElementsByTagName(tag);
if (elz.Count > 0) {
MessageBox.Show(elz.Count + " elements with tag <" + tag + "> found.");
}
else {
MessageBox.Show("No elements with tag <" + tag + "> found.");
}
Использование контента DOM – set HTML
webBrowser1.DocumentText = "<html><head><script>alert('check!');
script>head><body>lorembody>html>";
Встраивание JavaScript
var head = webBrowser1.Document.GetElementsByTagName("head")[0];
var scriptEl = webBrowser1.Document.CreateElement("script");
scriptEl.SetAttribute("text", "function sayHello() { alert('hello') }");
head.AppendChild(scriptEl);
webBrowser1.Document.InvokeScript("sayHello");
Использование Gecko
Использование контента DOM – set HTML
geckoWebBrowser1.Document.DocumentElement.InnerHtml =
"<html><head>head><body>
<a class=\"link\">fa>body>html>";
Выбор DOM элемента – GetElementsByClassName
(geckoWebBrowser1.Document.GetElementsByClassName("link")[0] as
Skybound.Gecko.GeckoElement).InnerHtml = "tt";
Использование Awesomium WebControl
Использование контента DOM – set HTML
webControl1.HTML = "<html><head><script>alert
('check!');script>head><body>lorembody>html>";
Использование контента DOM – get HTML
var allhtml = webControl1.ExecuteJavascriptWithResult
("document.documentElement.outerHTML");
Встраивание JavaScript
webControl1.ExecuteJavascript
("document.body.innerHTML += 'Hello, World!';");
Отключение JavaScript
var ws = WebCore.CreateWebSession(new WebPreferences() { Javascript = true });
webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws };
this.Controls.Add(webControl1);
Настройка прокси-сервера
var ws = WebCore.CreateWebSession(new WebPreferences()
{ ProxyConfig = "255.255.255:8080" });
webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws };
this.Controls.Add(webControl1);
Использование OpenWebKitSharp
Использование контента DOM – set HTML
webKitBrowser1.GetScriptManager.EvaluateScript("document.body.innerHTML='';");
Выводы
В каждом движке есть свои + и –, с которыми можно столкнутся при разработке браузера. В любом случае, только Вам решать, какой из движков подойдет под Ваш стиль разработки.
Источник: http://www.codeproject.com/Tips/825526/Csharp-WebBrowser-vs-Gecko-vs-Awesomium-vs-OpenWeb?PageFlow=Fluid
Розгортання ASP.NET MVC Web Site на Microsoft Azure
Автор: Редакция ITVDN
Введение
Microsoft Azure является облачно-вычислительной платформой и инфраструктурой, предоставленной корпорацией Microsoft. Эта платформа выполняет такие функции, как построение, развертывания и управления приложениями и услугами, и они могут быть доступны по всему миру. Azure доступен как Платформа, как сервис (PaaS) и Инфраструктура, как сервис (IaaS).
Чтобы сделать развертывание приложения.NET на Microsoft Azure, Visual Studio 2012 и Visual Studio 2013 предоставляет Вам необходимые инструменты. Вы можете загрузить полную версию Visual Studio 2013 года здесь. Чтобы использовать Azure, сначала нужно посетить сайт manage.windowsazure.com и подписаться на эту услугу. Вы также можете получить бесплатную пробную подписку, чтобы начать работу. После входа на портал, на следующем рисунке продемонстрированы некоторые службы/функции, которые можно получить:
В этой статье мы будем использовать приложение, созданное с помощью Angular.js, MVC, WEB API для выполнения CRUD-операций. Мы будем публиковать приложения на Azure в качестве веб-сайта. Загрузите исходный код и откройте это приложение в Visual Studio 2013.
Создание сервера базы данных с помощью SQL Azure
Чтобы успешно запустить веб-сайт, Вы должны развернуть базу данных, используемую нашим веб-сайтом в облаке. Чтобы развернуть базу данных Azure, нужно создать сервер базы данных, используя Azure SQL.
Шаг 1: Выберите SQL DATABASES, и Вы увидите страницы базы данных, как показано здесь:
Выберите Servers, это позволит создать новую базу данных SQL SERVER. Нажмите кнопку "CREATE A SQL SERVER DATABASE", ниже появится окно:
Введите необходимые данные. После ввода данных выберите галочку в нижнем углу, чтобы создать базу данных сервера:
Кликаем на кнопку "MANAGE" внизу страницы, это позволит Вам добавить сервер доступа в правила брандмауэра, так чтоб был получен доступ к приложению. Эти правила добавят IP-адрес вашей машины в правила брандмауэра. Чтоб узнать имя экземпляра сервера базы данных, кликаем по имени базы данных для отображения информационной панели. Прокрутите вниз страницы панели мониторинга для отображения MANAGE URL. Она начинается от https://.database.windows.net. Часть URL после https://, имя экземпляра базы данных.
Шаг 2: Чтобы Соединиться с сервером базы данных, скопируйте часть URL после http://, и от локального экземпляра SQL Server, кликаем по Connect на объектном проводнике, и в Connect To Server окно вводит детали базы данных как показано здесь:
Это выведет на экран Сервер базы данных Azure SQL экземпляр в объектном проводнике на локальном экземпляре SQL Server.
Введите необходимые параметры. SERVICE TIERS позволит выбрать уровень базы данных, таких как BASIC | STANDARD | PREMIUM. Выберите уровень BASIC. Выберите SEERVER как сервер базы данных, его мы создали ранее. Создаваемая база данных будет такая, как показано на изображении:
Кликните по кнопке MANAGE внизу страницы, она создаст правило Брандмауэра для того, чтобы установить доступ базы данных:
Далее откроется следующая страница, где информация об Администраторе Базы данных обязательна к заполнению:
Клик на Log On выведет на экран следующую страницу:
Кликните по “Design”, чтобы составить таблицы, Views и Stored Procedures.
Кликаем по “New Table” и создаем список сотрудников, как показано:
Введите простые записи в эту таблицу, используя ссылку New Query.
Внесение изменений в Web.config файл MVC-приложения
Откройте приложения MVC в Visual Studio 2013 и внесите следующие изменения в строку подключения.
data source=;
initial catalog=Application;
user id=;
password=;
MultipleActiveResultSets=True;
App=EntityFramework"
"providerName="System.Data.EntityClient" />
(В качестве альтернативы Вы можете запустить Entity Framework в проект, в папку Models для создания строки подключения)
Создание Веб-Сайта С Помощью Windows Azure Portal
Нажмите кнопку на сайте, чтобы отобразить параметры создания веб-сайта. Нажмите на ссылку CREATE A WEBSITE. Это приведет к появлению следующих вариантов для создания веб-сайта:
Далее Вы можете ввести информацию о URL. Введённый URL уникальный и будет проверен Azure. Если это имя не будет корректное, то URL будет .azurewebsites.net. Центр обработки данных должен быть выбран согласно Вашему выбору. Как только Центр обработки данных выбран, тогда все другие ресурсы, необходимые веб-сайту, например, Базы данных SQL, должны быть размещены в том же Центре обработки данных, так как это поможет в управлении затратами. Как только будет создан Веб-сайт, портал покажет детали:
Чтобы получить детали о веб-сайте, кликните по его имени, ниже будет выведена инструментальная панель на экран, она поможет в управлении и мониторинге веб-сайта.
Чтобы опубликовать наш веб-сайт, созданный с помощью VS tools в Visual Studio, мы должны загрузить профиль публикации. Он может быть загружен и скачан по ссылке, как продемонстрировано на изображении.
Публикация веб-сайта в Visual Studio
Откройте SPA Application в Visual Studio 2013. Кликните правой кнопкой по названию проекта, чтобы вывести на экран контекстное меню Publish Option.
Эта опция выведет на экран следующее окно:
Данное окно имеет следующие параметры:
Microsoft Azure веб-сайтов - поддержка прямого входа на Windows Azure на основе подписки.
Import - позволяет импортировать веб-сайт и публиковать профиль, который загружается с портала Azure.
Custom - позволяет создать новый профиль, публиковать для развертывания веб-сайта.
Нажмите на кнопку "Import" и будет отображено следующее окно для импорта профиля публикации:
После нажатия "OK", будет отображено следующее окно с деталями веб-развертывания:
Кликните “Next”. Так как мы уже развернули базу данных по Azure SQL, и последовательность подключений к базе данных уже обновлена в web.config файле, следующее окно покажет строку подключения:
Выберите “Далее”, чтобы отобразить список файлов, которые будут опубликованы:
Кликните по кнопке “Publish”, веб-сайт будет опубликован со всеми требуемыми ссылками.
Как только веб-сайт будет успешно опубликован, он может быть просмотрен.
Примечание: в этой статье не использовался CSS и, следовательно, неправильно расположение таблиц. Добавьте свои CSS, чтобы украсить страницу.
Таким образом происходит развертывание веб-сайта на Azure.
Источник: http://www.dotnetcurry.com/showarticle.aspx?ID=1064
Посібник з обробки комплексних дизайнів з Twitter Bootstrap
Автор: Редакция ITVDN
Введение
Много информации о Twitter Bootstrap в наши дни в мире веб-дизайна и программирования. Люди называют его благом для веб-разработчиков, это возможность проектировать с отсутствием знаний.
В большинстве сценариев веб-разработчиков имеется готовая идея, но невозможно приступить из-за отсутствия дизайн-проекта, над которым нужно работать. Они должны полагаться на дизайнеров, чтобы завершить клиентскую сторону своего проекта. Этот процесс является серьезной потерей времени для разработчика, для которого имеет значение, чтобы идея воплотилась в реальность как можно скорее. В таких сценариях Twitter Bootstrap приходит на помощь.
Twitter Bootstrap – CSS фреймворк, он помогает в разработке веб-приложений. Он один из простых CSS фреймворков. Предполагается, что у Вас нет знаний в проектировании дизайна, все что Вам нужно - это написать немного HTML кода согласно спецификациям Bootstrap. В нем уже написаны для Вас CSS стили, также он имеет встроенную поддержку jQuery, и некоторые популярные инструменты JavaScript.
Начинаем
Чтобы приступить к использованию Twitter Bootstrap, Вам нужно скачать bootstrap.zip с официального сайта. Он содержит в себе набор файлов, а именно css, js и img, которые Вам понадобятся, чтобы начать создание веб-сайтов с Twitter Bootstrap. Папка “css” имеет таблицу стилей для адаптивного и неадаптивного дизайна. Она понадобиться для того, чтобы быстрее сделать сайт. Папка “js” имеет bootstrap.js. JavaScript файлы, которые содержат различные компоненты. В последней папке “img” содержится два набора одинаковых иконок, за исключением их фонового цвета. Изображения halflings были предоставлены glyphicons, и предоставляются бесплатно в проекте Twitter Bootstrap.
До того, как приступить к работе, откройте Ваш текстовый редактор и создайте первый файл с именем “index.html”. Сохраните его в корневой папке Вашего проекта.
Основной HTML шаблон для работы с Bootstrap
Для активации Bootstrap фреймворк необходимо включить все нужные файлы и создать HTML-структуру. Сначала Вам необходимо построить структуру, а затем определить, какие файлы потребуются. Сперва, на что нужно обратить внимание, это то что HTML5 требует doctype:
DOCTYPE html>
Устанавливаем meta кодировку в utf-8, потому что в проекте потребуется использовать специальные символы, для того чтобы браузер правильно их отображал. Twitter Bootstrap также указывает на использование utf-8 в их документации для лучшей совместимости.
<meta charset="utf-8">
Когда Вы установите стандартные HTML-теги, такие как
, и
Теперь Вам нужно перейти к подключению необходимых таблиц стилей bootstrap.css.
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
Теперь CSS готов, далее Вам необходимо включить все необходимые JavaScript файлы. Во-первых, необходимо включить файл jQuery, для этого подключим jQuery CDN.
<script src="http://code.jquery.com/jquery-1.10.1.min.js">script>
Затем подключаем Bootstrap файл.
<script src="js/bootstrap.js">script>
Все эти скрипты должны лежать чуть выше в конце тега .
Наконец, закончили с процессом подключения всех необходимых файлов. Ваш index.html выглядит так.
Понимание того как это работает
Во-первых, Вам нужно помнить, что Twitter Bootstrap во многом зависит от 12 сеток. Итак, о каких сетках идет речь?
Предположим, Вы хотите две большие равные части внутри body в вашей странице index.html. Вы должны передать класс “span6” для каждого элемента div. Это говорит о том, что Bootstrap сделает две равные части, которые должны охватывать шесть сеток по бокам. Он имеет набор предопределенных классов для каждого элемента. Вы должны передавать соответствующие классы для каждого в случае необходимости.
Работа с Bootstrap
Разделим демо-страницу на пять основных частей:
The header
The marketing area
The leftside bar
The contents area
The footer
Чтобы обернуть все содержавшееся в наш веб-сайт, Вам нужно создать контейнерный класс, который должен быть с центра до середины экрана, а также имеет отступы со всех сторон. Для этого Bootstrap имеет класс “container”, который Вы будете использовать в качестве родительской оболочки. Итак, идем дальше и пишем следующий кусок кода:
<div class="container">
Теперь поместим во внутрь контейнера div заголовок сайта. Для этого Вам нужно использовать тег h1.
<h1><a href="#">Bootstrap Sitea>h1>
Страница index.html будет размещена по центру. Время для панели навигации. Twitter Bootstrap предлагает следующую разметку для панели навигации:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">Homea>li>
<li><a href="#">Projectsa>li>
<li><a href="#">Servicesa>li>
<li><a href="#">Downloadsa>li>
<li><a href="#">Abouta>li>
<li><a href="#">Contacta>li>
ul>
div>
div>
div>
“navbar” должен быть задан классом в основной панели навигации. Вам нужно следовать за вышеупомянутой разметкой, чтобы выглядело согласно стилю Twitter Bootstrap. Поместите код чуть ниже тега . Удостоверьтесь, что Вы помещаете все в родительском классе оболочки, т.е. “container”. Перейдите к браузеру и проверьте страницу, увидите красивую панель навигации, чуть ниже заголовка сайта.
Конечно же, хочется, чтобы заголовок, выглядел немного иначе. В конце статьи будет рассмотрено, как Вы можете добавить свои стили, в существующие стили Bootstrap и добавить немного больше CSS для оформления заголовка. Давайте двигаться дальше, чтобы сделать вторую часть, которая называется “The marketing area”.
Есть предопределенный класс, предоставленный Twitter Bootstrap для области “The marketing area”. Ему дали название класс “hero-unit”. Далее копируем приведенный ниже код и вставляем его ниже навигации div.
<div class="hero-unit">
<h1>Marketing stuff!h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.p>
<a href="#" class="btn btn-large btn-success">Get Starteda>
div>
Не написав ни одной части CSS, у Вас есть такая красивая “The marketing area”.
Приступим к самой интересной части - создание ссылок и кнопок. Вы можете создать любую ссылку, при этом она будет выглядеть так, как кнопка, добавив класс “btn”, и затем можно изменять ее размер, добавив несколько дополнительных классов, таких как btn-large/btn-small/btn-mini. Для изменения цвета кнопок добавим классы, такие как btn-success (зеленый), btn-info (светло-голубой), btn-warning (желтый) и btn-danger (красный). Подробнее о кнопках и украшениях ссылок можно найти в Twitter Bootstrap Base CSS section. Эти классы применяются к HTML элементу button.
Теперь перейдем дальше, к панели левой стороны и содержанию. Как говорилось ранее, Twitter Bootstrap - это система из 12 сеток. Это означает, что Вы можете создать самое большое количество: это 12 сеток по вертикали, в любом родительском элементе.
В настоящее время работаем в родительском классе “container”. Таким образом, разделим раздел на две неравные части, используя 12 сеток. Для левой стороны панели Вам нужно использовать класс “span4” и для правой стороны будем использовать “span8”. Имена классов показывают, что левая сторона должна охватить четыре сетки, а правая оставшиеся восемь.
<div class="row">
<div class="span4">
<p>Dummy Textp>
div>
<div class="span8">
<p>Dummy Textp>
div>
div>
Вам нужно создать два отдельных столбца, стоящие рядом. По умолчанию классы span* выравниваются по левому краю. Чтобы разместить столбцы ниже всего содержимого, Вам нужно добавить “row”. Это действует, как традиционная строка таблиц. Теперь заполним левый столбец навигационным списком.
Для создания навигационного списка следуйте следующей разметке.
<ul class="nav nav-list">
<li class="nav-header">What we are?li>
<li class="active"><a href="#">Homea>li>
<li><a href="#">Our Clientsa>li>
<li><a href="#">Our Servicesa>li>
<li><a href="#">About Usa>li>
<li><a href="#">Contact Usa>li>
<li class="nav-header">Our Friendli>
<li><a href="#">Googlea>li>
<li><a href="#">Yahoo!a>li>
<li><a href="#">Binga>li>
<li><a href="#">Microsofta>li>
<li><a href="#">Gadgetic Worlda>li>
ul>
Вам нужно добавить класс “nav-list” в дополнение к классу “nav”, и это будет выглядеть как список. Добавляем класс “nav-header” к любому элементу “li”, “nav” класс будет выглядеть так, как заголовок в разделе ссылки.
Перемещаясь в “The contents area”, Вы будете просто заполнять его общими тегами
и тегами
. Никакие дополнительные классы не нужны, поскольку хотим, чтобы элементы выпадающего списка появлялись друг за другом, один ниже другого. Ниже приведен код, поместите его внутри “span8”.
<h3>How we started?h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<h3>How do we market?h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
Как Вы можете видеть, почти закончили создание окончательного дизайна. Далее просто осталась часть “the footer portion”.
Для “the footer portion”, будем снова делить “row” на три части. На этот раз раздел будет находиться в равных частях “span4”. Таким образом, Вы создадите еще одну строку div. Выполните приведенный ниже код:
<div class="row">
<div class="span4">
<h4 class="muted text-center">Meet Our Clientsh4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn"><i class="icon-user">i> Our Clientsa>
div>
<div class="span4">
<h4 class="muted text-center">Know Our Employeesh4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn btn-success"><i class="icon-star icon-white">i> Our Employeesa>
div>
<div class="span4">
<h4 class="muted text-center">Reach Ush4>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.p>
<a href="#" class="btn btn-info">Contact Usa>
div>
div>
С помощью класса “span4” разделили строку на три равные части, а затем заполнили каждую из них с помощью тега
, они выглядят как кнопки. Проверьте результат в браузере. Вы увидете маленькие изображения внутри кнопки, Our Clients и Our Employees. Вам нужно использовать тег и добавить соответствующие классы изображений, icon-user, icon-star, icon-glass и т.д. Чтобы изменить значок для белого, используйте icon-white вместе с icon-user и icon-star. Полный список значков классов можно найти в документации Bootstrap.
Чтобы добавить интервал между областью нижнего колонтитула и над содержанием, Вам нужно добавить тег
между каждой “row”. Вставте тег
и посмотрите на демо-страницу.
Теперь для области авторского права, добавим следующий код:
<hr>
<div class="footer">
<p>© 2013p>
div>
Итак, наконец, создали простую, но достойную целевую страницу, используя чисто Twitter Bootstrap framework.
Добавление пользовательских стилей к Twitter Bootstrap
Если у Вас есть немного знаний в CSS, и Вы хотите настроить Bootstrap стили по умолчанию, то лучший способ — это создать собственную пользовательскую таблицу стилей, импортировать Bootstrap’s Style в верхней части, а затем переопределить стили в свой CSS-файл. Убедитесь, что ссылка именно на Вашу пользовательскую таблицу стилей, а не для Bootstrap CSS. Если для Вас достаточно таблиц стилей по умолчанию (Twitter Bootstrap), то Вам не нужно создавать пользовательскую таблицу стилей. Многие веб-сайты могут использовать эту структуру, и она станет общем стилем, который можно будет увидеть в каждом другом сайте, созданном с Bootstrap. Поэтому лучше добавить свою собственную таблицу CSS вверху Bootstrap CSS.
@import url("bootstrap.min.css");
Некоторые более важные компоненты из Twitter Bootstrap
Выделенный параграф
Чтобы выделить абзац посреди длинного документа, можете добавить класс “lead” к нему. Это сделает шрифты определенного абзаца немного больше, чем остальная часть документа.
Теги акцентирования
Вы можете также использовать стандартные теги и внутри html-страницы. Теги также будут работать.
Выравнивание текста
Внутри абзацев или div-тегов можно выравнивать текст с помощью классов: “text-left”, “text-center” и “text-right”.
Цвет текста
Можете установить цвет для текста абзаца по умолчанию, используя различные цвета текста как “muted” для серого, “text-warning” для красных, “text-error” для глубокого темно-бордового, “text-info” голубого и “text-success” для зеленого.
Стиль таблицы
Twitter Bootstrap имеет ту же самую конструкцию таблиц по умолчанию. Выполните следующую разметку:
<table class="table">
<tr>
<td>td>
<td>td>
tr>
...
table>
Работа с изображениями
Вы также можете добавлять изображения, используя обычный тег. Чтобы сделать Ваш дизайн более интересным, добавьте такие классы, как “img-rounded” для изображений с закругленными углами, “img-circle” для прокрутки изображений и “img-polaroid”, чтобы дать тень и радиус.
Выпадающее меню
Для создания выпадающего меню в уже существующую панель навигации, как показано в демо-странице, добавьте следующую разметку.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-th-large">i> Drop Down
<b class="caret">b>
a>
<ul class="dropdown-menu">
<li><a href="#">Item1a>li>
<li><a href="#">Item2a>li>
<li><a href="#">Item3a>li>
ul>
li>
Для выпадающего списка нужно обернуть родительский элемент с помощью класса “dropdown”, а затем использовать по умолчанию разметку “a”, и потом вложить еще один элемент
со списком элементов.
Источник: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/
6 основних тенденцій, які будуть популярні у веб-розробці у 2015 році
Автор: Редакция ITVDN
Введение
Подошел к концу 2014 год и самое время спросить себя: «Какие тенденции будут преобладать в сфере веб-разработки в 2015 году?». Представляем вашему вниманию подборку трендов, которые, по нашему мнению, будут популярны в следующем году.
1. Адаптивный дизайн
Вместе с ростом популярности на планшеты начал расти спрос на адаптивный дизайн, сегодня это - неотъемлемая часть любого сайта. С помощью “Responsive Design” пользователь сможет спокойно просматривать Ваш сайт на любом девайсе, будь то PC или мобильный телефон. Зачем Вам адаптивный дизайн? Ответ простой, сейчас все больше пользователей просматривают новости через разные устройства с разным расширением экрана, поэтому выбор ресурса напрямую зависит от удобства его использования на всех носителях. Главный критерий выбора – ширина контента не должна превышать ширину экрана, иначе пользователю будет неудобно воспринимать информацию и он к вам больше не вернется.
2. Плоский дизайн (Flat Design)
Плоский дизайн начал набирать свою популярность после релиза Windows 8, благодаря компании Microsoft и ее Metro-стилю. Концепция плоского дизайна заключается в том, что двухмерные изображения не перегружают восприятие пользователя и уменьшают загруженность ресурса. В плоском дизайне отсутствуют лишние эффекты: тени, блики и градиенты, в противовес им выдвигаются яркие цветовые решения.
3. Карточный дизайн
Карточный дизайн — это способ подачи контента на страницах сайта. Каждая карточка содержит в себе определенную информацию, это дает ресурсу возможность концентрировать внимание пользователя и легко группировать содержимое сайта. Главное преимущество данного типа дизайна — это легкость взаимодействия пользователя с Вашим сайтом, ведь карточки легко можно опубликовать на своей странице в социальных сетях, сохранить в избранное или прокомментировать. Первопроходцами карточного дизайна считаются Pinterest и Google+. Благодаря своей отзывчивости и адаптивности все больше сайтов переходит на карточный дизайн.
4. Фоновые изображения и видео
За последнее время все большую популярность набирают ресурсы с широкоформатным изображением или видео на фоне, с небольшой цитатой поверх него. Этот прием идеально подходит для сайта-портфолио или сайта-визитки.
5. Рисованные иллюстрации и шрифты
Сайты с рисованной типографикой или иллюстрациями подкупают своей неповторимостью. Все больше сайтов начали использовать в своем дизайне элементы, разработанные вручную, именно под определенный проект. Эти детали делают сайт уникальным и запоминающимся, пользователю приятней пользоваться таким сайтом, он захочет рассказать о нем другу и обязательно вернется сам.
6. SVG иконки и анимации
SVG — это специальный язык разметки векторной графики, который разрабатывается W3C с 1999 года. Возможность создавать SVG изображения доступна в большинстве векторных редакторов: Illustrator, Corel Draw или Sketch. SVG-графика часто используется для создания иконок, они выглядят качественней и легко адаптируются под разные расширения экрана. И напоследок, с помощью SVG можно создавать анимированные иконки.
Источник: http://www.sevensignature.com/blog/articles/top-10-sign-things-come-2015-web-design-trends/
Приєднуйтесь до Games Gathering Conference у Львові!
Автор: Редакция ITVDN
🗓 Коли? 29 лютого - 3 березня 2024 року
🏨 Де? Львів, Готель "Дністер"
Формат конференції традиційно гібридний: ви можете взяти участь онлайн або вирушити в захопливу подорож до Львова та приєднатися особисто.
🔵 Що на вас чекає:
- 29 лютого - Онлайн день конференції
- 1 березня - Pre-party для спікерів та власників бізнес-квитків
- 2 березня - Живий день конференції та головна вечірка
- 3 березня - Живий день конференції
🏰 Безпека відвідувачів для організаторів понад усе, тому експо та лекційні зали розташовані на -1 першому поверсі, який слугує укриттям.
Серед спонсорів цього разу такі компанії, як Unreal Engine, Fraglab, Republic of Gamers, Quartsoft Games, Playtika, Zagrava, Vostok Games, Ulysses Graphics та ще більше компаній вже зареєструвалися та підтвердили свою участь.
🎮 На Games Gathering буде представлено понад 30 інді-проектів від розробників з різних країн світу, на різних ігрових платформах.
Тут ви зустрінете унікальні та оригінальні ідеї, привнесені талановитими творцями, які додадуть різноманітності та свіжого погляду у світ геймдеву.
А серед спікерів будуть десятки експертів, серед яких:
- 🌟 Беата Куркуль, GrandMa Studios, Art Director
- 🌟 Леонід Степанов, Remedy Entertainment, Senior Gameplay Designer
- 🌟 Rick Lagnese, MADFINGER Games, PR & Comms Director
- 🌟 Аня Булавіна, CD Projekt RED, Senior Environment Artist
- 🌟 Олександра Дика, Timecode - Netflix, 2D Artist\QA
- 🌟 Abby LeMaster, Riot Games Lead Gameplay Producer
📺 Не забувайте, що всі лекції з усіх попередніх конференцій Games Gathering вже доступні безкоштовно на YouTube-каналі.
Скористуйтесь спешл промо кодом на знижку 10%: ITVDN10GG24LVIV на Games Gathering Conference у Львові! 🚀
Registration
Реєстрацію на найбільше європейське ІТ-змагання – DEV Challenge XX відкрито!
Автор: Редакция ITVDN
Шукаєш нетривіальні виклики для своєї IT-кар'єри? Прагнеш продемонструвати свої навички та знання у справжньому бою?
👉Реєстрація за посиланням: https://cutt.ly/uwxW4OBd
Обирай свою номінацію:
Backend
Frontend
Testing
Product Design
UI Design
Крім призів отримуй:
🔸 Вихід на новий рівень складності завдань, з яким можеш впоратись, корисний стрес та апгрейд навичок.
🔸 Нетворкінг та обмін досвідом із експертами ІТ-сфери: 2500+ учасників та 40+ суддів за сезон. Гарна нагода знайти однодумців, партнерів по проєкту або менторів у потрібному напрямку.
🔸 Можливість заявити про себе та визнання як професійного ІТ-спеціаліста від провідних компаній-партнерів.
Традиційно, більшість завдань учасників будуть пов’язані з соціальними ІТ-рішеннями для допомоги Україні. Разом до перемоги!
JavaScript fwdays’23
Автор: Редакция ITVDN
Команда Fwdays запрошує на онлайн конференцію JavaScript fwdays’23!
Next.js, Vue.js, blockchain, Firebase, CRDT, System Design interview, memory management та багато іншого 🙌
🗓 Основні дні конференції – 16 та 20 травня (вівторок та субота).
🗣 Доповіді англійською та українською мовами.
💻 Додаткий день з воркшопами – 15 травня.
Є два варіанти участі:
✔️FREE ONLINE
✔️FULL ONLINE (доступ до записів доповідей після івенту, участь у воркшопах)
Реєструйтесь безкоштовно або використайте промокод 0F96C03AF0 та отримайте знижку 10%, деталі за посиланням 🔗https://bit.ly/44iW7vr
Також Fwdays підготували місця, де можна зібратися, щоб подивитися конференцію 🍿
📍 Wroclaw, Poland, Proxet office, зареєструватися: https://bit.ly/3njTlp1
📍 Krakow, Poland, Wix Engineering office, зареєструватися: https://bit.ly/3NQtQ9W
📍 Київ, офіс Sigma Software, зареєструватися: https://bit.ly/3AIUgCH
📍 Львів, офіс Avenga, зареєструватися: https://bit.ly/3NvpDs0
📍 Хмельницький, Avenga (iHUB), зареєструватися: https://bit.ly/3NNqTHd
📍 Житомир, офіс Infopulse, зареєструватися: https://bit.ly/42j4s0N
