Cześć Wszystkim w moim wpisie nr 5,

Dzisiaj postanowiłem się wziąć za porządkowanie kodu i dostosowanie go do dobrych praktyk. Pierwszą rzeczą jest stworzenie i co za tym idzie, nieco zmodernizowałem jego wygląd. Myślę, że cała linia zamiast rozdzielonych prostokątów wygląda o wiele lepiej. Poza tym, udało mi się w miarę schludnie wcisnąć przycisk do facebooka właśnie w (wszystkie odnośniki odpowiednio podepnę [mam nadzieję] w niedalekiej przyszłości) :)
Poczytałem trochę o SVG i
  • 1
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@uczesiehtml

Teraz tak mam z SVG, nie wiem czy jest to teraz "w modzie" czy może używa się czegoś totalnie innego

Generalnie SVG to format grafiki wektorowej. Jest darmowy program inkscape do tworzenia grafiki wektorowej. Pewnie są inne, być może lepsze, ale ja korzystam z niego więc mógłbym trochę doradzić jak z niego korzystać itd.
Formatu SVG raczej się nie wrzuca na stronę - trzeba przekonwertować na PNG (oczywiście jest taka
  • Odpowiedz
Cześć,

Jestem nowy w programowaniu webowym. Sporo już udało mi się zrobić z pomocą stackoverflow i bezpłatnych tutoriali.
Doszedłem do momentu dopasowywania strony pod każdą rozdzielczość.

Mam diva w którym jest rysunek który chce kolorować. Pod nim buttony (dropdown buttony, wszystkie tej samej klasy, umieszczone w tym samym divie (albo w divie zagnieżdżonym w poprzednim, obojętnie)) które jak najadę to wysuwa się paleta do malowania poszczególnych elementów mojego rysunku.
  • 14
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@elektron235: w czystym css musiałbyś ustawić Button na 100% width, który jest w x% divie, a do tego użyć font size w vw a nie px. Chyba że buttony mogą układać się pod sobą zamiast być w jednej linii, wtedy display: block-inline chyba powinno pomóc
  • Odpowiedz
@Vitin: ok, mam to co chciałem :-) na powyższe pytanie (jak wypełnić 100% głównego diva linią buttonów) i tak możesz odpowiedzieć w wolnej chwili, bo ja sobie poradziłem metodami partyzanckimi czyli doborem odpowiedniego paddingu (w vw) i czcionki (w vw). Ale wyświetla się poprawnie.

A @kuskoman dziękuję za wskazanie interesującej technologii którą już zaczynam ogarniać :)

Bardzo dziękuję Wam za pomoc. Wykop > stackoverflow hehe ;-)
  • Odpowiedz
