Web-программирование.

[DanilStopnickiy 4922]

Тема посвящается Web - программированию, все вопросы о создании сайта и его дизайне, а также помощи начинающим и обмен новостями и советами.

Сам создал тему, и первый вопрос: Решил в своей работе сменить скролл при помощи HTML и CSS, поискав ответы в инете нормального ничего не нашёл, помогите пожалуйста !)

[kaTok43rus 27202]

Призываем в тему @GeeKaZ0iD

Ишшо @CEPBAJl вроде в теме вопроса

[CEPBAJl 14009]

Даня, из твоего вопроса не совсем понятно чего ты хочешь добиться. Какие именно изменения в скроллбаре ты хочешь получить?

Вот что можно поменять с помощью CSS: http://www.ruled.ru/scrollbar-css.html

Для более значительных изменений без javascript не обойтись: http://beloweb.ru/novichkam/kak-izmenit-polosu-prokrutki-na-sayte-26-gotovyih-tem.html

Ох тыж Йожкин кот! Ток что Йежа то и не было! Йа ни первый на... 

[DanilStopnickiy 4922]

3 минуты назад, CEPBAJl сказал:

Даня, из твоего вопроса не совсем понятно чего ты хочешь добиться. Какие именно изменения в скроллбаре ты хочешь получить?

Вот что можно поменять с помощью CSS: http://www.ruled.ru/scrollbar-css.html

Для более значительных изменений без javascript не обойтись: http://beloweb.ru/novichkam/kak-izmenit-polosu-prokrutki-na-sayte-26-gotovyih-tem.html

Ох тыж Йожкин кот! Ток что Йежа то и не было! Йа ни первый на... 

Спасибо, сохранил оба сайта, буду разбираться что к чему относится

[CEPBAJl 14009]

1 час назад, DanilStopnickiy сказал:

Решил в своей работе сменить скролл при помощи HTML и CSS

Еще немного по вопросу: HTML не должен иметь никакого отношения к тому как внешне выглядит веб-страница. Это, если правильно, каркас, скелет сайта. При том что есть возможность (пока еще) использовать атрибуты тегов для изменения внешнего вида, пользоваться ими в приличном обществе давно противопоказано. Единственное исключение — в html-коде прописывают изображение логотипа, но на то есть причины.

Так что прими во внимание: html - каркас (количество блоков, семантика, вложенность), css - внешний вид.

[DanilStopnickiy 4922]

3 минуты назад, CEPBAJl сказал:

Еще немного по вопросу: HTML не должен иметь никакого отношения к тому как внешне выглядит веб-страница. Это, если правильно, каркас, скелет сайта. При том что есть возможность (пока еще) использовать атрибуты тегов для изменения внешнего вида, пользоваться ими в приличном обществе давно противопоказано. Единственное исключение — в html-коде прописывают изображение логотипа, но на то есть причины.

Так что прими во внимание: html - каркас (количество блоков, семантика, вложенность), css - внешний вид.

просто все мои знания это HTML и CSS и то не полностью )))

[CEPBAJl 14009]

Да ты как то говорил уже что вас учат писать код на FrontPage  Его тоже в приличном обществе уже давно не упоминают. 

Вообще по html и css в ru-нете лучший сайт https://webref.ru/, там отличный справочник, куча руководств, плюс неплохое описание перспективных направлений в front-end разработке. Очень советую. Это новая реализация широко известного сайта http://htmlbook.ru/content. Им тоже можно пользоваться, но в нем много устаревшей информации и в то же время нет множества фич появившихся недавно.

[DanilStopnickiy 4922]

Можете скинуть видео обучение работы с программой, если кто знает. Вот информация о проге. Заранее большое спасибо.

Спойлер

 

[CEPBAJl 14009]

1 час назад, DanilStopnickiy сказал:

Можете скинуть видео обучение работы с программой, если кто знает. Вот информация о проге. Заранее большое спасибо.

  Скрыть контент

 

Даня, так на ТыТрубе поищи. Или лень? 

Вот попробуй в этом порыться https://www.youtube.com/results?search_query=phpstorm+уроки. У loftblog неплохие видеоуроки.

К сожалению, большую часть работы этого IDE придется изучать самому, с учетом того что ты хочешь от него добиться и в какой области применять. У PhpStorm есть аналог - WebStorm. Он попроще для освоения из-за того что ориентирован только на frontend-разработку.

[DanilStopnickiy 4922]

В 21.02.2017 в 17:37, CEPBAJl сказал:

Даня, так на ТыТрубе поищи. Или лень? 

Вот попробуй в этом порыться https://www.youtube.com/results?search_query=phpstorm+уроки. У loftblog неплохие видеоуроки.

