A következő címkéjű bejegyzések mutatása: web. Összes bejegyzés megjelenítése
A következő címkéjű bejegyzések mutatása: web. Összes bejegyzés megjelenítése

2013/04/09

Egy korszak vége

Néha úgy érzem, muszáj elkezdeni valamit, még akkor is, ha nem igazán hiszek benn, hogy sikerül. Kockázatos döntés, főleg ha még anyagi vonzata is volt, de meg kellett lépnem, és most már tudom, megérte.

Fél év nem kevés, volt néhány mélypont, főképp az elején, mikor úgy éreztem, ez tényleg nem nekem való, és bár már korábban is készítettem munkákat, a módszereken bőven volt mit finomítani. Ez a fél év erre remek lehetőség volt, és szemmel láthatóan fejlődtem, olyannyira, hogy pár korábbi munkám csupán gyermeki rendetlenségnek tűnik a mostaniak mellett. De úgy érzem, ez így van rendjén. Mindig van hová fejlődni, és ez az, ami motivált abban, hogy hajtsak, és még többet hozzak ki magamból. Oktatóm talán emlékszik rá, miért nem igazán mertem komolyabb munkákat vállalni, és mit mondtam neki akkor. Jó látni magamon, hogy azóta, ahogy ő már az elején meg is mondta, megjött az önbizalmam, és kicsit bizakodóbb vagyok a munkáimmal kapcsolatban.

Belevágtam, és mára megérett a gyümölcse. Webdesigner lettem, amit két ember nélkül nem biztos, hogy valaha is elérhettem volna. Ők az oktatóim, +Zsuzsanna Tóth és +József Szijártó, akiknek ezúton is szeretném megköszönni, hogy segítettek kicsit beérnem.

Természetesen a tanfolyamuk mások számára is elérhető, ha netán Téged is érdekel, a http://webdesigntanfolyam.com/ oldalon bővebben is tájékozódhatsz.

A végére pedig a vizsgamunkáimról (a feladat egy landing page, és egy webshop elkészítése volt) egy-egy képet, és a kis papirosom másolatát, hogy miért is küzdöttem, és küzdöttek velem ennyit.
http://juhaszkrisztian.owtdesign.com/vizsga/
http://juhaszkrisztian.owtdesign.com/betashop/


2013/03/25

Köreim.net 2.0 - Helyzetjelentés

Korábban már írtam a Köreim.net oldalról, ezért az oldal bemutatásával nem is szeretném vesztegetni az időt. Aki még nem ismerné, ebben a bejegyzésben minden lényegesebb információt megtalál. A közelmúltban azonban egy teljes átépítésen esett át az oldal, és ez a procedúra már jó ideje tart, sajnos hosszabb ideig, mint terveztem, úgyhogy egy rövid helyzetjelentéssel, bemutatóval készültem, miben is lesz más, mint az előző verzió.

A JELENLEGI ÁLLAPOT
Az előző oldalt egy kicsit összecsapottnak éreztem. Nem találtam rossznak ugyan, de valamiért az motoszkált bennem, hogy tudok ennél jobbat is. Rengeteget gondolkodtam, mivel tehetném még jobbá, mit is szeretnék vele, és lassan körvonalazódtak az ötletek.

Az alap elképzelés egy jóval egyszerűbb, nagyobb képekkel operáló, látványosabb, mégis áttekinthetőbb oldal elkészítése volt, e-mellé pedig az azóta elért fejlődésem párosult, amelynek köszönhetően a megvalósítás is jóval egyszerűbb lett. Most valahogy így fest az oldal, már ami a kategóriák nézetet illeti:
A nagyobb képek mellett a leírás akkor érhető el, ha a kategória fölé visszük a kurzort. A kategória képére kattintva pedig az adott kategórián belül találjuk magunkat.
A kategóriák és az oldalak mellett kész az új beküldő oldal is. Szinte semmi sem változott, egy új mező jelent csupán meg, de erről majd a fejlesztések részben.
Alapjaiban véve működik a beküldés, a kategóriák nézet, illetve, ugyan kissé hiányosan, de az oldalak megjelenítése is.

ÚJÍTÁSOK
Mint említettem, szeretném az oldalt még fejlettebbé, még könnyebben kezelhetővé tenni, ezért számos, az előző verzióban elérhetetlen funkciót szeretnék beleépíteni.

Első körben bekerült néhány új kategória, melyeket a kapott visszajelzés alapján igyekeztem létrehozni, ezek az Alapítványok, az Életmód, az Oktatóanyagok, a Személyes és a Természet kategória.
A kategóriák nézet fölé elkészült egy gyors lista, amelyen minden kategória fel van tüntetve, így nem kell görgőzni, ha ki szeretnénk választani egy kategóriát.
Továbbá bekerült egy megosztás gomb is, amelyre kattintva rögtön megoszthatjuk Google+on az adott kategóriát, hasonlóan a körökhöz.
A feltöltés mellé került egy új mező, a Tagek. Ezzel néhány kulcsszót adhatunk meg oldalunkhoz, amelyek ugyan nem látszanak az oldal megjelenítésében, de a keresési találatok közt megjelenhet oldalunk.

