С тегами:

web

Любые посты за всё время, сначала свежие, с любым рейтингом
Найти посты
сбросить
загрузка...
2843
А вот сейчас обидно было...
172 Комментария  

Моему деду 88 лет. Инженер-строитель. За плечами уже имеется огромный жизненный опыт, а пытливый ум всё ещё остался остр и голоден до новостей и диковин.


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


– Вот такие "книги" - интернет страницы я и создаю! – ну, вполне так достойно, подумалось мне.

– То есть, их вот так, на самом деле, нет?

– Почему нет? Есть! Их можно распечатать на бумагу, если нужно, но хранятся они все в сети...

– Хорошо. Значит ты делаешь несуществующие книги, которые где-то там в сети, но, если про них не спросить – не узнаешь, что они есть?

– Ну не совсем так, они существуют всегда, просто надо знать, что ты ищешь...

– Ага, ладно. А нормальная работа у тебя есть? – спросил меня дедушка.

2175
Я люблю свою работу
125 Комментариев в Web-технологии  
Я люблю свою работу
1394
Классика жанра
237 Комментариев в Лига фрилансеров  
Классика жанра фриланс, сайт, сайтостроение, web

И таких вижу каждый день)

2931
Докажи , что программист.
131 Комментарий в Лига фрилансеров  
Докажи , что программист.
3746
Ответ моего начальника очень эмоциональному потенциальному заказчику
212 Комментариев  
Ответ моего начальника очень эмоциональному потенциальному заказчику
527
Подборка видеоуроков по дизайну соц.сетей
15 Комментариев в Графический и Веб-дизайн  
Показать полностью 2
59
Веб-частушки
12 Комментариев в IT-юмор  

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

- Чтобы сайт отображался на смартфоне и ПК

Ты воспользуйся Bootstrap-ом – будет жизнь твоя легка…



- Чтобы от модальных окон было больше прока

Закрывать их мы должны – кликнув мимо блока…



- Телефоны и эмейлы – ссылкой оформляй

Атрибуты tel: и mailto: в href ты добавляй…



- Ссылки с сайта нас уводят? – в новой вкладке открывай!

Атрибуту target=”_blank” в ссылке место дай!



- На объект курсор навелся – анимацию вставляй,

в стили свойство pointer срочно добавляй.



- Долго грузится твой сайт – ты ужми картинки,

если скорость не устроит, подключи... прелоудер.



- Долог твой Ajax-запрос? – анимацию вставляй

(хочешь css используй, хочешь гифку запихай)



- Лазая в глубинах сайта, можно заблудиться

Добавлять должны мы кнопку, чтобы возвратиться…



- В адрес сайта ввел херню – тронулся рассудком

То 404 покажи ублюдку



- Если наш заказчик в сайте текст не может изменять,

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



- Сайт закончил и клиенту собираешься отдать?

Перед этим размести ты в футер копирайт!

Показать полностью
2672
Гравитационная JS залипалка.
462 Комментария  
Гравитационная JS залипалка. гравитация, залипалка, web, JavaScript

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

Темная энергия - есть кривая реализация.

Кликайте мышкой для создания частиц. Кнопка "do grid" заполняет все равномерной сеткой частиц. Ползунок "Gravity" изменяет гравитационную постоянную. "Reset force" - очистка всех векторов сил.

Залипайте http://quarians.ru/gravity

Физики - извините за формулы, визуально работает.
Коллеги - извините за код, "я прогер - я так вижу".

IE'шники - отстаньте, для души делал, не для вас.

76
Создание Landing page с нуля. 3 видеоурока
37 Комментариев в Графический и Веб-дизайн  

Записал серию видеоуроков по созданию Landing page.
В уроках используется сетка bootstrap , скачать сетку можно тут https://yadi.sk/d/26BnO-LBv6TYR

Первый урок

Второй урок

Показать полностью 1
26
Головоломка ко дню программиста от mail.ru
88 Комментариев в Web-технологии  

Прошел головоломку от mail.ru. Ушло на это 2,5 часа (долговато). Думаю может быть интересна еще кому-нибудь в сообществе.


Ссылка головоломку:

https://puzzle.mail.ru/


Описание:

Для прохождения игры вам понадобятся знания web-технологий, информатики, любой текстовый и графический редактор.


Головоломка состоит из 25 уровней. На каждом уровне необходимо выяснить секретное слово и ввести его в поле ввода. Кодовое слово может быть ответом на загадку или спрятано где-то на странице (очень часто — в исходном коде страницы).


Количество попыток неограничено. Для выхода из игры наберите quit в поле ответа. Вы можете продолжить законченную игру позже.


И пусть удача всегда будет с вами!

