witam
mam pewien problem ze stworzeniem strony internetowej na projekt
muszę stworzyć stronę w html+css (te elementy już mam) ale dodatkowo muszę zrobić:
1.Dynamiczny CSS – rozszerzenie o urządzenia mobilne (na tablet lub komórka) dla jednej podstrony
2.Wpleść w stron logiczne zgodnie z przeznaczeniem wykorzystanie obiektów sessionStorage i localStorage
(w przykładzie wykazać różnicę między nimi)
3.JS + DOM modyfikacja istniejącej treści lub wyglądu
4.JS + DOM modyfikacja struktury dokumentu
5.Zastosowanie gotowego przykładu czystego jQuery
6.Wykorzystanie minimum 2 komponentów z jQuery UI w interakcji ze stroną – np. Dialog jako
komunikaty z walidacji formularza
7.Działanie i wygląd strony bez obsługi JS
o ile html byłem w stanie ogarnąć to już z js jest trochę gorzej
mógłby ktoś w czymkolwiek pomóc?
Tak. Ja pomogę.
Tu jest dokumentacja jquery:
http://api.jquery.com/
Jest tu bardzo dużo w sumie gotowych przykładów.
Mam nadzieję że pomogłem. Gdybyś miał z czymś konkretnym problem, nie bój się zapytać!
dzięki za szybką pomoc
mam jeszcze parę pytań
1.może mógłbyś mi podpowiedzieć jak wykonać modyfikację struktury dokumentu js+dom, bo za bardzo tego nie rozumiem
2. czy aby dostosować podstronę do urządzeń mobilnych to muszę ją zrobić od nowa, tzn. zmienić ustawienie kolumn, ograniczyć css itp. czy wystarczy gdzieś w kodzie wpisać jakąś specjalną komendę
3.jak dostosować kod do wyświetlania strony bez obsługi js?
1. Chodzi zapewne o którąkolwiek z funkcji w tym dziale:
http://api.jquery.com/category/manipulation/
2. Musisz tak napisać CSS, żeby działało i na desktopach i na urządzeniach mobilnych. Jest na to określenie, ale zapomniałem.
3. Trzeba ją tak zrobić, żeby bez JS działała (czyli w sumie jeżeli nie robisz zaawansowanych stron, to w zasadzie nie powinno mieć znaczenia) Zapewne może tu chodzić o efekty CSS3 i ewentualnie sztuczki z hover.
Chodzi zapewne o to:
http://www.w3schools.com/jsref/
Czyli dobieranie się do obiektów przez DOM, a nie czystym jquery (tego dotyczy punkt 5)
Co do dynamicznego dostosowania CSS dla telefonów/tabletów to poszukaj na temat CSS @media query
Ewentualnie zapoznaj się z AngularJS - powinien dobrze załatwić sprawę dynamicznego dostosowania pod różne rozdzielczości ;)
korzystam z tej strony (dzięki za podanie jej!) http://www.w3schools.com/jsref/ i zrobiłem już "JS + DOM modyfikacja istniejącej treści lub wyglądu " za pomocą funkcji document.querySelector która zmienia mi tło nagłówka
nie mogę jednak znaleźć funkcji również JS+DOM która modyfikowała by strukturę dokumentu
towarzysze, pomożecie? :D
Co do wyświetlania strony na urządzeniach mobilnych to zajrzyj tu - http://www.w3schools.com/html/html_responsive.asp
I ogólnie możesz poczytać o responsive web designie.
mógłby mi ktoś powiedzieć jak zrobić aby przy wyłączonej obsłudze javascript w przeglądarce znikały te wszystkie rzeczy z tym związane, np. przyciski które powodowały wyskakiwanie nowych okienek
dirnis1 ->
Dostosowanie strony do poprawnego wyświetlania na różnych platformach
załatwiasz z poziomu CSS z wykorzystaniem tzw. media query.
Jeśli masz jakiekolwiek pojęcie o programowaniu, chodzi w tym mniej więcej o to, aby
w kodzie CSS napisać warunek sprawdzający np. szerokość okna przeglądarki czy ekranu.
Np.:
...
definicje css
np.
body ‹;; font-size: .75em ›;;
(...)
@media screen and (max-width: 768px) ‹;;
body ‹;; font-size: 1em ›;;
›;;
1.Dynamiczny CSS – rozszerzenie o urządzenia mobilne (na tablet lub komórka) dla jednej podstrony
To jest dokładnie wyżej wspomiane media queries. Żadnego js do tego nie potrzebujesz.
2.Wpleść w stron logiczne zgodnie z przeznaczeniem wykorzystanie obiektów sessionStorage i localStorage
Różnica jest prosta.
localStorage przechowuje informacje do czasu ich usunięcia przez kod bądź samego użytkownika. Nie mają czasu po którym wygasają automatycznie.
sessionStorage podobnie, jednak te informacje są usuwane po zakończeniu sesji przeglądarki
Z pewnością powinieneś kojarzyć popularne 'ciasteczka' eng. cookies. Są to drobne informacje które są przechowywane w pamięci przeglądarki przez określony czas.
W przypadku localStorage czas ten jest nieograniczony. zawartość localStorage strony można usunąć albo z poziomu tej strony albo ręcznie z poziomu ustawień przeglądarki.
3.
Załóżmy że masz na stronie paragraf <p> o klasie .primary-text
w javascripcie robisz tak:
var text = document.querySelector('p');
text.innerHTML = 'Zawartość zmieniona z poziomu JS'
Przykład online:
http://jsbin.com/zomorodiso/1/edit?html,js,output
4:
Tutaj najpewniej chodzi o np. dodanie elementu do strony.
Bardzo prosty przykład:
http://jsbin.com/xojeqatene/2/edit?html,js,output
5.Zastosowanie gotowego przykładu czystego jQuery
Nie rozumiem tego punktu. Co to znaczy 'czyste jQuery' oraz 'gotowy przykład'.
Chodzi o wykorzystanie jakiegoś pluginu?
7.
Tutaj masz warunki HTML które wyświeltają tekst w przypadku gdy nie ma wspracia javascript.
Szczerze nigdy w praktyce tego nie używałem ... dodatkowo IMO to trochę przesada. Kto w tych czasach ma wyłączony JS w przeglądarce?
[11]
Bardzo prosto.
W kodzie html to znacznika <html> dodaj klasę 'no-js'
Musisz napisać deklarację w CSS:
.no-js .selektor-twojego-elementu ‹; display: hide; ›;
A w kodzie Javascript napisz:
var html = document.querySelector('html');
html.classList.remove('no-js');
Dlaczego w ten sposób? To proste.
Dołączając klasę no-js do tagu html możesz z poziomu css łatwo wybrać wszystkie elementy które muszą być ukryte gdy nie masz włączonego javascriptu.
Natomiast w samym javascripcie wpisujesz polecenie które usuwa tę klasę, jednocześnie wyłączając wspomniane style CSS.
Pamiętaj aby ten kod znajdował się możliwie jak najwcześniej, ponieważ w przeciwnym razie możesz zauważyć, że elementy będą pojawiały się z opóźnieniem.
------
Pytanie ode mnie:
masz to zrobić na uczelni czy w szkole średniej?
może to głupi zabrzmi ale jak sprawdzić wygląd mojej strony na urządzeniu mobilnym bez urząddzenia mobilnego?
nie mam przy sobie żadnego sprzętu mobilnego, ale może są jakieś sposoby aby sprawdzić to na komputerze?
jest to projekt na uczelnię, ale sam muszę się wszystkiego uczyć, na wykładach mamy zupełnie inne rzeczy niż są wymagane do projektu
może jest to trochę dziwne ale będziemy się o tym uczyć dopiero na 3 semestrze (i właśnie wtedy powinien być ten projekt ale w poprzednich latach studenci mieli problemy z fizyką wiec przeniesiono ją na 3 semestr a z powrotem powędrował przedmiot o pięknej nazwie: Wytwarzanie aplikacji internetowych z którego mam ten projekt)
dirnis1 -> zmniejsz okno przeglądarki. Warunki media query reagują na rozmiar viewportu, czyli rozmiaru urządzenia czy właśnie okna przeglądarki.
Rozumiem, pytałem z ciekawości bo sam nigdy na studiach nie byłem.
Już teraz mogę Ci powiedzieć, że jeśli jQuery nie zrobi sensownych postępów to pewnie zanim skończysz studia,
podzieli los Flasha .. no może trochę później ale tylko ze względu na pluginy.
Przyszłość www to najpewniej web componenty i do tego jakiś framework MV* np. AngularJS.
jakie najlepiej maksymalne rozdizelczości wybrać do dostosowania wyglądu do urządzeń mobilnych?
Tutaj powinny interesować Cię szerokości, czyli:
480px - telefony
768px - tablety
992px - desktopy
1200px - desktopy hi-res
Prawda jest jednak taka, że w praktyce powinieneś zapewnić wsparcie również
urządzeniom typu iPhone ( nie kojarzę wersji ) który ma szerokość 320px oraz Retinę która ma rozdzielczości ponad 2500px szerokości i skaluje obrazy 2x.
Jednak wymienione przeze mnie wyżej, powinny wystarczyć.
/* Custom, iPhone */
@media only screen and (min-width : 320px) ‹;
›;
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) ‹;
›;
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) ‹;
›;
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) ‹;
›;
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) ‹;
›;
(GOL zmienia nawiasy klamrowe więc nie kopiuj kodu, ew. podmień '<' oraz '>' na '‹' i '›'
jak zrobić, żeby te dostosowanie do urządzeń mobilnych dotyczyło tylko jednej podstrony, bo gdy zmieniam plik style.css to dotyczy to całej witryny
Zachowuj zmiany w style.css jak do tej pory. Jednak jeśli chcesz napisać właściwości wyłącznie dla jednej podstrony możesz dodać np. do tagu <body> jakąś klasę a następnie odwoływać się przez nią do elementów tej strony.
Czyli HTML:
<body class="responsive">
i w CSS:
np.
.responsive p ‹ color: #fff; ›
heh, mam jeszcze jedno, chyba ostatnie pytanie:
nadałen tagowi klasę "zmniejsz" i chcę aby w wersji mobilnej obrazki z tą klasą się zmniejszyły
napisałem taką komendę w ciele @media:
.responsive.img.zmniejsz ‹;width:40px;height 20px;›;
niestety mi to nie działa
Wiesz może dlaczego?
[20] daj spację przed .img i usuń kropkę
czyli:
.responsive img.zmniejsz
Zapis w postaci:
.responsive.img.zmniejsz
wybiera wszystkie elementy które posiadają klasy 'responsive, img i zmniejsz' JEDNOCZEŚNIE.
kropka poprzedza klasy w CSS.
Czyli nie musisz dawać jej przed img, ponieważ jest to tag (czyli <span>, <a>, <img> itd..).
Na dobrą sprawę mógłbyś dać .responsive .zmniejsz
co nawet byłoby lepsze ponieważ w ten sposób możesz tę klasę dodać do dowolnego tagu.
Ostatecznie:
(..)
<body class="responsive">
<img class="zmniejsz" src="...">
<aside class="zmniejsz"></aside>
(..)
Teraz w CSS pisząc:
.responsive .zmniejsz ‹ ... ›
targetujesz nie tylko tag 'img' ale również 'aside' i dowolny inny który posiada klasę zmniejsz.
Kod który napisałeś na początku targetowałby elementy np.:
<span class="img zmniejsz responsive"></span>
UWAGA! Każdy element może mieć wiele klas ale tylko jedno ID, dodatkowo ID na konkretnej stronie powinno być unikalne ( tzn. występuje tylko raz, np. "#header")
W praktyce obecnie nie stosuje się już ID z wielu powodów ale na studiach mogą tego jeszcze od Ciebie wymagać ( co ma jakiś sens pod warunkiem, że zaznaczą ten fakt :)).
Chodzi o to, że ID mają znacznie większą wagę niż klasy, przez co później znacznie trudniej jest przeciążyć selektor co w przypadku budowy responsywnych stron ma ogromne znaczenie. Ale o tym pewnie będziesz uczył się później, dopisałem to jako ciekawostka.
skończyłem etap prac, obecnie muszę sprawdzić poprawność kodu za pomocą walidacji
już na wstępie pojawił się problem
walidator pokazuje mi komunikaty których nie rozumiem:
1)Line 8, Column 15: there is no attribute "charset"
<meta charset="UTF-8" />
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
2)Error Line 8, Column 24: required attribute "content" not specified
<meta charset="UTF-8" />
✉
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
3)Error Line 12, Column 58: end tag for "link" omitted, but OMITTAG NO was specified
<link rel="stylesheet" type="text/css" href="Style.css">
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
4)
Error Line 26, Column 5: document type does not allow element "hr" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<hr/></h1>
✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
dobra, mam chyba ostatni problem z tym zadaniem:
błąd przy walidacji:
Line 23, Column 31: document type does not allow element "li" here
$('#todolist').append('<li>'+new_item+'</li>');
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Elementy li powinny być zagnieżdżone bezpośrednio w obrębie list ol lub ul.
zdaję sobie z tego sprawę ale błąd dotyczy kodu javascrpt który dodaje do istniejącej listy nowe elementy
Zakładam że masz gdzieś literówkę. Sprawdź czy poprawnie otwierasz i zamykasz wszystkie tagi <li> listy #todolist
ok już sobie poradziłem
dzięki za pomoc
ostatnie pytanie: jak zrobić obraz maszyny wirtualnej z plikami które mam?
na odddanie projektu muszę- cytuję " Należy podpiąć obraz
przygotowanej maszyny wirtualnej (z umieszczonymi wytworzonymi plikami)"
Z tego co rozumiem, Ty musisz dostarczyć jedynie paczkę ZIP z plikami źródłowymi.
Natomiast sama prezentacja odbędzie się z użyciem maszyny wirtualnej.
Domyślam się, że chodzi o virtualboxa
'Należy podpiąc obraz przygotowanej maszyny wirtualnej'
- czyli musisz uruchomić virtualboxa i podłączyć do niego jakiś system ( pewnie macie coś na uczelni )
i na nim będą prezentowane pliki.
Chociaż szczerze spróbuj podpytać znajomych bo nie jestem pewien czy o to chodzi.
