ugrás a tartalomhoz

Műsorújság

themrbmen · 2011. Júl. 31. (V), 23.14
Sziasztok!

Weblapomra szeretnék csinálni egy műsorújságot, ami kábé fél óránként frissül, három adatot (mi megy most a tévében, mi következik, majd mi követi) és ne port.hu-s (vagy hasonló oldalról) legyen.
Tudnátok segíteni nekem?

A válaszokat várom, de lehet hogy nem megfelelő témában írta: elnézést még "új" vagyok.
Előre is köszi, az ötleteket.
‹ marasztalás a honlapon.... javascript slider menu ›
 ■
1

Honnan

Poetro · 2011. Júl. 31. (V), 23.36
És honnan kapod az adatokat? Mert maga a megjelenítés nem túl bonyolult, de honnan szerzed be az információt? Azt a mi megy most a tévében dolgot hogyan gondolod? Melyik csatornán? Melyik TV-ben? Érdemes lesz valamelyik szolgáltatóval szerződni, ha egy Port.hu jellegű oldalt szeretnél üzemeltetni, a magyar szolgáltatóknál fogható TV adásokkal.
2

Fizess

janoszen · 2011. Aug. 1. (H), 07.32
A megoldás rém egyszerű. Odamégy a port.hu-hoz vagy a TV adókhoz, akik mondanak egy árat, amiért Te megkapod a műsoradatokat. Nem lesz olcsó.
3

Így gondoltam

themrbmen · 2011. Aug. 1. (H), 09.39
A kis műsoros blokkomat így gondoltam: kép

A műsor megvan, egy cseh honlapról lehet letölteni (cseh-magyar csatorna - egy műsor) ingyen, előre egy hónapra. A műsor egy külön fájlban lenne, de igen csak nem tudom megjeleníteni a lapon (meg egyáltalán nem tudok nekilátni ..), tudnátok segíteni, hogy hogy kéne? A képen látható módon idő szerint frissülne a box. talán frame-ben kéne elhelyezni de nem tudom. volna ötletetek? A honlapomon az egyik sávban jelenne meg!
4

Feldolgozás

Poetro · 2011. Aug. 1. (H), 09.57
A letöltött anyagot, amennyiben szükséges előfeldolgozod, majd feltöltöd a weboldaladra. Minden alkalommal amikor megjelenik a kívánt blokk, a tartalom összeállítás közben az általad használt szerver oldali programozási nyelvvel tovább feldolgozod a műsoradatokat (kiválogatod a megjeleníteni kívánt X darab műsort), majd szépen formázol belőle egy HTML-t.

Akár azt is csinálhatod, hogy a következő 12-24 óra műsorát is beleintegrálod az oldalba (például nem megjelenő HTML elemekbe [display: none]), és akkor majd JavaScripttel megjeleníted, akkor, amikor meg kell jelennie. Ebben az esetben nem árt az aktuális időt is elküldeni az oldalba ágyazott JavaScript-ben, ugyanis a kliens órája lehet más időzónában, illetve lehet nagyon pontatlan. Ezek után összehasonlítod az aktuális időt, a következő műsor kezdőidőpontjával, majd ennek megfelelően beállítasz egy időzítőt (setTimeout), ami átrendezi a műsor elemeket (régieket elrejti [display: none], újakat megjeleníti [display: block]).

Ha elfogyott az megjeleníthető műsor, akkor akár egy AJAX kéréssel lekérdezheted a szervertől a következő 12-24 óra műsorát (például HTML formájában), majd ezt beleinjektálod a jelenleg megjelenített listába, majd folytatod az előzőleg leírt folyamatot.
5

Tudom, hogy..

themrbmen · 2011. Aug. 1. (H), 10.12
Tudom, hogy ciki kéregetni, de nem tudnál nekem csinálni egy sablont?? :$ Vagy csak egy linket ami ezzel foglalkozik, mert tudom, hogy Google a barátom, csak nagyon nem értem. Nem értek Javascripthez, csak ami pl. dynamicdrive.com -on találok, leírás van hozzá és beillesztem. Kérlek, nagyon szeretnék ilyet, persze, csak ha időd és türelmed engedi! :)
7

