Skocz do zawartości

Arduino MEGA i BLYNK, LCD odchodzi do lamusa...


SOYER

Pomocna odpowiedź

Jeśli chodzi o Pythona to ja bym sugerował raczej najpierw nauczyć się tego języka (i to raczej nie w aplikacjach webowych), popróbować trochę w CGI (mimo wszystko nie wymaga nauczenia się całego frameworku tylko paru podstawowych funkcji) a dopiero potem brać się za frameworki.

Link do komentarza
Share on other sites

Ja tak się kiedyś uczyłem, ale ma to istotne wady. Używając framework-a można od razu poznać sprawdzone rozwiązania oraz style programowania. Natomiast zaczynając od CGI wynajdujemy ponownie koło. To oczywiście bardzo budujące, ale nie do końca celowe. Z tego co widzę, teraz jest raczej nacisk na używanie gotowych rozwiązań, zamiast budowania własnych. Porównując do samochodów - nie musimy konstruować własnego silnika, żeby nauczyć się jeździć.

Link do komentarza
Share on other sites

No, CGI zawsze jest nieco prostsze niż skonfigurowanie FCGI pod Django 😉

Porównując do samochodu: można oczywiście od razu siadać za fajerę, ale doświadczenie w jeżdżeniu rowerem by się przydało... choćby ze względu na znajomość przepisów.

Poza tym frameworki uczą paru brzydkich nawyków (z najważniejszym na czele - używanie frameworka tam gdzie absolutnie nie jest potrzebny).

Link do komentarza
Share on other sites

(edytowany)

czy ktoś mógłby przeanalizować kod i powiedziec mi, dlaczego funkcja hover działa nad divami czujnik1 prawidłowo, ale jescze dodatkowo "łapie" na lewo od nich...???

css:

body
{
background-image: url(white-waves.png);
}
#glowny1
{
    margin-top:20px;
    margin-bottom: 100px;
    width:50%;
    height:620px;
    background-image: url(smog.jpg);
    background-size:cover;
    float: left;
}
#glowny2
{
    
    margin-top:20px;
    margin-bottom: 100px;
    width:50%;
    height:620px;
    background-image: url(kraj.jpg);
    background-size:cover;
    float: left;
}
#tytul
{
    font-family: 'Charm', cursive;
    color: #0000FF;
    padding: 10px;
    font-size:50px;
    margin-top: 10px;
    margin-left:350px;
    margin-right:auto;
}

.czujnik1
{
    font-size:30px;
    color:#CC0000;
    text-align:center;
    padding:20px;
    height:40px;
    width: 310px;
    margin-top:20px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}
.czujnik1:hover
{
    background-color:#4477DD;
    -webkit-box-shadow: 5px 5px 67px 1px rgba(5,21,102,1);
    -moz-box-shadow: 5px 5px 67px 1px rgba(5,21,102,1);
    box-shadow: 5px 5px 67px 1px rgba(5,21,102,1);
}
#stopka
{
    text-align:center;
}
a.poprawka
{
    text-align:center;
    color:#CC0000;
    text-decoration:none;
}
#odczytGlowny
{
    font-family: 'Anton', sans-serif;
    font-size:30px;
    color:#CC0000;
    text-align:center;
    line-height:200%;
    padding:20px;
    height:450px;
    width: 350px;
    margin-top:65px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}
#odczytCzujnik
{
    font-family: 'Anton', sans-serif;
    font-size:30px;
    color:#CC0000;
    text-align:center;
    line-height:250%;
    letter-spacing:3px;
    padding:20px;
    height:150px;
    width: 350px;
    margin-top:150px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}
#wyniki
{
    font-family: 'Anton', sans-serif;
    font-size:30px;
    color:#CC0000;
    text-align:center;
    padding:20px;
    height:40px;
    width: 350px;
    margin-top:20px;
    margin-left:150px;
    background-color:#6699FF;
    opacity:0.8;
}

html:

<!DOCTYPE HTML>
<html lang="pl">

