Kilka pytań o frontend responsywne strony i nauka

pytanie zadane 1 lipca 2015 w HTML i CSS przez Agentok Użytkownik (660 p.)

Witam od pewnego czasu stoje w miejscu jesli chodzi o nauke technologi webowych nie wiem czego powinienem się uczyć. Znam html css oraz liznąłem bootstrapa ale czytałem że nie warto z niego korzystać gdyż lepiej jest stworzyć coś własnego co będzie lżejsze. Jak budować strony internetowe aby były w pełni responsywne? Co powiniem robić jak się uczyć ostatnio brakuje mi nawet pomysłów jakie strony robić myślałem nad stworzeniem biblioteki podobnej do bootstrapa ale skoro jestem początkujący nie wiem od czego zacząć. Moim celem jest działka frontend oraz inzynieria internetu prostu nie wiem jak się szkolić. Pomożecie?

2 odpowiedzi

odpowiedź 1 lipca 2015 przez Comandeer Guru (601,110 p.)
wybrane 2 lipca 2015 przez Agentok

Najlepsza

Frontend to przede wszystkim JS obecnie, więc trzeba znać choćby podstawy tego języka i wiedzieć jakie frameworki ostatnio są popularne i na które sobie można pozwolić jeśli chcemy uczyć się dobrych praktyk: http://www.webkrytyk.pl/krytyka/my-truth-about-angular-js/

Warto też wypracować sobie właściwe podejście do architektury stron internetowych. Tutaj podstawowym pojęciem cały czas pozostaje Progressive Enhancement: http://webroad.pl/inne/3722-progressive-enhancement-zapomniany-fundament
Przy takim tworzeniu stron pomóc może odpowiednia architektura, taka jak BEM: https://en.bem.info/ chociaż warto poznać też SMACSS: https://smacss.com/

Do tego dochodzi kwestia modularności kodu - każdy element na stronie powinien być całkowicie odizolowany od reszty (patrz: BEM/SMACSS). Responsywność natomiast zapewni Ci zapoznanie się z media queries: http://www.kurshtml.edu.pl/css/zapytania_mediow,media.html

komentarz 1 lipca 2015 przez Agentok Użytkownik (660 p.)

Nie kapuje o co chodzi z bem od czego mam zacząć bo za dużo tych technologi jak na pierwszy raz.

komentarz 1 lipca 2015 przez Comandeer Guru (601,110 p.)

BEM to po prostu pewna abstrakcja nadbudowana na DOM. Zamiast odwoływać się do elementów strony, odwołujemy się do ich klas.

<div class="module">
    <h1 class="module-header">Nagłówek</h1>
    <p class="module-content">Content</p>
</div>

.module
{
    background: #ff0;
}

.module-header
{
    font-size: 25px;
}

,module-content
{
    color: #f00;
}

Do tego spłaszczamy selektory (najlepiej, żeby odwoływały się tylko do konkretnej klasy) i tym samym pozbywamy się problemów ze specyficznością CSS-a.

komentarz 1 lipca 2015 przez Comandeer Guru (601,110 p.)

To tak w dużym uproszczeniu - o BEM można napisać bardzo dużo i będę musiał to w najbliższym czasie zrobić (aż mnie nosi ;))

komentarz 1 lipca 2015 przez Agentok Użytkownik (660 p.)

W takim razie ten cały bem polega na tym aby zamiast pisać tak:

<header>
    <h1>Nagłówek</h1>
</header>

header h1
{
 color: red; 
}

pisać tak

<header class="header">
    <h1>Nagłówek</h1>
</header>

.header
{
 color: red;
}

O co chodzi z tym BEMJSON po co jest to używane? Np takie coś gdzie to się pisze i czy to jest jakiś język programowania?

 ({
     block : 'page',
     title : 'hello',
     head : [
         { elem : 'css', url : '_hello.css' }
     ],
     scripts : [{ elem : 'js', url : '_hello.js' }],
     mods : { theme : 'islands' },
     content : [
         {
             block : 'hello'
         }
     ]
 })

Może głupie pytania ale kto pyta nie błądzi prawda?

komentarz 1 lipca 2015 przez Comandeer Guru (601,110 p.)

W największym uproszczeniu tak: BEM pozwala de facto oderwać naszą aplikację od HTML, CSS i JS (wszędzie operujemy po prostu na klasach).

O co chodzi z tym BEMJSON po co jest to używane?

