Programação HTML

Programação HTML Este documento descreve como enriquecer seus formulários, visões, etc., com ajuda de elementos de programação. Os formulários, tabelas de observações e visões de uma pesquisa são exibidas pelo servidor sob a forma de páginas HTML geradas automaticamente. É possível adicionar elementos de programação (html, javascript, css) para enriquecer as páginas: 








Enriquecer a tipografia de uma legenda Inserir um vídeo a partir de um site de compartilhamento (YouTube, Dailymotion, ...) Inserir um conteúdo externo (página, site, ...) na página HTML Inserir resultados (tabela de dados ou tabela/gráfico) em um formulário Digitação de um código a partir da lista de códigos associada Digitação de um endereço a partir de um mapa Google Inserir uma página de upload de documentos Aplicações de digitação interativas em Flash Criar um botão permanente de copiar uma observação Esses elementos de programação podem referenciar imagens ou arquivos de dados que deverão ser publicados. Existem 3 possibilidades: 


A partir do gerenciador de contas, usar o botão Complementos para fazer upload de um arquivo. No formulário de trabalho inserir uma legenda xxx associando a ação "Exibir uma página". Indica‐se o nome da imagem ou do arquivo. Todos esses arquivos serão publicados ao mesmo tempo que a pesquisa. É também possível fazer referências diretas às imagens disponíveis em outro servidor indicando sua URL absoluta. Enriquecer uma legenda Enriquecer a tipografia É possível indicar enriquecimentos tipográficos para colocar uma parte em negrito, ou em uma cor ou tamanho diferente. Não existe (na versão atual do Sphinx) um editor integrado. Deve‐se então escrever balizas, usando a seguinte sintaxe: <red>texto em vermelho</red> <blue>texto em azul</blue> <green><b>texto em verde e negrito</b></green> <i>texto em itálico</i> <u>texto sublinhado</u> <font color="#A000A0">texto em uma cor personalizada</font> <font size="+3">o tamanho do texto é 3 pontos superior </font> <font size="‐3"> o tamanho do texto é 3 pontos inferior </font> <u><gray><font size="18">o texto é negrito, sublinhado, tamanho 18</font></gray></u> As palavras chave das cores são: red, blue, green, yellow, magenta, violet, white, pink, orange As balizas html interpretadas são: u,i,b,font (atributos color, size) Inserir links hipertexto É possível inserir um link hipertexto (ou um mailto) em uma legenda de um formulário ou de uma tabela de resultados mas somente quando este for proposto em HTML (e não sob a forma de imagem). Para isto indica‐se que a legenda é uma legenda "html" enquadrando o texto pela baliza <span></span>. Em seguida indica‐se o link hipertexto com a sintaxe html. Exemplos: <a href="http://www.domain.ext/" target="_blank">LINK</a> <a href="mailto:[email protected]">Escrever um email a Toto</a> Inserção de vídeo de um site de compartilhamento (YouTube, Dailymotion, ...) Nos sites de compartilhamento (Daily Motion, You Tube) é possível exportar o código HTML a ser inserido em uma página html para tocar o vídeo. Isto pode ser feito em um formulário ou tabela de resultados. O código abaixo (copiado a partir de Dailymotion), por exemplo, é copiado tal qual em uma legenda. <div><object width="420" height="339"><param name="movie" value="http://www.dailymotion.com/swf/x9tjb7_le‐loup‐reapprenons‐a‐le‐connaitre_animals" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><embed src="http://www.dailymotion.com/swf/x9tjb7_le‐loup‐reapprenons‐a‐le‐connaitre_animals" type="application/x‐shockwave‐flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed></object><br /><b><a href="http://www.dailymotion.com/swf/x9tjb7_le‐loup‐reapprenons‐a‐le‐connaitre_animals">le loup réapprenons à le connaître</a></b><br /><i>par <a href="http://www.dailymotion.com/jymets">jymets</a></i></div> Inserir um conteúdo (página, site, ...) externo na página html Esses conteúdos externos são inseridos sob a forma de código HTML em uma legenda. Atente para o fato de bem começar a terminar o texto por uma baliza, por exemplo <span>. A função não é wysiwyg e em um formulário Windows, vê‐se apenas o código HTML. O código html somente funcionará quando a pesquisa for publicada e o código corretamente interpretado pelo navegador. Incorporado na página <script>openUrl("http://www.....",500,200)</script> 