Emellett számos apróbb javítást is végeztem az oldalon, de ezek szinte említésre sem méltók, mégis fontosak.

MIT SZERETNÉK MÉG?
Bár viszonylag sok dolog működik, sajnos munka még mindig több van vele, mint amennyi elkészült. Hiányzik a keresés, és a kiegészítő oldalak (kapcsolat, rólunk, szabályzat) oldalak mindegyike, bár ezek annyira még nem fontosak, de előbb-utóbb el kell készülniük.
A kategóriák címeinek megjelenését is javítani kell, hiszen még ékezet nélküliek, de szerencsére ezt sem lesz nehéz megoldani. Hiányzik egy főoldal is, amelyet még egyszerűbbé téve a látogató könnyedén el tudja dönteni, hogy feltölteni, vagy böngészni szeretne. Emellett pedig, bár apróság, az előző verzióban mégis megfeledkeztem róla, beépíteni a +1 gombot az oldalra.

Továbbá jól esne egy hideg söröcske is, kis baráti társasággal, de ezt legfeljebb az elkészülés örömére, amiről természetesen első kézből értesülhettek itt, minden egyéb változtatásról pedig a Köreim.net G+ oldalán.

2013/02/13

Crowd Funding tömören

Mond valakinek valamit a Crowd Funding? És ha úgy mondom, hogy Kickstarter? Arról már tuti hallottál. De ott van még az Indiegogo, a Gambitious és megannyi egyéb. De tudod-e, hogyan működik?

A minap bogarásztam neten, és a gamekapocs.hu egy cikke nyomán merült fel bennem először a gondolat, hogy ennyire nincsenek tisztában a működésével az emberek? Hallottam olyat, hogy "részvényt vásárolsz a játékból" Kickstarteren, de olvastam olyat is neten, hogy vissza kéne adniuk a támogatásra szánt pénzt,de nem feltétlen muszáj stb. Szeretnék ezzel kapcsolatban pontosítani, a legfájóbb dolog azonban, hogy még a nagyobb hírportálok (legalábbis a magyar) sincs tisztában ezzel.

A kérdések, amin felkaptam magam, a következő: Amennyiben a projekt sikertelen, vissza kell adniuk a pénzt? Mi történik a pénzzel, ha nem jön össze a projekt? Illetve a kijelentés, hogy sikertelen projekt esetén a támogatók visszakapják az összeget.

A CROWD FUNDING
Furcsa szó lehet elsőre, de valószínűleg így találkoztál már vele. Magyarra fordítva annyit tesz: Közösségi finnanszírozás. Egy nem is olyan rég szem elé került internetes támogatási modell. Lényegében arról van szó, hogy a projektgazda regisztrálja azt, amit ő el szeretne indítani, a közösség, azaz akár Te, én, vagy bárki más pedig megelőlegezheti, támogathatja a létrejövő projektet. A támogatásokért cserébe kisebb-nagyobb engedményeket, a végleges terméket, vagy akár egyéb extrákat kapnak azok, akik támogatták a projekt létrejöttét, így megéri a projektgazdának, hiszen valóra válthatja elképzelését, és megéri a támogatóknak is, mert valami olyan extrát kaphatnak, ami később már nem lesz elérhető.

Legismertebb Crowd Funding oldal valószínűleg a Kickstarter, de szó lesz még az IndieGogoról, a Gambitiousról, illetve a magyar Indulj.be oldalról is, valamint két egyéb módszer is említésre kerül.

TEGYÜK TISZTÁBA...
A Kickstarter alapjait gondolom tudjátok, még ha csak hallomásból is. A fejlesztő felteszi az általa elindítani kívánt projektet, meghatároz egy végösszeget, amelyet támogatásból kíván elérni, erre az összegre pedig 30-45 nap áll rendelkezésre, hogy a támogatók segítségével elérje. A támogatók az összegtől függően különféle jutalmakat kapnak, ez lehet kisebb összegnél akár csak egy credits, vagy egy letölthető wallpaper, esetleg, ha elvonatkoztatunk a játékoktól, akár egy extra dal/jelenet is. Nagyobb összegnél a lehetőségek határtalanok, nekem a kedvencem egy privát vacsora volt Tim Schaferrel, amennyiben 10 000$-al támogatod projektjét. Addig minden szép és jó, amíg sikerül a projekt, de mi történik, ha mégsem jön össze?

BUKTAM AZ ADOMÁNYOM?

