Новые знания [100] Учимся вместе - 3. Стодневка завершена

[Утро]

Нет

есть
а что с тобой теперь делать?

 

[Олух Царя Небесного]

есть
а что с тобой теперь делать?

Теперь есть =) Наблюдать, и ловить от меня волшебные пендали =)

 

[Утро]

и ловить от меня волшебные пендали =)

ой

 

[Олух Царя Небесного]

ой

В "Настройки -> Профиль" можно задать себе читаемое имя, вместо 123... =)

 

[Утро]

В "Настройки -> Профиль" можно задать себе читаемое имя, вместо 123... =)

теперь я вообще крут

 

[Олух Царя Небесного]

теперь я вообще крут

А смотри какая классная штука появилась =)

 

[Утро]

А смотри какая классная штука появилась =)

а чей то я это, того этого самого
буду первой скоро

 

[Олух Царя Небесного]

а чей то я это, того этого самого
буду первой скоро

Давай, давай! Я все равно буду первее! Хе-хе-хе! =)

 

[Утро]

@игоряшкаNS а как ты называешься в дуолинге, давай мы тебя найдем?

 

[Nastasik]

Котэ столько ошибок наделал в предыдущем посте - ужос! Просто кочмаррр! Но я торопился =)

Теперь будем говорить про CSS =)

Спойлер: CSS

Так вот... теперь мы знаем, что web-страницы состоят из тегов, при помощи которых на этих web-страницах отображаются разные вкусняшки: списки, таблицы, ссылки. Все эти (и вообще) теги имеют наборы разных параметров, при помощи которых можно изменить их (тегов) содержимое =) Логично! =) Но если лепить это все друг на друга, то так недолго и запутаться! Поэтому изобрели колесо решено было изменяемые параметры вынести в отдельный файл и назвать это CSS =)

Вообще признак хорошего разработчика - компактный и визуально понятный (с отступами) код, а не кол-во заученых им определений и свойств =)

Итого, если мы сочиняем нашу первую web-страницу с таблицами стилей, то у нес будет два файла: web-страничка - index.html, в "голове" который мы напишем ссылку на файл со стилями - style.css =)

Для редактирования и того и другого, на первых порах подойдет обычный блокнот. Главное чтобы расширения у файлов были не .txt, а .html и .css соответственно!

Покажу сразу на примере, у нас есть страница вида:

Как видно, файл со стилями пока девственно чист, но указан в файле .html. Теперь, чтобы... ну например заголовок "Привет мир!" сделать красным, мы и напишем в файле стилей:

весь текст в тегах <h1> сделать красным =)

...или точнее:

h1 {color: red;}

Самое главное! Чтобы увидеть, что же мы наделали, нужно сохранить то что мы наизменяли, обновить страницу в браузере и только тогда результат будет очевиден =)

И еще очень важно помнить! Если не отображаются изменения и сайт вообще сам по себе слегка "косоват", местами или повсеместно, то стоит искать не закрытые или недостающие теги в файле .html! Ну можно да не углядеть за всем, с каждым бывает =)


Ну чтоб нам еще сделать? Сделаем побольше отступ между нашими покупками и уберем точечки:

li {padding-bottom: 20px; list-style-type: none;}

Еще один важный момент который стоит крепко-накрепко запомнить! Параметры и присваиваемые им значения для одного и того же элемента, указываемые в фигурных скобках, друг от друга должны отделяться/заканчиваться точкой с запятой! Иначе ничего не будет работать =)

Можно присваивать один и тот же параметр нескольким элементам, чтобы место сэкономить, потому-что если элементов очень много, то кол-во параметров этих элементов увеличивается в геометрической прогрессии. Это можно просто запомнить на будущее =)

Комментарии, чтобы не запутаться в своей же писанине и "культура письма" еще скажу и покажу. Это важно, потому-что экономит время на поисках:"...а где-то это уже было написано?!"

С принципом технологии CSS мы чуть разобрались, поздравляю Настя! =) Существующие параметры перечислять бессмысленно, для это есть справочник, пользоваться которым не зазорно абсолютно. Пытаться сразу все понять и запомнить - нереально и не нужно! =) Скажу только пару слов о наиболее часто используемых параметрах:

color - меняет цвет

font - задает параметры шрифта

margin и padding - создают отступы, записываться могут по разному и между собой имеют отличия, рассажу может быть чуть позже, или сама изучишь этот вопрос =)

width и height - задают ширину и высоту, это относиться к таблицам и к блокам

background - задает цвет фона или фоновое изображение

float - выравнивает элементы по определенной стороне

display - определяет как элементы будут отображаться

...и так далее =) Пользуйся справочником, я например использую htmlbook, мне нравиться


На этом можно считать тему CSS пройденной, остальное будет зависеть только от практики =) А все время зависать на одной только теории - бесполезная трата времени =)

Все, до следующих встреч, Котэ пошел баинькать =) Всем споки-ноки =)

Котэ, спасибо тебе огромное
А то вот прям чувствую, что на месте топчусь, теперь понятно, куда путь держать Спасибо!

 

[Олух Царя Небесного]

Котэ, спасибо тебе огромное
А то вот прям чувствую, что на месте топчусь, теперь понятно, куда путь держать Спасибо!

Да всегда пожалуйста! =) Я так и понял, что ты мудрствуешь над книгами. Читать их можно бесконечно =)

Сейчас попробую сюда прикрепить файлы страницы и стилей, для наглядного примера, потому-что не слишком хорошо скриншоты получились. А на днях тебе еще подготовлю пару тематических эссе, чтобы все точки над i расставить =)

Вот, архив вроде должен быть во вложении к сообщению

P/S Перезалил архив, потому-что забыл подправить изменения которые сделал после публикации предыдущих рассказов =)

 