http://www... : a URL do arquivo a exibir 500, 200: a largura e a altura da área de exibição Janela "popup" <script>openPopup("clique aqui", "http://www.....",500,200)</script> 


Clique aqui: o texto do link http://www... : a url do arquivo a exibir 500,200: a largura e a altura da área de exibição Inserir resultados em um formulário Inserção de uma tabela de dados Em um formulário ou uma tabela de resultados (em html), podemos inserir uma tabela de dados da pesquisa. Usar a função anterior openUrl ou openPopup como uma URL de consulta, ou atalho, por exemplo <script>openUrl("tables.htm",500,200)</script> ou <script>openUrl('tables.htm?sample=csp=[csp.nombre]',500,200,1)</script> Exibirá as respostas das observações tendo a mesma csp que a observação atual. ou <script>openUrl('enquete.hyp?query=table&table=1&frames=0&variables=1;5&sample=csp=[csp.nombre]',
500,200)</script> mostrará as respostas das observações tendo a mesma csp que a observação atual. Digitação de um código a partir da lista de códigos associados Permite digitar uma variável aberta (código ou texto) selecionando o valor em um arquivo no formato texto (não existe limite sobre o tamanho desse arquivo de valores). O arquivo no formato texto deve ser publicado no servidor. A função também permite preencher diversos campos em uma única vez, isto se os campos estiverem presentes no arquivo (o separador deve ser tabulação ou ponto e vírgula). Se digitamos os primeiros caracteres no campo da variável código, a lista se limita automaticamente aos resultados disponíveis. Lista simples <script>openCodesList("v19","sphinxpeople0.txt")</script> 

V19: o nome (no formato Vxx) da variável que conterá o valor escolhido sphinxpeople.txt: o arquivo conterá a lista (Atenção, o arquivo deve estar registrado com código utf‐8) Lista hierárquica <script>openCodesList("v19;v20;v21","sphinxpeople.txt:1;2;4",500,200,true, true)</script> 




V19, V20, V21: as variáveis (sob a forma Vxx) conterão as diferentes colunas do arquivo de dados sphinxpeople.txt:1;2;4: o arquivo contém a lista. Após um caractere : pode‐se especificar, pelos seus números, somente as colunas do arquivo que desejamos exibir 500, 500: a largura e a altura da lista true: as listas drop‐down de filtros não serão exibidas true: a filtragem é associada (a lista é vazia se não selecionarmos valores na lista drop‐down do filtro) Digitação de um endereço a partir de um mapa Google <script>openGMap("V1","V2","v3","Grenoble",500,500,13,"V4",1)</script> 
V1,V2,V3: os nomes (na forma Vxx) das variáveis que conterão respectivamente o endereço, o código postal e a cidade 




Grenoble: um endereço, uma cidade ou um país sobre o qual o mapa será por default centralizado 500,500: a largura e a altura do mapa 13: o nível de zoom exibido por default (entre 1 e 16) V4: opcionalmente uma variável que conterá as coordenadas do ponto escolhido 1: 1 ou 0 para exibir ao inicializar o mapa (1) ou um botão "abrir" (0) Upload de documentos Inserção no formulário É possível, em um formulário, propor o upload de um ou diversos documentos. Deve‐se para tal, inserir o html a seguir: <script>showUpload("[identificateur]",600,100,"name=photo&ext=jpg;png;gif&mode=mini")</script> 