Leszögezem, mielőtt megijednél: NEM! És most pontosítok. Sok helyen azt olvasom, hogy visszakapják a támogatásra szánt összeget, ha nem sikerül a projekt, netán idő előtt lelőnék azt. Ez sem teljesen pontos. Valójában a Kickstarter le sem vonja addig a pénzt, amíg el nem éri a kitűzött célt a projekt. Ha elérte és lejárt az 'akció' határideje, azaz a 30-45 nap, akkor kerül sor a támogatók kártyájáról való levonásra. Szóval biztonságban vagy akkor is, ha a projekt nem sikerülne, hiszen addig le sem vonja a pénzt.

A KICKSTARTEREN TÚL

A Kickstarter természetesen nem az egyetlen Crowdfunding portál, csupán a médiában ezt a nevet hallod legtöbbször. Kisebb-nagyobb változtatással készültek hasonló oldalak is, essen most néhány szó ezekről is.


Az Indiegogo (http://www.indiegogo.com/) amely leginkább hasonlít a Kickstarterre, működési elve közel azonos, sikeres projekt esetén mindössze 4%ot kérnek az összegből. Legnagyobb előnye talán, hogy Magyarországról is elérhető, ami a Kickstarter esetében (egyelőre legalábbis) nem lehetséges. Publicitása viszont nincs akkora, lévén a média sem ezt kapta fel, de ezt talán ellensúlyozza, hogy több országból elérhető, így érdemes lehet vele egy próbát tenni.


A Gambitious (http://gambitious.com/) egy Dán kezdeményezés, amely már működési elvében sem egyezik teljesen a Kickstarterrel. Itt valóban befektető leszel, és osztozhatsz a játék által termelt haszonban, hiszen az eladások után kapsz bizonyos összeget, amelyet az a játék termelt, amit Te támogattál. Kicsit nagyobb ugyan a rizikó, de a haszon is nagyobb lehet.

Ne maradjunk magyar példa nélkül sem. Az Indulj.be (www.indulj.be) egy magyar kezdeményezés ami a Kickstarter nyomán jött létre, és működése is hasonló. Erre viszont igaz, hogy visszautalásos alapon működik, amit idéznék is:

 "A projektek értékesítési időszak lezárását követően, amennyiben a közösségi vásárlások összértéke nem éri el a megvalósuláshoz szükséges pénzösszeg mértékét, akkor a projektet nem megvalósuló projektként könyveljük el. Ebben az esetben az Indulj.be a projekt számlájáról visszautalja a vásárlók által befizetett pénzösszegeket a vásárlók számlájára."

Publicitása sajnos messze elmarad a külföldi oldalakétól, de magyar közösség által létrehozott kezdeményezésként mindenképp értékelendő, és talán csak kevesen ismerik.

Újabb, kissé eltérő oldal az Indie Fund is (http://indie-fund.com). Itt az oldal üzemeltetői átvállalják a projekted elkészítésének teljes költségét, tehát Te lényegében anyagilag függetlenül elkészítheted, amit szeretnél. Ennek feltétele, hogy frissítések esetén értesítened kell az oldal üzemeltetőit, bizonyítanod, hogy halad a munka, majd a játék eladásaiból vonják le a részüket, amivel megtérítik a Rád fordított anyagiakat.

ELADNÁM A PROJEKTEM
Amennyiben a projekted már kész, és nem Crowd Funding alapon jött létre, de szeretnél némi publicitást kapni, próbáld ki az alábbi két oldalak valamelyikét.
Az első az Indiecity ( http://store.indiecity.com/ ) amely egy online eladási felület saját játékod számára. Közzéteheted projekted, képeket, videókat mellékelve létrehozhatod a profilját, a játékosok pedig megvehetik azt, ami számodra bevételt jelent.


Ugyanezen az elven működik az Indievania oldala is ( http://www.indievania.com/ ), hogy melyik számodra a szimpatikusabb, az csak Rajtad áll.

2012/09/07

Noszti fiú esete Toolbar Marival

Új helyre kerültem, új számítógépes környezetbe, és akadt az utóbbi időben néhány olyan (kellemetlen) meglepetés, amely alaposan rányomta a bélyegét a cselekedeteimre és hangulatomra is. Ezek egyike a maguktól települő toolbarok, keresők, bővítmények.

TOOLBAR TERROR
Kis túlzással,de ismerős kép igaz? Biztos vagyok benn, hogy mindenki találkozott már magától települő eszköztárakkal, toolbarokkal, keresőkkel. Különféle programok "mellékleteként" települnek, melyek telepítésnél ugyan kiválaszthatók,de az ember hajlamos átsiklani felettük, hiszen általában a felhasználási feltételek mellett található az a checkbox, amellyel kiválasztjuk, hogy szeretnénk-e telepíteni. Mi pedig hajlamosak vagyunk "reflexből" elfogadni minden egyes kis feltételt, még akkor is, ha közben akad egy-egy ilyen, amit valójában nem is szeretnénk. Sietünk, használnánk a programot, túl akarunk esni a telepítésen.

HONNAN SZALAJTOTTAK? 
Arra vagy kíváncsi, hol kell figyelned ilyenekre? Szinte minden olyan programnál, amely a netről beszerezhető, legyen az legális, vagy illegális. A valószínűleg legismertebb és leggyakrabban telepített pdf olvasó alkalmazás, az Adobe Reader letöltésekor belefutsz a McAfee víruskereső alkalmazás telepítésének lehetőségébe, egy DivX Plus Converter telepítése során pedig valószínűleg az alábbi képernyővel is találkozunk.
Ezek a programok még talán a hasznosabb kategóriába tartoznak, de így is bosszantó lehet, hogy olyan program kerül a gépre, amelyet nem szándékoztunk telepíteni. Gyakran popup ablakokat küldenek, maguktól indulnak, ami szerintem inkább csak akadály, mintsem haszon.
Ennél egy fokkal rosszabb, és bosszantóbb a különböző toolbarok és keresők települése. Vírusirtó programként az AVG telepít egy Safe Search keresőt, amely figyeli, keresi a meglátogatni kívánt weboldalban található, esetleges kártékony kódokat, figyeli, érkezik-e ártalmas adat a gépünkre, de ezen kívül hasznos ilyen eszközzel még nem találkoztam, és sokszor ez is meglepetés lehet a felhasználónak, ha mondjuk a Google helyett ez fogadja. Ilyen a Babylon toolbar és kereső is, melynek az ég világon semmi komolyabb hasznát nem láttam, sőt, Firefoxban gyakori volt a rendszertelen működés, amíg ez a toolbar aktív volt. Nagy valószínűséggel a  Cnet Download.com oldaláról származó programok telepítésekor települ, szóval nem árt figyelni, ha innen szeretnénk programot, alkalmazást.

SZOMPOLYOG!
Hogy Gollamot idézzem. A legutóbbi találkozásom egy hasonló programmal, melynek apropóján született eme bejegyzés is, valószínűleg hosszú ideig a legemlékezetesebb és legfárasztóbb toolbar telepítés-eltávolítási procedúra lesz. Bemutatom a Funmoods-ot.
Bár a telepítés szó erős túlzás, hiszen, hogy őszinte legyek, fogalmam sincs, hogy került a gépre a Funmoods "eszköztára". Az eszköztár szó pedig nem túlzás, hanem kevés. A drágaság szépen, észrevétlenül besomfordált a gépre és az összes böngészőprogramomba beette magát.

Megváltozott minden böngészőprogramom kezdőlapja, keresője, egy Funmoods toolbar és egy kereső is került mindegyik eszköztárkészletébe, sőt a "drágaszág" a Chrome gyakori lapján látható kinézetet is cserélte szerinte "funabb" megjelenésre. Itt akadtam először rá, olyan furcsa volt. Kis keresés után figyeltem fel az eszköztárakra, és rögtön el is távolítottam. A többi böngészőben azonban bent maradt, így egy két napos keresés-eltávolítás-ellenőrzés-menjmárle-af@szomkivan-navégre procedúra után sikerült eltávolítani.

KITELEPÍTÉS
Mit tegyél, hogy elkerüld az ilyen programokat? Első körben olvass. Lassan, figyelmesen, olvasd át, mit fogadsz el, milyen programot telepítesz. Ha nem engeded telepíteni, nem kerül fel a gépre. Ha mégis becsúszna egy-egy hiba, a böngészők eszköztárainak beállításánál

  • Chrome - Eszközök/Bővítmények
  • Firefox - Eszközök/Kiegészítők/Bővítmények
  • Opera - Eszközök/Haladó/Bővítmények
, esetleg az eszköztár helyi menüjében (jobb gomb) válasszuk a tiltás/eltávolítás lehetőséget. Ezután érdemes megnézni a vezérlőpultban a telepített programok listáját, majd a toolbart kiválasztva egy dupla kattintással előhozni annak uninstall programját és véglegesen eltávolítani azt.

Ha nem szeretnénk ennyit szöszölni, vagy netán bonyolultnak tűnik ez a módszer, több programot is találunk, melyek ezek eltávolítására lettek fejlesztve. Ilyen pl a Toolbar Claner, de segíthet a Spybot - Search&Destroy is, melyek ingyenesen letölthetők. Amennyiben ismertek más módszert, hasonló programot, vagy akad hasonló tapasztalatotok, osszátok meg.

2012/05/30

Alakzatok CSS-el (pt2)


Elérkezett az idő, íme az előző CSS alakzatos cikk folytatása. A korábbi bejegyzés az egyszerűbb alakzatokat, míg ez már jóval bonyolultabb, komplexebb ábrákat tartalmaz. Kisebb csúszások ugyan előfordulnak, de a kódok működőképesek, és esetleges kisebb korrekció után tökéletesek is lesznek.
Remélem hasznát veszitek a későbbiekben.

Szív (Nicolas Gallagher)


#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: dodgerblue;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

Végtelen jel (Nicolas Gallagher)


#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;  
    border: 20px solid dodgerblue;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Gyémánt #1 (Joseph Silber)

#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: dodgerblue;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: dodgerblue;
}

Gyémánt #2 (Joseph Silber)



#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid dodgerblue;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid dodgerblue;
}

Gyémánt #3 (Joseph Silber)



#diamond-narrow {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid dodgerblue;
position: relative;
top: -50px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -50px; top: 70px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid dodgerblue;
}

Gyémánt #4 (Alexander Futekov)


#cut-diamond {
    border-style: solid;
    border-color: transparent transparent dodgerblue transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: dodgerblue transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

Tojás


#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: dodgerblue;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

Pac-Man


#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid dodgerblue;
  border-left: 60px solid dodgerblue;
  border-bottom: 60px solid dodgerblue;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Szövegbuborék


#talkbubble {
   width: 120px;
   height: 80px;
   background: dodgerblue;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid dodgerblue;
   border-bottom: 13px solid transparent;
}

12 ágú csillag (Alan Johnson)


#burst-12 {
    background: dodgerblue;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: dodgerblue;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}

