Wszystko o html | Webinsider - Internet widziany od środka ™

Tag: html

Prosty sposób na przesyłanie w formularzu internetowym danych z pól znajdujących się poza formularzem internetowym

Ostatnio dostałem (kolejne) zlecenie, na przeniesienie kalkulatora z pliku arkusza kalkulacyjnego, do formatu strony internetowej. Większość prac związana była z przebudową i uproszczeniem całości, tak by nie przenosić dość rozbudowanego arkusza kalkulacyjnego 1:1 na stronę internetową. Nie tylko dlatego, że taki formularz wyglądałby na bardzo skomplikowany, ale też dlatego, że tego typu konstrukcje średnio skalują się na ekranie np. telefonu. Pod kalkulatorem standardowy formularz kontaktowy, czyli element „form” HTMLa…

Divi AI Image Editor i Divi Code AI, czyli w Divi za pomocą AI już nie tylko wygenerujesz tekst i grafikę, ale też ją zmodyfikujesz, a nawet wygenerujesz kod CSS, HTML i JavaScript

Dziś w kontekście AI (Sztucznej Inteligencji, SI) pewnie wypadałoby napisać o nowym „produkcie” od OpenAI, czyli Sora, czyli nowym modelu do generowania filmów wideo, przy którym liczne serwisy do generowania wideo za pomocą AI wypadają… No średnio, ale to i tak będzie eufemizm. Ja jednak uznałem, że to dobry moment, by nadrobić zaległości w kontekście AI i motywu Divi do WordPressa.

Prosty sposób na bezpłatny dostęp do płatnych ikon Font Awesome, czyli krótkie testy przed ewentualnym zakupem

Podczas prac nad jednym z projektów, pojawił się pomysł zastosowania w ramach interfejsu użytkownika ikon Font Awesome, czyli niby nic nadzwyczajnego, bo często korzystam z tych ikon. Jednak szybko okazało się, że bezpłatne ikony w katalogu nie wystarczą, bo większość, która miałaby sens w przypadku tej webaplikacji jest dostępna tylko w wersji płatnej. A że akurat nikt z nas wersji płatnej Font Awesome nie posiada, na potrzeby projektu zakupić dostęp jeszcze za wcześnie, bo nie wiadomo, czy po weryfikacji faktycznie zostaną te ikony, to trzeba było wymyślić coś tymczasowego, na potrzeby wstępnego wdrożenia testowego. I jak się okazało, było to bardzo łatwe, wręcz banalne…

Generator memów „ja jestem zagrożeniem” z Jarosławem Kaczyńskim, czyli koń trojański PiS w obozie PO/KO znowu w akcji, albo…

Choć na łamach Webinsider.pl staram się unikać polityki, to od czasu do czasu coś związanego z polityką się trafi. I to nie tylko dlatego, że „my się możemy nie interesować polityka, ale polityka interesuje się nami”, a po prostu od czasu do czasu trafi się jakaś perełka. A czasem będzie to nie pojedyncza perełka, a cały ich koszyczek. I tak wczoraj dostałem link do generatora memów (?) przygotowanego – jak wynika z informacji na stronie – przez „KKW KOALICJA OBYWATELSKA PO .N IPL ZIELONI”, a jak do tego dodać jeszcze „osobowości” takie jak Arkadiusz „Belzebub” Myrcha, to właściwie jest pewne, że będzie śmiesznie. I się nie pomyliłem…

Nie możesz przetłumaczyć „wybierz plik” w formularzu (np. we wtyczce Contact Form 7), bo za to odpowiada przeglądarka

Dostałem dziś wiadomość od jednego z czytelników w sprawie artykułu dotyczącego wtyczki Contact Form 7 do WordPressa. Chodziło konkretnie o brak możliwości przetłumaczenia na angielski jednego z pól formularza, konkretnie odpowiedzialnego za możliwość dołączenia do wiadomości pliku. Nie zdziwiło mnie to, bo jest to pytanie, słyszę (czytam) dość regularnie, nie tylko w kontekście wtyczki Contact Form 7, bo dotyczy ono ogólnie HTMLa.

Wymagane pole w formularzu HTML dostępne w trybie tylko do odczytu, czyli łączenie tego, czego łączyć się zazwyczaj nie powinno

