Słowo kluczowe: html5

lista, streszczenie, całość
1 czerwca 2018 (piątek), 17:02:02

Przybycie królowej Saby na wesoło

Wykonawca: Christina Pluhar, L'Arpeggiata,

Kompozytor: Jerzy Fryderyk Haendel (Георг Фридрих Гендель)

Tytuł: The Arrival of the Queen of Sheba, from Solomon

W katalogach jako: HWV 67

  • Z atrybutem preload="none" 
  • bez tego atrybutu

Ten piękny, śpiewny instrument to kornet a jezzuje muzyk, który od dawna w Arpeggiacie na kornecie gra.

I jeszcze ważna rzecz: wywołanie tego audio zrobione jest tak:

<audio src="/pliki/notki/2018-06-01_przybycie-krolowej-saby-na-wesolo/Christina_Pluhar_LArpeggiata_Georg_ridrikh_Gendel_-_Handel_Arr_Pluhar_Sinfonia_The_Arrival_of_the_Queen_of_Sheba_from_Solomon_HWV_67.mp3" preload="none"controls="controls">

A mnie zainteresowało to: preload="none" - coś co sprawia. że ładuje się dopiero jak się naciśnie play.

Kategorie: _blog, muzyka, to lubię

Słowa kluczowe: haendel, królowa Saba, Arpeggiata, html5, preload, audio, odtwarzacz audio, odtwarzacz mp3, mp3

Komentarze: (0)

Skomentuj notkę
22 stycznia 2018 (poniedziałek), 18:28:28

W SVG narysowane orbity okołoziemskie

Na Wikipedii jest narysowany taki obrazek. Czyste SVG, bo nawet animacje są robione poprzez CSS a nie JS. Rewelacja. Muszę to kiedyś przeanalizować ale pewnie nie przeanalizuję bo czasu mało i są ważniejsze rzeczy niż podziwianie zdolności ludzkich przy kreacji języków do porozumiewania się (wydawania rozkazów) maszynom.

Ciekawostki jakie tu znajduję:
- Obrazek jest wstawiony inline w HTML - dopiero od niedawna wiem, że tak można z wszelkimi plikami, nawet z dźwiękami. Fajnie. - ten zegarek też jest w CSS, ale on nie wskazuje żadnego godziny, tylko się animuje :-)

Nie edytować TinyMCE

Comparison of several satellite navigation system orbits Comparison of geostationary, GPS, GLONASS, Galileo and COMPASS (medium earth orbit satellites), International Space Station, Hubble Space Telescope and Iridium Constellation orbits with the Van Allen radiation belts and the nominal size of the earth, drawn by CMG Lee. Earth bitmap is http://commons.wikimedia.org/wiki/File:North_pole_february_ice-pack_1978-2002.png by Geo Swan. The Moon's orbit is around 9 times larger (in radius and length) than geostationary orbit. The animation runs at 1 hour per second. In the SVG file, hover over an orbit or its label to highlight it, and click to load its Wikipedia article. InnerVan Allenbelt Outer VanAllen belt GeostationaryEarth orbit Galileo COMPASSMEO satellites GPS GLONASS Iridium ISS Hubble Radiusof orbit 10000 km 20000 30000 40000 10000 miles 20000 Height abovesea level 10000 20000 30000 km 10000 20000 miles Orbital period 5 hours 10 hours 15 hours 20 hours Orbital speed 25000 km/h 20000 km/h 15000 km/h 11000 km/h 15000 mph 10000 mph 7000 mph

Kategorie: programowanie / css, _blog

Słowa kluczowe: svg, css, html5, orbity, satelity

Komentarze: (0)

Skomentuj notkę
18 stycznia 2015 (niedziela), 19:40:40

Zegarek w CANVAS

Kategorie: html, informatyka, _blog, programowanie/html/canvas

Słowa kluczowe: html, informatyka, grafika, html5, zegarek, java, js, canvas

Komentarze: (0)

Skomentuj notkę
18 stycznia 2015 (niedziela), 17:48:48

Jeden piksel