Tanulj

Poetro · 2011. Aug. 1. (H), 13.25
Először is: A DynamicDrive-on levő kódokat felejtsd el, mivel a nagy részük 8-10 éves, és elég rossz minőségűek. Legjobb, ha bármit is akarsz kezdeni a JavaScripttel, hogy elkezded megtanulni. Itt a Weblaboron is van pár cikk, de érdemes pl. a SitePoint-on és a Nettuts+-on nézelődni tutorialok iránt.

Csináltam neked egy mintát, ami nem hiszem, hogy sokat segítene, de hátha. Amennyiben kérdés van valamivel kapcsolatban, keresd fel az MDN illetve MSDN idevágó fejezetét.
<!DOCTYPE html>
<html>
<head>
  <title>Műsorújság</title>
  <style type="text/css">
    .hidden {
      display: none;
    }
    .active {
      color: red;
    }
  </style>
  <script type="text/javascript">
    var startTime = 1312192800000;
  </script>
</head>
<body>
  <ul id="schedule">
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192806">Műsor 1</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192812">Műsor 2</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192818">Műsor 3</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192824">Műsor 4</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192830">Műsor 5</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192836">Műsor 6</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192842">Műsor 7</li>
    <li data-start-timestamp="1312192800" data-end-timestamp="1312192848">Műsor 8</li>
  </ul>
  <script type="text/javascript">
    (function (list) {
          // A szg. idejének és a szerver idejének különbsége.
      var diff = (new Date).getTime() - startTime,
          // Aktuális idő.
          currentTime = startTime,
          // Lista elemek.
          items = list.getElementsByTagName('li'),
          // Lista elemek száma.
          length = items.length,
          // Aktuális elem.
          currentItem,
          // Az attribútum, ami tartalmazza a kezdés idejét.
          startAttr = 'data-start-timestamp',
          // Az attribútum, ami tartalmazza a befejezés idejét.
          endAttr = 'data-end-timestamp';

      /**
       * Az aktuális dátumhoz képest kiszámolja, mi a aktuális elem.
       */
      function getCurrent() {
        var item, i;

        // Végigmegyünk a listán
        for (i = 0; i < length; i += 1) {
          // Az aktuális elem
          item = items[i];
          // Összehasonlítjuk a kezdő és befejező dátomot az idővel.
          if (item.getAttribute(startAttr) * 1e3 <= currentTime &&
              item.getAttribute(endAttr) * 1e3 > currentTime) {
            // Ez az elem az aktuális.
            return i;
          }
        }
        return null;
      }

      /**
       * Elrejti az aktuális előtt és legalább 3-mal utáni elemeket.
       */
      function hideItems(currentItem) {
        var item, i, j, c, classes, cl, addFlag, newClasses,
            hideClass = 'hidden', activeClass = 'active';

        // Végigmegyünk az elemeken.
        for (i = 0; i < length; i += 1) {
          // El kell az elemet rejteni?
          addFlag = i < currentItem || i > currentItem + 2;
          // Az aktuális elem, amivel dolgozunk
          item = items[i];
          // Az elem CSS osztályainak tömbje
          classes = (item.className || '').split(/\s+/);
          // Új osztályok
          newClasses = [];
          // Végigmegyünk az elem osztályain
          for (j = 0, cl = classes.length; j < cl; j += 1) {
            c = classes[j];
            if (c) {
              // Ha az épp nem az elrejtésre szolgáló osztály, akkor megtartjuk
              if (c !== hideClass && c !== activeClass) {
                newClasses.push(c);
              }
            }
          }
          if (i === currentItem) {
            newClasses.push(activeClass);
          }
          if (addFlag) {
            // Az elemet el kell rejteni, ezért hozzáadkil az osztályt.
            newClasses.push(hideClass);
          }
          // Frissítjük az elem osztályait.
          item.className = newClasses.join(' ');
        }
      }

      /**
       * Megmutatjuk a következő elemet.
       *
       * @param {Boolean} [init]
       *   Csak inicializálunk?
       */
      function showNext(init) {
        var timeout;
        if (init !== true) {
          // Új időbélyeg kiszámítása.
          currentTime = (new Date).getTime() - diff;
          // Kikeressük az aktuális elemet.
          currentItem = getCurrent();
          // Lehet le kell kérdezni mégtöbb elemet a listához.
          if (currentItem === null || length - currentItem < 4) {
            console.log('Ide jöhet egy AJAX lekérdezés!');
          }
          if (currentItem !== null) {
            // Megvan az elem, rejtsük el, ami nem kell.
            hideItems(currentItem);
          }
        }

        // Ha van aktuális elemünk, akkor annak megvárjuk a befejezési idejét,
        // vagy várunk egy másodpercet, hátha lesz aktuális elem.
        timeout = currentItem !== null ?
            items[currentItem].getAttribute(endAttr) * 1e3 - currentTime :
            1000;

        // Várunk.
        window.setTimeout(showNext, timeout);
      }

      // Lekérdezzük az aktuális elemet.
      currentItem = getCurrent();
      if (currentItem !== null) {
        // Megvan az elem, rejtsük el, ami nem kell.
        hideItems(currentItem);
      }
      // Elkezdünk várni.
      showNext(true);

    }(document.getElementById('schedule')));
  </script>