8 ágú csillag (Alan Johnson)


#burst-8 {
    background: dodgerblue;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: dodgerblue;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
}

Yin Yang (Alexander Futekov)


#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: dodgerblue;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid dodgerblue;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: dodgerblue;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;

Kitüntetés (Catalin Rosu)


#badge-ribbon {
 position: relative;
 background: dodgerblue;
 height: 100px;
 width: 100px;
 -moz-border-radius:    50px;
 -webkit-border-radius: 50px;
 border-radius:         50px;
}
#badge-ribbon:before,
#badge-ribbon:after {
  content: '';          
  position: absolute;          
  border-bottom: 70px solid dodgerblue;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  -webkit-transform: rotate(-140deg);
  -moz-transform:    rotate(-140deg);
  -ms-transform:     rotate(-140deg);
  -o-transform:      rotate(-140deg);
}
#badge-ribbon:after {
  left: auto;
  right: -10px;
  -webkit-transform: rotate(140deg);
  -moz-transform:    rotate(140deg);
  -ms-transform:     rotate(140deg);
  -o-transform:      rotate(140deg);
}  

2012/05/27

Alakzatok CSS-el (pt1)

The Shapes of CSS

Némileg hasznosabb bejegyzéssel szolgálnék, amelyet leginkább a webfejlesztők fognak értékelni. Egy tegnapi Google+ megosztás során akadtam ezen cikkre, melyet szeretnék megosztani itt is, hiszen hasznos lehet azoknak, akik épp weboldalt építenek.

