html5

#entrega03 - Demo Técnica

sofia-cruz — Fri, 16 Mar 2012 23:39:51 GMT

Visto que o nosso projecto refere-se a um website, como demo técnica decidimos criar um percurso que o utilizador registado irá fazer para que consiga publicar uma obra.

Descrição passo a passo:

Utilizador entra na página inicial:

se não estiver registado
- botão registar (será enviada a confirmação para o email do utilizador e ao aceitar fica automáticamente logado)
se estiver registado
- login (username e password)

Após estar logado tem a opção de:

inserir obra através do formulário
publicar e ver obra
logout (sair da sua conta)

A nível de viabilidade técnica, ao usamos a framework de HTML5 Boilerplate verificamos que esta é uma boa opção para a realização do nosso projecto, visto que temos que conciliar a página web com a página mobile.
Para a realização da demo, foi necessário criar uma pequena base de dados em MySQL e arranjar um servidor externo gratuíto para alojarmos o nosso trabalho. Após isso, realizamos as páginas na framework e usamos a linguagem PHP para gerar o conteúdo dinâmico na web.

Link onde está alojada a demo técnica:
museudesign.net16.net

LigaVerde a ganhar forma

nelsontaleite — Mon, 24 Oct 2011 13:17:25 GMT

Bom dia caríssimos.

A webapp LigaVerde está a começar a ganhar forma, como se pode verificar em http://tdi.ua.labs.sapo.pt/g/tdi2011g1/ligaverde/#_home. Para uma melhor visualização aconselho a utilizar o Chrome com a extensão Window Resizer, resolução 320x480.

A aplicação tem por base a framework iUI e utiliza também jQuery. Para já ainda só estão (beta) desenvolvidas as páginas de registo, login, home, perfil e postos. Ou seja, estas "páginas" estão já com uma primeira versão de layout construído.

Para o mapa da página postos utilizamos a API do SAPO Mapas. Para o marker com a geolocalização do utilizador, neste momento está a ser utilizada a geolocalização que o HTML5 permite, mas mais tarde iremos recorrer ao GPS do smartphone.

Procedemos ainda à alteração da base de dados, acrescentando um id como chave primária, em vez do campo email, utilizado anteriormente. Decidimos alterar este campo para que fosse possível ao utilizador alterar o email, evitando assim confusões com chaves estrangeiras e etc.

Os próximos passo agora passam pela ligação da BD com a aplicação,o desenvolvimento das páginas de ranking e a continuação da página postos.

PS - Entenda-se por páginas cada ecrã visível ao utilizador

Actualização do corrente estado do projecto

nelsontaleite — Tue, 28 Jun 2011 12:22:08 GMT

Cá estamos mais uma vez a escrever.

As actualizações de maior relevância são essencialmente duas: a resolução de bugs (e aparecimento de mais alguns) e uma mudança ao nível da interacção na página da timeline.

Vejamos:

Quanto aos comentários, aquele aspecto de não aparecerem os parágrafos devidamente formatados, está corrigido, apenas faltava usar a função nl2br. Ainda nos comentários, desta vez na questão da textarea expansível, que no Chrome não tinha um correcto funcionamento (expandia a cada caractere escrito), está também resolvido, com uma solução extremamente simples: apenas foi trocado o ficheiro .js correspondente a esta funcionalidade.

Agora, a página da timeline sofreu uma mudança. Como entendemos que pode às vezes ser melhor/mais fácil/mais agradável navegar pelo mapa com uma área de mapa grande, damos a possibilidade ao utilizador de expandir ou encolher o mapa. Isto implica fazer desaparecer ou aparecer a sidebar, para dar lugar ao mapa. E como é que isso foi conseguido? Com o nosso grande amigo jQuery, com o plugin animation, que neste caso acontece em duas situações em simultâneo: enquanto a animação do mapa aumenta, acontece a mesma animação na sidebar, mas em sentido inverso. A situação repete-se, mas ao contrário, quando se encolhe o mapa.

Com isto surgiu um, chamemos-lhe assim, um pequeno bug: durante a animação da sidebar a diminuir, o texto lá presente ajustava-se à div, o que dava um efeito esquisito. A solução para isto apenas consistiu em forçar a largura da div, para assim o texto não se ajustar.

Terminado este assunto, havia outra coisa que nos preocupava bastante: o upload de fotos no formato png em runtime html5. Simplesmente não carregava a imagem. Depois de várias tentativas e soluções diferentes nada resultou, até que acrescentamos vários ficheiros .js e para nosso espanto o nosso problema ficou corrigido. Portanto para este problema bastaram acrescentar dois ficheiros que faltavam (os outros que não faziam diferença eliminámos).

E por hoje é tudo!

Leituras 001: Understand The Web por Ben Ward

carlossantos — Thu, 06 May 2010 14:34:31 GMT

"Everything about web architecture; HTTP, HTML, CSS, is designed to serve and render content, but most importantly the web is formed where all of that content is linked together. That is what makes it amazing, and that is what defines it. This purpose and killer application of the web is not even comparable to the application frameworks of any particular operating system.

That’s the kicker. We talk about ‘web applications’, the ‘open web stack’. People are citing HP’s purchase of Palm and investment in WebOS as a victory for the web. We talk about applications built using HTML, CSS and JavaScript in the same breath as content published using HTML semantics.

Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content. Show me that it can be crawled, show me that we can draw strands of silk between the resources presented in your app. That is the web: The beautiful interconnection of navigable content. If your website locks content away in a container, outside the reach of hyperlinks, you’re not building any kind of ‘web’ app. You’re doing something else."

Leitura recomendada em http://benward.me/blog/understand-the-web