[identificateur]: este primeiro parâmetro define o nome do diretório no qual serão registrados os arquivos desta observação, você pode utilizar qualquer variável da pesquisa indicando‐a entre colchetes: [nomvariable] (atenção: escolher corretamente uma variável cujos valores serão únicos...) 600,100: a largura e a altura da interface de upload (em modo normal: largura mínima = 600 e altura mínima = 370, em modo mini: largura min. = 550 e altura min. = 75) name=photo (o arquivo assumirá o nome indicado) ou prefix=cv‐ (o arquivo inicia por cv‐) ext=jpg;png;gif as extensões de arquivos autorizadas mode=mini: (opcional) este parâmetro permite usar um modo de exibição mínimo nodel=1: (opcional) este parâmetro retira a possibilidade de excluir os arquivos uploadados Consulta por respondente Para exibir ao respondente os arquivos uploadados, inserimos a seguinte legenda "html": <script>showUpload("[identificateur]",700,300,"consult=1")</script> 


[identificateur]: este parâmetro corresponde aquele que foi utilizado para o upload de arquivos que desejamos consultar 700,300: a largura e a altura da interface de upload (largura min. = 600 e altura min. = 270) consult=1: exibe a consulta de arquivos uploadados Consulta pelo responsável da pesquisa Você pode consultar os arquivos uploadados quando você acessar a pesquisa a partir de sua conta, seja via o botão "Docs uploadados", seja via o link "uploads.htm" na parte "Resultados". Atenção: se o acesso aos dados é protegido por uma senha, a página "uploads.htm" não funciona diretamente. Para que ela funcione deve‐se adicionar um parâmetro na URL como este: "uploads.htm?pwd=XXX" (onde XXX é a senha). Gestão do tempo de digitação e da progressão Limitar o tempo total de digitação Você pode inserir em seu formulário um timer indicando tempo de digitação e ou limitação deste tempo de digitação (funcionalidade interessante para um questionário do tipo Quiz). Para adicionar um timer como esse, marque a casa "Indicar o tempo decorrido" nas propriedades do formulário, aba "Internet". O timer aparecerá ao lado da barra de comandos do questionário. Para limitar o tempo de digitação, marcar a casa "Limitar o tempo de digitação" e indicar o tempo limite em segundos. No momento do acesso ao questionário, e ao final do tempo de validade do timer, o questionário é gravado. O respondente é então redirecionado para o final de digitação ou para uma outra URL definida inicialmente. Limitar o tempo de digitação para uma página específica do formulário É possível limitar o tempo de digitação de uma tela específica, com ajuda de uma legenda html cuja sintaxe é: <script>submitTimerPage('{"time": 10}')</script> O tempo de carregamento é de 10 seg e o tempo restante é exibido. Opções adicionais permitem ocultar o cronômetro: <script>submitTimerPage('{"time": 10, "timeShow": false}')</script> ou exibi‐lo na barra de navegação: <script>submitTimerPage('{"time": 10, "position":"navbar"}')</script> Exibir um cronômetro Para exibir um cronômetro, utiliza‐se uma legenda "html". Reinicializando em zero a cada troca de página: <script>submitTimerPage('{"chrono": true}')</script> Sem reincializar (duração total desde o início da digitação): <script>submitTimerPage('{""chrono": true, "totaltime": true}')</script> Exibir uma barra de progressão Para exibir uma barra de progressão informando o respondente do avanço no questionário, utiliza‐se uma legenda html com a seguinte sintaxe: <script>displayProgressBar();</script> Para que esta barra de progressão apareça em todas as páginas, deve‐se defini‐la como máscara. Pode‐se mudra a cor (BLUE, PURPLE, GREEN e GREY) e a forma (CB01, CB02, CB03, CB04 et CB05) da barra com a sintaxe: <script>displayProgressBar("BLUE_CB01");</script> Aplicações de digitação interativa com Flash Inserção de uma aplicação Flash "vira‐página" <script>openPageFlip('v1','flip.xml',250,240)</script> 