К сожалению, большую часть работы этого IDE придется изучать самому, с учетом того что ты хочешь от него добиться и в какой области применять. У PhpStorm есть аналог - WebStorm. Он попроще для освоения из-за того что ориентирован только на frontend-разработку.

я скачал виде, теперь не хочу навязываться но есть ли обучение пользованию WebStorm ? пожалуйста 

Спойлер

 

[DanilStopnickiy 4922]

Кто знает, как можно выполнить след. задачу (если это возможно конечно...):

У меня уже почти готовая выполненная работ по веб, остаётся один маленький штрих в котором только вы можете помочь, так как я с JavaScript я пока не лажу. Хотелось бы узнать, есть ли возможность при нажатии на видео или же блок (салатового цвета), это видео открывалось бы в новом окне браузера (именно окне, не в новой вкладке). Пока у меня получилось: только при обновлении сайта (и то, браузер сразу блокирует окно).

Спойлер

 

[CEPBAJl 14009]

@DanilStopnickiy А ты это извращение сам придумал или тебе это в задании строго прописано?

Атрибут в теге <a> target="_blank" раньше открывал ссылки в новом окне браузера, в современных браузерах он же по-умолчанию открывает ссыль в новой вкладке, изменить поведение можно настройками браузера.

Если поискать, то можно найти плагины для браузеров отрывающие видео в новом окне, это вроде как помогает избежать дополнительной рекламы и всплывающих окон (не понимаю чем им AdBlock не угодил).

[DanilStopnickiy 4922]

Люди, помогите кто сможет ! Скиньте ссылки на сайты где публикуются последние новости в сфере web-программирования, Пожалуйста !!!

[programist434 1566]

http://ruseller.com

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

[DanilStopnickiy 4922]

Можете скинуть ссылки, где можно нормально научиться подключать шрифты через Less ( именно через Less, таково задание ), заранее большое спасибо )

[programist434 1566]

3 часа назад, DanilStopnickiy сказал:

Можете скинуть ссылки, где можно нормально научиться подключать шрифты через Less ( именно через Less, таково задание ), заранее большое спасибо )

Чем тебя css не устраивает? 

[CEPBAJl 14009]

37 минут назад, programist434 сказал:

Чем тебя css не устраивает? 

Чистый css это трудночитаемый и трудноподдающийся редактированию код. В отличии от него в препроцессорах есть переменные, есть функции и примеси. Сам код читается намного легче и может быть разбит на множество файлов для большей понятности. Из недостатков - требуется компиляция в css. Но никто не применяет препроцессоры напрямую. При использовании gulp для того чтоб собрать все созданные в препроцессоре файлы стилей в один, скомпилировать их в css, минфицировать и очистить от ненужных комментарием достаточно набрать в консоли команду gulp build. Команда может быть и другой, каждый сам пишет код для своего сборщика.

@DanilStopnickiy Даня, почитай тут https://toster.ru/q/183489 и тут http://chimir.ru/post/39 описания как сделать это с помощью миксинов. Я с less не возился, меня на sass заманивали.

[DanilStopnickiy 4922]

8 часов назад, programist434 сказал:

Чем тебя css не устраивает? 

первый раз когда мне показали Less, я не понял что это вообще такое, думал отдельный язык программирования но когда разжевали и показали, до сих пор жалею, что нас этому в колледже не обучали, в добавок намного легче прописывать стиль отдельному элементу страницы, т.к. не нужно указывать трёх-километровый путь к элементу пример: ячейки таблицы к которым не надо применять класс, но нужно всем задать внутренние отступы и цвет фона ячейки:

 

<table class="table_staff>

     <tr>

        <td>№</td>

        <td>Имя сотрудника</td>

        <td>Часы работы</td>

     </tr>

     <tr>

        <td>1</td>

        <td>Гриня @CEPBAJl</td>

        <td>с 6:00 до 21:00</td>

     </tr>

     <tr>

        <td>2</td>

        <td>Рома @programist434</td>

        <td>с 6:00 до 21:00</td>

     </tr>

</table>

 

Таблица пример (взята с потолка) =)

 

Как примерно в Less будет выглядеть ( Рамка самой таблице, отступы внутри ячеек и ширина ячейки ):

 

table.table_staff{

            border: 1px solid black;

 

                 tr{

 

                     td{

                         padding: 10px;

                         background-color: yellow;

                         width: 100px;

                        }

            }

}

 

А теперь как оно выглядит в итоге в CSS (как у меня выходило всегда):

 

.......table.table_staff {

                                   border: 1px solid black;

}

.......table.table_staff td tr{

                         padding: 10px;

                         background-color: yellow;

                         width: 100px;

}

 

"......." - означает трёх-километровый путь, т.к. страница не обходится парочкой элементов.

[CEPBAJl 14009]

