Zamieszczanie skryptu biblioteki na stronie

pytanie zadane 10 lipca 2015 w HTML i CSS przez krokodylfred Użytkownik (620 p.)
edycja 11 lipca 2015 przez krokodylfred

Dobry wieczór, Niedawno natrafiłem na bardzo fajną bibliotekę CSS i js. Postanowiłem użyć jej w tworzeniu mojej strony. Konkretnie chodzi mi o https://metroui.org.ua/images.html i modyfikację wstawionego przeze mnie obrazka do jednego z powyższych form. Tu rodzą się pytania:

1. Czy ścieżkę do podanego skryptu muszę zrobić w script src=xxxxx ? Wiem napewno w head, ale co potem?

2. Czy konieczna jest jakaś modyfikacja klasy css obrazków które chce zmodyfikować?

3. Czy wtedy np. w przypadku wzoru 'diamond' są inne parametry w css niż width i lengh? Jak zmienić ich wielkość?

Z góry dziękuję za pomoc.

Ps: Podjąłem próbę załączeniu przez script src. interesującego mnie pliku a także wpisałem przy tagu img zalecane właściwości jednak to nie dało efektu.

2 odpowiedzi

odpowiedź 10 lipca 2015 przez Comandeer Guru (601,930 p.)
wybrane 10 lipca 2015 przez krokodylfred

Najlepsza

Czemu akurat w head? Poprawnie skrypty powinno się aplikować na końcu body.

Żeby użyć tego musisz dołączyć też jQuery oraz wczytać odpowiedni plik CSS ze stylami. Ogólnie: musisz zaaplikować cały ten framework.

komentarz 10 lipca 2015 przez krokodylfred Użytkownik (620 p.)

Czy chodzi o fitImage plugin ? A czy jak dodam jquery to strona od takiej ilości danych nie spowolnienie za bardzo ? A właśnie np. W książce" HTML nieoficjalny podręcznik " uczą aby tagi script były w head. A jeszcze mam pytanie: Mam jquery i metoui dołączyć tagami script czy link?

komentarz 10 lipca 2015 przez Comandeer Guru (601,930 p.)

https://metroui.org.ua - tutaj masz instrukcję dołączania. Z tym, że znaczniki script powinny być na końcu body, co jest od lat uznawane za best practice w środowisku: https://developer.yahoo.com/performance/rules.html#js_bottom

komentarz 11 lipca 2015 przez krokodylfred Użytkownik (620 p.)

Dziękuję za poświęcony czas. Idąc za twoją radą umieściłem biblioteki na końcu body. Niestety przykładowy obrazek nadal nie przybrał kształtu. Kod w body obecnie wygląda tak:

<body>
<div>
<img src = "ksiazka.jpg" data-role="fitImage" data-format="square" data-type="diamond">
</div>






<script src ="Metro-UI-CSS-master\docs\js\jquery-2.1.3.min.js"></script>
<script "Metro-UI-CSS-master\docs\js\metro.js"></script>
<link href "Metro-UI-CSS-master\docs\css\metro.css" rel = "stylesheet">

</body>

Dodam że ścieżki na 100% są poprawne (Jquery znalazłem w pobranym pliku metroui)

PS: Wiem że html to nie jezyk programowania ale chciałem żeby to ładnie wyglądało, więc zaznaczlem xml.

komentarz 11 lipca 2015 przez Comandeer Guru (601,930 p.)

XML też nie jest językiem programowania ;)

Akurat CSS powinien być w head, a jedynie JS w body. No i nie działa, bo np drugi skrypt nie ma atrybutu [src] a w link brakuje = po nazwie atrybutu

komentarz 11 lipca 2015 przez krokodylfred Użytkownik (620 p.)
edycja 11 lipca 2015 przez krokodylfred

Zastosowałem się do Twojej rady. Chyba jestem już na dobrej drodze, bo pojawił się ogromny 'diament'. W każdym razie bez obrazka. Wielkość mogę ustalać przez klasę CSS. Ale dlaczego nie ma tam tam zdjęcia, mimo że jest załączone?

Edit: Nie było zdjęcia, bo miało przez przypadek spacje w nazwie. Co dziwne jak wstawia sie zdjecie bez atrybutow "diamentu" to mimo spacji sie wyswietlało

Dziekuje za pomoc, temat do zamkniecia.

komentarz 11 lipca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

HTML i XML są językami programowania.

komentarz 11 lipca 2015 przez Comandeer Guru (601,930 p.)

Nie są. XML nie jest językiem programowania, HTML 5 jest tylko w połączeniu z CSS 3 i przy założeniu, że pozwalamy na akcje usera: http://lemire.me/blog/archives/2011/03/08/breaking-news-htmlcss-is-turing-complete/

odpowiedź 11 lipca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)
edycja 11 lipca 2015 przez Mieszko I

Bibliotekę dołącz na końcu sekcji body.

Jeśli kod JavaScriptu umieszczony jest w osobnym pliku niż strona html, zawsze ten plik dołącza się w taki sam sposób, np:

<body>

<script src="script.js" type="text/javascript"></script>

dalsze linie  kodu  

</body>

Pozdrawiam.

komentarz 11 lipca 2015 przez Comandeer Guru (601,930 p.)

Czemu na początku body?

komentarz 11 lipca 2015 przez Mieszko I Stary wyjadacz (10,980 p.)

Można albo na początku, albo na końcu body. Jaka więc jest różnica? Poza tym ja zawsze jak urzywam biblioteki JQuery dołączam ją na samym początku przed użyciem jakichkolwiek funkcji korzystających z tej biblioteki.

komentarz 11 lipca 2015 przez Comandeer Guru (601,930 p.)

Różnica jest bardzo duża. Wstawione na początku body blokują rendering (tak samo, jak w head). Na końcu body już nie mają co blokować, bo wszystko inne jest już ściągnięte