Produção de Suportes Midiáticos

13 de junho de 2015

Fontes em CSS

Por meio de códigos de CSS é possível configurar uma série de efeitos num texto. A estilização de fontes é uma forma para dar destaque a um elemento, como o nome do site que pode se transformar numa espécie de logotipo. É conveniente não abusar destes efeitos, porém, numa medida adequada, podem valorizar uma página. As codificações mostradas abaixo devem ser colocadas na área de inserção de CSS do site (alguns dos templates possuem zonas para isso ou há a possibilidade de usar plugin). No caso de elementos “internos” do site (cabeçalho, título de postagem, etc.), é necessário alterar o código da página para inserir o efeito (posso ensinar quem quiser fazer isso). Porém, no caso de um texto em uma página ou postagem, basta marcar o efeito, a partir das codificações <div class=”EFEITO“>elemento marcado</div>.

Sombra

Sombra com CSS

Para entender os valores da codificação vale a pena ver a figura ao lado, que mostra os valores de deslocamento nos eixos x e y, assim como o do desfoque (sombra), em pixels, e a cor deste (qualquer formato).

Source code

.sombra {
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
font: 4em Fjalla One
}

3D

Texto em 3d

Source code

.trez {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
font: 4.5em Fjalla One;
}

Prof

Texto com profundidade

Source code

.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal normal 900 70px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(32, 44, 45);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(128,141,147) , -1px 0 0 rgb(205,210,213) , -1px 2px 0 rgb(128,141,147) , -2px 1px 0 rgb(205,210,213) , -2px 3px 0 rgb(128,141,147) , -3px 2px 0 rgb(205,210,213) , -3px 4px 0 rgb(128,141,147) , -4px 3px 0 rgb(205,210,213) , -4px 5px 0 rgb(128,141,147) , -5px 4px 0 rgb(205,210,213) , -5px 6px 0 rgb(128,141,147) , -6px 5px 0 rgb(205,210,213) , -6px 7px 0 rgb(128,141,147) , -7px 6px 0 rgb(205,210,213) , -7px 8px 0 rgb(128,141,147) , -8px 7px 0 rgb(205,210,213) ;
}

Inset

Source code

.inset {
text-shadow: 0px 2px 3px #666;
font: 6em Fjalla One;
background: #505050;
padding: 50px 50px;
}

An

Anaglyph

Source code

.anaglyph {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font: normal 60px/normal "Fjalla One", Helvetica, sans-serif;
color: rgb(51, 51, 51);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
letter-spacing: 3px;
text-shadow: -3px 0 1px rgb(30,242,241) , 3px 0 1px rgb(246,5,10) ;
}

Transp

Texto com transparência

Source code

.textblur {
z-index: 5;
font: 5em Fjalla One;
color: transparent;
-webkit-text-stroke: 6px rgba(255,255,255,0.05);
text-shadow: rgba(245,245,255,0.35) 0 0px 0px,
rgba(0,0,30,0.1) 0px 0.04em 0.02em;
background: -webkit-linear-gradient(-90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.3) 50%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,.3) 100%,
),
-webkit-background-clip: textblur;
}

Rot

Texto com rotação

Source code

