Criar páginas web – Design HTML com o StyleVision

O ritmo acelerado do ambiente empresarial atual significa que a informação – juntamente com o formato em que é necessária – muda frequentemente. Embora algumas páginas web contenham conteúdo que não muda com frequência (por exemplo, páginas "Sobre nós" e de indicações), a maioria dos websites empresariais atuais são continuamente atualizados com novos dados. Por esta razão, muitas organizações optam por armazenar o conteúdo web em XML. Isto permite que as organizações desenvolvam conteúdo de forma altamente eficiente, uma vez que a informação no ficheiro XML pode ser utilizada para múltiplos fins e em diversos formatos de saída. O esquema XML associado ao ficheiro XML descreve o modelo de conteúdo. O StyleVision é um poderoso editor de folhas de estilo e de relatórios que pode ajudar a aproveitar ao máximo o XML. O StyleVision permite-lhe criar páginas web com formatação sofisticada, num ambiente de design baseado em modelos e com arrastar e soltar. O StyleVision gera automaticamente folhas de estilo XSLT, para que possa integrar o seu design num novo site ou num site existente. Pode até gerar aplicações web ASPX diretamente a partir do menu Ficheiro.

Neste artigo, vamos criar uma página web que demonstrará algumas das capacidades de formatação HTML do StyleVision. Embora as funcionalidades de formatação integradas do StyleVision permitam criar designs sofisticados através de simples operações de arrastar e soltar, neste exemplo, utilizaremos CSS3, imagens e outros elementos de design padrão para criar uma página web que não precise de ser reformulada quando o conteúdo for alterado.

O nosso primeiro design StyleVision era extremamente simples.

Como podem ver na janela "Árvore de Esquemas" abaixo, o esquema XML de origem foi concebido de forma que o XML possa ser publicado em formato de livro, e inclui uma visão geral, títulos de capítulos, subtítulos de capítulos e conteúdo. Simplesmente arrastámos os elementos correspondentes a estas secções para a janela de design.

Como podem ver abaixo, o conteúdo XML é exibido corretamente – e não tivemos de escrever nenhum código XSLT ou HTML manualmente para conseguir isso. No entanto, precisa de uma formatação visual antes de podermos publicá-lo como uma página web.

Embora praticamente todos os elementos de design possam ser formatados nas janelas de Estilos e Propriedades na interface do StyleVision, neste caso, vamos utilizar um ficheiro CSS para aplicar a formatação. Desta forma, se quisermos alterar a formatação, podemos simplesmente indicar um novo ficheiro CSS no XSLT, em vez de fazer alterações no próprio design.

Utilizaremos o XMLSpy, um produto da Altova Editor XML com funcionalidades integradas de edição e criação de CSS2 e CSS3, para criar os nossos estilos CSS.

A captura de ecrã abaixo mostra uma parte do ficheiro CSS que criámos no XMLSpy e inclui as propriedades para os cabeçalhos h1, h2 e h3. Definiremos estes elementos aqui, no ficheiro CSS. Em seguida, atribuiremos estes elementos aos elementos do nosso ficheiro XML no StyleVision.

Note que incluímos as propriedades CSS3 "box-shadow" no elemento "h1" e "box-sizing" no elemento "h3" – tanto o XMLSpy como o StyleVision suportam HTML5 e CSS3.

Depois de criarmos o nosso ficheiro CSS, regressaremos ao StyleVision e atribuiremos esse ficheiro ao design que criámos. Para atribuir um ficheiro CSS a um design do StyleVision, basta clicar no link "adicionar novo ficheiro CSS" na visão geral do design e navegar até ao ficheiro.

Por favor, note que um design StyleVision pode suportar vários ficheiros CSS. Recentemente, publicámos um artigo no nosso blogue sobre como.. Atribuir dinamicamente ficheiros CSS a um design StyleVision. Agora podemos começar a atribuir os seletores que criámos no nosso ficheiro CSS aos elementos do nosso design. Começaremos com o título do capítulo. Selecionaremos o espaço reservado para o conteúdo do elemento do título do capítulo e escolheremos a opção "h1" na caixa de opções da barra de menu.

No nosso ficheiro CSS, definimos a fonte, o tamanho da fonte, a cor e o alinhamento para os elementos h1. Também utilizamos a propriedade "box-shadow" do CSS3.

A seguir, apresentamos a visualização HTML do nosso design, onde o seletor "h1" foi atribuído ao elemento de título do capítulo.

Da mesma forma, vamos atribuir os seletores "h2" e "h3" aos elementos de título principal e subtítulo dos capítulos, respetivamente. O nosso design tem agora esta aparência.

A visualização em HTML aparece abaixo. Note que utilizamos a propriedade "box-sizing" do CSS3 para posicionar os subtítulos ("Criar resultados impactantes" e "Design de folhas de estilo visuais") e para ajustar o texto à volta deles.

Finalmente, vamos adicionar uma imagem na parte inferior da página, utilizando um atributo chamado "coverimage" proveniente do ficheiro XML de origem (mostrado abaixo).

Para adicionar a imagem ao nosso design, basta arrastar o elemento "coverimage" da Árvore de Esquema para a Janela de Design e selecionar "Criar Imagem". Isto abrirá a caixa de diálogo "Inserir Imagem". Em seguida, vamos para a aba "Dinâmico", clicamos no botão "Editar XPath" e selecionamos o elemento "cover image" da Árvore de Esquema.

A caixa de diálogo "Inserir Imagem" aparece abaixo.

Também adicionámos alguma formatação para imagens no nosso ficheiro CSS, utilizando a propriedade border-radius do CSS3, que adiciona cantos arredondados a um elemento.

A secção do nosso ficheiro CSS que define o formato das imagens é apresentada abaixo – esta visualização é do programa XMLSpy.

Além das técnicas de formatação que utilizamos aqui, poderíamos também adicionar funcionalidades mais avançadas usando funções JavaScript, modelos condicionais, cálculos automáticos e muito mais – mas, para os fins deste exemplo, vamos manter as coisas simples.

O nosso design está agora pronto para ser utilizado – a visualização em HTML está representada na imagem abaixo.

[Imagem removida devido à impossibilidade de processamento de URLs externas.]

Agora que estamos satisfeitos com o design, podemos guardar a folha de estilos XSLT gerada automaticamente através do menu "Ficheiro".

Podemos também gerar uma aplicação web ASPX para este design, selecionando a opção "Design Web" que se encontra imediatamente abaixo de "Guardar Ficheiros Gerados". Podemos escolher gerar código HTML 4 ou HTML 5, e até mesmo selecionar a compatibilidade com o Internet Explorer na caixa de diálogo "Propriedades" (que também pode ser acedida através do menu "Ficheiro").

Melhor ainda, se os dados de origem forem alterados, essas alterações serão automaticamente refletidas no resultado HTML.

Se adicionarmos novo conteúdo ao nosso ficheiro XML, por exemplo, este será formatado de forma semelhante ao conteúdo original, e todos os elementos de design aparecerão na relação correta entre si – não será necessário reescrever o código HTML.

Neste caso, adicionámos um novo título de secção e o conteúdo associado ao ficheiro XML subjacente e visualizámos o resultado em HTML.

Como podem ver, o StyleVision oferece o melhor de ambos os mundos: permite criar um único modelo HTML, universal e adaptável, com capacidades de formatação dinâmica. Com o controlo total de formatação que o StyleVision oferece, podem criar páginas web e aplicações ASPX que refletem a vossa visão.