Поиск по сайту

Результаты поиска по тегам 'обучение'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • HTML и CSS
    • Для начинающих
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
    • Поисковая оптимизация
    • Поисковые системы
    • Продвижение и монетизация веб-сайта
    • Сервисы статистики и аналитики
    • Услуги и сервис
    • Покупка и продажа
  • Коммерческие услуги
    • Фриланс
    • Работа
    • Услуги и сервис
  • Давайте поговорим о ...
    • Общий
    • Хобби, отдых и развлечение
    • Человек и общество
    • Флейм
  • Наш форум
    • Конкурсы
    • Работа форума

Календари

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Блоги

  • CMS (Системы управления контентом)
  • Руководство верстальщика
  • Блог HTMLforum.io

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу

Искать результаты в...

Искать результаты, содержащие...


Дата создания

  • Начать

    Конец


Последнее обновление

  • Начать

    Конец


Фильтр по количеству...

Зарегистрирован

  • Начать

    Конец


Группа


Web site


ICQ


Jabber


Skype


Откуда


Интересы

Найдено 3 результата

  1. Вступление Первое с чем сталкивается верстальщик — макет. Для начала следует проанализировать layout, блоки и элементы макета, что бы оценить время, которое потребуется на его реализацию. Техническое задание Требуется сверстать макет дизайна сайта. В качестве основы использовать Bootstrap последней актуальной версии. Вёрстка должна поддерживать Responsive Web Design и корректно отображается в браузерах, версии которые поддерживает фреймворк. Сетку проекта так же следует использовать из фреймворка. Дизайн Макеты, представленные в рамках проекта, в подавляющем большинстве для Desktop. Задача разработчика опираясь на текущие макеты реализовать Tablet и Mobile версии, учитывая сетку фреймворка. Допускаются незначительные отклонения в реализации, которые не влияют на функциональную часть проекта. За конечную реализацию и визуальное отображение отвечает исполнитель (разработчик). Заказчик за ранее соглашается с тем, что выбранное решение исполнителем будет наиболее подходящее для той или иной задачи. Но, в спорных моментах, когда видеться несколько путей решения задачи, разработчику следует обратится к заказчику для обсуждения решения. Реалии этого мира Дизайн, который я взял для реализации поставленной задачи, из реального проекта, который разрабатывался в конце 2017 г., за который не было выплачено ни цента. Он был представлен в рамках среды программы Zeplin, потому исходников нет. Но, по сути сам дизайн достаточно простой и даже по предоставленным PNG можно воспроизвести его в разметке. Поддержка браузеров Вёрстка должна корректно отображаться и работать в следующих браузерах: Последние 2 версии любого современного браузера В любом браузере, доля которого на рынке более 5% (согласно мировой статистике) Версия iOS 7 и выше Анализ макета Когда разработчик, или команда разработчиков, принимают проект то наличие макетов делится на 2 варианта ситуации: Присутствуют все макеты. Они утверждены заказчиком и можно приступать к работе Присутствует лишь часть макетов. Но так как сроки горят, требуется начинать работу уже вчера. Этот вариант сложнее, так как невозможно спрогнозировать как будет видоизменяться UI и, следовательно, каким изменениям будет подвержены блоки страницы. В таких случаях Заказчика больше интересует время, и он согласен жертвовать временем, так как в процессе разработки будут затраты на рефакторинг кода (в лучшем случае) и частичная перепись кода из-за новой логики работы (в худшем случае). В рамках данного обучения мы будем опираться на первый вариант — есть все макеты для создания вёрстки под Desktop и Mobile. И так, вопросы технического характера изучены, цель поставлена. 1. Layout's Давайте определим какими они бывают: Одноколоночный — присутствует одна колонка для размещения контента Двухколоночный — присутствует основная колонка для размещения контента и дополнительная справа\слева для размещения второстепенных блоков Трёхколоночный — присутствует основная колонка для размещения контента и две дополнительных колонки для размещения второстепенных блоков Произвольный/Кастомный — данный тип layout строго не выражен, имеет плавающее расположение блоков и контента. Как правило такой вариант можно увидеть на Landing page. По сути любой вариант layout, который нельзя назвать одним из первых трёх вариантов можно считать произвольным, а его тип каждый может называть по своему. Приведу, на вскидку, несколько вариантов типов layout, которые мне часто встречаются в работе, где его название полностью соответствует смыслу его пользования: popup, modal, print, empty Помимо всего прочего вне зависимости от кол-ва колонок layout может быть как фиксированной ширины (имеется ввиду ширина контейнера, в котором размещаются колонки, но с учётом Responsive) так и по ширине страницы (в таких случаях контейнер занимает всю или почти всю ширину окна браузера). Для начала посмотрим какие layout's представлены в макетах: "Customer Flow/All Screens/homepage-customer.png"— одноколоночный, по ширине страницы "Customer Flow/All Screens/SEO-services.png", "Customer Flow/Search/search-services-results.png" — двухколоночный, фиксированная максимальная ширина "Customer Flow/Chat/customer-chat.png" — двухколоночный, по ширине страницы Так же обратите внимание что на страницах с максимальной фиксированной шириной присутвуют элементы, которые занимают всю ширину страницы. Это Header и блок под ним, который выступает в роли описания страницы или слайдера (как это показано на домашней странице). Все остальные макеты дизайна подпадают под один из этих layout's. Теперь мы знаем структуру страниц и как контент будет размещаться на них. Но, мы сразу будем учитывать на будущее что кол-во layout's может вырости, а значит их создание не должно как либо влиять на контент. Данная часть разметки должна быть самодостаточной, универсальной и легко расширяемой. В общем по этому принципу будет создаваться львиная часть блоков веб-сайта. 2. Блоки и элементы Если с layout вопрос решается достаточно быстро, то с блоками и элементами этот процесс длиться дольше. А так как "время = деньги", особо много вкладывать времени в это не хотелось бы. Нам надо определиться какие блоки заведомо имеют визуальные отличия в зависимости от контента и/или наполнения, а какие нет (следует учесть что последние, в перспективе, могут видоизменятся). Так же нам следует определится с примитивными элементами (поля, рейтинги, кнопки, простые конструкции, аватарки, элементы интерфейса). Это нам позволит изначально раздельно описать их без какой либо зависимости от контекста, в котором они будут размещаться. 2.1 Header и Слайдер Начнём с домашней страницы — "Customer Flow/All Screens/homepage-customer.png" Кнопки, которые присутствуют в заголовке и в слайдере одного стиля. Но, они не одинаковые, так как у них разные поля и высота что, в целом, обычное дело для таких элементов. Это нам говорит что в данных блоках будут использоваться стандартные элементы интерфейса, но с некоторыми локальными изменениями. А ещё следует обратить внимание на поле для ввода в строке поиска. Оно тоже кастомное, так как в формах поля выглядят иначе (формы, как правило, задают стиль полям на всём сайте, которые, в случае надобности, имеют локальные изменения в рамках блока). 2.2 Блоки главной страницы Опускаемся ниже и видим 4 блока, которые на первый взгляд разные. Но если разборать на примере то станет понятно, что блоки имеют область для Заголовка и Контента, что делает их однотипными. Заголовки "Как работает Aworker" и "Популярные услуги" однотипны Этим мы и будем пользоватся во время разработки как тут, так и в других аналогичных ситуациях. А дальше по странице ещё более интересная ситуация Как видим на скриншоте в разных блоках один и тот же блок — аватар пользователя. Он, если пробежаться по макетам, встречается в разных комбинациях на разных страницах в разных блоках. Не смотря на то что, с виду, это минорный элемент страницы, забегая вперёд скажу что это сложный конфигурируемый блок, который будет отображать ряд дополнительных данных. Об этом мы узнаем в процессе разработки. Ниже несколько примеров где этот блок отображается 2.3 Блоки на внутренних страницах Далее давай посмотрим на страницу — "Customer Flow/All Screens/SEO-services.png" В лево колонке отображены блоки фильтров, которые так же имеют идентичный дизайн. Все, кроме блока "Типы услуг". Этот блок частично схож, но имеет индивидуальный контент — список тегов. В основной области layout'а разместился список курьеров, который содержит информацию о пользователе и органы взаимодействия Этот блок нам частично знаком, так как он содержит блок пользователя, который состоит из: аватара, имени, строки состояния и строки экшенов. Это не все варианты модификации данного блока и мы это будем учитывать в разработке. 2.4 Внутренние layout Ранее мы уже говорили про layout's, но в разрезе общего оформления страницы. Сейчас же мы посмотрим на layout в рамках блока В данном блоке, да и в других, нам будут попадаться ситуации когда содержимое блока потребуется поместить в N-колоночный layout, который, при том же, будет видоизменятся в размерах и расположении элементов в зависимости от ширины экрана. Такие конструкцию "тяжелее", по сравнению с обычными layout'ами, которые используются для описания структуры страницы. Связанно это с тем, что описание структуры страницы, как правило, в случае изменения её ширины, из N-колоночного макета видоизменяется в одноколоночный. В случае же с layout'ами внутри блоков, за частую, колонки меняются местами между собой и\или меняют свои размеры. Во время анализа макета я стараюсь обращать внимание на то, как элементы блока перемещаются по странице в результате изменения её ширины. Предвидя на перёд такие нюансы можно написать более универсальный код, который потом потребует существенно меньше изменений в непредвиденных ситуациях. 3. Итоги подведём По образу и подобию таким образом разработчик ознакамливается с предоставленными от заказчика макетами. Перед тем как начинать разработку ожидается что итоговая картина layout'тов, блоков (и их модификаций), а так же их содержимого, прорисована в его голове. Добра и удачи ?
  2. Magic_Rabbit

    Стримы HTML и CSS

    Добрый день. Подскажите, пожалуйста, есть ли где на просторах ютуба или другого видеохостинга канал с хорошими стримами вёрстки html? Всё что нахожу на ютубе это видео «Как сверстать макет с нуля за час», но хотелось бы посмотреть что-то в формате стрима, как человек решает типовые задачи. То есть, смотрим, как верстальщик работает с вёрсткой. Думаю, многим новичкам было бы полезно посмотреть, как люди работают с кодом.
  3. Доброго тебе дня, друг. Данную тему написать меня сподвигло больше кол-во однотипных тем на тему "Ищу наставника", "Нужен учитель" и тому подобное. Одной из причин тому статья "Путь верстальщика" от автора Максима Усачева, в которой он делится своим безценным жизненным опытом. Я постараюсь пролить свет на некоторые важные (в рамках данной темы) моменты из статьи. Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что если и у тебя будет наставник, то ты выучишь все в 2, 3, 10 раз быстрее? Или больше? Или качественнее? Более того, наставник может научить тебя плохому. Наставник в разрезе данной статьи -- это специалист, который допустил огромное кол-во ошибок, который "кровью и потом" работал до глубокой ночи ведя жесткую борьбу с браузерами для достижения своей цели. И хотя результат боя не всегда был на стороне разработчика, войну он всегда выигрывает. Зачем тебе наставник? Что бы он говорил тебе где ты ошибся? Или как надо было сверстать тот или иной блок? Или что лучше использовать float или inline-block? И что это тебе даёт? Набор правил и готовых решений как надо делать и как не надо! Но ведь ты знаешь что каждый сайт уникален, и везде есть нюансы. И ты хочешь каждый раз обращаться к учителю что бы тот подсказал тебе как решить задачу?... Разве ты не хочешь научится думать и понимать чем живет вёрстка? Как она устроена, что из себя представляют слои, понимать и визуализировать и процесс разработки? Понимать "физику" работы блоков на страницы, как и почему они влияют на остальные? Предугадывать на будущее как потянется страница/блок в случае наполнении его контентом. Уметь за считанные секунды в голове разложить огромный сайт на слои? Достичь понимания вёрстки как некой сущности, которая является единым целым с тобой. Другими словами -- ты желаешь женится на прекрасной девушке, со своим темпераментом, безграничными возможностями, уникальным подходом. Она способна подстраиваться под тебя так как ты этого хочешь, когда только пожелаешь. Она согласна выполнять твои прихоти, она не переборчива и соглашаеться на любые твои даже самые безумны идеи. И не смотря на это у неё свой уникальный неповторимый характер. Она бывает упёртая и неприступная, но всегда можно найти с ней общий язык. Если ты знаешь как с ней общаться, понимаешь как она думает, чувствуешь её, чувствуешь то что чувствует она, видишь то что видит она. Если ты слышишь и понимаешь её, то невозможно будет представить цели, которую вы вместе не смогли бы достичь. Ты хочешь женится на самой прекрасной девушке, но спать с ней будет твой наставник! Я не говорю что ты не сможешь стать специалистом без него. Большинство разработчиков, которые поддерживают этот форум, не имели никаких учителей. Все чего они добивались -- все делали сами. Для того что бы достичь тех же высот тебе надо повторить успех людей которые это уже сделали! Это не просто, но это реально! Никто за тебя этого не сделает, никому кроме тебя это не надо. Далее по списку: 1. Перед тем как открыть свою тему в поисках Наставника, пройдись по темам которые создали раньше. 2. Ты ищешь классного специалиста, который будет тебе помогать тебе, обучать, давать советы, делится опытом и знаниями. Ты этого хочешь? А ты можешь ответить на вопрос - зачем вообще кому-то это делать? Зачем, для чего, почему кто-то должен согласится тратить на тебя время? Ведь тебе нужен не новичек как ты, а тот, у кого за плечами багаж опыта, ведь так? Так вот чем ты отличаешься от других таких же жаждущих что бы вкладывать в тебя время и делится нажитым опытом? Пойми правильно, дело то не в деньгах, тут важна идея. 3. Теперь по теме. 3.1. Зачем тебе вообще это направление? Что оно тебе даст? Что ты нашел в вёрстке? 3.2. Если ты считаешь что вместо тебя будет гуглить наставник -- ты ошибаешься. Гугл -- лучший твой помошник. Умеешь правильно составить запрос - умеешь решать задачи. Очень часто бывает так, что поиск решения намного приоритетнее, нежели знания. 3.3. Если ты считаешь что наставник будет тебе давать задания -- ты сильно ошибаешься. Тебе надо -- ты ищи макет, а наставник тебе может написать ТЗ, а потом сказать какая ты бестолочь, указав на твои ошибки в результате -- а это бесценно! 3.4. Любой опыт забирает много времени. Ты не станешь специалистом через год-два! Ты уверен что у тебя вообще хватит сил на то что бы потратить ~5 лет своей жизни в интенсиве и "выкарабкатся" на уровень, когда ты сможешь сверстать страницу (предположим сайта новостей с огромным кол-во блоков) в уме за считаные секунды? Ты уверен что ты хочешь потратить часть своей жизни на изучение вёрстки? ps: нет ничего невозможного, было бы желание