<head>
<meta charet="utf-8"/>
<title>JAKOŚĆ POWIETRZA KRYRY</title>
<meta name="description" content="Oto parametry jakości powietrza w miejscowości Kryry"/ >
<meta name="keywords" content="kryry, pogoda, smog, jakosc powietrza, temperatura, cisnienie, wilgotnosc, pm1, pm2.5, pm10/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Charm" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
</head>

<body>
<div id="tytul">Jakość powietrza w Kryrach</div>
<div id="glowny1">
  <a href="temperatura.html" class="poprawka"><div class="czujnik1">Temperatura powietrza</div></a>
    
  <a href="wilgotnosc.html" class="poprawka"><div class="czujnik1">Wilgotność powietrza</div></a> 
   
  <a href="cisnienie.html" class="poprawka"><div class="czujnik1"> Ciśnienie</div></a>  
   
  <a href="pm1.html" class="poprawka"><div class="czujnik1">PM 1</div></a>
      
  <a href="pm25.html" class="poprawka"><div class="czujnik1">PM 2,5</div></a>
    
  <a href="pm10.html" class="poprawka"><div class="czujnik1">PM 10</div></a>
      
</div>

<div id="glowny2">
  
  <div id="odczytGlowny">Witaj :-) <br/> <br/> Kliknij na wybrany parametr powietrza po lewej stronie, aby zobaczyć aktualny wynik odczytu...</div>
  </div>
<div id="stopka">2019 Copyright by Soyer. All rights reserved. :-) </div>

</body>

</html>

 

Dodałem do kodu mój pierwszy skrypt javy. Teraz mam bieżący czas i datę na stronie:

<script type="text/javascript">

function odswierzanieCzasu()
{
var dzisiaj = new Date();
var dzien = dzisiaj.getDate();
if(dzien<10) dzien = "0"+dzien;
var miesiac = dzisiaj.getMonth()+1;
if(miesiac<10) miesiac = "0"+miesiac;
var rok = dzisiaj.getFullYear();

var godzina = dzisiaj.getHours();
if(godzina<10) godzina = "0"+godzina;
var minuta = dzisiaj.getMinutes();
if(minuta<10) minuta = "0"+minuta;
var sekunda = dzisiaj.getSeconds();
if(sekunda<10) sekunda = "0"+sekunda;

document.getElementById("data").innerHTML = dzien+"-"+miesiac+"-"+rok;
document.getElementById("zegar").innerHTML = godzina+":"+minuta+":"+sekunda;

setTimeout("odswierzanieCzasu()",1000);
}
</script>

Teraz muszę wymyślić jak zaprząc javę do roboty, żeby podobnie podmieniała mi wypełnienie diva z wynikami czyli div="odczytCzujnik" i div="wyniki"... tak żeby ni musiały się ładować osobne strony HTML...

Jakieś propozycje? 

Wcześniejszego problemu też nie rozwiązałem....

Edytowano przez SOYER
Link do komentarza
Share on other sites

Zarejestruj się lub zaloguj, aby ukryć tę reklamę.
Zarejestruj się lub zaloguj, aby ukryć tę reklamę.

jlcpcb.jpg

jlcpcb.jpg

Produkcja i montaż PCB - wybierz sprawdzone PCBWay!
   • Darmowe płytki dla studentów i projektów non-profit
   • Tylko 5$ za 10 prototypów PCB w 24 godziny
   • Usługa projektowania PCB na zlecenie
   • Montaż PCB od 30$ + bezpłatna dostawa i szablony
   • Darmowe narzędzie do podglądu plików Gerber
Zobacz również » Film z fabryki PCBWay

a kto broni, aby element a był blokowy? poszukaj sobie w tym kursie od css czegoś takiego jak display, a najlepiej zostaw ten kurs i załóż sobie w przeglądarce zakładkę do w3school (link podeślę jak będę w domu, chyba że sam szybciej znajdziesz).

Link do komentarza
Share on other sites

(edytowany)

