Mostrando postagens com marcador Campus Mobile. Mostrar todas as postagens
Mostrando postagens com marcador Campus Mobile. Mostrar todas as postagens

sexta-feira, 30 de março de 2012

Das peripécias de ser tutor

Nenhum comentário:
Há algum tempo atrás, eu disse que tinha começado a implementar um sistema para o Campus Mobile.Embora eu não tenha mencionado, participei, com outras pessoas, também da concepção do programa: formato, regulamento, inscrições, seleção, tutoriais, mini cursos, oficinas e palestras (praticamente tudo, como você pode ver).

Agora, o projeto já está rolando, e sou um dos tutores do programa. Antes do projeto entrar na fase de seleção dos candidatos, era difícil ter ideia de quais seriam as demandas de ser um tutor. Claro que já tínhamos um conjunto de conteúdos para trabalhar, mas ajustes são necessários de acordo com o público. O andamento do projeto, e eu sou responsável por isso, deixa claro: selecionamos cerca de 90 candidatos com projetos diferentes, com formações mais diferentes ainda. E nosso objetivo é dar condições para que cada um se desenvolva.

O grande desafio de ser tutor é o da diversidade. Nós somos responsáveis por orientar vários projetos diferentes dentro de um mesmo cronograma, com participantes de origens e conhecimentos diversos. No caso do Campus Mobile, praticamente tudo isso é feito à distância.

Para mim, estas condições reforçam o papel de orientação dos tutores. Além do fato de não termos nenhuma autoria nos projetos, o compromisso do programa é possibilitar a cada um dos participantes aprimorar seus conhecimentos, é mostrar novas possibilidades, é questionar, é propor alternativas, enfim, é orientar.

quarta-feira, 23 de novembro de 2011

Listas numeradas com sub-tópicos em CSS

2 comentários:

Para fazer listas numeradas com html básico, usamos as tags ol e il. A primeira indica uma lista ordenada e a segunda gera o item da lista propriamente dito.

Se usamos um ambiente ol dentro de outro, teremos uma lista com sub-tópicos. Assim:


  1. item 1
  2. item 2
    1. subitem 1
    2. subitem 2
  3. item 3

O código-fonte para esta lista fica assim:



Em editores de texto, é comum aplicar numeração de acordo com a numeração do tópico principal. Dessa maneira, a numeração dos subitens ficaria 1.1, 1.2, 1.3 e assim por diante. Depois de alguma pesquisa, encontrei um jeito simples de fazer isso usando apenas CSS. Veja como fica:

  1. item 1
  2. item 2
    1. subitem 1
    2. subitem 2
  3. item 3

A compatibilidade de navegadores é ampla. Eu postei essa resposta lá no StackOverflow. Confira o código-fonte (HTML + CSS):



segunda-feira, 26 de setembro de 2011

Menu de navegação horizontal

Nenhum comentário:
Voltei a trabalhar com web nas últimas semanas. Uma coisa que precisei fazer foi um menu horizontal para navegação geral. Há milhares de exemplos disso por aí, mas eu precisava de um pequeno detalhe a mais: uma imagem personalizada para a lista de itens do menu.

Para começo de conversa, as implementações desse tipo de menu usam listas (tag ul e li) com atributos de estilo para tornar a listagem horizontal. Pode ser display: inline ou float: left. O código fica assim:

HTML:



E o CSS para deixar horizontal pode ser:



ou



Aí podemos colocar a imagem para a listagem com o atributo list-style-image e colocando a URL da imagem:



Mas isso só funciona para o float: left, tá?

Agora o pulo do gato: cada navegador coloca um espaçamento diferente do lado esquerdo desta nossa imagem! Qual propriedade ajusta isso? Nenhuma!
Contornei este problema usando esta mesma imagem como fundo do elemento de lista e ajustando o espaçamento do lado esquerdo (padding-left) com o mesmo tamanho da imagem de fundo. O código final ficou assim:



Atualização: coloquei os códigos nos meus Gists do Github para colocar aqui. Temos destaque de sintaxe, agora!