V1: o nome (no formato Vxx) da variável texto que conterá os números das imagens escolhidas flip.xml: o arquivo que contém a descrição das imagens (ou animações) que aparecerão no vira‐
página 250: largura do vira‐página 240: altura do vira‐página que deve corresponder à altura da maior imagem ou animação Sintaxe do arquivo xml <content hcover="false" transparency="true"> <page src="pf1.jpg"/> <page src="pf2.jpg"/> <page src="pf3.jpg"/> </content> Inserção de uma aplicação Flash "Prateleira scrolling" <script>openBookShelf('v22','shelf.xml',3,610,260)</script> 


V22: o nome (no formato Vxx) da variável texto que conterá os números das imagens escolhidas shelf.xml : o arquivo que contém a descrição das imagens que posicionadas na prateleira 3: quantidade maxima de elementos que se pode selecionar 
610,360: largura e altura da aplicação flash Sintaxe do arquivo xml <content nbmax="3" coche="coche.png"> <page src="img1.jpg"/> <page src="img2.jpg"/> <page src="img3.jpg"/> <page src="img4.jpg"/> </content> Inserção de uma aplicação Flash "Clique imagens" <script>openImgClick("V23","clic.xml",554,400)</script> 


V23: o nome (no formato Vxx) da variável texto que conterá as coordenadas (x/y) dos pontos clicados clic.xml: o arquivo descreve os elementos de aplicação (fundo, logo, qt max de cliques) 554,400: largura e altura da aplicação flash Sintaxe do arquivo xml <content nbmax="10" > <background src="fond.jpg"/> <logo src="coche.png"/> </content> Inserção de uma aplicação Flash "Áreas sensíveis" <script>openShapes("V24","shapes.xml",554,400)</script> 


V24: o nome (no formato Vxx) da variável texto que conterá os números das áreas clicadas shapes.xml: neste arquivo xml é indicada a imagem de fundo e os polígonos clicáveis (especificando para cada um uma cor) 554,400: largura e altura da aplicação flash Sintaxe do arquivo xml <content bgimage="test.jpg" nbmax="3"> <shape color="00AAFF" borderColor="00FF00" name="test1" alpha="0.2">10,10,50,10,50,50,10,50</shape> <shape color="00AAFF" borderColor="00FF00" name="test2" selectIni="false" alpha="0.2">100,100,100,200,200,200,200,100</shape> <shape color="00AAFF" borderColor="00FF00" name="test3" selectIni="false" alpha="0.2">300,300,250,350,300,350</shape> ........... </content> Construir um polígono É difícil construir esses polígonos diretamente editando o arquivo xml. Sphinx propõe uma pequena ferramenta que permite desenha essas formas e depois copiar/colar o xml correspondente: http://www.ergole.fr/_templates/drawshapes.htm Inserção de uma aplicação Flash "Drag ‘n Drop" Esta aplicação permite realizar associações, por exemplo em um caso de quiz. <script>openDragnDrop("v25",'dragndrop.xml',610,260)</script> 