Lényegében egy lista, amely olyan CSS kódokat tartalmaz, melyek az adott szimbólumot, sokszöget rajzolják ki oda, ahol használjuk.

A listát két részre bontottam, előbb az egyszerűbb alakzatok, sokszögek, majd később a bonyolultabb, összetettebb ábrák kerülnek terítékre.

Remélem hasznosnak bizonyul, a megosztásért pedig köszönet Nádasdi Balázsnak. Nem is rabolnám tovább az időt, válogassatok. :)

Négyzet

#square {
width: 100px;
height: 100px;
background: dodgerblue;
}

Téglalap

#rectangle {
width: 200px;
height: 100px;
background: dodgerblue;
}

Kör


#circle {
width: 100px;
height: 100px;
background: dodgerblue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Ovális


#oval {
width: 200px;
height: 100px;
background: dodgerblue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Háromszög #1


#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
}

Háromszög #2


#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid dodgerblue;
}

Háromszög #3


#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}

Háromszög #4


#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid dodgerblue;
border-bottom: 50px solid transparent;
}

Háromszög #5 


#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-right: 100px solid transparent; }

Háromszög #6


#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid dodgerblue;
border-left: 100px solid transparent;
}

Háromszög #7


#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-right: 100px solid transparent; }

Háromszög #8


#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid dodgerblue;
border-left: 100px solid transparent;
}

Görbe nyíl (Ando Razafimandimby)


#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid dodgerblue;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid dodgerblue;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

Trapéz


#trapezoid {
border-bottom: 100px solid dodgerblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

Parallelogramma


#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: dodgerblue;
}

Hat ágú csillag



#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid dodgerblue;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid dodgerblue;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

Öt ágú csillag (Kit MacAllister)