[игоряшкаNS]

@игоряшкаNS а как ты называешься в дуолинге, давай мы тебя найдем?

Зачем? Подглядывать будете, или подсматривать?

 

[Утро]

Зачем? Подглядывать будете, или подсматривать?

И то и другое и списывать
Ну ладно ладно, я ж не настаиваю

 

[Ана Банана]

Отчет.
Англ:100%
Глина:100%
Простите за такую краткость, но вроде именно она сестра таланта

 

[Олух Царя Небесного]

Nastasik, Настя, ты где? =) Хватит работать, я тебе принес очередные 50% прогресса =)

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

Итак слушай =)

Спойлер: Обо всем понемногу

О индексации, поисковых роботах и прочей фантастике

Успех сайта зависит не только от его содержимого но и от продуманной структуры. Мало будет написать интересные статьи, красивый заголовок и зазывающий слоган. Можно указать ключевые слова в тегах <meta> и заголовок в <title> но и это еще не все. Дело в том, что и Гугл и Яндекс и все остальные поисковые системы, кроме тега <meta> и <title> информацию так же берут из тегов заголовков <h1> ... и т.д. по убывающей. Т.е. чем больше заголовок, тем важнее в нем информация, и тем еще более вероятнее попадание ссылки на наш сайт в выдачи поисковиков.

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

Упрощенно, для Гугла (и всех остальных) сайт выглядит примерно так:

<html>
   <head>
      <title>Название сайта которое проанализирует Гугл</title>
      <meta name="keywords" content="Ключевые слова которые проанализирует Гугл" />
   </head>

   <body>
      <h1>Заголовок сайта который проанализирует Гугл</h1>
      <h2>Слоган сайта который проанализирует Гугл</h2>


      <h3>Заголовок 1-ой статьи который проанализирует Гугл</h3>
         <p>Lorem ipsum...<p>

      <h3>Заголовок 2-ой статьи который проанализирует Гугл</h3>
         <p>Lorem ipsum...<p>

      <h3>Заголовок 3-ой статьи который проанализирует Гугл</h3>
         <p>Lorem ipsum...<p>
   </body>
</html>

Надеюсь понятно объяснил =) Более наглядный пример во вложении к сообщению =)


О Lorem ipsum

В обязанности разработчика не входит написание статей и наполнения сайта контентом (информационным содержимым), но чтобы продать сайт его конечно же нужно представить во всей своей красе! Значит его нужно чем-то все таки наполнить =) Если просто взять скопировать десяток слов откуда попало, даже в качестве презентации и все же получить в итоге за это деньги, то это будет нарушением чьих-нибудь авторских прав (!) и за это можно получить "по шапке". Хотя если скопированному тексту уже хотя бы лет сто и никто на авторство не претендует то можно, только осторожно =)

Вот так однажды один ленивый умник, который хотел и на елку влезть и известное место не ободрать, взял отрывок из трактата Цицерона и порезав его на куски получил вполне себе годный набор слов для визуального оформления. И так всем эта идея понравилась, что теперь этот "Lorem ipsum..." вставляют везде где нет более менее осмысленного контента =) Больше скажу! Этот отрывок в народе даже получил обиходное название - fish-text (рыба-текст), т.е. образец, макет =)

Более полный текст и историю можно найти в сети =)

Полезность Lorem ipsum заключается не только в предпродажном оформлении, но так же позволяет в процессе разработки визуально оценивать достигнутые результаты, а не редко выявить ошибки дизайна. Есть мнение, что текст на латинице все же придает сайту нууу... немного не такой облик, как если это был бы сайт на кириллице. Поэтому сейчас уже существует масса сервисов по генерации таких вот бессмысленных рыба-текстов для кириллицы (на русском т.е.). Я лично считаю, что копировать даже такие тексты все же надо с осторожностью - мало ли что взбредет в голову разработчикам генератора этого текста завтра (и еще не известно откуда они сами взяли текст для генерации), но "для себя" и "посмотреть" вполне можно и поюзать.

Это важно, так как в процессе все равно придется с этим столкнуться =)


О структуре файлов и папок

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

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

<link rel="stylesheet" href="./css/style.css">

Точка в адресе означает что начинать искать файл стилей стоит с места где лежит сама страница .html, затем зайти в папку css и уже оттуда брать файл со стилями, если он там есть. Такой тип ссылок называется относительным, из-за того что поиск необходимого осуществляется в приделах папок сайта.

А еще существуют ссылки абсолютные, которые начинают поиск ныряя в просторы интернета и снова заходя ту же дверь, но уже "с улицы" =)

<link rel="stylesheet" href="http://Мой первый сайт.ru/css/style.css">

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

С ссылками на изображения та же ситуация - можно ссылаться относительно либо абсолютно:

<img src="./img/Какая-то картинка.jpg">

или

<img src="http://Мой первый сайт.ru/img/Какая-то картинка.jpg">

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

Понимаю - мудрено! =)

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

А выглядеть будет так:

<link rel="stylesheet" href="../css/style.css">

Т.е. будет две точки! =) Для абсолютных ссылок, понятное дело, ничего не меняется.

На этом у меня сегодня все =) Если я тебе надоем, ты скажи - я не буду приставать =)

 

[Олух Царя Небесного]

Забыл, блин, к #1635 прицепить архив =/

А в редакторе что-то не цепляется, вот не люблю, когда не красиво! =/

 

[Валех Рзаев]

Боже дай мне столько же целеустремленности

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

 

[Утро]

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

я хочу знать об этом все

 

[Валех Рзаев]

я хочу знать об этом все

О жестком тайм-менеджменте?

 

[Утро]

О жестком тайм-менеджменте?

и это тоже, а так же откуда мотивация и почему она не умирает