@Palcem: Nie potrzebujesz do tego zaawansowanych technologii. Wystarczy PHP i funkcja include (http://php.net/manual/en/function.include.php). Przy czym - aby to uruchomić będziesz potrzebował już serwera, który jest w stanie zinterpretować PHP (lokalnie np. EasyPHP, zewnętrznie cokolwiek - większość hostingów ma php).

Poruszyłeś bardzo ważną kwestię projektowania - rozdzielanie witryny/aplikacji na logikę i szablony. Logika serwuje treść i wypełnia szablony. Dzięki temu - tak jak napisałeś - masz wszędzie czysty kod. Poczytaj
  • Odpowiedz
Mireczki, sprawa jest( ͡° ͜ʖ ͡°)

Mam sobie skrypcik w js który mi plotuje trend z pliku .csv. Jego fragment wygląda tak:

function makeplot() {
Plotly.d3.csv("
  • 13
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

#frontend #css #html

Cześć, czy mógłby mi ktoś powiedzieć, dlaczego w tej tabelce na końcu nie działa "tr:hover{background-color:red}?

Jezeli zmienię tr na td, to wszystko jest ok, tylko ja chcę zmianę tła w całym rzędzie na raz, a nie w samej komórce.
  • 6
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Cześć,
Witam w moim kolejnym wpisie. Dzisiaj popracowałem trochę nad poprzednim tematem czyli tagiem . Miałem trochę problemów z ich rozmieszczeniem na stronie (chciałem mieć wszystkie w jednej linii). Każdemu nowemu elementowi nadawałem nowe "class", pakowałem to w i w css dodawałem display: inline jednak nie pomagało, kod się powiększał i powiększał, aż doszedłem do wniosku, że idę w złą stronę. Wyrzuciłem połowę tego co napisałem i tagowi w css nadałem float: left.
  • 3
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@uczesiehtml

w css nadałem float: left. Reszta już była prosta

A nie mówiłem?;P

patrząc na kod, czy przycisk do wysyłania komentarzy przy textarea będzie tak działał? (oczywiście po dodaniu odpowiedniej funkcji w php), ale czy sama baza do tego przycisku jest prawidłowa? Drugie pytanie, po kliknięciu w przycisk na stronie :)

Odpowiedziałem na te pytania w Twoim poprzednim wpisie;>
  • Odpowiedz
Chciałbym zrobić serwis generujący ładne statystyki na podstawie danych z plików csv.
Pliki pobierane by były z zewnętrznego serwisu, który niestety nie udostępnia żadnego api i trzeba się na niego logować, wchodzić w odpowiednie formularze, wypełniać i dopiero dostaję plik csv. Jeżeli to ma znaczenie to serwis wykonany jest w c# asp (chyba ma, bo np. nazwy formularzy i kontrolek są tak p------e, że głowa mała)

Wymyśliłem sobie tak, że do wyciągania danych użyję
  • 12
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@kovalski: robilem cos bardzo podobnego wlasnie z tym ze jako autor softu ktory generuje dane nie bylo problemu z udostepnieniem ich sobie w przystepnej formie (dane generowane przez systemy sterowania maszyn). Dane sobie wrzucam przez restowe web api w asp.net do bazy mongo. Jezeli chodzi o prezentacje ich klentowi to wyciagam je rowniez przez resta a prezentuje korzystajac z vue.js + vue-charts (wrapper na google charts) + pusher do live-update
  • Odpowiedz
Wklejacie do notatnika, zapisujecie jako html, otwieracie na pełnym ekranie i ewentualnie odświeżacie stronę. (ʘʘ)


body{overflow:none;background:linear-gradient(145deg,rgba(137,231,255,.8) 0,rgba(236,135,192,.8) 100%);position:relative;width:100%;margin:0 auto;z-index:-1}body:active:before{position:absolute;color:#fff;font-size:100px;content:"Proxima_Centauri";z-index:100}#centre{z-index:1;right:50%;top:50%;background-color:#000;position:absolute;margin:-50px -50px 0 100px;border-radius:40%;opacity:1;animation-name:centres;animation-duration:8s;animation-iteration-count:infinite}#centre:hover{opacity:0}@keyframes centres{0%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,-.4,0,1,0,0);transform:rotate(0)}25%{height:80px;width:85px;margin:-45px -57px 0 100px;transform:matrix(1,-.2,-.2,1,0,.2);transform:rotate(90deg)}50%{height:85px;width:90px;margin:-40px -50px 0 100px;transform:matrix(1,0,0,1,-.2,.2);transform:rotate(180deg)}75%{height:80px;width:85px;margin:-45px -47px 0 100px;transform:matrix(1,0-.4,-.4,1,-.2,0);transform:rotate(270deg)}100%{height:90px;width:95px;margin:-50px -50px 0 100px;transform:matrix(1,0,-.2,1,0,0);transform:rotate(360deg)}}#canvas{opacity:1;background-color:rgba(0,0,0,1);cursor:wait;display:block;z-index:-100} Canvas is not supported in your browser.window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(b){window.setTimeout(b,1E3/60)}}();var canvas=document.getElementById("canvas"),ctx=canvas.getContext("2d"),cw=window.innerWidth,ch=window.innerHeight,f=[],hue=180,a=1;canvas.width=cw;canvas.height=ch;function random(b,c){return Math.random()*(c-b)+b+Math.PI*Math.random()}function calculateDistance(b,c,d,e){return Math.sqrt(Math.pow(b-d,2)+Math.pow(c-e,2))}function E(b,c,d,e){this.x=b;this.y=c;this.sx=b;this.sy=c;this.tx=d;this.ty=e;this.distanceToTarget=calculateDistance(b,c,d,e);this.distanceTraveled=0;this.coordinates=[];for(this.coordinateCount=4;this.coordinateCount--;)this.coordinates.push([this.x,this.y]);this.angle=Math.atan2(e-c,d-b);this.speed=2;this.acceleration=1.04;this.brightness=random(50,70);this.hue=random(hue-15,hue+15)}E.prototype.update=function(b){this.coordinates.pop();this.coordinates.unshift([this.x,this.y]);this.speed*=this.acceleration;var c=Math.cos(this.angle)*this.speed,d=Math.sin(this.angle)*this.speed;this.distanceTraveled=calculateDistance(this.sx,this.sy,this.x+c,this.y+d);this.distanceTraveled>=this.distanceToTarget+cw/35?f.splice(b,1):(this.x+=c,this.y+=d)};E.prototype.draw=function(){ctx.beginPath();ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);ctx.lineTo(this.x,this.y);ctx.strokeStyle="hsl("+this.hue+", 80%, "+this.brightness+"%)";ctx.stroke()};function loop(){requestAnimFrame(loop);hue+=a;if(170==hue||332==hue)a=-a;console.log(hue);ctx.globalCompositeOperation="destination-out";ctx.fillStyle="rgba(0, 0, 0, 0.5)";ctx.fillRect(0,0,cw,ch);ctx.globalCompositeOperation="lighter";for(var b=f.length;b--;)f[b].draw(),f[b].update(b);f.push(new E(cw/2+random(0,cw/160),ch/2+random(-ch/160,ch/80),cw,random(0,ch)));f.push(new
  • 4
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Cześć, mam pytanko. ( ͡° ͜ʖ ͡°) Ogólnie dopiero zaczynam, zdążyłem przerobić kursik Javascriptu na codeacademy, mam pojęcie do czego służą HTML i CSS, ale nie potrafię ich jeszcze używać w kupie. Wcześniej uczyłem się przez kilka miesięcy Javy, ale niezbyt mi podeszła i przerzucam się na front-end. Także jakieś mgliste pojęcie o programowaniu już mam. Jakie polecicie książki i ogólnie źródła do nauki front-endu dla nubka tak
  • 6
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Najlepiej o językach i ich składni, bo na te opisujące jak robić ładne i funkcjonalne rzeczy to przyjdzie czas po dostatecznym ogarnięciu narzędzi.


@Ruthan: Moim zdaniem bardzo złe podejście.

Rób projekty i szukaj odpowiedzi na pytania w dokumentacji i na stacku. Jak będzie ogarniał to zacznij doszkalać konkretniej.
  • Odpowiedz
@lukas125p: Zawsze chciałem pobawić się raspberrypi, ale słyszałem, że PHP na nic mi tam i tylko python i inne takie takie. Co ciekawego robisz na malinie cumplu?
  • Odpowiedz
Mam kilka sztuk rpi. Teraz bawię się wersją zero. Działa jako monitoring z wykrywaniem ruchu. Wersja 1B działa jako radio internetowe z obsługą przez www. Na 2B stoi nettemp (nettemp), na kolejnej 2B mam flightaware czyli krótko mówiąc "radar lotniczy" z nasłuchem pasma lotniczego. Jest masa zastosowań rpi i potężne wsparcie.
  • Odpowiedz
Cześć,
Witam w moim trzecim wpisie.
Dzisiaj coś na temat tagu . Fajnie jest wiedzieć jak jest zrobione pole do pisania tu na mirko. Teraz wiem, że jest to tag z np: atrybutami rows i cols żeby określić domyślną wielkość pola. Na swojej stronie stworzyłem dwa elementy . Oczywiście do ich pełnej funkcjonalności potrzeba jeszcze php co jeszcze długo przede mną, ale cieszę się, że zrobiłem coś takiego na sucho. Mam w dalszym
  • 8
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@uczesiehtml:
Musisz pamiętać, że każdy element może mieć wiele klas więc możesz dać tym dwóm formularzom klasę z inline i niezależnie od tego dać im różne klasy, żeby inaczej wyglądały. Klasy oddzielasz spacją czyli class="klasa1 klasa2".Dodatkowo możesz też przecież użyć atrybutu style na elementach i dać .... Takie ostylowanie ma największy priorytet, ale staraj się tego unikać bo się bałagan robi.
Mimo wszystko wydaje mi się, że jednak
  • Odpowiedz
@uczesiehtml:
Spoko. Widzę, że javascript się wkrada na stronę powoli:))
Nie, nie możesz dać w alert obrazka niestety. Możesz natomiast stworzyć własne popupy i tam możesz dać co tylko chcesz. Robisz element, który na początku jest niewidoczny (display:none), a po kliknięciu w guzik ustawiałbyś javascriptem display:fixed, albo absolute. Na samym popupie musiałbyś też dodać guzik, który zamykałby go.

Jeżeli chodzi o ormularz to tak - wsystko po stronie html jest
  • Odpowiedz
Hej, mirki! Uczę się od jakiegoś czasu #html i #css. Przeszedłem już przez wszystkie kursy na kodilla.com i sporo czytam o dobrych praktykach. Chcę zostać webdeveloperem. Zastanawiam się, jaki powinien być mój następny krok - przejść do nauki #javascript czy po prostu od razu do cięcia stron w PSD i dopiero później uderzyć w JS.

Dzięki z góry za rady!
  • 9
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Mirki uczę się obecnie #html . Obejrzałem już kurs pana Mirosława Zelenta, super tłumaczone. Niestety ma tylko 4 odcinki. I tu pytanko czy polecacie jakieś dobre, ciut dłuższe kursy z htmla ? Mogą być anglojęzyczne
  • 1
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

#pregierzpokemongo #html #pokemongo
Ma ktoś jakiś pomysł gdzie moglibyśmy podpinać linki do zgłoszeń z wypełnionym nickiem i opisem wykroczenia? Ułatwiłoby to cały proces i zachęciło wiecej ludzi do zgłaszania :)
Chodzi o ten formularz:
https://support.pokemongo.nianticlabs.com/hc/en-us/requests/new?ticket_form_id=319968

Próbowałem podpiąć pod link &nazwa_pola=treść ale nie działa :(
  • 3
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

Miruny ciągle się męczę z wykresami tworzonymi przy pomocy biblioteki plotly w js. Chcę na stronce umieścić ich kilka lecz gdy dodaję kolejny wykres poprzedni znika (prawdopodobnie jakiś konflikt jest) będę wdzięczny jak ktoś zerknie w kod i obada co jest grane. Link do kodu http://codepen.io/anon/pen/rLkPOB

W aktualnym stanie wykres drugi wyświetla się natomiast pierwszy niestety nie

#programowanie #html #html5 #javascript #css
  • 1
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@DevSwift: głównym problemem jest to że masz te same nazwy funkcji robiące inne rzeczy, więc jedna funkcja nadpisuje drugą (np. processData, makeplot byc moze inne ale nie przegladalem tak dokladnie), a jak chyba każdy wie, JS jest ansynchroniczny i stąd problem

inną sprawą są jakościowe rzeczy w tym kodzie (nie stosowanie się do zasad jslint, jshint), zaśmiecanie przestrzeni globalnej lokalnymi obiektami, deklaracja funkcji przy użyciu Hoisting, co prawdopodobnie wyeliminowało by
  • Odpowiedz