UX Theory - Web Design

This lecture introduces UX theory and focusses on applying this to web based design.

Evaluating the Quality of Student Web Design Projects

Иван Шотлеков, Асен Рахнев - В настоящата работа се представя набор от критерии за оценяване на качеството на студентски проекти за уеб дизайн. Критериите са подходящи за разработване, самооценяване, колегиално оценяване и оценка на уеб сайтове, проектирани от студенти. Тази оценъчна скала е апробирана по време на курс “Английски език в информационните технологии”, проведен със студенти от първи курс по информатика във Факултета по математика и информатика на Пловдивски университет “Паисий Хилендарски”. Тя помага на студентите при разработването на мултидисциплинарен проект за уеб дизайн да придобият не само технически умения, свързани с проектирането на качествени уеб сайтове, но и някои процесуални умения, които ще им бъдат необходими в реалната практика.

Analisi, progettazione e sviluppo di un e-commerce con framework magento

Progettazione e sviluppo di un e-commerce di articoli sacri utilizzando Magento come framework. Introduzione agli strumenti e tecniche di creazione per un catalogo.

Evoluzione dei Modelli e delle Tecnologie per il Web: DART e HTML5 come caso di studio

Nell’ultimo decenno si è assisitito ad una frenetica evoluzione delle tecnologie di connessione e trasferimento dati, dagli impianti di fibra ottica sempre più diffusi e performanti, alle varie tecnologie mobile UMTS e LTE. Tutto ciò ha permesso a sempre più persone di poter spendere una maggiore fetta del proprio tempo sulla rete sia per svago che per lavoro. Questo ha portato col tempo l’utente interattivo alla ricerca di servizi remoti che prima usufruiva in locale, sia per motivi di portabilità e di interconnessione, sia per una semplice questione di sincronizzazione fra i vari dispositivi posseduti. Il presente progetto di tesi si pone come obiettivo di indagare con occhio ingegneristico all’evoluzione della struttura del web fino ad identificare e analizzare l’attuale necessità di poter avere in rete tutti quei servizi anche completi e strutturalmente complessi che prima si aveva sul proprio desktop; tutto ciò attraverso l’esempio di un nuovo linguaggio di sviluppo per applicazioni web strutturate proposto da Google: DART. In questa analisi non si potrà prescindere dallo studio attento della tecnologia che sin dagli inizi della rete ha fatto da struttura al web ovvero l’Html e il suo ultimo standard Hmtl5. Nella prima parte verrà mostrata, attraverso un breve percorso, la nascita e lo sviluppo del web, sino ai giorni nostri. Si effettuerà quindi una panoramica, rivisitando tutti più importanti passi che hanno portato la rete internet ad essere ciò che oggi utilizziamo, ponendo una particolare attenzione alle attuali esigenze di progettazione della struttura dei servizi web. Nel secondo capitolo viene introdotta la tecnologia a base del web, l’Html; attraverso una breve analisi dell’evoluzione di quest’ultima si arriverà sino all’attuale HTML5 e alle funzionalità offerte nell’ottica della programmazione web strutturata. Nel terzo capitolo si analizzerà in maniera più approfondita la necessità di un web strutturato e le potenzialità del progetto Dart attraverso alcuni esempi esplicativi. Infine si trarranno alcune conclusioni sull’attuale situazione del web, sulla necessità di un web strutturato e sulla possibilità di riuscita del progetto Dart.

Estudo de Funcionalidades HTML5 para um Editor de Imagem na Internet

Hoje em dia existem múltiplas aplicações multimédia na Internet, sendo comum qualquer website apresentar mais de uma forma de visualização de informação além do texto como, por exemplo: imagens, áudio, vídeo e animação. Com aumento do consumo e utilização de Smartphone e Tablets, o volume de tráfego de internet móvel tem vindo a crescer rapidamente, bem como o acesso à internet através da televisão. As aplicações web-based ganham maior relevância devido à maior partilha ou consumo de conteúdos multimédia, com ou sem edição ou manipulação da mesma, através de redes sociais, como o Facebook. Neste documento é apresentado o estudo de alternativas HTML5 e a implementação duma aplicação web-based no âmbito do Mestrado de Engenharia Informática, ramo de Sistemas Gráficos e Multimédia, no Instituto Superior Engenharia do Porto (ISEP). A aplicação tem como objetivo a edição e manipulação de imagens, tanto em desktop como em dispositivos móveis, sendo este processo exclusivamente feito no lado do cliente, ou seja, no Browser do utilizador. O servidor é usado somente para o armazenamento da aplicação. Durante o desenvolvimento do projeto foi realizado um estudo de soluções de edição e manipulação de imagem existentes no mercado, com a respetiva análise de comparação e apresentadas tecnologias Web modernas como HTML5, CSS3 e JavaScript, que permitirão desenvolver o protótipo. Posteriormente, serão apresentadas, detalhadamente, as várias fases do desenvolvimento de um protótipo, desde a análise do sistema, à apresentação do protótipo e indicação das tecnologias utilizadas. Também serão apresentados os resultados dos inquéritos efetuados a um grupo de pessoas que testaram esse protótipo. Finalmente, descrever-se-á de forma mais exaustiva, a implementação e serão apontadas dificuldades encontradas ao longo do desenvolvimento, bem como indicadas futuras melhorias a introduzir.