129
Вдохновение для Web-дизайна
8 Комментариев  

Решил поделиться сервисами, в которых я ищу вдохновение перед тем, как начать рисовать дизайн сайта. Многие из них очевидны, другие возможно нет. Хотелось бы, что бы и вы поделились своими источниками вдохновения.


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


1. https://www.behance.net/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост

2. https://dribbble.com/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост

3. http://pinterest.com/

Вдохновение для Web-дизайна web, web-дизайнер, веб-дизайн, сайтостроение, вдохновение, сайт, длиннопост
Показать полностью 5
369
7 Русскоязычных каналов YouTube по веб-дизайну
27 Комментариев в Графический и Веб-дизайн  

Идея данного темы появилась после просмотра поста  @COSMOBATHuK

Который выложил полезный материал с подборкой каналов по фотошопу за что ему огромное спасибо. Жаль, что все они были англоязычные. Скорее всего потому что в русскоязычном сегменте не так много действительно качественного контента в этой теме.

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

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

1. Loftblog

Идея канала в том, что они создали некий сборник полезных материалов по веб-разработке. Здесь вы найдете такие темы, как: веб-дизайн, программирование, маркетинг и все что связано с ИТ.

Смотреть канал ->

2. Данил Фимушкин


На своем канале Данил делает уклон именно в веб-дизайн. Он рассказывает о различных фишках в дизайне, разбирает сайты на ошибки. Так же представлено большое количество уроков по Adobe Muse


Показать полностью 5
81
[Must know] Что нужно знать web-разработчику в 2016?
45 Комментариев в Web-технологии  

Недавно наткнулся на одно видео, где была информация о том, что нужно знать web-разработчику в 2016-2017 году. Решил поделиться с вами. Видео в самом конце (на инглише). Ниже текстовая сокращенная версия с моими комментариями (в виде цитат).

Для тех кто не любит видео-формат или не может в инглиш.


TL; DW (краткий пересказ):

В видео есть 3 ветки:

1) Не зависимо от того back-end или front-end

2) Front end

3) Back end


Первая ветка. Включает в себя такие вещи:

- FTP и работа с хостингом (залить, выгрузить, работа с cPanel и т.д.)

- Терминал (командная строка)

- SSH

- Основы GitHub

- Как происходить связь между клиентом(юзером) и сервером

- RESTful


Вторая ветка. Начнем с основ для фронта:


- Текстовый редактор

Автор выделил 3: Atom, Sublime, Brackets.

Я бы еще добавил Emmet. Emmet не текстовый редактор, а плагин, который ускорит вашу верстку в разы. Но придется потратить немного времени на то чтобы разобраться


Большой разницы при выборе редактора нет. Так что особо заморачиваться не стоит.

- HTML

- CSS

- JS

В видео автор утверждает, что jQuery учить необязательно и можно сосредоточиться на родном JS и дальше уйти во фреймворки.

Я все-таки не соглашусь. jQuery все еще остается самой популярной библиотекой на JS (jQuery не фреймворк). При этом jQuery очень легкая в изучении и имеет просто тонны документации (и горы мусорных обучалок на Youtube).

Дальше идет продвинутый фронт:


1)ES6/ES2015 (Babel)

Как и любой язык JS (ECMA-Script) не стоит на месте. Если руки чешуться уже писать на ES6 (ибо var, let, const и еще много фич) то Babel (преобразователь ES6 в ES5) в помощь.


2)CSS инструменты.

-Препроцессоры (SASS/LESS/Stylus)

-CSS фреймворки (Bootstrap/Foundation)

-Адаптивный дизайн в CSS


CSS - не является языком программирования. Там нет (на данный момент) переменных, функций и т.д. Таким образом поддерживать CSS в проекте становиться довольно сложно. Да и писать его руками - долго и нудно. Тут нам на помощь и приходят препроцессоры. Они добавляют возможность использовать переменные в CSS и писать небольшие функции чтобы в последствии сэкономить время при написании CSS для проекта.


Самые банальные примеры использования препроцессоров. Переменные. Загнали цвета в переменные. И если вдруг, дизигнеру придет в голову сделать серый-черным. Вы просто меняете значение переменной. И вуаля у вас во всем проекте серый стал черным. Функции. Использовать функции можно очень разнообразно. Но начнем с простого. Чтобы не писать все префиксы для box-shadow, transition и других CSS3 фич можно использовать функции (mixin). Пишеться функция, которая принимает значение, например: "transition: all .4s ease" и выдает это же значение, только с бразуерными префиксами.


