Llenguatge de marques(XML i JSON) i serveis web (2021)

Alumne: Joan Pardo

Unitat 1: Del fitxer XML a la plantilla XSLT

 Validació del Projecte 1

En aquesta tasca, serà l'espai a on fareu la validació de les evidencies de les activitats d'aquest projecte1  Del XML a la plantilla XSLT

En aquest projecte haureu d'indicar la url a on tindreu el vostre portfoli que recollirà tot el treball realitzat:

Has d'incorporar totes aquestes evidencies en el teu portfoli de manera que quedin accessibles i siguin correctament  estètiques i també enganxar la url del teu portfoli al grup una vegada testejades les meta-etiquetes OpenGraph


icon-task-13.jpg

Tasques


  1. Tasca 1.1 (✅)   1)  S'ha de poder descarregar el fitxer XML de la recepta des del vostre portfoli i 2) heu d'incloure la visualització de la mateixa recepta.
  2. la Tasca 1.1

    1) Aquí pots descarregar el fitxer XML de la meva recepta.

    fitxa_receptaJpardo.xml
    fitxa_receptaJpardo.xml (drive)

    2) Visualització de la mateixa recepta (fitxa_receptaJpardo.xml).

    visualitzacioRecepta.png

  3. Tasca 1.2.1. (✅)   1) Heu d'incloure en el portfoli el vostre DTD
  4. la Tasca 1.2.1

    Aquí pots descarregar el fitxer DTD de la meva recepta.

    fitxa_receptaJpardo.dtd (drive)

  5. Tasca 1.2.2 (✅). Heu d'incloure en el vostre portfoli,  1)  les metadades, 2)  Google Analitycs i 3)  (❌) alguna estratègia SEO.
  6. la Tasca 1.2.2

    1) les metadades.
    He generat les metadades del nostre portfoli i les he afegit a la capçalera del meu codi HTML.
    I ho he fet amb el generador https://metatags.miarroba.com/ 
    evidencia_GeneradorMetaTags.png Mostra del codi creat amb https://metatags.miarroba.com/     i que he afegit a totes les pàgines de la meva web site.

    He canviat el <title> a totes les pàgines, ja que les bones pràctiques de SEO aconsellen que el títiol de cada pàgina siguin únic, és a dir, diferent a totes les pàgines.
    He fet un test SEO a la meva Web amb WebSeiten Analyse    , i el resultat ha estat el següent:
    La nota és de 56/100
    capturaWebseitenAnalyse24_detall_1rAnalisis.png
    capturaWebseitenAnalyse24-de-es-www-llenguatgemarquesjpardo20-tk_versio01.png
    I els problemes que he solucionat són:

    1. Problema 1: ens indica que la descripció té una mida massa llarga
      problema_01.png

      De 177 caràcters.

      De 157 caràcters.
    2. Tal com es veu a la imatge
      problema_02.png ens informa de que la nostra web no fa servir etiquetes og.
      Per tant, fent servir l'eina webmaster-tools.php8developer.com     per generar el següent codi
      problema_02Solucio_01.png
      problema_02Solucio_02.png

      I posteriorment he afegit a totes les pàgines de la meva web site.
      Tornant a fer servir l'eina anterior, ara l'informe és millor:
      capturaWebseitenAnalyse24-de-es-www-llenguatgemarquesjpardo20-tk_final.png
      Quedant el problema 1, solucionat:
      problema_01_solucionat.png i el problema 2, també solucionat:
      problema_02_solucionat.png Ara caldria seguir fent el mateix amb la resta de problemes.


      La nota és, després de fer un parell d'accions de: 53/100
      Ha empitjorat!!!
      capturaWebseitenAnalyse24_detall_2nAnalisis.png


  7. Tasca 1.2.3 (✅)   1) Inclou la RGDP amb coockies i autoria de la web
  8. la Tasca 1.2.3
    1. Creades les pàgines:
      1. Política de Cookies (es)
      2. Aviso legal y términos de uso
      3. Privacidad
    2. Creat un script

      per que aparegui el missatge per acceptar les cookies la primera vegada que es visita la pàgina index.html. El missatge és el que es veu a continuació:
      evidencia_finestraCookies.png
      Un cop es visita la pàgina index.html primera vegada, i en acceptar el que es demana, pressionant el botó que apareix, s'executa l'script i aquest guarda a la variable jaMostrada del localStorage el valor 1.
      I quan l'usuari torna a visitar la pàgina index.html, l'script verifica que la variable jaMostrada del localStorage conté el valor 1 i no torna a mostrar el missatge.
      Si vols comprobar-ho, pots executar la funció esborraAvisCookies que esborra la variable jaMostrada del localStorage, fent que quan tornis a vistar la pàgina index.html et torni a apareixer el missatge.
      Si ara visites la pàgina index.html


  9. Tasca 1.2.4 (✅)    1) Creació plantilla Bootsrap i  2) metaetiquetes OpenGraph.3) Enganxar la url del portfoli al grup
  10. la Tasca 1.2.4
    1. Com elements de bootstrap que he inclòs, tenim el menú:
      Així es veu amb una mida de pantalla ample. (1500px)
      menu_bootstrap_ample.png Així es veu amb una mida de pantalla mitjana. (900px)
      menu_bootstrap_mig.png Així es veu amb una mida de pantalla estreta. (575px)
      menu_bootstrap_estret.png I amb com es veuria des d'un mòbil:
      Així es veu amb una mida de pantalla ample. (1000px)
      menu_bootstrap_ample_mobil.png Així es veu amb una mida de pantalla mitjana. (900px)
      menu_bootstrap_mig_mobil.png Així es veu amb una mida de pantalla estreta. (575px)
      menu_bootstrap_estret_mobil.png
      Es poden veure, tant com varia el menu en funció de l'amplada de la pantalla, i també com es recol·loquen, els elements que hi ha de tipus <div class="col-sm-1 bg-dark"></div>.

    2. Aquest punt, ja s'ha vist al punt anterior la Tasca 1.2.2 1) les metadades.
      I aquí el torno a repetir.
      Tal com es veu a la imatge
      problema_02.png ens informa de que la nostra web no fa servir etiquetes og.
      Per tant, fent servir l'eina webmaster-tools.php8developer.com per generar el següent codi
      problema_02Solucio_01.png
      problema_02Solucio_02.png

      I posteriorment he afegit a totes les pàgines de la meva web site.

    3. Aquí hi ha l'evidencia de que he penjat l'URL al Telegram.
      evidencia_URL_Telegram.png


  11. Tasca 1.3 (✅)   1) Inclou les dues fitxers de receptes que has creat.
  12. la Tasca 1.3

    1) Aquí pots descarregar els fitxers XML de les meves receptes.

    Recepta 1: Espatlla de xai al forn amb verdures i vi (fitxa_receptaXaiAlForn.xml)

    fitxa_receptaXaiAlForn.xml

    fitxa_receptaXaiAlForn.xml (drive)
    Recepta: 13387 de www.receptes.cat

    Recepta 2: Potatge de carbassa amb pollastre, arròs, mongetes del ganxet i botifarra negra (fitxa_receptaPotCarbassa.xml)

    fitxa_receptaPotCarbassa.xml

    fitxa_receptaPotCarbassa.xml (drive)
    Recepta: 13318 de www.receptes.cat

  13. Tasca 1.4 (✅)   1) Inclou la fitxa dels jugadors de l'ACB.
  14. la Tasca 1.4

    Visualitzador de fitxers:

    Ara es visualitza: acb_tots.html


    1. Pel fitxer acb_tots.html he fet servir els fitxers

      Accions:    -     Obrir al visualitzador de fitxers    -     obrir nova finestra        -     descarregar    
    2. acb_un.html
    3. acb_jpardo.css
    4. acb_jpardo.xml
    5. acb.dtd(descarrega)
    6. acb_jpardo.xsl(descarrega)
    7. acb_jpardo_tots.xsl(descarrega)
    8. acb_jpardo_un.xsl(descarrega)

    Aquí pots veure les fitxes de tots els jugadors de l'ACB.

    acb_tots.html
    acb_tots_html_internet

    Aquí pots veure una sola fitxa d'un dels jugadors de l'ACB.

    acb_un.html
    acb_un_html_internet

    Els fitxers que he fet servir són els següents:

      Visualitzador de fitxers:

      Ara es visualitza: acb_jpardo.css

      acb_un.html acb_jpardo.css

    1. Fitxer d'estils: acb_jpardo.css

    2. acb_jpardo.xml

      No tinc clar el motiu, pero si aquest fitxer l'obres amb l'Internet Explorer es veu bé!

      acb_jpardo.xml
      acb_tots_html_internet

      Pero si aquest fitxer l'obres amb un altre navegador que no és l'Internet Explorer NO es veu bé!

      acb_tots_html_internet

 
www.000webhost.com