</body>
</html>
8

Jól értem?

H.Z. v2 · 2011. Aug. 1. (H), 13.32
A <li tagekhez adott data-start-timestamp és data-end-timestamp attribútumokat önkényesen adtad hozzá, kihasználva, hogy gyakorlatilag XML-ként viselkedik a HTML is és nincs megadva DTD a fejlécben?
9

Semmi önkényeskedés

Poetro · 2011. Aug. 1. (H), 13.42
A HTML5 lehetővé teszi a data-* attribútumok használatát. Semmi önkényes nincs benne.
10

A HTML5 még nem szabvány,

Hidvégi Gábor · 2011. Aug. 1. (H), 13.48
A HTML5 még nem szabvány, majd csak három év múlva várható.
11

Miért?

Poetro · 2011. Aug. 1. (H), 14.01
Ezt most miért kellett leírni még egyszer? Tudjuk, te nem szeretsz semmit, ami nem szabványos, és gondolom ezért nem használsz CSS3-at, WebSockets-t, Web Workers-t, Canvas-t, Messaging-et, Audio / Video elemeket, Geolocation, Storage stb API-kat. De attól még mások használhatnak, mert amelyik böngésző támogatja (a legtöbbet az új böngészők támogatják), ott kényelmesebb lesz az élete a fejlesztőnek és a felhasználónak. Ha neked nem tetszik, akkor ne használd, de azok a fejlesztők akik használni szeretnék, tehessék már meg szabadon, ha már a lehetőségek adottak.

Gondlom pár hónapja még te se használtál CSS 2.1-et, mert csak júniusban fogadták el.
19

Egyrészt még messze van a

Hidvégi Gábor · 2011. Aug. 1. (H), 15.23
Nem jól fogalmaztam, nem a szabványosítással van a gond, hanem az elterjedtséggel.

Ezenkívül még messze van a szabványosítása, másrészt minden böngésző más és más módon támogatja, és nincs pontos lista, hogy az egyébként gyorsan változó böngészők mit tudnak és mit nem. Ha egy nagyközönségnek készülő oldalt készítesz, és HTML5-öt használsz, érhetnek meglepetések, mint volt is erre példa nemrég itt, a fórumon (most hirtelen nem találom), mert bizonyos elemek nem biztos, hogy jól fognak megjelenni, nem úgy fognak működni, ahogy te elképzelted.

És valóban, nem használom a következőket a fenti okok miatt:
- CSS3: megoldható CSS2-vel a legtöbb probléma
- WebSockets: csak olyan helyen használnám, ahol kontrollálni tudom a böngészőhasználatot, azaz webalkalmazásnál
- web workers: nem volt még rá szükségem, ráadásul volt egy blogmark, miszerint bizonyos böngészőben web worker nélkül gyorsabb
- Canvas: a HTML 5 egyik legnagyobb tévedése a csak JS-ből irányítható elem
- Messaging, Geolocation: nem volt még rá szükségem
- audio/video: erre már léteznek tökéletes flash megoldások, és a flash támogatása 98%-os
- Storage: ezt használom, mert van rá crossbrowser megoldás