Еще стоит отметить, что есть SASS, а есть SCSS. Разница? Только в синтаксисе. В SASS нет скобок "{}". Совсем нет. И это многих смущало посему появился SCSS.Тот же SASS только со скобками и более приближенным к CSS синтаксисом. Отличие не только в скобках, но это основное.

3)Интсрументы сборки


-Таск ранеры

Gulp и Grunt. Самые популярные. Каждый выберет то что любит больше. Лично я фанат Gulp.

Что такое таск ранеры? Это такая полезная вещь, которая позволяет настроить автоматизированные задания (таски). Простые примеры: компиляция SASS|LESS в CSS сразу после того, как файл SASS|LESS был сохранен. Т.е. ctrl+s - упаковнный CSS. Можно пойти еще дальше и сразу сделать минимизированный CSS. Т.е. пишется еще таск и после упаковки с SASS|LESS идет следующий таск который минимизирует CSS. Такая же история с JS и даже HTML (Jade). Кроме того можно написать таски на тесты (Mocha|Karma). Штука классная, но нужно посвятить время.


-Управление зависимостями

Browserify и Webpack. Webpack ваш выбор. Он популярнее. Его любят больше. Я даже видео по нему запилил.

Да, Webpack - классная штука. Такая же история как с тасками. Потратил время на обучение, попробовал повторить туториалы, написал свое, оптимизировал, доволен как слон. Потом опять переписал или дописал. И опять доволен как слон. (2 последних шага повторяются время от времени)


-Bower, Yeoman

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


4)MV* фреймоврки

Если пишеться SPA (Single Page Application), т.е. вовлекаются сотни, тысячи строк кода на JS, то нужен фреймворк, чтобы их организовать. Знакомиться стоит с четырьмя:


-React


-Angular

Angular 2 как бы вышел. Многие недовольны резким смещением от Angular1 к Angular2. Многие сидят на Angular1. Многие не уверенны лучше ли Angular2.

Angular2 в концепции очень сильно отличается от Angular1. Кроме того, в Angular2 нет обратной совместимости с Angular1. т.е проект написанный на Angular1 нельзя просто "обновить" до Angular2. Мигрировать можно. Просто крайне муторно. Мне самому пока не доводилось.

-Ember

Используется для больших приложений и работы с большим объемом данных.


-Vue

Для маленьких и легких приложений. Но и React для таких приложений тоже хорош.


Также стоит отметить Polymer и Aurelia. Но они не должны входить в основу вашего набора разработчика.


Если хочется сосредоточиться на изучении одного, несомненно, - это React. В мире React за последний год случилось много всего. Сузим это до:


-Mobx

Самый простой способ начать написание React-приложения. Используется для маленьких приложений.


-Flux

Далее рекомендую выучить Flux. Зная Flux проще разобраться в Redux, Relay. Множество этих микрофреймворков под React берут основу именно у Flux.


-Redux

Стоит использовать, если ваше приложение набирает размер и имеет сложные взаимодействия с данными.


-Relay

Для, ну очень, больших приложений. Если бы нужно было сделать Gmail на React ябы делал это на Relay.


-create-react-app

Простой способ развернуть React-приложение.


Если хочется чего-то интересного:

-Closurescript

-Elm

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


Юнит тестирование

-Mocha

-Jasmine

-Karma

-Enzyme

Enzyme - кассная вещь для использования вместе с предыдущими тремя. Под React.


Все учить не надо. Придя на продвинутый уровень с базовыми знаниями HTML-CSS-JS, сперва выучите CSS фреймворки и препроцессоры. Далее выберите JS фреймворк (React) и учите понемногу что-то новое.


Третья ветка. Back-end.


Есть скриптовые языки, функциональные языки, высокопроизводительные языки.


Если вы новичок, то учите скриптовые языки. В скобках выделены фреймворки под эти скриптовые языки.


-NodeJS (express^, hapi^)

-Python (django, flask^)

-Ruby (Ruby on Rails, Sinatra)

-PHP (Laravel, Symphony2, Lumen^)


Фреймоврки с ^ - микрофреймворки. Меньше, легче в изучении.


Если бы мне сказали выделить один, то я бы выделил все-таки NodeJS. Почему? Скорее всего вы уже знаете немного JS и он крут.


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


Функциональные:

-Elixir

-Scala

-Haskell

-Clojure


Высокопроизводительные:

-Go

-Rust

-Java

-C#


Если выделять, то:

NodeJS - Haskell - Go/Rust. Я бы начинал так. Я выделил Java и C# другим цветом потому что они не для новичков. Да, там много возможностей работы, но новичкам, я бы рекомендовал начать со скриптового языка.


Что знать (вне зависимости от языка):

-Юнит/Функциональное тестирование

-RESTful API принципы. Как его написать.

-Защита