#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: dodgerblue;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid dodgerblue;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid dodgerblue;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
 
}
#star-five:after {
   position: absolute;
   display: block;
   color: dodgerblue;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid dodgerblue;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Ötszög



#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: dodgerblue transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent dodgerblue;
}

Hatszög




#hexagon {
width: 100px;
height: 55px;
background: dodgerblue;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid dodgerblue;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid dodgerblue;
}

Nyolcszög


#octagon {
width: 100px;
height: 100px;
background: dodgerblue;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;  
border-bottom: 29px solid dodgerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;  
border-top: 29px solid dodgerblue;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

2012/05/26

Portfolio 2.0

Kissé szegényes ez a hónap témákban, mi tagadás. Ennek oka, hogy rengeteget ügyeskedem különféle körökben, valamint iskolai éveim végeztével vizsgáznom kellett, ami jelentősen csökkentette a blogra fordítható időm. Pedig igyekszem, és bár úgy kezdtem neki, hogy nem az én sportom, azért csak akad pár olvasó és nekem is egyre inkább tetszik ez a kör.

Most ismét egy kissé személyesebb jellegű bejegyzés következzék. Nem tudom, kik azok, akik látogatják weboldalam, de lassan elkészül az új verzió, amely a http://jkrisztian.web44.net címen továbbra is elérhető. Eddig is fent volt egy félkész változat, mely már használható, de most kisebb változtatásokat eszközöltem rajt.

A STÍLUS
Stílusban megkedveltem az egyszerűbb, letisztult designt, így az új oldal ennek szellemében, mindössze három szín felhasználásával, egyetlen oldalra készült. Igyekeztem a lehető legáttekinthetőbb, mégis tetszetős kinézetet összehozni, amely remélhetőleg mások tetszését is elnyeri.


FELÉPÍTÉS
Az oldal részeit szerintem nemigen kell magyarázni. Felül a kapcsolattartást segítő ikonok, valamint letölthető önéletrajzom kapott helyet, jobb oldalt pedig három egyszerű link, melyek különböző részekre hivatkoznak.
A részeket kis cikk-cakkos vonallal választottam el, így nem annyira monoton a külső, valamint egy-egy nagyobb ikon foglal helyet a részek felett, amely az adott szekcióra jellemző.

