Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Web

A presentation on Prezi presentations that will amaze and inspire your audience.
by

Yulia Deyeva

on 13 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Web

ПИТАННЯ, ЯКІ ЗАДАЮТЬ ПОЧАТКІВЦІ
;-)
УСПІШНИЙ САЙТ?
ЩО НЕОБХІДНО ЗНАТИ,
ДЛЯ ТОГО, ЩОБ ЗРОБИТИ
Framework - фреймворк
створений для спрощення роботи верстальника, швидкості розробки і виключення максимально можливого числа помилок верстки
CSS FrameWorks
Популярні CSS фреймворки,
які здатні «полегшити» життя :-)
ПЕРЕВАГИ:
СУЧАСНІ ІНТЕРНЕТ ТЕХНОЛОГІЇ
Тренди в дизайні
+
TOP10
1. Як вибрати правильний дизайн сайту?
2. CMS-система чи сайт написаний з нуля?
3. Що таке семантично правильний та валідний код?
4. Як правильно вибрати хостинг та доменне імя?
5. Пошукова оптимізація. Що це?
6. Що таке контекстна реклама?
7. Чому потрібно реєструвати сайт в інтернет-каталогах?
8. Які SEO правила Google?
9. Чи потрібно просування в соціальних мережах?
10. Як правильно підібрати ключові слова?
Дозволяє не досвідченому в тонкощах верстки програмісту або дизайнерові правильно створити HTML-макет.
Верстка на базі дівів, а не таблиць
Більш швидка розробка
Кросбраузерність
Можливість використання генераторів коду і візуальних редакторів
Однаковість коду при роботі в команді дозволяє знизити число розбіжностей при розробці
НЕДОЛІКИ:
:-(
В основному бібліотеки мають незручні для людини імена селекторів, наприклад, span-1, g-3, grid_12.
Для вивчення css-бібліотеки потрібен якийсь час і зусилля.
Разом з бібліотекою ви можете отримати помилки, зроблені раніше її розробником.
Бібліотеки бувають сильно "роздуті" - може бути багато зайвого коду, який ви не будете використовувати у своєму проекті.
Ваш дизайн буде залежати від css-бібліотеки.
Blueprint – найбільш популярна бібліотека
960 Grid System
біблиотека для швидкої розробки макетів
Bootstrap – бібліотека створена розробниками Twitter
Російська бібліотека
для розробки web-інтерфейсів
Foundation 3 - потужна бібліотека
для розробки адаптивних інтерфайсів
Golden Grid System
бібліотека для розробки адаптивних інтерфейсів на основі золотого перетину
ОСНОВНІ
помилки
Велика кількість встановлених лічильників і кнопок із закладками.
Неправильно підібраний фон сайту.
Погане оформлення тексту.
Велика кількість графіки на сайті
Надмірне використання анімації.
Використання великого числа скриптів.
Погано продумана юзабіліті сайту
Основні етапи
розробки сайту
Складання технічного завдання
Прототип проекту (модульна сітка)
Розробка дизайну
Верстка дизайну
Інтеграція з системою
управління сайтом (CMS)
Наповнення сайту
Тестовий запуск
Виправлення помилок
Перенесення на працюючий домен і хостинг
Запуск в роботу
Комплексний супровід і просування сайту
Просування сайту в Internet
Вік домену
Файли sitemap.xml і robots.txt
Якісний і унікальний контент
Структура контенту
Грамотна перелінковка сайту
Кількість інформації на сайті
Час перебування відвідувача на сайті
Глибина перегляду
Оновлення інформації на сайт
ДОДАВАННЯ САЙТУ
ДО ПОШУКОВИХ СИСТЕМ
Розкрутка сайту в інтернеті - це
діяльність, спрямована на збільшення відвідуваності сайту: залучення на сайт цільової аудиторії користувачів, популяризація послуг, товарів і сервісів представлених на сайті
Google
-
найкраща в світі пошукова система.
Яндекс
- краща пошукова система рунета.
Rambler
- теж досить популярна пошукова система в рунеті.
Yahoo!

- друга в світі пошукова система
Altavista
- пошукова система, яка нележить компанії Yahoo!
Bing

- пошукова система яка належить компанії Microsoft.
Aport

- другорядна пошукова система в рунеті.
GoGo
- пошукова система яка належить Mail.ru.
Meta
- українська пошукова система.
i.ua

- ще одна українська пошукова система.
Nigma
- ще одна пошукова система в рунеті.
tut.by

- сама популярна білоруська пошукова система.
Інструменті Google для web-майстрів
Google Webmaster Tools - дозволяє переглядати дані про сканування, індексування та пошуковий трафік сайту, а також отримувати сповіщення про проблеми на вашому сайті.

Google Analytics - безкоштовний сервіс, що надає детальну статистику по трафіку веб-сайту.

Google AdWords - сервіс контекстної реклами, працює з ключовими словами.

Google Adsense - один із способів заробити на своєму сайті за допомогою тематичних оголошень.

Google Drive - хмарне сховище від Google з можливістю онлайн перегляду вмісту безлічі типів файлів.

Google Blogger- безкоштовний сервіс, який дозволить безперешкодно публікувати блог-файли.
Від чого залежить вихід сайту на перші позиції видачі пошукових систем?

Просування сайту, або розкрутка сайту, — це сукупність заходів, спрямованих на підвищення відвідуваності й цитованості веб-сайту.
Що таке просування сайту?
Просування сайту за допомогою контекстної реклами
Просування сайту за допомогою медійної реклами
Просування сайту за допомогою оптимізації контенту
Просування сайту за допомогою посилального ранжирування
Соціальні мережі в Україні використовуються для виконання комплексу заходів, спрямованих на максимально ефективне залучення на веб-ресурс відвідувачів.
Такі послуги носять назву SMO.
ПРОСУВАННЯ
В СОЦІАЛЬНИХ МЕРЕЖАХ
Як заробити гроші?
ActiveDen
– ресурс для продажу та придбання флеш галерей та повноцінних флеш сайтів.

AudioJungle
- ресурс для продажу та придбання музичних треків та композицій

ThemeForest
- ресурс для продажу та придбання шаблонів для більшості CMS систем

VideoHive
- ресурс для продажу та придбання продуктів, які тісно пов'язані з відео (проекти After Effects, графіка руху, Cinema 4D шаблони та інше).

GraphicRiver
- ресурс для продажу та придбання різноманітної векторної та растрової графіки.

3docean
- відмінне місце для 3D-шників, з величезною кількістю якісних ресурсів.

Codecanyon
- це ресурс для програмістів, PHP скрипти, плагіни, HTML5, CSS і JQuery. Розробка під мобільні пристрої.

Tutorials
- тут ви можете знайти дуже багато непоганих уроків та книг, починаючи від ведення бізнесу і фріланса і закінчуючи уроками Photoshop.

Photodune (бета-версія)
- відносно новий ресурс, на якому продаються фотографії.
Тренди в дизайні
Тотальне поширення всіляких мобільних гаджетів і інших смартфонів, планшетів і нетбуків з різними розмірами екранів змушують сучасного веб-дизайнера подбати про те, щоб сайт правильно виглядав на будь-якому екрані. Для цього прописується кілька стилів, які застосовуються залежно від застосовуваного пристрою, і зовнішній вигляд сайту адаптується під розмір, при цьому не втрачаючи своєї функціональності.
Адаптивний веб-дизайн
Дуже ефектний тренд, при якому здійснюється посторінкова вертикальна прокрутка вмісту сайту. Знову-таки, тут тон задає поширення мобільних пристроїв, на яких вертикальний скролінг є найбільш зручним способом перегляду вмісту сайту.
Вертикальний скролінг
Дуже поширений тренд на сьогоднішній день. Дизайнери із задоволенням використовують велику фотографію на задньому фоні. Це завжди незвичайно сильно впливає на глядача. А сама картинка стає головною дійовою особою, навколо якого шикуються всі інші елементи дизайну.
Велике фото на бекграунді
Типографіка все більше стає важливою частиною будь-якого проекту. Шрифти несуть не тільки смислове навантаження, але і при грамотному і креативному використанні стають справжньою окрасою сайту.
Декоративна типографіка
Ще одне віяння розповсюдження мобільного інтернету. Для комфортного перегляду сайту на мобільних пристроях необхідно, щоб функціональні кнопки були досить великого розміру.
Великі кнопки інтерфейсу
У минулому році багато сайтів частенько використовували великі слайдери з ефектними фотографіями. Думаю, ця тенденція збережеться і в новому році. Оскільки, однозначно, зміна великих картинок на широкому екрані монітора виглядає вражаюче.
Великий слайдер
Нескінченна вертикальна прокрутка досить далеко може відвести користувача від основного меню навігації. Для того, щоб кожного разу не повертатися наверх використовуються закріплені елементи, коли меню завжди залишається у верху екрану.
Фіксовані елементи
Більшість сучасних сайтів завдяки технології HTML5, CSS3 і jQuery стало дуже цікаво розглядати і вивчати, відкриваючи все нові і нові динамічні ефекти анімації при наведенні мишкою або прокручуванні.
Динамічні ефекти анімації
Якщо раніше односторінкові сайти робилися на Flash технології, то зараз за допомогою HTML5, CSS3 і jQuery можна зробити динамічно скомпонований односторінковий сайт. Коли, наприклад, при натисканні на пункт меню відбувається плавний скролінг в потрібне місце сайту.
Односторінкові сайти
Мінімімалізм як і раніше не поступається своїх позицій. Сайти, зроблені за принципом простоти, ясності і мінімальної кількості оформлювальних елементів, в даний час користуються великою популярністю.
Оформлення сайтів у вигляді динамічної сітки з блоків різного розміру з картинками і різною додатковою інформацією, а також з лаконічним хедером і зручною навігацією - ще один популярний тренд веб-дизайну.
Модульні сітки
Мінімалізм
У минулому році з'явилося досить багато сайтів, що використовують у своєму дизайні нестандартну геометрію. Це косі або зламані лінії, зроблені за допомогою HTML5 та CSS3 технологій або різні блоки у вигляді відносно нескладних геометричних фігур.
Нестандартна геометрія
Дуже зручний тренд. Для того, щоб увійти на сайт за допомогою класичного методу, треба пам'ятати логін і пароль. У ситуації з постійно відкритими сторінками в соціальних мережах, все значно спрощується. Достатньо лише натиснути відповідну кнопку і ви вже авторизовані на потрібному сайті.
Авторизація через соціальні мережі
З цієї ж причини коментарі з соцмереж вельми зручні. З досвіду ведення блогу можу сказати, що за останній рік коментарі взагалі дуже сильно змістилися у бік соціальних мереж.
Коментарі з соцмереж
Візуалізація інформації у вигляді інфографіки стала вже доброю традицією. У цьому році цей тренд також продовжить своє успішне існування, змушуючи дизайнерів і художників придумувати все нові способи подання контенту.
Інфографіка
Це лякає, на перший погляд, слово насправді означає оформлення мобільних користувальницьких інтерфейсів у вигляді різних реалістичних об'єктів і текстур з повсякденного офлайнового життя. Наприклад, замітки у вигляді звичайного блокнота, або музичний програвач у вигляді кассетника.
Skeuomorphism (скеоморфізм)
Full transcript