To jest system szablonów ;) Przepuszcza się to przez JS i zwraca nam on kod HTML odpowiadający temu JSON. Prawdę mówiąc osobiście tego nie używam, bo wydaje mi się to po prostu przerostem formy nad treścią.

komentarz 1 lipca 2015 przez Agentok Użytkownik (660 p.)

Czyli nie trzeba się tego zbytnio uczyć bo szczerze jestem zagubiony z każdej strony bombardują mnie przeróżne biblioteki, narzędzia i nie wiem za co się złapać aby nie oszaleś. node.js grunt.js JSON SASS oraz to co podałeś za cholere nie wiem do czego to wszystko co używać a co jest za przeproszeniem gównem jak ten cały angular.js Widać po tobie że masz ogromną wiedzę i jesteś specjalistą w tej dziedzinie może w takim razie byłbyś w stanie pomóc takim ludziom jak ja którzy są zagubieni i nie wiedzą co ze sobą zrobić. Javascript to kolejna rzecz którą nie wiem jak ugryźć tak samo jQuery które chyba też jest złe jak angular?

komentarz 1 lipca 2015 przez Comandeer Guru (601,110 p.)

jQuery dobrze wykorzystane jest bardzo dobrym pomocnikiem przy męczeniu się z DOM strony i tego typu rzeczami. Problem z jQuery jest taki, że ludzie go wykorzystywali do wszystkiego (więc w gruncie rzeczy to nawet nie jest do końca jego problem ;)). Jeśli będzie się wykorzystywać jQuery do tego, do czego został stworzony (czyli do pracy z DOM) to jest bardzo przyjemnym narzędziem.

Jeśli znasz już HTML i CSS to logicznym kolejnym krokiem będzie rozpoczęcie nauki JS.

komentarz 2 lipca 2015 przez Agentok Użytkownik (660 p.)

Możesz polecić skąd się uczyć Javascriptu ponieważ z programowania mam podstawy podstaw i nie umiem pisać aplikacji mam z tym problem więc nie wiem czy z javascript bedzie tak samo jak nie umiem wgl programowac i wymyslic jakiegos programu. Jest sens uczenia sie javascript do nauki programowania czy najpierw mam sie nauczyć programować na innym języku? C++ kiedyś się uczyłem ale nie podoba mi się i nie zastosuje go do technologi webowej.

komentarz 2 lipca 2015 przez Comandeer Guru (601,110 p.)

Z polskich na chwilę obecną jest jedynie kursjs.pl, który będzie dobry do podstaw, ale później trza się na coś przerzucić - problem w tym, że nie ma na co. Jest jeszcze kurs na codecademy, ale cierpi na te same problemy…

Brak kursu JS dobrego wkurza mnie na tyle, że w wakacje chyba zacznę takowy tworzyć

odpowiedź 1 lipca 2015 przez rafal.budzis Szeryf (85,260 p.)

znasz :not, :nth-child, operator + i > Jeśli nie to nie znasz CSSa ale jeśli tak to RWD zrozumiesz po przeczytaniu tego posta

.content{
	width:1200px;
	margin:0 auto;
}
@media screen and (max-width:756px){
/*CSS Ukryty dla moinitorów większych niż 756px*/
	.content{
		width:736px;
	}
}
@media screen and (max-width:480px){
/*CSS Ukryty dla moinitorów większych niż 480px*/
	.content{
		width:auto;
	}
}

Prościej wytłumaczyć chyba się nie da :D

komentarz 1 lipca 2015 przez Agentok Użytkownik (660 p.)

Kojarze te selektory a jak czegoś nie wiem to czytam na necie. Nie wiem co jeszcze do css można się nauczyć a przykład nie wyjaśnił mi jak budować strony.

komentarz 1 lipca 2015 przez rafal.budzis Szeryf (85,260 p.)

To masz drugie zapisz sobie jako plik i odpal w przeglądarce.

<style>
.content{
    width:1200px;
    margin:0 auto;
	height:100px;
	background:#000;
	color:#fff;
}
@media screen and (max-width:756px){
/*CSS Ukryty dla monitorów większych niż 756px*/
    .content{
        width:470px;
    }
}
@media screen and (max-width:480px){
/*CSS Ukryty dla monitorów większych niż 480px*/
    .content{
        width:auto;
    }
}
</style>
<div class="content"> zmniejsz okno przeglądarki i zobacz jak się zmniejszam  </div>

chodzi o to ze piszesz pod dane rozdzielczości dodatkowego CSSa jakby który nie obowiązuje przy niektórych rozdzielczościach. Mówie o responsywnosci o którą pytałeś.