Take Care4All: Gestor Pessoal para o Bem-Estar na Saúde, Exercício Físico e Alimentação

Este trabalho de Projecto consiste numa plataforma online que possibilita ao seu utilizador gerir simultaneamente a saúde, o exercício físico e o regime alimentar. A plataforma é uma ferramenta que ajuda a promover o bem-estar do indivíduo, porque auxilia a monitorizar a toma de medicação e a agendar consultas e/ou exames. Permite ainda identificar o exercício físico e a dieta adequada para o estado de saúde do utilizador, através do teste de aptidão física e das calculadoras de IMC, TMB e NCD. Para o desenvolvimento da plataforma foram considerados os princípios da usabilidade e acessibilidade heurística de Jacob Nielsen. O desenvolvimento do projecto assenta nas linguagens de Programação de HTML5, CSS3, PHP, MySQL, Javascript (JQuery) e na plataforma de RWD do Twitter-Bootstrap.

Pàgina web i botiga online per a botiga de rellotges

Creació d'una botiga en línia per a la venda de rellotges a través d'Internet sobre la plataforma de comerç electrònic PrestaShop.

Web 1, 2 and 3

Lecture on IA and webdesign (1 & 2 of 3). Web 2 talk I reference Aral Balkan - talk video is included here from his presentation at the Norwegian developers conference.

Engineering Concurrent and Event-driven Web Apps: An Agent-Oriented Approach based on the simpAL Language

Web is constantly evolving, thanks to the 2.0 transition, HTML5 new features and the coming of cloud-computing, the gap between Web and traditional desktop applications is tailing off. Web-apps are more and more widespread and bring several benefits compared to traditional ones. On the other hand reference technologies, JavaScript primarly, are not keeping pace, so a paradim shift is taking place in Web programming, and so many new languages and technologies are coming out. First objective of this thesis is to survey the reference and state-of-art technologies for client-side Web programming focusing in particular on what concerns concurrency and asynchronous programming. Taking into account the problems that affect existing technologies, we finally design simpAL-web, an innovative approach to tackle Web-apps development, based on the Agent-oriented programming abstraction and the simpAL language. == Versione in italiano: Il Web è in continua evoluzione, grazie alla transizione verso il 2.0, alle nuove funzionalità introdotte con HTML5 ed all’avvento del cloud-computing, il divario tra le applicazioni Web e quelle desktop tradizionali va assottigliandosi. Le Web-apps sono sempre più diffuse e presentano diversi vantaggi rispetto a quelle tradizionali. D’altra parte le tecnologie di riferimento, JavaScript in primis, non stanno tenendo il passo, motivo per cui la programmazione Web sta andando incontro ad un cambio di paradigma e nuovi linguaggi e tecnologie stanno spuntando sempre più numerosi. Primo obiettivo di questa tesi è di passare al vaglio le tecnologie di riferimento ed allo stato dell’arte per quel che riguarda la programmmazione Web client-side, porgendo particolare attenzione agli aspetti inerenti la concorrenza e la programmazione asincrona. Considerando i principali problemi di cui soffrono le attuali tecnologie passeremo infine alla progettazione di simpAL-web, un approccio innovativo con cui affrontare lo sviluppo di Web-apps basato sulla programmazione orientata agli Agenti e sul linguaggio simpAL.

Sviluppo di applicazioni mobile: confronto fra piattaforme native e tecnologie web utilizzando iOS e PhoneGap come caso di studio