Przy okazji prac nad nową wersją (web) aplikacji do zgłaszania lotów dronami, która powstała z powodu problemów z działaniem DroneRadar, pojawił się pomysł, by niektóre pola ustawić tylko do odczytu, bo w nich są prezentowane informacje, które są wynikiem działania różnych skryptów i nic tam nie powinno być ręcznie modyfikowane. Jest to dość prosta operacja, bo sprowadza się do dodania tagu „readonly” np. do pola typu „input” lub „textarea”. Sytuacja jednak skomplikowała się w przypadku jednego z pól formularza, które choć najlepiej, by było właśnie tylko do odczytu, to jednak koniecznie musiało też być polem wymaganym do wypełnienia. Pozornie się kłoci ze sobą, ale tylko pozornie… ;-)

W motywie brakuje arkusza stylów style.css, czyli jak (prawidłowo) zainstalować kupiony motyw w WordPressie

Jednym z relatywnie częstych, a zarazem dość zabawnych błędów, jaki wiąże się z WordPressem, zwłaszcza w kontekście osób zaczynających swoją przygodę z tym CMSem, jest błąd „w motywie brakuje arkusza stylów style.css”, jaki pojawia się podczas próby instalacji motywu pobranego z jakiegoś serwisu, często, o ile nie najczęściej, dotyczy to kupnych motywów tzw. premium, gdzie po zakupie otrzymujemy najczęściej dostęp archiwum ZIP z motywem.

DroneMap PANSA, czyli nowa oficjalna mapa ze strefami dla pilotów dronów, choć (jeszcze?) nie zastąpi aplikacji DroneRadar

Aplikacja DroneRadar – jak się zdaje – powoli umiera. Na telefonach z najnowszym Androidem w ogóle nie da się jej zainstalować z Google Play i trzeba kombinować „alternatywnym obiegiem”. Zresztą nawet jak aplikacja działa, to sporo odstaje od obecnych standardów. O ewentualnej aktualizacji coś tam słychać, ale nie bardzo wiadomo kiedy. Nie zdziwiłbym się, gdyby jej porządna aktualizacja w sensownych ramach (nakład pracy) w ogóle nie była możliwa. Widać w PAŻP/ULC mogą myśleć podobnie, bo właśnie zaprezentowano nowy system do przeglądania stref, dedykowany pilotom dronów.

Usuwanie lupki (zooma) i linku ze zdjęcia produktu na stronie produktu w sklepie internetowym na WooCommerce

Dziś na tapet bierzemy zdjęcie produktu w WooCommerce. Ale nie będziemy go wyrównywać w widoku archiwum. Zajmiemy się zdjęciem produktu na karcie produktu. Jednak nie będziemy go modyfikować np. dla produktów niedostępnych na stanie, a zajmiemy się jego powiększaniem. Od sterowania jego „intensywnością”, po całkowite wyłączenie. A na deser pozbędziemy się linku, który pod zdjęciem się w standardzie kryje.

Dodawanie niestandardowego kodu HTML i JavaScript do wybranych elementów strony za pomocą JavaScript, na przykładzie WordPressa

Dostałem zapytanie o umieszczenie formularza zapisu do newslettera w ramach usługi MailerLite na stronie internetowej działające na WordPressie. Niby nic nadzwyczajnego, ale tutaj miejsce, gdzie ów kod miał być umieszczony, było bardzo precyzyjnie wybrane i niekoniecznie łatwo dostępne do modyfikacji.

Zmiana kolejności wyświetlania kolumn w widoku mobilnym za pomocą CSSa na przykładzie WordPressa, WooCommerce i Divi

Trafiłem dziś na pytanie na temat zmiany kolejności wyświetlania paska bocznego (sidebar) i listy produktów w widoku archiwum WooCommerce (sklep internetowy na WordPressie) dla urządzeń mobilnych, gdzie w standardzie wyświetlają się najpierw produkty, a potem zawartość paska bocznego (widżety), niezależnie od tego, czy będzie on standardowo po lewej, czy prawej stronie. Co ma zresztą sens, bo nawet jeśli w bocznej sekcji – tak jak w tym przypadku było – są filtry produktów, to jednak produktami będą zainteresowani raczej wszyscy odwiedzający sklep, a filtrami tylko niektórzy.

Dodatkowa zawartość nad lub pod przyciskiem „dodaj do koszyka” w sklepie internetowym na WooCommerce

Dziś na warsztat bierzemy przycisk „dodaj do koszyka” w sklepie internetowym na WooCommerce. Z tym że nie będziemy banalnie zmieniać jego treści, a dodamy własny tekst nad lub pod ten przycisk, co – jak się zaraz okaże – jest zadaniem chyba równie banalnym… ;-)