@DanilStopnickiy Данил, короткие селекторы это не достижение. У нормальных кодеров это норма - тройной селектор повод присмотреться к тому что ты наваял, а четырех-составной уже повод проверить что не так. Возможно ты дальше будешь изучать технологию БЭМ, там часто очень длинные названия классов, сначала это настораживает и отталкивает, но когда разберешься, то понимаешь: длинное название в котором понятным образом вписаны блок--элемент__модификатор делает код самодокументированным, для задания стиля любому элементу достаточно одного, иногда двух селекторов и, что самое главное - любой блок кода можно безбоязненно перемещать в любое место страницы и при этом сетка не посыпется.

! Даня, отучайся от инлайновых стилей, это плохо, даже в примерах. Лучше уж выше прилепи тег <style></style>

Вот очень простенький пример на SASS

Это правила стилей записанные с помощью CSS:

body {
  color: red;
}
body p {
  font-size: 14px;
}
body p .someclass {
  font-weight: bold;
}
Тоже самое записанное с помощью SASS (именно SASS, а не SCSS!):

body
  color: red
  p
    font-size: 14px
    .someclass
      font-weight: bold

Даже в этом микроскопическом коде получилось короче. Но главное в препроцессорах все же то. что там есть переменные и функции. Для html тоже есть препроцессоры, но смысл использовать их пропал с появлением emmet.

 

[DanilStopnickiy 4922]

@CEPBAJl Прошу помоги !!! Мне в мои оленьи мозги никак не доходит, как правильно подключить шрифт. Я скину "Experement.rar" ( + там безнадёжная моя попытка подключить шрифт ), где пытался подключить шрифт Times New Roman, а архив со шрифтом по почте ( он не влезает в стандарты форума 5Мб ). Если что-то ещё нужно, пинай меня, постараюсь как-нибудь помочь разобраться, в том, что навоял))

Experement.rar

Основной Less файл который компилируется в CSS ( он один ) - less_main.less. Программа которой пользуюсь - NetBeans 8.2, для компиляции less-файлов использую "Koala". Заранее большое спасибо !

[luarvik_666 15271]

Давай-давай, Гриня, помогай молодым!

А то развалился там у себя на диване... 

[artyom_ktk 4210]

Не спец, немножко интересуюсь данной областью знаний...

В файле less_main.css подправил путь к шрифтам, положил в папку шрифт (его там не было) и добавил несколько правил для примера использования этого символьного шрифта. Правила не моего авторства, взял для примера из bootstrap'а ( http://getbootstrap.com/components/#glyphicons-how-to-use )

 

В LESS пока сильно не вник. В процессе

 

 

ex.zip

[CEPBAJl 14009]

@DanilStopnickiy Даня, я не работал с LESS, а он всё же отличается от SASS. И к тому же я через час уезжаю на шашлыки по случаю Днюхи у моей крестницы, поэтому хоть немного повникать смогу только завтра, т.к. собираюсь употребить немного жидкого топлива. Ты уж прости меня, редкого алкаша. 

[CEPBAJl 14009]

Данил, в LESS же используются фигурные скобки и закрывающая правило точка с запятой, попробуй прописать подключение так же как в обычном CSS, а вдруг получится. Я вот точно знаю что в SCSS можно писать обычные CSS-правила и они полностью работоспособные, про LESS надо почитать. 

[programist434 1566]

5 часов назад, DanilStopnickiy сказал:

@CEPBAJl Прошу помоги !!! Мне в мои оленьи мозги никак не доходит, как правильно подключить шрифт. Я скину "Experement.rar" ( + там безнадёжная моя попытка подключить шрифт ), где пытался подключить шрифт Times New Roman, а архив со шрифтом по почте ( он не влезает в стандарты форума 5Мб ). Если что-то ещё нужно, пинай меня, постараюсь как-нибудь помочь разобраться, в том, что навоял))

Experement.rar

Основной Less файл который компилируется в CSS ( он один ) - less_main.less. Программа которой пользуюсь - NetBeans 8.2, для компиляции less-файлов использую "Koala". Заранее большое спасибо !

В Less не работал но если он схож синтаксисом с css то у тебя тут не хватает двух точек.

src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),

так как папка fonts не вложена в папку less.

[artyom_ktk 4210]

Попробовал немного разобраться в LESS. Удобно!

 

Подключил файл .less напрямую к .html с помощью less.js, который конвертирует его "на лету" и немного поэкспериментировал.

По-моему, ошибка в том, что была повторно указана директива @import "less_var.less" в файле less_code.less

И вопрос путей к файлам проекта. Их можно указать по-разному, зависит от того, как проходят эксперименты. На веб-сервере, локальном или удаленном?

 

P.S. Результат изысканий во вложении (добавил пример использования символьного шрифта): www.zip

P.S.S. Похоже, неплохая книга о LESS для начала: https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/ Буду читать.