• Slidy
  • Utilisateur:Giuliana

    De Ustensile
    Aller à : navigation, rechercher

    Je suis étudiante en illustration/BD bac2. Je n'ai jamais utilisé mon ordi dans un projet artistique, je n'ai donc aucune compétence des logiciels de création et/ou modification d'image. Ce que j'explore est la possibilité d'une narration qui prend forme à travers la transformation et la division en fenetre d'une page web. D'abord je voulais realiser une bd pensée et structurée pour être lit à travers une serie des liens puis j'ai essaye de semplifier le projet pour apprendre plus facilement les bases du code html et des frames. Ci dessus mes recherches dans la production d'images numeriques, le web design et la narration sur internet.

    Difference entre Image de synthese et dessin assisté:

    Image de synthese = discipline de l'infographie: technique qui consiste en la création d'images numériques par application d'un modèle physique. C'est donc une image artificielle, virtuelle, que l'on crée par procédés optique, informatique ou électronique à partir d'un ordinateur.

    explication et histoire: [1] [2]

    Dessin assisté = DAO = Dessin Assisté par Ordinateur: est une discipline permettant de produire des dessins techniques avec un logiciel informatique. On le distingue de la synthèse d'image dans la mesure où il ne s'agit pas du calcul de rendu d'un modèle numérique mais de l'exécution de commandes graphiques (traits, formes diverses...). De ce fait, en DAO, la souris et le clavier remplacent le crayon et les autres instruments du dessinateur. Les dessins produits sont le plus souvent réalisés en mode vectoriel (traits cohérents), alors que l'image de synthèse est une association de pixels indépendants bitmap. En d'autres termes, les logiciels de DAO attribuent des coordonnées (X,Y pour les plans 2D et X,Y,Z pour les modèles 3D). Chaque élément d'un dessin est appelé entité et chaque entité contient donc des propriétés de couleur, d'épaisseur, de calque, de type de ligne, etc. L'intérêt de la DAO, est d'abord celui de l'informatique, c’est-à-dire essentiellement un apport de praticabilité dans la gestion des documents, facilitant l'édition de modifications, l'archivage, la reproduction, le transfert de données, etc.

    logiciels: [3]


    (AutoCad) [4]


    Illu 1.jpg


    Seashore: logiciel open source de traitement bitmap pour Mac OsX similaire à Gimp (linux)

                    download : [5]
                    discussion: [6]
    

    Examples avec Seashore:

    Coucou.jpeg

    Timo.jpeg

    Untitled.jpeg

    Illustrator: creation graphique vectorielle

    Pauseclopecensor.jpg

    111.gif

    Photoshop: dessin assisté

    Clopy.jpg

    Tetedebite.jpg

    photoshop sans calques :

    Less-i-know-the-better.jpg

    Less-i-know-the-better-2.jpg

    Less-i-know-the-better-3.jpg

    Less-i-know-the-better-4.jpg


    Storyboard : vectorisé avec Illustrator / colorisé avec Seashore


    Illu-1-copia.gif

    Page1.jpg

    Page2.jpg

    Page3.gif


    Html basics: [7]


    Web design: [8]



    Frame/iFrame: [9]

    [10]


    J'utilise le logiciel TextMate pour écriture de texte : [11] download: [12]

    notes:

    [13]

    src: corrisponde all’indirizzo della pagina da caricare nell’iframe.

    width: imposta la larghezza in pixel.

    height: imposta l’altezza in pixel.

    Si può intervenire con altri attributi per definire altri aspetti. Ecco i più importanti:

    frameborder: è un valore numerico per impostare un bordo intorno all’iframe (es: frameborder=”1″).

    marginwidth: imposta lo spazio tra i bordi sinistro e destro dell’iframe e la pagina visualizzata al suo interno.

    marginheight: imposta lo spazio tra i bordi superiore e inferiore dell’iframe e la visualizzata al suo interno.

    scrolling: serve a specificare se si deve visualizzare una barra di scorrimento laterale nel caso in cui il contenuto della pagina superi l’altezza dell’iframe; i valori possibili sono ‘yes’ e ‘no’ (es: scrolling=”yes”).

    hspace: imposta il margine tra l’iframe e il contenuto che lo circonda nella pagina sui lati sinistro e destro (es: hspace=”20″).

    vspace: imposta il margine tra l’iframe e il contenuto che lo circonda nella pagina sui lati superiore e inferiore (es: vspace=”20″).


    Pourquoi on ne utilise plus les Frame: Grosso modo, les frames sont à proscrire parce qu'ils :

    • causent une dénaturation radicale du document Web ;
    • rendent impossible l'ajout aux favoris;
    • rendent l'indexation déficiente ;
    • causent des imprécisions au niveau de l'impression ;
    • nuisent à la séparation nette entre la structure et la présentation d'un document ;
    • laissent prétendre à une économie illusoire des fichiers ;
    • etc.

    De nos jours, le recours aux CSS ou aux technologies serveur (PHP par exemple) permet de réaliser plus efficacement ce à quoi les frames nous servaient par le passé.

    cyberduck ustensile: [14]



    problemes dans l'utilisation des Iframe:

    • pour definir le percentage de page occupe par un frame il faut le mettre dans le document html et non juste dans le body / le frame necessite d'un body?
    • problemes avec la fonction target
    • problemes avec la mise à jour des images modifiées dans le Web preview de TextMate

    references:

    [15]     <3
    

    [16]


    Dominique Maes : pour tablettes: [17]


    bd numeriques : [18] bd en ligne: [19]


    projet numerique realisé par antoine marchalot : [20]

    transmedialité et narration: [21]

                                               [https://books.google.it/books?id=ZW_yCQAAQBAJ&pg=PA137&lpg=PA137&dq=internet+et+narration&source=bl&ots=7t2lVGZTVZ&sig=ps2VVZY2fjkmV_vhAnahCOQ-oVI&hl=it&sa=X&ved=0ahUKEwjz4f7-6ojMAhWCWw8KHaIeCs4Q6AEIPDAE#v=onepage&q&f=false
    

    ]


    domain gratuit/freeweb hosting: [22] [23]



    Projet final: [24]