Material excelente em forma de série que mostra todo o desenvolvimento de uma Aplicação Web, desde a idéia no papel até a implementação final, utilizando conceitos, técnicas e ferramentas modernas, como:

• Linguagem: PHP
• Programação Orientada a Objeto, com o conceito de programação DRY em mente (“Don’t Repeat Yourself”).
• Implementação de segurança do lado do cliente e do servidor
• Utilização de PHP Data Objects (PDO), como forma de garantir a segurança do Banco de Dados.
• Uso de strip_tags (), para evitar que o usuário armazene dados maliciosos no Banco de Dados.
• Compactação de bibliotecas JavaScripts, para carregamento mais rápido da aplicação.
• e muito mais…

Com certeza um material que deve ser analisado por todos.

Navegação nos tópicos da série:

• Parte 1 Planejamento da Aplicação: idéia básica e Design
• Parte 2 – Planejamento da Aplicação: Arquitetura de banco de dados e Abordagem de Desenvolvimento
• Parte 3 – Criando a Aplicação: Mapa de Fluxo de Trabalho e Design no Photoshop
• Parte 4 – Projetando a Aplicação: HTML e CSS
• Parte 5 – Desenvolvendo a Aplicação: Interação com o usuário
• Parte 6 – Desenvolvendo a Aplicação: Adicionando Interatividade AJAX
• Parte 7 – Desenvolvendo a Aplicação: Lista de Interações (mostrar, salvar, reordenar, mudar cores, delete…)
• Parte 8 – Segurança e o futuro da aplicação
• Parte 9 – Bugs, mais segurança e outros ajustes…
• E finalmente …. aplicação! listas coloridas

Link oficial: WebAppFromScratch
Outro legal: http://www.phpro.org/tutorials/Creating-A-PHP-Application.html

Se você estiver fazendo um projeto que não seja restrito apenas à Intranet, é aconselhável fazer uso da biblioteca Jquery diretamente dos repositórios do gooogle, pois eles hospedam as principais bibliotecas javascript e se encarregam das atualizações.

Você faz isso utilizando o google.load para carregar a biblioteca jquery.

A única observação é que ao usar o noconflict do jquery, tem que fazer isso em uma tag script separado, caso contrário não vai funcionar, assim ó:

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1.3.2");
</script>
<script>
  jQuery.noConflict();
</script>

autoResize é um plugin para JQuery quer permite colocar a opção de auto-escalonamento em campos de texto (textarea), se acordo com seu conteúdo, de forma que não é mostrado a famosa barra de scroll.

Como usar este Plugin

Para utilizar este plugin, é necessário baixar as bibliotecas:  jquery.js, autoresize.jquery.js, e então chama-las em nosso header:

O passo seguinte é criar nosso formulário com elementos do tipo textarea e não esquecer de atribuir a cada campo um ID, para que possamos posteriormente aplicar o método de autoresize.

Finalmente selecionamos o elemento com o ID que queremos aplicar o método, isso é simples de se fazer, basta colocar a chamada ao evento ready do JQuery:

Pode-se ver um exemplo funcionando bem ocmo algumas propriedades adicionais diretamente no site do plugin: http://james.padolsey.com/

Este é um trabalho com mais de três anos realizado por Jelle de Bruin, co-fundador da appappeal.

A appappeal é um directório de web based application.

Confira: http://www.noupe.com/

Agora não tem mais desculpa, fazer menus profissionais em CSS ficou moleza. IzzyMenu.com é site no puro estilo web 2,0 com uma impressionante interface AJAX, que ajuda a criar rapidamente menus de navegação em CSS.

A ferramenta possibilita personalizar uma série de opções, como o tipo de menu (vertical e/ou horizontal) dimensões, cor do fundo, márgem, cor do texto e muitas outras opções… no final você pode fazer o download do menu criado. Muito bom…

Link: http://www.izzymenu.com/

Muitos dos serviços Web 2.0 que utilizamos hoje são mantidos por grandes empresas e muitas vezes nem ficamos sabendo disso.  O site Mydigimedia.com, mantém uma lista atualizada constantemente sobre quem possui o quê no mundo 2.0.

Algo que se pode notar da compilação desses serviços é que  enquanto muitas empresas estão pensando se devem ou não permitir que os visitantes postem comentários em seus sites, outas estão se movendo em grande velocidade à frente, com  diferentes modelos de negócios, ou seja, estão pensando globalmente: agregador de pesquisa +  conteúdo móvel + jogos = sustentabilidade.

Confira a lista: http://www.mydigimedia.com/WhoOwns.html

Estilos e desenho de formulários

• Form Assembly
• Uni Form
• CSS-Only, Table-less Forms
• Tableless Forms
• A form with style
• Niceforms 1.0
• Fancy Form
• Styling form controls with CSS, revisited
• Showing Good Form
• Styling the Button Element with Sliding Doors

Usabilidade e acessessibilidade.

• Prettier Accessible Forms
• Check it, don’t select it
• Sensible Forms

Ajax para formulários

• AJAX Contact Form
• AutoSuggest: An AJAX auto-complete text field
• FancyUpload using Mootools
• jQuery Form Plugin
• Cforms

Validação de Formulários

• Really Easy Field validation with Prototype
• Live Validation
• Ajax form validation
• fValidator

Sugestão nos campos

• Validation Hints for your form
• Form Help without Popups

Campos ocultos

• Trimming form fields

Dicas para criar formulários

• Tips For Creating Great Web Forms
• Simple Tricks for More Usable Forms

Exemplos e soluções para formulários

• DOM Javascript Slider Bar
• Masked Input Plugin
• Ajax Contact Form + YUI
• A CSS-based Form Template
• Pretty Forms
• AJAX CAPTCHA
• Anchor Layout with Forms
• Ext File Upload Form Widget Example
• Control.TextArea- Prototype
• Instant Edit
• AJAX Check Username
• AJAX chained select

Geradores de Formulários

• Wufoo Form Builder
• Web Form Factory
• Jot Form
• Form Assembly

Os produtos tem tags, comentários dos usuário. Existem até ranking dos produtos mais vendidos. imperdível!

Click here to view the embedded video.