Ha tudod kontrollálni, hogy milyen böngészőben nézzék meg az oldalad/használják az alkalmazásodat, akkor azt használsz, amit akarsz. Ha nem (publikus weboldal), akkor viszont egy kereskedelmi oldalnál annyi százalék bevételtől esik el a céged, ahányan nem tudják használni az oldalad, amennyiben nincs valamilyen crossbrowser megoldás, hogy a piacon elérhető böngészők legalább 95%-ában tökéletesen működjön minden.

Úgy gondolom, hogy egy felelős webfejlesztő az utóbbi esetben (publikus weboldal) ma még nem ajánlhatja a HTML 5 használatát a fenti okok miatt.

Egyébként szerintem eleve rossz megközelítés a data-* attribútumok használata, hisz nem a HTML elemeket kéne adatokkal kidekorálni, hanem az adatokból kéne a HTML-t legenerálni, lásd ezt a hozzászólásomat.
20

Ha megnyugtat

Poetro · 2011. Aug. 1. (H), 16.50
Ha megnyugtat, akkor a fenti kód működik még IE6-ban is.
21

Légy szíves, érdemben szólj

Hidvégi Gábor · 2011. Aug. 1. (H), 18.23
Légy szíves, érdemben szólj hozzá, kíváncsi vagyok a véleményedre.
22

Megvalósítás

Poetro · 2011. Aug. 1. (H), 19.11
Én több nagy portálon dolgoztam és jelenleg is dolgozok. Ezek valószínűleg nagyobbak, mint amin te valaha dolgoztál (napi többmillió oldalletöltés). Ezeken az oldalakon használunk:

CSS3-at:
  • Sokkal egyszerűbb benne olyan dolgokat megvalósítani, amihez CSS2-ben plusz markup-ra lenne szükség (border-radius, text-shadow, box-shadow, linear-gradient stb.).
  • Kevesebb képet kell használnunk - kevesebb dolgot kell a felhasználónak letölteni.
  • Kisebb, és áttekinthetőbb lesz a CSS és a HTML.
  • Nem célunk, hogy minden böngészőben ugyan úgy jelenjen meg a tartalom.
  • Ha a kliens böngészője támogatja, akkor szebb lesz a tartalom.
  • Nem célunk az IE6 támogatása, lényeg, hogy IE7 és újabb böngészőben használható legyen az oldal.

Canvast:
  • Mert olykor diagramokat kell rajzolni élő adatból, és a szerver oldali legenerálása feleslegesen sok erőforrást venne el, és nem lenne interaktív.
  • Létezik rá cross-browser megoldás. (SVG / VML)

Messaging:
  • Mivel készítünk widgeteket, azoknak kommunikálni kell egymással, illetve a szülő oldallal.


A HTML5 HTML felének nagy része visszafele kompatibilis illetve nem okoz problémát, és vannak rá cross-browser megoldások, hogy működjön régi böngészőkben.

Egyébként szerintem eleve rossz megközelítés a data-* attribútumok használata, hisz nem a HTML elemeket kéne adatokkal kidekorálni, hanem az adatokból kéne a HTML-t legenerálni, lásd ezt a hozzászólásomat.

Ezt nem teljesen értem. Olyan megoldás szükséges, ami használható JavaScript nélkül. A HTML generálását hogyan gondoltad, úgy hogy a szkript használni is tudja az adatokat, ugyanakkor szkript nélkül is használható oldalt kapjunk? Természetesen lehet hackelni például láthatatlan SPAN elemekkel, amiknek megfelelő osztálya van, de az se nem szebb, se nem optimálisabb megoldása a problémának. A KISS szemléletnek teljesen megfelelnek a data-* attribútumok, és a HTML filozófiájától sem állnak távol.

A web workeres blogmarkban levő eredmények nem elérhetők, így nem tudok arra reagálni. Ugyanakkor azt szem előtt kell tartani, hogy ugyan egyes böngészőkben "lehet" lassabb, de az nem indok arra, hogy ne használjuk, maximum azokban a böngészőkben nem (az elágazást úgy is meg kell csinálni, amíg a MS termékek nem frissülnek a felhasználóknál).
23