Korzystam z w3school od paru dni. Świetne źródło. 

jak spojrzysz do kodu który wczoraj wkleiłem, to tam było to zrobione inaczej. Był też display... 

Edytowano przez SOYER
Link do komentarza
Share on other sites

display, position, margin, padding... a do eksperymentów background-color, border i outline. jeśli coś się rozmija z tym co chciałeś to znaczy że skopałeś css, a np. zmieniając kolor tła elementu lub dając jakiś outline będziesz wiedział, jak ten element według przeglądarki wygląda.

poza tym: umieść to gdzieś na serwerze (jeśli nie masz takiej możliwości to uderz na priv, pracuję w firmie hostingowej i mam możliwość założenia jakiegoś koleżeńskiego konta), bo niewielu osobom będzie się chciało kopiować Twoje pliki.

Link do komentarza
Share on other sites

(edytowany)

Pliki strony na gitHubie:

https://github.com/Soyer79/wwwPowietrze/tree/master/htm

Rozwiązałem sprawę przesunięcia linków blokowych względem diva. Problemem okazał się padding wewnątrz divów czujniki1, wywaliłem go, a żeby ustawić tekst skorzystałem z line-height... 

Oczywiście wcześniej włożyłem linki do środka divów i ustawiłem je jako block o rozmiarach diva:-) Działa.

Link do poprawionej strony:

https://github.com/Soyer79/wwwPowietrze/tree/master/htmPoprawione linkiWewnątrzDiva

Edytowano przez SOYER
Link do komentarza
Share on other sites

@SOYER to czym się teraz zajmujesz to tzw. frontend, czyli ogólnie część bezpośrednio widoczna dla użytkownika. Jak chyba zauważyłeś, nie jest to aż tak proste jak się wydaje. Zrobienie czegoś co działa zajmuje moment, ale już czegoś co działa poprawnie i wygląda dobrze w każdej przeglądarce i systemie jest mocno skomplikowane. W większych projektach zajmowanie się frontendem to oddzielna specjalizacja - inne osoby robią front- inne back-end. I nie wynika to z lenistwa.

W każdym razie dopieszczenie wyglądu to temat na oddzielny kurs, chyba nie warto w tej chwili poświęcać na to czasu. Skoro działa na Twoim komputerze, w Twojej przeglądarce, to może lepiej zająć się back-endem. Czyli napisaniem skryptów w pythonie / django. Udało Ci się coś już uruchomić?

Link do komentarza
Share on other sites

(edytowany)

Poprawiłem to bo nie dawało mi spokoju. Teraz jeszcze chciałbym dorobić JavaScripta żeby mi podmieniał zawartość divów z wynikami bez odświeżania strony.... 

Potem back-end. Z tym, że jeśli chodzi o Pythona czy Django to wcale nie wiem o co chodzi, wolałbym chyba na początek PHP i MySQL bo już widziałem na oczy bazę danych w MySQL i mniej mnie to przeraża 🙂

@ethanak u mnie wyswietla poprawnie... pewnie trzeba coś dopisać w kodzie by twoja przeglądarka wyświetlała moją czcionkę... tak? 

Edytowano przez SOYER
Link do komentarza
Share on other sites

Dołącz do dyskusji, napisz odpowiedź!

Jeśli masz już konto to zaloguj się teraz, aby opublikować wiadomość jako Ty. Możesz też napisać teraz i zarejestrować się później.
Uwaga: wgrywanie zdjęć i załączników dostępne jest po zalogowaniu!

Anonim
Dołącz do dyskusji! Kliknij i zacznij pisać...

×   Wklejony jako tekst z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Twoja poprzednia zawartość została przywrócona.   Wyczyść edytor

×   Nie możesz wkleić zdjęć bezpośrednio. Prześlij lub wstaw obrazy z adresu URL.

×
×
  • Utwórz nowe...

Ważne informacje

Ta strona używa ciasteczek (cookies), dzięki którym może działać lepiej. Więcej na ten temat znajdziesz w Polityce Prywatności.