Wczytywanie różnych szablonów dla Custom Post Types w WordPressie, np. na podstawie kategorii

Pod koniec ubiegłego roku (2021) opublikowałem artykuł o tym, jak w prosty sposób stworzyć w WordPressie własne typy postów (Custom Post Types). Niedawno dostałem pytanie, jak można dla własnego typu postów stworzyć różny wygląd postu, zależnie od tego, do jakiej kategorii będzie przypisany.

Google (tak jakby) ukrywa liczbę łapek w dół pod filmami na YouTube, a Return Youtube Dislike (tak jakby) je przywraca

Niedawno, po kolejnych eksperymentach i analizach w tym zakresie Google ogłosiło, że wprawdzie łapki w dół pod filmami zostają, to nie będzie podawana liczba takowych łapek. Jak zapowiedzieli tak zrobili, i łapki zniknęły. Ale zrobili to tak dobrze, że szybko powstały wtyczki do najpopularniejszych przeglądarek (oraz skrypt do wtyczki Tampermonkey), dzięki którym licznik łapek w dół pod filmy wrócił. Przynajmniej dla tych, dla których jest to istotne. Ja dla testów zainstalowałem, a po testach odinstalowałem. Bo choć łapkę w dół zdarza mi się dać, to raczej traktuję to jako informację dla twórcy, oraz algorytmów YouTube, by takich filmów pokazywać mi mniej. Ale sądząc po wrzawie w internecie na ten temat, dla wielu użytkowników najwidoczniej łapki w dół są nie tylko sensem korzystania z YouTube, ale być może i sensem istnienia samego serwisu… ;-)

Narzędzia dla deweloperów jako sposób wspierający pobieranie (zapisywanie) zabezpieczonych filmów z Vimeo

W grudniu 2020 napisałem o tym, jak za pomocą narzędzi dla deweloperów dostępnych w większości przeglądarek w prosty sposób pobierać (zapisywać) filmy m.in. z prywatnych grup na Facebooku. Co wynikało z potrzeby chwili. Nawet jak nie mojej, a koleżanki, ale jednak. Prawie równo miesiąc później, bo pod koniec stycznia 2021 napisałem o tym, jak korzystając z linku i miniaturki pobierać materiały wideo hostowane w serwisie Wistia. Tym razem również nie była to moja potrzeba, ale mojego dziewczęcia, które chciało ze mną przy śniadaniu obejrzeć ten konkretny materiał.

Przeprosiny z przewijaniem, czyli jak na portalu TVP Info wyświetlono przeprosiny tak, by tak jakby ich nie wyświetlić

Wczoraj wieczorem internet rozgrzał portal TVP Info, na którym pojawiły się przeprosiny TVP S.A. skierowane do jakiegoś komornika Sądowego przy Sądzie Rejonowym w Łukowie. Szczegóły nieistotne, bo nie treść tych przeprosin sprawiło, że o temacie zaczął dyskutować m.in. „bardziej techniczna część internetu”.

Czat z YouTube (topczat) na stronie internetowej na przykładzie WordPressa oraz wtyczki Tutor LMS (np. w ramach lekcji)

Zagadała do mnie koleżanka, że jutro będzie robiła webinar na żywo (live) dla kursantów swojego kursu internetowego. Webinar będzie nagrywany za pomocą StreamYard i udostępniany na YouTube. Cel jest taki, by umieścić zarówno wideo jak i czat (topczat) na stronie internetowej, najlepiej bezpośrednio w Tutor LMS (wtyczka do kursów), w ramach dedykowanej lekcji.

Interaktywne Wheel Of Life (koło życia) w WordPressie, generowane przy pomocy biblioteki amCharts

Napisała do mnie koleżanka, że wymyśliła sobie, by na swojej stronie zrobić coś w stylu Wheel Of Life (koło życia) w formie wykresu radarowego. Można powiedzieć, że nawet odrobiła „pracę domową”, bo „zapukała do mnie” z gotową propozycją, tzn. skryptem, z którego chciałaby skorzystać. Chodziło o projekt Wheel-Of-Life (codescale), który nie tylko jest dostępny w serwisie GitHub, ale chyba można z niego korzystać bezpłatnie, również w celach komercyjnych. Już samo to brzmi wystarczająco dobrze… ;-)

Loading

Wesprzyj nas!

Postaw nam kawę!

Promocja własna

WordPress: Pierwsze kroki

Promocja własna

WordPress: Pierwsze kroki

Promocja własna

Wdrożenie Omnibusa w sklepie na WooCommerce

Pin It on Pinterest