Mindenhol mások az igények. A

Hidvégi Gábor · 2011. Aug. 1. (H), 20.55
Mindenhol mások az igények. A magam részéről úgy vagyok ezzel, hogy ahhoz, hogy akár egy régebbi böngészőben is jól jelenjen meg az oldal, két plusz sor HTML-t és még egy stílusdefiníciót kell írni, akkor ezen nem spórolok, mert minimálisan növeli meg az elkészítés idejét.

Nyilvánvalóan egy portálon nincsenek túl bonyolult megoldások, de azért egy rendesen megdizájnolt site-on egy igényesebb grafikus biztosan nem fog megelégedni a CSS3 által nyújtott lekerekítések és árnyékok minőségével; én ezeket a szegény ember photoshopjának tekintem, bár elismerem, hogy nem mindenki engedheti meg magának a drágább látványtervet.

A Canvas szerintem nagyon nem illik a képbe, ugyanis - tudtommal - csak scriptből lehet vezérelni, ami könnyen platformspecifikussá teheti, ugyanis, ha rosszul táplálod (azaz pusztán JS-sel), az általa megjelenített adatokat csak jelentős plusz munkával tudod kinyerni. Magyarul, ha nem markup az adatforrás, mint pl. az SVG-nél, akkor az olyan, mintha nem is létezne, azaz kereshetetlen, értéktelen. Emiatt nem valódi alternatívája a Flash-nek, bár már tenni ellene nem sokat lehet, de teljesen felesleges volt a kifejlesztése, jobban jártunk volna egy ingyenes Flash IDE-vel és egy futtatókörnyezettel.

A HTML5 HTML felének nagy része visszafele kompatibilis illetve nem okoz problémát, és vannak rá cross-browser megoldások, hogy működjön régi böngészőkben.

A HTML 5 másik fele pedig teljesen fölösleges, mivel semmilyen többletinformációt nem hordoz a benne levő adatokról: <menu>, <header>, <nav> és társaik, a kutyát sem érdeklik. Ha arra ösztönöznének, hogy a megjelenített adatokról pontos metainformációt, valamint az adatok közti összefüggéseket megadjuk, akkor nem lenne egy szavam sem, de így csak arra jók, hogy a régi böngészők ne jelenítsék meg őket, és frusztrációt okozzanak sok embernek.

Ezt nem teljesen értem. Olyan megoldás szükséges, ami használható JavaScript nélkül.

2004-2005 környékén találkoztam azzal a problémával, hogy a backenden (PHP-ban) különítsük el a programkódot a generált HTML kódtól, mert ezzel több legyet üthetünk egy csapásra. A PHP programozók tipikusan nem nagyon értettek a HTML-hez (ők végezték a ciklusok stb. bekötését), sok kommunikációt igényelt, hogy ki mikor dolgozhat rajta és így tovább.

Ezt akkor megoldottuk, mindenki számára nyilvánvaló, hogy sablonokat használtunk, és ez jónak is tűnik, amíg nem gondoljuk tovább a dolgot. Az interneten mérhetetlen mennyiségű információ van HTML formában, amit humán fogyasztásra terveztek, viszont ezt feldolgozni emberileg lehetetlen. Katyvasz az egész, lehet persze programot írni adatok website-okról való kinyeréséhez, de szinten minden oldalhoz más parser kell. Így rá vagyunk szorulva a szó alapú keresésre, ami rendkívül korlátos, tehát a neten elérhető információ nagyon kevés ezrelékét tudjuk csak felhasználni.

Amit én mondok az az, hogy a sablonok kezelését helyezzük át a böngészőbe, s szerintem a legmegfelelőbb technológia erre az XML + XSLT, ezt gyakorlatilag mindegyik támogatja. A webszerverek így egy nyers XML fájlt generálnának, amit minden adatfogyasztó arra használ, amire akar, valamint megtámogatjuk XSLT-vel, hogy az emberi olvasók, valamint a keresők is értelmezni tudják. (XSLT-vel egyébként generálhatsz JS-t is, ha szükséges, így válaszoltam arra a kérdésedre is.)