-Авторизация (OAUTH2, JSON Web Token)

-SOA (Services Oriented Architecture) / Microservies

-Развретывание приложения (Flightplan: nodejs / Fabric: python / Capistrano: Ruby)

-Websocket

-ORM/ Data structure


Работа с данными (базы данных):

-MySQL, PostgreSQL (реляционные)

-Redis (сессия, кеширование)

-MongoDB, Couchbase, RethinkDB (noSQL базы данных)

-Solr, Elastic Search (базы данных под поисковые системы)


Кеширование

-Nginx

-Apache

-Redis

-In-memory


Далее идет DevOps


Веб-платформы:

-Digital Ocean

-Amazon Web Services

-Azure

-Rackspace

-Heroku


Упралвение сервером:

-Linux

-Docker

-Ansible

-Salt

-Chef

-Puppet


Docker - это то, что вы абсолютно точно захотите знать. Если вы решили изучть одну технологию как DevOps учите Docker. Немного знакомы с Docker? Выучите его хорошо.

- Большой масштаб (Kubernetes, Mesos)

- Малый масштаб (Docker Swarm)

- С графическим интерфейсом (Rancher, Docker Cloud, Docker Datacenter/Universal Control Plane)


Продолжительное тестирование и разработка:

-Jenkins (на собственном железе)

-SemaphoreCI

-CircleCI

-Codeship


Vagrant. Стоит иметь ввиду. Но сейчас - Docker это вещь.


Вот краткий обзор технологий, которые должен знать веб-разработчик в 2016-2017 году.


Я лично не по всем пунктам согласен с автором. Но у меня нет настолько обширного и глубокого опыта, чтобы спорить о том насколько Docker крут или нет, или почему Flux отстой Redux рулит и т.п. А согласны ли вы с ним или есть возражения?

Делимся мнениями в комментариях.


Ссылочка на майндмапу, которую использует автор в видео: тык

Показать полностью 1
40
Web и все все все: Красивый Preloader на CSS3.
14 Комментариев в TECHNO BROTHER  

Красивый Preloader на CSS3. Часть 1

Ссылки из урока:

1. Демо: http://master-css.com/demo/preloaderC...

2. Архив-заготовка: http://master-css.com/zip/startlight.rar

3. Источник: https://ihatetomatoes.net/create-css3...

Красивый Preloader на CSS3. Часть 2

1027
Хорошая шутка про UDP, но я ее не получил...
47 Комментариев  

честно спиженно с dev/null

Хорошая шутка про UDP, но я ее не получил... it, web, сисадмин
47
ВНЕЗАПНО
1 Комментарий  

Хотел заказать себе мебель, подбирал комплектующие, и тут вдруг:

ВНЕЗАПНО 404, сайт, web, матрица, Морфеус

К слову, страничка сильно выбивается из стилистики всего сайта.

decor-profi.net/404

520
22 мини лекции об HTML
59 Комментариев в TECHNO BROTHER  

HTML. Урок 1. Введение

HTML. Урок 2. Подготавливаем рабочую среду

HTML. Урок 3. Базовый макет веб-страницы

Показать полностью 19
73
Процесс дизайна главной страницы сайта
41 Комментарий в Графический и Веб-дизайн  

Сказали что больше подойдет для сообщества:) Доделал дизайн главной страницы для барбершопа:) Скоро доделаю все страницы и буду продавать шаблон. Я заснял весь процесс работы над дизайном на видео, ускорил его на 2000%, ибо оригинал весит 29гб. Может кому интересно будет:)

45
Полный процесс разработки дизайна главной страницы сайта
32 Комментария  

Доделал дизайн главной страницы для барбершопа:) Скоро доделаю все страницы и буду продавать шаблон. Я заснял весь процесс работы над дизайном на видео, ускорил его на 2000%, ибо оригинал весит 29гб. Может кому интересно будет:)

35
Web-технологии. Начало
22 Комментария в Web-технологии  

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


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


По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:


https://webref.ru/layout/learn-html-css


Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.


Список полезных ссылок:


Справочник по html/css: https://webref.ru/ref


Информация о поддержке тегов и стилей браузерами: http://caniuse.com/


Онлайн песочница: http://codepen.io/


Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...


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


Оставляйте предложения и замечания в комментариях.

Халява, сэр!
спонсорский пост от

Привет, Пикабу!


В сообществе GameHub прямо сейчас бесплатно раздают Steam-ключи всем подписавшимся. Так что если хотите бесплатный ключ – бегом в сообщество, смотрите первую запись. Информация проверена, ключи выдают.


Ссылка: https://vk.com/gamehub

Халява, сэр!


Пожалуйста, войдите в аккаунт или зарегистрируйтесь