Negli ultimi anni il mondo del mobile computing ha avuto una vera e propria crescita esponenziale grazie soprattutto all'entrata in scena dello smartphone. In realtà, per essere più precisi, è bene bene sottolineare che gli smartphone esistevano già da tempo ma il loro utilizzo era in particolar modo indirizzato ai professionisti per il quale era, ma continua ad essere tutt'oggi, un valido supporto in campo lavorativo, basti pensare all'importanza della comunicazione via e-mail e non solo. Seppur comunque fossero già presenti da tempo, i primi smartphone non godevano di certo di un touch-screen sofisticato come quello odierno nè in essi erano presenti funzionalità tipiche dei dispositivi che troviamo ad oggi sul mercato. Una svolta decisiva è stata segnata dall'introduzione dell'iPhone e successivamente dell'AppStore, grazie a questi la programmazione per i dispositivi mobile ha preso sempre più piede diventando un vero e proprio business. In un secondo momento alla programmazione nativa si affiancarono le tecnologie web. Questo mio lavoro di tesi si pone l'obiettivo di studiare in primis la struttura, caratteristiche e peculiarità del sistema operativo iOS e analizzare il framework PhoneGap al fine di riuscire a confrontarne i vari aspetti fondamentali anche attraverso lo sviluppo di piccole applicazioni. Così facendo, quindi scendendo nei dettagli di quelle che possono essere le differenze rilevanti, mi pongo l'obiettivo di valutarne relativi pro e contro al fine di fare una scelta del tutto personale tra iOS e PhoneGap.

Design di interfacce e usabilità del Web in ambiente mobile: la Programmazione della Cineteca di Bologna

Il presente progetto è stato svolto in collaborazione con la Cineteca di Bologna e verte sulla riprogettazione dell'odierna interfaccia Web, in funzione della sua visualizzazione mobile non considerata nella progettazione del 2008, in particolare nella sua parte che concerne la programmazione degli spettacoli in ambito cinematografico. Raccolti i suggerimenti degli utenti e approfondite le richieste della Cineteca, affrontando con i responsabili IT della Fondazione le criticità emerse, la ristrutturazione delle sezioni presenti e l'aggiunta di nuove funzionalità, si è impostato il lavoro come segue. In primis, si è eseguita una ricerca, avvalendosi di fonti autorevoli nella letteratura di settore, con un focus incentrato sull’Usabilità. Questa ha portato a presentare una panoramica di tale tematica, per concentrarsi poi sulle peculiarità dei dispositivi mobili, toccando vari aspetti: da un approfondimento dalle caratteristiche dell’uso fino una collocazione anche storica alla realtà mobile. Successivamente, si è proseguito analizzando nel dettaglio tutti i vari elementi da includere, sia dal punto di vista concettuale che posizionale, in riferimento a varie soluzioni proposte dalla letteratura di settore. Ciò preferendo i modelli principalmente utilizzati, dunque maggiormente familiari agli utenti, e i metodi normalizzati per la risoluzione di singole problematiche frequenti nella presentazione delle informazioni. Il risultato è un progetto di interfaccia più vicina all'esperienza quotidiana dell'utente, concretizzatosi con la realizzazione di un prototipo per mezzo di applicativi che simulano un device e mostrano anteprime grafiche dell'interfaccia medesima, nella fattispecie della natura e della collocazione dei singoli componenti sullo schermo. Il lavoro, pertanto, si pone l’obiettivo di rispondere a comuni e debite aspettative dell'utenza in fatto di comodità, efficienza e immediatezza di consultazione della Programmazione anche in mobilità.

Demo: Shield UI JavaScript Chart - A Flexible HTML5 Data Visualization Component

Shield UI’s advanced framework for creating rich charts and graphs is the first of a line of data visualization components, giving web developers the power for embedding rich graphics in their web projects with minimum effort. Built with HTML, CSS3 and packaged as a jQuery plugin, the library has full support for legacy and modern desktop web browsers, as well as the latest mobile devices.

MotorsJMM : Aplicació Web de Botiga Electronica

El director comercial fa ja temps que demana una web corporativa en la que els seus clients puguin consultar les característiques tècniques dels productes i puguin fer les seves comandes. A més aquesta web podria servir com aparador per nous clients i per realçar la imatge de qualitat de l'empresa.

Pàgina web per a una entitat esportiva

El projecte que es presenta es basa en la creació d’una pàgina web per a una entitat esportiva, a partir d’un gestor de continguts de nom Joomla, basat en llenguatges PHP, SQL, HTML, Javascript i CSS, amb servidors Apache i base de dades MySQL. Aquesta web permet consultar informació general de l’equip i de l’entitat, dades actualitzades de totes les categories del club, inscripcions al club, i tot això mitjançant un registre a la web, el qual pot ser més o menys restrictiu segons la categoria.