Két gondolat a HTML 5-ről:
1, szerintem túl nagy falat ez így egyben, és nagyon lassan halad a szabványosítás, úgy gondolom, hogy több részre kéne bontani
2, nem azért támadom a HTML 5-öt, mert annyira rossz lenne, vannak benne jó dolgok, az alkalmazásfejlesztés támogatása hiányzott, mint egy csepp víz a sivatagban; viszont úgy gondolom, hogy az áttérés a szemantikus, adat alapú webre nagyságrendekkel fontosabb a jövő miatt, mint <article> elemekkel bohóckodni.
12

Javagyúgy. HTML5-öt még nem

H.Z. v2 · 2011. Aug. 1. (H), 14.21
Javagyúgy. HTML5-öt még nem láttam. (szóval DTD hiány... ;-) )
13

Előbb

Poetro · 2011. Aug. 1. (H), 14.28
Pont az előbb láttál egy HTML5 dokumentumot :-).
14

Idézném a Vukból(?) az uhut:

H.Z. v2 · 2011. Aug. 1. (H), 14.30
És most azt hiszi, hogy húúúú... húúúú.... húúúúmoros....

:-)))
15

Kell olvasni a Weblabort, én

kuka · 2011. Aug. 1. (H), 14.31
Kell olvasni a Weblabort, én is ott értesültem róluk. ;-)
18

Félreétesz: én tudatosan

H.Z. v2 · 2011. Aug. 1. (H), 15.15
Félreétesz: én tudatosan kerültem eddig (meg még ezentúl is egy darabig)
Ugyanis sokáig abban a hitben éltem, hogy HTML4 terén nem sok újat tudnak mondani a doksik, ennek ellenére, naponta botlom újdonságokba. Emellett, ha épp tart a lelkesedés, igyekszem JS-t, CSS-t, PHP-t, MySQL-t tanulni... ezt jobb nem kavarni egy olyan HTML-lel, ami még a legfelkészültebb böngészőkben is épphogycsak támogatott.
6

Nap mint nap a HTML alapú web

Hidvégi Gábor · 2011. Aug. 1. (H), 10.32
Nap mint nap a HTML alapú web korlátaiba ütközünk, amik olyan problémákat generálnak, hogy csak extra munkával lehet megoldani azokat.

Mennyivel egyszerűbb lenne az adat alapú megközelítés, jelen esetben mondjuk így nézne ki bármelyik tévéműsorral foglalkozó oldal kódja:

<tvmusor>
  <csatorna megnevezes="TV2">
    <musor>
      <cim>Ismeretterjesztő műsor</cim>
      <kezdet>2011-08-01 17:30:00CET</kezdet>
      <hossz>0:28:00</hossz>
      <leiras>...</leiras>
    </musor>
    <musor>
      <cim>Hírek</cim>
      <kezdet>2011-08-01 18:00:00CET</kezdet>
      <hossz>0:14:00</hossz>
      <leiras>...</leiras>
    </musor>
  </csatorna>
</tvmusor>

Ezt a kódot egy egyszerű XML transzformációval úgy alakítja át bárki és úgy jeleníti meg, ahogy akarja.
A HTML-lel az a baj, hogy alapvetően dokumentum megjelenítésére és emberi fogyasztásra tervezték, azaz rengeteg olyan információt tartalmaz, ami a kinézettel kapcsolatos, és minden oldalra, amit gépileg akarunk feldolgozni, saját feldolgozót, parsert kell írni.

Jelentős kezdeményezés a schema.org, viszont ezzel is az a gond, hogy a HTML dekorálását ösztönzi, ahelyett, hogy magukra az adatokra helyezné a hangsúlyt.
16

Mi akadályoz meg?

janoszen · 2011. Aug. 1. (H), 15.05
Mi akadályoz meg abban, hogy XML-t használj ilyen célra? Esetleg kirejteszd az XHTML-t?
17

Engem semmi, már egy ideje

Hidvégi Gábor · 2011. Aug. 1. (H), 15.14
Engem semmi, már egy ideje így dolgozom, de másokat igen, akik a HTML 5 fájától nem látják az erdőt.