A felső részen néhány általánosabb infó rólam, valamint elhelyeztem az általam használt programok ikonjait.
A munkáim szekcióban megtekinthetőek azok a játékok/weboldalak, amelyek kivitelezésében részt vettem. A játékok egyelőre nem letölthetők, innen (a http://cogwheelgames.com oldalon megtalálhatók) de ez a későbbiekben orvosolva lesz.

A kapcsolat rész szerintem egyértelmű.

FUNKCIÓK
Amennyire lehetett, leegyszerűsítettem az új oldalt, amely szerintem nem vált kárára. Lényegében minden fontosabb információ ugyanúgy megtalálható rajt, mint a korábbi oldalon, csak áttekinthetőbb formában.
Munkáimnál, amelyek nem weboldalak, a képre kattintva egy néhány képes galéria jön elő, amely pár képet bemutat, illetve rövid információt is ad az adott munkámról.
Azoknak, akik látták az első személyes oldalam, valószínűleg feltűnt, hogy a regisztráció/komment lehetőség eltűnt. Egyszerűen nem volt rájuk szükség. Az igazat megvallva már akkor is csak tesztként került be, hogy később könnyen átültethető legyen a Cogwheel Games oldalára, így most kivettem.

A JÖVŐBEN
Kisebb-nagyobb újítások biztos fognak felkerülni az oldalra, ilyen a korábban említett letöltések rész, illetve tervezem, hogy a legfrissebb blogon olvasható bejegyzéseket szintén megjelentetem rajt.
A tervek közt szerepel még a galéria ikonjainak lecserélése sajátokra, amelyek még egyedibbé teszik majd a lapot.

ÖSSZEGZÉS
Nos, azt hiszem, ez az, amit érdemes tudni az új oldalamról. Egyszerűbb, letisztultabb, szerintem mégis kellemesebb oldalacska lett. Nem állítom, hogy profi kivitelezés,de számomra, és remélhetőleg a látogatók számára is megfelel majd.
Véleményeket, ötleteket pedig szívesen fogadok továbbra is.

2012/05/22

Muse : Pikk-pakk weblap


A játékokról szóló bejegyzés után kicsit visszakanyarodnék a weboldalak világához. Már tizenegy-néhány éves korom óta tervezgettem "weboldalakat", akkor még a FrontPage nevű remekkel, mert hát könnyen hozzáférhető, és tudott annyit amennyit kellett.
Azóta váltottam és az Adobe cég Dreamveawer nevű programját használom.
Az egyetlen "baj" a programmal, hogy profiknak készült, és bár könnyű boldogulni vele, de mégsem az abszolút kezdők programja.
Az Adobe azonban gondolt azokra, akik annyira nem ásták bele magukat a weboldal építés világába, mégis szeretnének megjelenni egy saját, jól kinéző oldallal. Így született meg a Muse.

ADOBE MUSE
Gyakori a kezdők körében az e-oldal, gportál és hasonló oldalak létrehozása, amely ugyan enged saját oldalt, de azt egy sablonra építhetjük, cserélhetjük az elemeket, így kialakítva egy "dobozos" oldalt magunknak. Ha azonban egyedibb kinézetet szeretnénk, a Muze ideális választás lehet.
Lényegében egy olyan webfejlesztő szoftver, melyben komolyabb programozási tudás nélkül készíthetünk látványos, egyedi weboldalakat, pusztán elemek lepakolgatásával, könnyű-gyors kezelhetőséggel.
A beépített főoldalak, interaktív eszközök (pl. diavetítés), több, mint 400 webes betűtípus és egyéb látványos funkciók segítségével a Muze lényegesen egyszerűbbé teszi a professzionális webhelyek létrehozását.

SZOLGÁLTATÁSOK
Néhány lényegesebb szolgáltatás, melyet a Muse nyújt a felhasználóknak:

  • Oldaltérkép : Segítségével a weboldalak felépítése könnyen áttekinthető
  • Mester oldal : Az állandó elemek (pl. fejléc, menü, lábléc) elég, ha ezen az oldalon szerepelnek, a tartalom változhat.
  • Webes betűtípusok : A korábban említett Adobe Typekit szolgáltatás segítségével rengeteg betűtípust használhatunk
  • Képoptimalizálás : A Muse automatikusan beállítja a lehető legjobb megjelenést PNG és PSD képekhez.
  • Előre beépített betűtípusok : Könnyen kiválasztható, egységes betűtípusok, melyek CSS fájlban tárolódnak anélkül, hogy nekünk meg kéne azt írni.
  • Fix pozíciós objektumok : Könnyen rögzíthető bármely elem, ha azt szeretnénk, hogy mindig azon a helyen jelenjen meg, görgetéstől függetlenül.
  • Előnézet : Megnézhetjük, hogy is fest weboldalunk majd, sőt, akár meg is oszthatjuk másokkal. Ideális lehet, ha valaki véleményét szeretnénk kikérni, vagy netán megrendelőnek készül.
  • Gyors menüépítés : Egyszerű fogd és vidd módszerrel készíthetünk menüt.

És még sok más. A teljes lista megtekinthető az Adobe honlapján.

REFERENCIÁK
Íme néhány Adobe Muse programmal elkészített weboldal azoknak, akiket a leírás és a képek nem győznének meg.

BESZERZÉS
A program többféle módon beszerezhető. Egyéni előfizetésben havi $14.99-ért már elvihető, amennyiben 1 évre fizetünk. Ha egy-egy hónapra vásároljuk meg, az ár $24.99-ra ugrik.
Megvásárolható Creative Cloud tagsággal is, ez esetben 1 éves előfizetőként havi $49.99-t, havi újítás esetén pedig $74.99-t kóstál.
Egyszeri bevezető ajánlat keretében a CS3, CS4, CS5 és CS5.5 termékeket korábban megvásároló egyéni ügyfeleink havonta $29,99-t érhetik el a szolgáltatást.

Bővebb infók a programról az Adobe weboldalán találhatók.

2012/04/23

useless.com

Rengeteg hasznos oldallal találkozni a neten. Megnézhetjük az induló buszokat, értelmező szótárban kereshetünk, könyveket és minket érdeklő bejegyzéseket olvashatunk, és még kitudja, hányféle-fajta oldal létezik különféle szükségleteinkre.
Vannak azonban olyan oldalak, melyek haszna enyhén szólva megkérdőjelezhető.
Következzen egy rövid válogatás ezekből.



SOMETHING.COM
Nos, ezen az oldalon van valami, melyről a http://www.something.com/ oldalon meg is győződhetünk. Szó szerint egyetlen egy valami, csupán rá kell nézni. Azért kár egy ilyen domain névért. Persze rengeteg hasonló oldal létezik, ilyen például a retek.hu, csak hogy magyar vonatkozású oldal is legyen.

ISITCHRISTMAS.COM
Az előzőnél kissé "változatosabb" tartalommal rendelkezik a http://isitchristmas.net/ című oldal. Kisebb gondolkodás után kitalálható, ez az oldal arra szolgál, megtudjuk, Karácsony van-e, vagy sem. Ha valaki nem szeretne Karácsonyig várni, tekintse meg a http://isitthursday.org/ című lapot, melyből megtudhatja, épp csütörtök van-e.

ENDOFEARTH.NET
Haladunk kérem. Ez az oldal már egy számlálóval rendelkezik, amely a Föld végnapjait számlálja, ez év Decemberéig. Ha kíváncsi vagy, hány napunk van még vissza, keresd fel a endofearth.netne.net oldalt.
És ez még mind semmi. Meg is oszthatjuk ezt másokkal.

ZOMBO.COM
Ezen az oldalon minden van. Csupán te magad szabsz határt annak, mit találsz ezen az oldalon. Én csupán egy elég idegesítő hangot leltem, amely az előző mondatokhoz hasonlót ismételget a végtelenségig. Ha valaki esetleg talál mást is a http://www.zombo.com/ oldalon, értesítsen. (Ha lehet, azelőtt, hogy lejár a fenti számláló ;) )

Következzen egy "játék szekció", amely az előzőkhöz képest mérföldekkel jobb(?) tartalommal bír.

SPACEBAR2000
Erre az oldalra kissé nehéz szavakat találni. Hasonló azokhoz az idióta egér-klikkelős frászbuk alkalmazásokhoz, amelyekből szintén meg lehetne rakni néhány kamiont. A különbség abban nyilvánul meg, hogy itt időtartamot választhatunk, és a space billentyűt kell eszeveszett sebességgel csépelni. Ha játszanál egy jót, itt megteheted: http://www.zimm-co.com/PressTheSpaceBar/pressthespacebar2000.html .

OMGLASERGUNSPEWPEW
Shooterekben megfáradt játékostársaknak minden bizonnyal "hasznos" kikapcsolódást nyújt a http://www.omglasergunspewpewpew.com/ oldal, amelyben valószínűleg Szandi és Neil Armstrong szerelemgyermekével szórakoztathatjuk magunkat. A képernyő alján lévő mókusra kattintva egy WoW-os klán weboldalára juthatunk.

SNAPBUBBLES.COM
Nincs mit tagadni, gyermekként, és még most is szívesen pukkantgatom a levegős csomagolások kis "buborékjait". Fogalmam sincs, miért olyan szórakoztató, de biztos vagyok benn, hogy mindenki tudja, miről beszélek. A www.snapbubbles.com/ oldal alkotóját valószínűleg ez ihlette meg, hiszen a "buborékokra" való kattintással kidurrogtathatjuk őket. Biztos hatalmas szükség volt egy ilyenre.

CREEPYGIRL
Egy gyönyörű szempárnak nehéz ellenállni, főleg, ha az némi interakciót is mutat irányunkba. A http://www.cubo.cc/creepygirl/ oldalon valami hasonló vár ránk, bár a hölgy tekintete nekem kissé ijesztő volt így elsőre. Hiába, a japán kreativitás nem ismer határokat.

PACMAN_FLASH
Pacmant senkinek sem kell bemutatni remélem. A sárga bogyó kalandjai számtalan feldolgozást, kópiát éltek meg és szinte mindenhol megfordultak már, a játéktermektől kezdve a mobiltelefonokig. Ki kell hát tűnni a tömegből, melyet a http://guimp.com/pacman_flash.html? oldal elég egyedi megoldással próbál elérni. Nincs mit mondani, jó játékot kívánok.

A végére két, mondjuk úgy, érdekes oldalt tartogatok, melyek túlmutatnak az eddigieken, komolyabb hasznukat azonban nem igazán látom, illetve nem értem.

FEEDTHEHEAD.NET
Egy vektorgrafikus "játékkal" kezdeném, melyben a címből adódóan, meg kell etetnünk egy fejet. Kissé morbidnak hangzik ugyan,de ebben az oldalban felfedezni némi művészi vénát, amely kissé sajátos, ám mégis kreatív módon nyilvánul meg. Hogy igazam van-e, vagy sem, arról mindenki maga meggyőződhet a http://www.feedthehead.net/ oldalon.

MONOFACE
Végül, de nem utolsó sorban egy újabb oldal, amelyet nem igazán tudok hová tenni. A http://www.mono-1.com/monoface/main.html oldal lényegét ugyan nem értem, de mégis kiemelkedik a többi közül. Csupán annyiról van szó, hogy bizonyos arcrészekre kattintva cserélhetjük azokat, előre megadott elemekből válogatva, így létrehozva egy újabb emberi arcot. Ennyi. Egy apró újévi meglepetés néhány számomra teljesen közömbös emberkétől, amely ugyan kedves gesztus, de haszon szempontjából ez is megkérdőjelezhető. Azért elszórakozom vele, ha valami arcra lenne szükség :)

Nos, azt hiszem, erre futotta a mai bejegyzésből. Biztos vagyok benn, hogy rengeteg hasonló, haszontalan, meglepő oldal van még szerte-szét a neten, ez csupán egy rövidke ízelítő volt abból, miféle felesleges oldalakat is találni.
Ha összefutottál már hasonlóval, ne habozz, mutasd be!