Postawiłem sobie nie dawno programistyczne zadanie - narysować biały ekran a na nim zaświecić (albo wygasić) jeden piksel. Postawiłem je sobie aby nauczyć się w JavaScript walczyć z grafiką, ale skoro przeszedłem z blogiem na HTML5 to mogę coś pocudować w SVG.

No to próbuję.

Próba w SVG

Efekt programowania w SVG

Kod zapisany w SVG

<svg width="50px" height="50px" style="background-color: #aaa;" >

<rect x="10px" y="10px" width="1px" height="1px"
            stroke= "black"
            stroke-width= "1px"/>

<circle cx="20px" cy="20px" r="1px"
            stroke="red" 
            stroke-width="1px"/>

<line x1="30px" y1="30px" x2="31px" y2="31px"
            stroke="red" 
            stroke-width="1px"/>
</svg>

No nie wiem, czy to można zaliczyć. Chyba nie.

Niestety, widać, że piksel zrobiony z kwadratu jest kwadratem, z koła kołem (nawet ma wypełnienie jak go powiększyć w przeglądarce, a z linii jest pikselem skierowanym w dół. Ale w SGV nie ma komendy punkt i to jest dziwne.

Niezaliczono!

Ale próbuję w CANVAS

Your user agent does not support the HTML5 Canvas element.

Jeżeli powyżej nie widać czarnego kwadratu to niezaliczono!

Próbuję po prostu DIV w HTML5

Maluje żółtego DIV 100 na 100 a w nim niebieskiego 1 na 1 i zobaczymy:

 

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, canvas, html, informatyka, grafika, html5, piksel, pixel

Komentarze: (2)

ky, March 30, 2015 13:38 Skomentuj komentarz

1. Kwadrat o rozmiarze 1px rysowany linią 1px powinien mieć bok 2px...
2. kółko o promieniu R=1px miało by rozmiar jakieś 2px "na oko", a jak się uwzględni grubość lini 1px to będzie 3px - powinno być większe niż kwadrat i u mnie w przeglądarce jest...
3. linia pomiędzy dwoma punktami po przekątnej ma długość ok 1,41px, lub więcej w zależności stroke-linecap... to jest najmniejsze, ale wygląda na podłużne bo co najmniej długość = 2*szerokość...

wojtek, November 29, 2019 18:27 Skomentuj komentarz

Fajnie, ale jak namalować pixel? Ja chcę mieć na ekranie coś o rozmiarze 1px na 1px i nie wiem jak to zrobić!

Skomentuj notkę
18 stycznia 2015 (niedziela), 16:27:27

Spotkanie z SVG w HTML5

Przechodzę z blogiem na HTML5 a więc będę mógł sobie grafikę SVG wkładać bezpośrednio w treść notek. Kiedyś musiałem osadzać obiekty a teraz - o proszę, otwiera się frazę <svg> i się pisze coś, aby mieć taki obrazek.

Efekt programowania w SVG

W34

Kod zapisany w SVG

<svg 
width="350px" 
height="350px" 
viewBox="0 0 500 500"         
xmlns="http://www.w3.org/2000/svg">

<rect x="10" y="10" width="100" height="100"
            fill= "yellow"
            fill-opacity= "1"
            stroke= "gray"
            stroke-width= "2"/>

<circle cx="100" cy="100" r="50"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<line x1="100" y1="300" x2="300" y2="100"
            fill="darkblue"
            fill-opacity= "0.5"
            stroke="red" 
            stroke-width="2"/>

<path d="M97,246 C119,169 220,209 243,127 C291,27 281,223 419,271"
            fill="none"
            fill-opacity= "0.5"
            stroke="green" 
            stroke-width="3"/>        

<rect x="50" y="180" width="300" height="200"
            fill= "#55ff55"
            fill-opacity= "0.5"
            stroke= "#228822"
            stroke-width= "1"
rx="50" ry="100" />

<text style="fill:red; font-size:430%; font-family: arial;
font-weight:bold;" x="310" y="350">W34</text>

</svg>

Nie wiem jeszcze po co tak, ale próbuję. Stara notka o tym jak się to robiło w HTML 4 jest tu -> http://www.pp.org.pl/wojtek/?id=31260 i może zadziała a może nie.

No i jeszcze coś - jeszcze spróbuję z wzorami matematycznymi, bo to też jest fajne.

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, html, informatyka, grafika, html5

Komentarze: (1)

wojtek, June 25, 2020 07:40 Skomentuj komentarz

https://editor.method.ac

Skomentuj notkę
14 grudnia 2013 (sobota), 22:02:02

Wstawka w Math w kodzie HTML i kolejność użycia CSS

Wstawka w Math. x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

I co ważne - kod można wstawić a edytor TinyMCE już go nie zniszczy, bo Kuba wprowadził tam jakieś zaklęcie.

Wzór w samym paragrafie:

x=−b±b2−4⁢a⁢c2⁢a

Nie do końca kumam kolejność stosowania class w CSS, i tu sobie robię testy.

a teraz w div, w class='artykul'

x=−b±b2−4⁢a⁢c2⁢a

też w div ale w class='artykul wzor'

x=−b±b2−4⁢a⁢c2⁢a

To jest P w clasie wzor -> więc jest na niebieskawo?

A poniżej jest definicja clasy .wzor ale TinyMCE jej zawartość komentuje

Kategorie: informatyka, programowanie, _blog, programowanie / html

Słowa kluczowe: html, html5, math, css

Komentarze: (0)

Skomentuj notkę
16 września 2012 (niedziela), 23:28:28

Notka o iPhone 5 zapisana inaczej

nie wiedziałem, że pewne rzeczy można zapisać tak!

Można o ile umieści się tam styl:

 <div style="padding: 5em; transform: rotate(50deg); 
 -ms-transform: rotate(-10deg); /* ie 9 */
 -moz-transform: rotate(-10deg); /* firefox */
 -webkit-transform: rotate(-10deg); /* safari and chrome */
 -o-transform: rotate(-10deg);">

 



Przeczytałem o iPhonie 5, napaliłem się i mi się zachciało kupić go zaraz. Już zacząłem pisać list w tej sprawie, aby mi załatwili jak tylko się da. Już, zaraz, szybko, za chwilę premiera. Wszak podgrzewanie atmosfery od pół roku musiało zrobić swoje. Musiało mi odbić.

Już zacząłem pisać list a tu nagle przyszła refleksja. Po co mi to? Mam swojego 3GS, wszystko czego od niego oczekuję (a oczekuję wiele) w nim mam, działa sprawnie, lubię go, kilka rysek nie przeszkadza. Po co mam wydawać kupę kasy aby tak niewiele zmienić. Wygląd? No tak - nie będę mógł szpanować. Rozdzielczość aparatu? I tak zdjęcia są za duże na moje potrzeby. LTE? Przecież pasmo z 3G wystarcza mi do wszystkiego - łącznie z YouTubowaniem w lesie i szerowaniem netu na laptopa.

Po co mam nakręcać koniunkturę Amerykanom i Chińczykom. Po co mam wydawać tak cenne w kraju dewizy (wiem - to demagogia), spowalniać procesy inwestycyjne w firmie przez złe użycie kapitału, zwiększać emisję CO2, zaśmiecać planetę, przyspieszać niepotrzebny rozwój, sprawiać, że więcej ludzi będzie kontrolowanych przez swoje smartfony (bo mój 3GS pewnie tanio do kogoś trafi). Po co mam iść z z postępem, z prądem i co więcej ten prąd wzmacniać? Hołdować swojej próżności, wzbudzać u innych zazdrość i chciwość? Po co?

Mam 3GS-a i niech to będzie sygnał, że iPhona mam dłużej niż 2 lata! Mam i go lubię.

Kategorie: informatyka, programowanie, _blog, programowanie / css

Słowa kluczowe: html, css, css3, html5, iphone, iphone5

Komentarze: (0)

Skomentuj notkę

Disclaimers :-) bo w stopce coś wyglądającego mądrze można napisać. Wszystkie powyższe notatki są moim © wymysłem i jako takie związane są ze mną. Ale są też materiały obce, które tu przechowuję lub cytuje ze względu na ich dobrą jakość, na inspiracje, bądź ilustracje prezentowanego lub omawianego tematu. Jeżeli coś narusza czyjeś prawa - proszę o sygnał abym mógł czym prędzej naprawić błąd i naruszeń zaniechać.