.rot {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 20px;
overflow: hidden;
border: none;
font: normal 52px/1 "Fjalla One", Helvetica, sans-serif;
color: rgba(255,0,0,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
transform: rotateX(-5.729577951308233deg) rotateY(9.167324722093172deg) rotateZ(-5.156620156177409deg) ;
}

Neon

Texto com efeito Neon

Source code

.neon {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 80px;
margin-top: 30px;
border: none;
font: normal 48px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
background: #000000
}
.neon:hover {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ffff , 0 0 70px #00ffff , 0 0 80px #00ffff , 0 0 100px #00ffff ;
margin-top: 30px;
background: #000000
}

Stroke

Stroke com transição

Source code

.stroke {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 0 #2ecc71 , -1px -1px 0 #2ecc71 , 1px -1px 0 #2ecc71 , -1px 1px 0 #2ecc71 ;
-webkit-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 500ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}
.stroke:hover {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: pointer;
opacity: 1;
margin: 0;
padding: 0;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
font: normal normal bold 80px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 1px 1px 8px rgba(46,204,113,0.5) , -1px -1px 8px rgba(46,204,113,0.5) , 1px -1px 8px rgba(46,204,113,0.5) , -1px 1px 8px rgba(46,204,113,0.5) ;
-webkit-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
transition: text-shadow 250ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
}

3D-T

Efeito 3D com transição

Source code

.novotres {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal 72px/normal "Fjalla One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 1px 0 rgb(204,204,204) , 0 2px 0 rgb(201,201,201) , 0 3px 0 rgb(187,187,187) , 0 4px 0 rgb(185,185,185) , 0 5px 0 rgb(170,170,170) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 5px 10px rgba(0,0,0,0.247059) , 0 10px 10px rgba(0,0,0,0.2) , 0 20px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.novotres:hover {
color: rgba(169,214,169,1);
text-shadow: 0 1px 0 rgba(255,255,255,1) , 0 2px 0 rgba(255,255,255,1) , 0 3px 0 rgba(255,255,255,1) , 0 4px 0 rgba(255,255,255,1) , 0 5px 0 rgba(255,255,255,1) , 0 6px 1px rgba(0,0,0,0.0980392) , 0 0 5px rgba(0,0,0,0.0980392) , 0 1px 3px rgba(0,0,0,0.298039) , 0 3px 5px rgba(0,0,0,0.2) , 0 -5px 10px rgba(0,0,0,0.247059) , 0 -7px 10px rgba(0,0,0,0.2) , 0 -15px 20px rgba(0,0,0,0.14902) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

Ref

Muitos sites possuem tutoriais para a feitura de efeitos. Recomenda-se que sejam estudadas instruções deste tipo de anos mais recentes, já que os desenvolvimentos nos códigos e navegadores geralmente simplifica a sintaxe do estilo. Os materiais de referência para a montagem desta compilação foram:

Porém, talvez o melhor site para o desenvolvedor iniciante seja o EnjoyCSS que, a partir de uma série de modelos, permite que se elaborem muitos elementos com estilo CSS. A criação de conta é opcional, neste serviço. É necessário copiar o código e depois colocá-lo no WP, como estilo CSS, para o seu uso.

É interessante notar ainda que alguns dos efeitos possuem “estados”, quer dizer, alteram-se se o usuário coloca o mouse sobre o texto. É muito melhor usar texto estilizado — que continua a ser um texto e por isso é lido pelos buscadores e pode ser selecionado pelo leitor — do que utilizar imagens de textos.

Posted in: Artigo

Tags: CSS, Estilo, HTML

31 de maio de 2015

O artigo de opinião

By Richard Romancini

O “artigo de opinião”, na essência, pertence ao gênero textual argumentativo. Embora o trabalho deste tipo solicitado como exercício de curso tenha principalmente o sentido de perceber a capacidade do estudante relacionar conteúdos da matéria, aproveitá-los numa reflexão que diga respeito à atualidade, vale a pena dar algumas recomendações e sugestões quanto à forma.

Quando pensando em termos mais jornalísticos, o “artigo de opinião” exige um gancho, isto é, uma ancoragem na atualidade ou contexto conhecido pelo leitor que dê justificativa à leitura e ao próprio texto. O gancho pode envolver uma efeméride, um evento recente ou que pode ocorrer em breve, bem como, ainda, algo que se relacione, mesmo que de maneira menos explícita, com o tema do artigo. O tema, por sua vez, é o assunto principal, aquilo que se quer discutir. Vejamos esses dois exemplos:

Precisamos falar sobre “trigger warning”

By Richard Romancini

O chamado trigger warning tem provocado bastante debate na educação superior dos Estados Unidos. Não é surpresa, a ideia é polêmica e sujeita a controvérsias. Para alguns críticos, trata-se de uma nova roupagem do “politicamente correto” nos campi. Para os defensores, é somente uma atualização das práticas pedagógicas ao tempo atual. Embora o trigger warning seja um fenômeno típico dos EUA e do contexto anglo-saxão (como a ferramenta que permite verificar buscas feitas no Google deixa claro – aqui), de certo modo, surge também no Brasil.

Mas, afinal, o que é trigger warning? A expressão é de difícil tradução. Em inglês, “trigger” significa, com valor de substantivo, o “gatilho” de uma arma, e como verbo a causa de algo, o que desencadeia alguma coisa. Por sua vez, “warning” remete às palavras “aviso”, “alarme”, “advertência” e “precaução”. Uma boa definição descritiva para o termo é dada por Jeet Heer (num artigo para a revista New Republic): “rótulos de advertência nos currículos e planos de curso com alerta aos estudantes de que o material pode evocar memórias dolorosas”.

Criação de infográficos

By Richard Romancini

cididig
Os infográficos têm se tornado uma forma de comunicação bastante popular em materiais que envolvem a educação, tanto impressos, quanto na web (inclusive em cursos no formato EAD). As características e os tipos de infográficos são bastante variados, no entanto, possuem a ideia geral de sintetizar informações, apresentadas graficamente. Alguns defendem que os conteúdos que utilizam imagens são mais facilmente retidos pelos receptores – caso deste interessante infográfico em HTML5. Aliás, uma tendência crescente é a feitura de infográficos com características de multimídia ou interativas, neste caso, demandando maior participação do leitor. Dentro da variedade de possíveis infográficos, é possível destacar certos tipos:

Linha do tempo, indicando a evolução cronológica relacionada com eventos, produtos, etc. (ex.: The Darwinian Evolution of Graphic Design, A Time-Lapse Map of Every Nuclear Explosion Since 1945 – infográfico em vídeo);
Comparativo, contrastando características de um conceito, objeto, etc. (ex.: Serif vs. Sans – The Final Battle);
Descritivo/explicativo, arrolando aspectos que caracterizam algo, explicitando seu significado e/ou mostrando como fazer alguma coisa (ex.: What means Creative Commons, Is a Flipped Classroom Right for You?);
Mapa mental, assemelhado a este tipo de representação, pode indicar dimensões de um conceito ou de alguma coisa, bem como explicitar as relações existentes entre blocos informativos e ideias (ex.: Best practices for creating advanced mind maps, Joomla to WordPress Migration);
Informativo, compila informações, inclusive estatísticas, sobre alguma coisa (ex.: Things that Happen on Internet Every Sixty Seconds).

Entre os serviços online de criação de infográficos estão: Easelly, Piktochart, Visually e Thinglink (permite a adição de multimídia nos trabalhos).

Posted in: Artigo

Tags: Infográfico

2 de maio de 2015

Criação de Nuvem de Palavras

By Richard Romancini

A criação de uma nuvem de palavras (ou tags) pode ser particularmente útil quando se quer ilustrar um texto, mas não se tem imagens. Com um pouco de criatividade, as nuvens de palavras podem ser utilizadas para elaborar ilustrações. Provavelmente o site mais popular para criar nuvens de palavras é o Wordle, sendo que esta ação é bastante simples e o Wordle permite fazer alterações na nuvem criada. Este elemento pode ser também utilizado como ferramenta pedagógica, abaixo, uma apresentação (em inglês) com sugestões para tanto.

Posted in: Artigo

Tags: Wordle

2 de maio de 2015

Criação de Flyer

By Richard Romancini

É possível criar flyers, que sejam incorporados num site, como acima, em serviços como o Smore. Outra opção quanto a este tipo de elemento é a sua inserção como imagem num espaço digital, conforme é mostrado depois do “leia mais”.

Plugin WP: linha do tempo

By Richard Romancini

Linhas do tempo são uma forma interessante de mostrar informação, ao longo do tempo, sobre determinado assunto. O site Timeline JS ajuda a produzir esse elemento, como no exemplo acima. É possível (mas não indispensável) também instalar um plugin (aqui) para a inserção da linha do tempo no WP.

Posted in: Artigo

Tags: Linha do tempo, Plugin, WP

1 de maio de 2015

Plugin WP: legenda em vídeo

By Richard Romancini

Um serviço bastante útil para legendar vídeos é o Amara. É necessário criar uma conta nele para começar a trabalhar em vídeos que estejam em repositórios como o YouTube. É possível inserir o vídeo com legenda (a partir das opções do tocador) tanto copiando o código diretamente do Amara quanto utilizando um plugin (aqui) que permite a adição de vídeos deste tipo, pela inserção de um código simplificado. Pode ser uma preocupação legendar um vídeo não só por razões de compreensão da língua, mas também por acessibilidade (pessoas com deficiência).

Posted in: Artigo

Tags: legenda, Plugin, Vídeo

30 de abril de 2015

Plugin WP: galeria de vídeo e inserção de áudio

By Richard Romancini

Existem plugins que se associam a sites de criação digital em áreas externas ao WP, como o Cincopa. Este serviço permite criar galerias de imagens e vídeos, seleções de podcasts, tocadores de áudio, etc. Então, para utilizar o plugin no WP é necessário, tanto baixar este complemento (aqui) e adicioná-lo ao CMS, quanto fazer cadastro no site. O Cincopa tem a característica de não aceitar incorporações (embed), ou seja, o conteúdo (fotos, vídeos, etc.), organizado em algum padrão (galeria, slideshow, etc.), deve ser enviado ao site. Neste sentido, vale a pena notar que é possível baixar vídeos do YouTube e Vimeo (acima), por meio de programas ou serviços online, como o Savevideo e o Baixartube.

O Cincopa também cria tocadores de áudio, como no exemplo acima. Como se disse, o arquivo teve que ser enviado ao site. Vale notar, sobre o assunto áudio na web, que formato mp3 é praticamente padrão. Isto ocorre pois ele oferece boa compactação, garantindo tamanhos razoáveis, além de ser lido na maioria dos tocadores. Existem sites que fazem a conversão gratuita de arquivos (de um formato para outro) como o Zamzar.

Posted in: Artigo

Tags: áudio, Galeria, Plugin, Vídeo