Html страница глазами разработчика приложений. Часть 1: «Подготовка»
- вторник, 20 февраля 2018 г. в 03:15:46
javascript
https://habrahabr.ru/post/349462/
- Разработка веб-сайтов
- jQuery
- VueJS
- JavaScript
- HTML
Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.
Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: "А почему бы не создать сайт с помощью vue и добавить имитацию базы?".
Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного "красоты" в html верстку.
Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком "тяжелым".
Но пришлось все равно разбивать статью на 2ве части, тут описывается только подготовка небольшой страницы и добавление меню для смены языка.
Итак, начнем!
Создадим папку в которой будем работать, далее в ней создадим папку "css" и туда добавим соответственно файл с нашими классами для странички: "style.css"
#main{
height:100%;
width:100%;
position:absolute;
top:0;
right:0;
opacity:1;
}
#wrapper{
float:left;
width:100%;
height:100%;
position: relative;
z-index:4;
}
.content-holder{
vertical-align: top;
float:left;
width:100%;
position:relative;
height:100%;
left: 0;
top: 0;
right: 0;
z-index: 2;
}
<---------------header--------------->
header {
position: fixed;
width: 100%;
z-index:22;
top:0;
left:0;
background:rgba(255,255,255,1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.transition{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
-ms-transition: all 500ms linear;
transition: all 500ms linear;
}
.tr-header{
background:rgba(255,255,255,0.0);
border-bottom:1px solid rgba(255,255,255,0.4);
}
header.tr-header.sticky {
background:rgba(255,255,255,1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.header-height-emulator {
float: left;
width: 100%;
position: relative;
z-index: 1;
}
.container{
width:92%;
max-width:100%;
margin:20px auto;
position: relative;
zoom:1;
z-index:3;
}
.nav-holder {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
position: relative;
top: 0;
left: 0;
width: 100%;
}
.scroll-nav {
float:right;
}
.scroll-nav li {
display:inline-block;
}
.scroll-nav li a {
background: #6dc77a;
float: left;
border-radius: 25px;
padding: 10px 22px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
border:2px solid rgba(255,255,255,0);
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-o-transition: all 200ms linear;
-ms-transition: all 200ms linear;
transition: all 200ms linear;
}
.scroll-nav li a:hover ,
.scroll-nav li.actscroll a {
border:2px solid rgba(255,255,255,1.0);
}
<---------------end header--------------->Далее создаем index.html(в основной папке) со следующим кодом:
<head>
<!--=============== basic ===============-->
<meta charset="UTF-8">
<title> My Company</title>
<!--=============== css ===============-->
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
</head>
<body>
<!--================= main start ================-->
<div id="main">
<div id="wrapper">
<div class="content-holder">
<!--================= Header + Scroll navigation ================-->
<header class="transition tr-header" id="header">
<div class="container">
<div class="nav-holder">
<nav class="scroll-nav">
<ul>
<li class="actscroll"><a href="#sec1">Главная </a></li>
<li><a href="#sec2">О нас</a></li>
<li><a href="#sec3">Наша продукция</a></li>
<li><a href="#sec4">Наши технологии</a></li>
<li><a href="#sec5">Где приобрести</a></li>
<li><a href="#sec6">Поддержка</a></li>
<li><a href="#sec7">Партнеры</a></li>
<li><a href="#sec8">Контакты</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End header -->
</div>
</div>
</div>
</body>
</html>Для красоты скачаем любую картинку, и добавим ее в новую папку "images". И разместим ее вверху страницы.
<body>
<!--================= main start ================-->
<div id="main">
<div id="wrapper">
<div class="content-holder">
<!--================= Header + Scroll navigation ================-->
<header class="transition tr-header" id="header">
............
</header>
<!-- End header -->
<!--================= Photo home ================-->
<section class="is_overlay page-title-bg" id="sec1" name="sec1">
<div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div>
<div class="overlay over-op6"></div>
</section>
<!-- section end -->
</div>
</div>
</div>
</body>
</html>И соответствующие классы в "style.css"
<---------------photo home--------------->
.page-title-bg {
padding:250px 0;
color:#fff;
overflow:hidden;
}
.bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size: cover;
background-attachment: scroll;
background-position: center;
background-repeat:repeat;
}
.is_overlay{
position: inherit;
display: block;
width: 100%;
height: 100%;
}
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background:#292929;
opacity:0.4;
}
.over-op6 {
opacity:0.6;
}
<---------------end photo--------------->Следом создаем еще одну папку "scripts".
Я предпочитаю скачивать файлы библиотек, поэтому я скачала Jquery.min и поместила его в папку "scripts".
Так же для создания меню выбора языков, я скачала круглые иконки с флагами стран (в данном случае мне понадобилось всего 2ве иконки) которые я разместила в новой папке "flags".
И создала классы которые содержат данные иконки, чтобы не путаться я добавила еще один css файл, в соответствующуюю папку. "multilanguage.css"
.flag {
width: 2rem;
height: 2rem;
margin-right: 1rem
}
.flag-ru {
background-image: url(../flags/russia.svg);
}
.flag-us {
background-image: url(../flags/united-states-of-america.svg);
}
.flag:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.select-flag {
-webkit-filter: brightness(205%);
filter: brightness(205%);
}
.lang-dropdown {
margin-right: 2rem
}
.flag-with-menu {
display: flex;
flex-direction: row;
}
.lang-menu {
z-index: 1;
position: absolute;
background-color: var(--dark-element-color);
border-radius: 8px;
padding: 0.5rem;
margin-top: 0.5rem;
}
.lang-first-init {
display: none !important;
}Эти все классы описывают наше языковое меню.
Не забываем подключать новые файлы к странице!!!
<link rel="stylesheet" type="text/css" href="css/multilanguage.css" media="all">Добавим наше меню на страницу в хедер.
<header class="transition tr-header" id="header">
<div class="container">
<div class="nav-holder">
<nav class="scroll-nav">
.......
</nav>
<div class="lang-dropdown">
<div class="flag-with-menu" id="flag-menu">
<div class="flag flag-ru" lang-value="ru-RU"></div>
</div>
<div id="lang-menu" class="lang-menu lang-first-init">
<div class="flag flag-us" lang-value="en-US"></div>
</div>
</div>
</div>
</div>
</header>И так же классы анимации в "multilanguage.css"
.animation-lang-show {
overflow: hidden;
animation: 0.8s ease showBlock;
}
@keyframes showBlock {
from {
max-height: 0px;
padding-bottom: 0rem;
padding-top: 0rem;
}
to {
max-height: 20rem;
}
}
.animation-lang-hide {
animation-timing-function: linear;
animation-name: hideBlock;
animation-duration: 0.5s;
animation-fill-mode: forwards;
overflow: hidden;
}
@keyframes hideBlock {
from {
max-height: 20rem;
}
to {
display: none;
height: 0px;
max-height: 0px;
padding-bottom: 0em;
padding-top: 0rem;
margin-top: 0em;
padding-left: 0em;
margin-bottom: 0em
}
}Теперь займемся описание этого меню в JS.
Я буду давать максимально полные комментарии, на случай если кто то не понимает.
В папке "scripts" создаем новый файл "cookie.js"
В нем будет всего два метода: Сохранить куки и Взять куки с нужным именем
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}
function getCookie(key) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
return keyValue ? keyValue[2] : null;
}Подключаем данный файл на странице!
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cookie.js"></script>Создаем файл который будет отвечать за работу нашего меню.
В папке "scripts" создаем новый файл "multilanguage.js"
$(document).ready(function () {
var language = navigator.language || navigator.browserLanguage; //определяем язык браузера
var userLanguage = getCookie("language") || language; //проверяем, есть ли нами записанные куки с выбранным языком, для этого устройства. На случай если человек не первый раз на нашей странице
var isMenuClicked = false;
var menu = $('#lang-menu'); //после мы часто будем к нему обращаться, поэтому добавляем в переменную
replaceElementAndSelect(userLanguage); //делаем замену иконки, на выбранный язык или язык браузера
//регистрируем клик по нашему флажку
$("#flag-menu").click(function () {
isMenuClicked = true;
showOrHideMenu();
})
//добавляем метод для определения показывать или скрывать меню
function showOrHideMenu() {
if (menu.hasClass('lang-first-init')) {
menu.removeClass('lang-first-init');
menu.addClass('animation-lang-show');
} else {
if (menu.hasClass('animation-lang-show')) {
hideMenu();
} else {
showMenu();
}
}
}
//добавляем методы для показа и скрытия меню
function showMenu() {
menu.removeClass('animation-lang-hide');
menu.addClass('animation-lang-show');
}
function hideMenu() {
menu.removeClass('animation-lang-show');
menu.addClass('animation-lang-hide');
}
//регистрируем клик по флагу
$(document).on('click', '.flag', function () {
if (!isMenuClicked) { // проверяем открыто меню или нет
var newLang = $(this).attr('lang-value'); //берем новое значение языка
language = newLang;
setCookie("language", language); //записываем для будущего использования
languageChange(newLang); //меняем язык
hideMenu();
}
isMenuClicked = false;
});
//тут происходит смена языка и самое главное мы отправляем эвент что была нажата кнопка смены языка, и его мы можем отловить в других скриптах
function languageChange(lang) {
replaceElementAndSelect(lang);
$(document).trigger('onLanguageChange', [lang]);
}
function replaceElementAndSelect(lang) {
var element = ".flag[lang-value='" + lang + "']"; // подставляем выбранное значение языка
var selectLang = $(element).clone(true); //копируем элемент
var defoultElement = $('.flag-with-menu').find('.flag').clone(true); // ищем выбранный элемент в меню
//меняем наши элементы местами
$(element).replaceWith(defoultElement);
$('.flag-with-menu').find('.flag').replaceWith(selectLang);
//удаляем класс подсвечивающий выбранный язык
$('.lang-dropdown').children().children().removeClass('select-flag');
$(element).addClass('select-flag');
}
})Подключаем данный файл на странице!
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cookie.js"></script>
<script type="text/javascript" src="scripts/multilanguage.js"></script>Вернемся к нашей странице.
Добавим несколько секций с любым текстом. Я для примера добавлю одну, чтоб сэкономить место:
<div class="content-holder">
<!--================= Header ================-->
<header class="transition tr-header" id="header">
..........
</header>
<!-- End header -->
<!--================= Photo home ================-->
<section class="is_overlay page-title-bg" id="sec1" name="sec1">
........
</section>
<!-- section end -->
<section class="align-text" id="sec2" name="sec2">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-6 ">
<h3>Заголовок о нашей компании</h3>
<div class="clearfix"></div>
<div class="separator color-separator flt-l"></div>
<div class="clearfix"></div>
<p>«Хабрахабр» — крупнейший в Европе ресурс для IT-специалистов, издаваемый компанией «ТМ». С момента появления в 2006-м году «Хабр» трансформировался из небольшого отраслевого сайта в глобальную профессиональную площадку, которую ежемесячно посещают более 8 миллионов уникальных пользователей.
«Хабрахабр» одинаково интересен программистам и разработчикам, администраторам и тестировщикам, дизайнерам и верстальщикам, аналитикам и копирайтерам, а также всем тем, для кого IT — это не просто две буквы алфавита.
Расширение тематики «Хабра» дало начало сайту-спутнику — Geektimes, на который переехали непрофильные хабы и значительная часть контента, не имеющего непосредственного отношения к разработке и программированию.</p>
</div>
<div class="col-md-6 ">
<h3>Заголовок: Наша миссия</h3>
<div class="clearfix"></div>
<div class="separator color-separator flt-l"></div>
<div class="clearfix"></div>
<p>Данный сайт представляет собой платформу для информационного обмена между участниками пользовательского сообщества. Сообщество пользователей сайта является саморегулируемым, поэтому разобраться во всех нюансах работы проекта с первого раза получается далеко не у всех. Чтобы объяснить, как всё устроено, мы подготовили данный справочный раздел. Справа представлен рубрикатор справочного раздела. Для получения разъяснений выберите соответствующий пункт рубрикатора и ознакомьтесь с предложенной информацией. Если вам не удалось найти ответ на интересующий вопрос, пожалуйста, воспользуйтесь формой обратной связи.</p>
</div>
</div>
</div>
</div>
</section>
</div>И добавляем несколько классов в "style.css"
<---------------section--------------- >
.align-text {
text-align: left;
}
.align-text p , .align-text .separator{
float:left;
}
.align-text h3 {
font-size:16px;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
color:#666;
padding-bottom:20px;
}
section {
float:left;
width:100%;
padding:50px 0;
position:relative;
z-index:12;
background:#fff;
}
.col-md-6 {
padding-left: 0px;
padding-right: 0px;
}
<---------------section--------------- > Вот и все! Мы наконец подготовили нашу страницу для самого интересного! Как это все представить более красиво и сделать смену языка без перезагрузки станицы.