V25: o nome (no formato Vxx) da variável texto que conterá o resultado do drag 'n drop. dragndrop.xml: o arquivo que contém a descrição da aplicação: os elementos a dispor (imagem ou texto), a imagem de fundo e as coordenadas dos alvos. 610,360: largura e altura da aplicação flash Sintaxe do arquivo xml <content img="fondpubs.jpg"> <token src="j.jpg" name="Johnny" label="Johnny Halliday"/> <token src="l.jpg" name="Laporte" label="Bernard Laporte"/> <token src="z.jpg" name="Zidane" label="Zinédine Zidane"/> <token src="c.jpg" name="Clooney" label="George Clooney"/> <target x="617" y="273" name="Optic2000"/> <target x="339" y="54" name="Madrange"/> <target x="711" y="47" name="Danone"/> <target x="119" y="239" name="Nespresso"/> </content> Afetar/aplicar variáveis Sphinx a partir de uma função JavaScript Para identificar uma variável Sphinx em um formulário JavaScript, basta conhecer o número da variável, e recuperar seu valor utilizando a função getInput(champ), onde "champ" vale "v23" por exemplo se a variável interrogada é a 23. Se a variável não existe no momento da chamada da função, ela retorna ‐1. Para afetar/aplicar um valor a uma variável Sphinx, você pode utilizar a função setInput(champ, value). Exemplo: Considere uma variável Sphinx (v1) contendo o Referrer, ou seja a URL a partir da qual foi chamado o formulário Sphinx. Para afetar/aplicar esta variável em JavaScript, basta inserir uma legenda em seu formulário contendo o texto seguinte: <script>setInput("v1",document.referrer);</script>. Esta baliza script será diretamente interpretada pelo servidor, que afetará então a variável "v1". Uso de cookies É possível manipular cookies. Para isto, duas funções principais estão a sua disposição. Veremos o uso das funções no quadro de um exemplo. Ex: Desejamos definir um cookie contendo a data da última digitação para reler posteriormente quando o cliente acessar um novo questionário Sphinx. No primeiro questionário, criamos um novo formulário de retorno após a gravação da observação. Neste formulário, escrevemos o seguinte código em uma legenda: <script>setCookie ("dernieresaisie", getInput("v25"));</script> onde "dernieresaisie" é o nome dado ao cookie e "v25" corresponde à variável contendo a data da digitação. A função setCookie é escrita sob o formato setCookie (name, value). Em um novo questionário, desejamos recuperar a data da última digitação do respondente verificando e registrando o valor do cookie "dernieresaisie" (se ele existe) em uma variável específica da pesquisa. Para isto, no formulário de digitação deste novo questionário, escrevemos o código seguinte em uma legenda: <script>setInput("v1", getCookie("dernieresaisie"));</script> onde "dernieresaisie" é o nome do cookie que procuramos. Se o cookie existe, então o código afetará a variável "v1" com a data da última digitação. A função getCookie assume um parâmetro, que é o nome de um cookie procurado, e se escreve no formato getCookie (name). Chamar um script externo É possível, durante a digitação, chmar uma aplicação externa a fim de modificar dinamicamente as variáveis. Em um botão de ação (ir para a página x, página seguinte, ...), é possível definir um "chamada a um script externo". Este script receberá os valores presentes no formulário e retornará novos valores. A sintaxe é: URL no formato: http://appli/script.aspx?var1=[var1]&var2=[var2] Os textos entre colchetes serão substituídos por valores da observação antes da chamada ao script. O retorno deve ser no formato: OK &var3=XXX. A variável var3 será atualizada no formulário. Se a aplicação deseja retornar uma mensagem de erro ou advertência, o retorno deverá ser a mensagem que será exibida pelo servidor em um alerta. Recopiar uma observação É possível retomar valores a partir de uma outra observação chamando um script externo. Indica‐se a variável identificando as observações a as variáveis a retomar. Se nenhuma observação corresponde, uma mensagem de advertência é exibida A sintaxe desse script externo é a seguinte: http://www.sphinxonline.com/comptes/retrievedata.ashx?&a=compte&s=enquete&login=xxx&var=identifi
ant&val=[identifiant]&retvars=2;3;8‐20;25&ind=0&lang=[enquete.langue] 







a=compte: nome da conta s=enquete: nome da pesquisa (ou diversas pesquisas separadas por ponto e vírgulas) login=xxx: senha de acesso aos dados var=identifiant: nome da variável identificando as observações val=[identifiant]: valor da variável identificando as observações retvars=2;3;8‐20;25 lista dos números das variáveis a retomar com a sintaxe 2;3;8‐20;25 ind=0 (opcional) se diversas observações correspondem retém‐se a última (0) ou a primeira (1) lang=[enquete.langue] (opcional) se a pesquisa é multilíngua