MIAMARTI WEB DESIGN STUDIO
Administrando o Painel MIAMARTI
www.miamarti.com.br
1 de 45
MIAMARTI WEB DESIGN STUDIO
Índice 1) Logando no Site
3
2) Entendendo a Estruturação do Site
4
3) Criando uma seção
5
4) Incluindo uma Categoria
7
5) Incluindo Página / Notícia / Mercadoria
9
6) Criando um Artigo no FCKEditor
11
7) Inserindo Tabelas
15
8) Limitando o texto as extremidades da tabela
18
9) Mudando a cor de fundo da célula
20
10) Inserindo o Artigo criado em um Menu
22
11) Editando as ferramentas automáticas
26
12) Criando um menu no seu Site
28
13) Gerando sua fatura de hospedagem mensal
33
14) Criando um banner tipo folha
34
15) Atualizando o Livro On-Line MIAMARTI
40
16) Incluindo uma notícia
42
17) Gerenciando Comentários postados no seu Site
43
2 de 45
MIAMARTI WEB DESIGN STUDIO Painel de Controle MIAMARTI Logando no Site Para acessar o painel de controle do seu site, basta digitar:
http://www.seusite.com.br/miamarti/administrator
Assim que o endereço acima for acessado, a seguinte tela solicitará seu nome de usuário e senha. Preencha os dados conforme enviado através do e-mail de cadastro, em seguida pressione Login.
Se você digitou os dados corretamente respeitando os caracteres maiúsculos e minúsculos, a seguinte tela será aberta:
3 de 45
MIAMARTI WEB DESIGN STUDIO Entendendo a Estruturação do Site Todos os sites desenvolvidos pela MIAMARTI, são divididos em Seção e Categoria. As seções são responsáveis pelo direcionamento das Categorias, como mostra os exemplos abaixo:
Seção >>>>> Notícia o Categoria ::::: Esporte o Categoria ::::: Política Seção >>>>> Contato o Categoria ::::: Financeiro o Categoria ::::: Comercial
Seção >>>>> Hardware o Categoria ::::: Mouse o Categoria ::::: Teclado Seção >>>>> Software o Categoria ::::: Windows XP o Categoria ::::: MS Office
Distribuição de Páginas / Notícias / Mercadorias As páginas são classificadas dentro das Seções e Categorias, o que facilita o gerenciamento dos conteúdos, sejam eles notícias, páginas informativas ou mercadorias. O monitoramento das informações podem ser gerenciados conforme sua Categoria pré definida, facilitando assim as modificações e atualizações. Veja os exemplos abaixo: Seção >>>>> Notícia o Categoria ::::: Esporte
Not.01 ----- Pelé marca mais um Gol (Data: 00/00/00) Not.02 ----- Arruda roubou desta vez até a mãe ( Data: 00/00/00)
Seção >>>>> Epson o
Categoria ::::: Impressoras Epson Jet 1240xl ----- Valor R$ 0,00 --- Frete grátis Epson JDKJD ----- Valor R$ 0,00 ----- Desconto a vista
o
Categoria ::::: Multi Funcional Epson Multifuncional JJH787 ----- Valor R$ 0,00 ...
4 de 45
MIAMARTI WEB DESIGN STUDIO Criando uma Seção Para se criar uma seção, basta que o administrador acesse o Painel de Controle MIAMARTI e sigas os passos listados abaixo: 1. Passe o mouse sobre o menu superior Conteúdo
2. Clique em Administrar Seção
3. Assim que o menu Administrar Seção for selecionado o gerenciador vai ser aberto. Agora clique em Novo.
4. Agora uma tela de cadastro foi aberta, nela você deverá preencher as informações conforme exemplo abaixo: Título o Digite o nome da sua Seção Apelido o Repita o nome da sua Seção Publicado o Sim
5 de 45
MIAMARTI WEB DESIGN STUDIO
5. Pronto, agora é só clicar em Salvar
6. A seguinte tela será mostrada com as Seções que foram criadas. Caso deseje editar, copiar ou até excluir um seção criada, basta selecionar a seção através do quadradinho que encontra-se do lado esquerdo do nome e utilizar as ferramentas que encontram-se no lado direito superior da tala.
6 de 45
MIAMARTI WEB DESIGN STUDIO Incluindo uma Categoria Para que seja incluída uma categoria, basta seguir os procedimentos listados abaixo: 1. Vá ao menu Conteúdo > Administrar Categorias
2. Clique em Novo
3. O seguinte formulário será listado.
7 de 45
MIAMARTI WEB DESIGN STUDIO 4. Preencha os dados da seguinte forma: Título o Apelido o
Nome da Categoria
Repita o Nome da Categoria
Publicado o Sim Seção o
Selecione a Seção que esta categoria pertence, por exemplo Notícias
Agora Clique em Salvar
5. Pronto, agora a seguinte tela será listada com as Categorias Criadas. Caso deseje modificar, copiar ou excluir um categoria, selecione a caixa que encontra-se no lado esquerdo do nome e utilize uma das ferramentas que estão localizadas no lado direito superior da tela
8 de 45
MIAMARTI WEB DESIGN STUDIO Incluindo uma Página / Notícia / Mercadoria Para que seja incluída uma Página, Notícia ou Mercadoria, basta selecionar o menu Conteúdo > Administrar Artigos
Assim que este for selecionado a seguinte tela será aberta:
Note que no canto Superior Direito existem algumas ferramentas, estas ferramentas serão utilizadas para que se gerencie as páginas, notícias ou mercadorias dispostas no site.
Os comandos são bem simples e todos em português. Para incluirmos uma nova página, basta clicar em Novo.
Em nosso sistema as páginas, notícias e anúncios são classificados como Artigos.
9 de 45
MIAMARTI WEB DESIGN STUDIO
Incluindo um Artigo A inclusão de uma página é bem simples, basta preencher os campos básicos do formulário solicitado e em seguida montar a página, notícia ou anúncio no editor que encontra-se logo abaixo. O editor utilizado pela MIAMARTI é o FCKEditor, este sistema é atualmente o mais completo disponibilizado no mercado. O FCK Editor utiliza de uma licença GPL/GNU e pode ser comercializado de forma livre, desde que este atendas as exigências impostas pela GNU. Este por sua vez encontra-se totalmente livre de qualquer bloqueio ou irregularidade pois atende todos os requisitos do Software Livre e disponibiliza seus códigos através do respectivo FTP.
Iniciando a inclusão do Artigo. 1) Em Título coloque o nome da página, notícia ou anúncio. 2) Repita o Título para o Apelido
3) Selecione uma Seção e uma Categoria, caso seja uma página livre que não se enquadre em nenhuma classe, selecione Qualquer.
4) O item Publicado define se o artigo deverá entrar em vigor ou não 5) O item Exibir na Página Inicial define se este artigo é a pagina principal ou não
10 de 45
MIAMARTI WEB DESIGN STUDIO Criando o Artigo no Editor FCKEditor
Os comandos disponíveis no FCK são bem parecidos com o Microsoft Word e agradam grande parte dos usuários. Basicamente os comandos Centralizar, Negrito e configurações de Fonte e Cores são bem similares e intuitivos, no entanto existem também recursos mais avançados que iremos aprender daqui para frente.
Páginas de Internet possuem características bem definidas em relação a distribuição de textos e imagens e podem ser gerenciadas através de Folha de Estilos ou Tabelas. Quando queremos que um texto contorne uma imagem, não basta apenas que esta seja inserida em um lugar pré-definido, temos que dizer ao sistema qual comportamento este deverá exercer em relação a sua publicação. Vamos fazer agora um exemplo prático: Clique em ImageMananger:
11 de 45
MIAMARTI WEB DESIGN STUDIO
Selecione a imagem desejada: Observe que os dados referentes a imagem já foram carregados automaticamente, este é um dos recursos que a MIAMARTI disponibilizou para facilitar o dia-dia do desenvolvedor. O campo Alt é responsável por mostrar na tela uma caixinha amarela com informações da imagem assim que o usuário passa o mouse sobre ele. Repare que o sistema preencheu este campo com o nome da imagem, modifique-o conforme desejado, pode ser apenas um nome ou um pequeno texto.
Observe que o item Aling está selecionado como Baseline, isto significa que o texto vai ficar ao lado da imagem mais não vai contornar seu corpo mais sim ser incluída na parte inferior da mesma. Para que o texto corra em torno da mesma, selecione este campo como Lefth
Agora pressione OK.
12 de 45
MIAMARTI WEB DESIGN STUDIO Repare que a imagem foi incluída na página:
Vamos agora iniciar nossa digitação para vermos o que acontece:
O texto contornou a imagem conforme esperado, com tudo caso deseje modificar esta configuração, clique sobre a imagem e selecione novamente o menu ImageMananger.
13 de 45
MIAMARTI WEB DESIGN STUDIO Modifique os critĂŠrios desejados em seguida pressione OK
14 de 45
MIAMARTI WEB DESIGN STUDIO Inserindo Tabelas Para que seja inserida uma tabela, basta clicar no menu Insert/Edit table:
Assim que este for selecionado uma janela de propriedades será exibida:
Os campos listados são responsáveis pela distribuição das Linhas e Colunas que farão parte da tabela que será criada: Rows ::::: Linhas Columns ::::: Colunas Se quisermos criar uma tabela com 3 linhas e 2 colunas colocaremos Rows com 3 e Columns com 2. Em Headers definimos aonde será incluso o cabeçalho, por exemplo: First Rows ::::: Primeira Linha First Column ::::: Primeira Coluna Both ::::: Ambos None ::::: Nenhum Em Border size define-se a largura da borda, caso não se queira borda, coloca-se 0. Em Alingnment define-se a onde a tabela deverá ser incluída, no meio da página, a esquerda ou a direita. Left Center Right
::::: Esquerda ::::: Centro ::::: Direita
15 de 45
MIAMARTI WEB DESIGN STUDIO Em Cell spacing define-se o espaço que deverá ser colocado entre uma célula da tabela e outra. Em Cell padding define-se qual é o espaço interno que deverá ser incluído na tabela. Em Width seleciona-se a largura da tabela e em Hight a altura. Após a definição dos campos acima selecione OK.
Caso nossa tabela seja montada conforme o exemplo acima o resultado que teremos seria este
Caso deseje aplicar um estilo próprio a tabela, clique com o mouse em uma de suas laterais e em seguida clique em IStylesEditor.
16 de 45
MIAMARTI WEB DESIGN STUDIO Uma janela será aberta, selecione Border e modifique conforme desejado, em seguida Clique em OK.
Caso os parâmetros sejam selecionados conforme o modelo acima, o resultado deverá ser assim:
Repare que quando digitamos algo na primeira coluna as informações ficam em negrito, isto acontece pois nós selecionamos que a primeira coluna seria o cabeçalho (Head).
17 de 45
MIAMARTI WEB DESIGN STUDIO
Limitando o texto as extremidades da tabela Muitas vezes nós definimos que uma tabela terá a largura de 200px por exemplo, no entanto quando começamos a digitar o texto esta tabela começa a se expandir conforme este é redigido. Este é um problema muito comum enfrentado por desenvolvedores web, no entanto pensando nisto a MIAMARTI desenvolveu uma técnica chamada Word Wrap que define as características do texto qual será seu comportamento em contato com uma tabela. Texto em uma célula sem Word Wrap:
Texto em uma célula com Word Wrap:
18 de 45
MIAMARTI WEB DESIGN STUDIO Para que este recurso seja habilitado, basta que se clique com o botão direito do mouse sobre a célula assim que a primeira palavra for incluída, em seguida selecione a opção Cell >> Cell Properties
Uma janela será aberta e a opção Word Wrap deverá ser selecionada como Yes.
19 de 45
MIAMARTI WEB DESIGN STUDIO Cor de Fundo da Célula
Caso deseje modificar a cor de fundo da célula utilize o campo Background da tela acima. Para isto selecione o botão Select... e clique sobre a cor desejada, em seguida pressione OK.
Verifique que o código da cor foi incluído no campo Background, agora é só pressionar OK novamente.
20 de 45
MIAMARTI WEB DESIGN STUDIO O resultado serรก este
21 de 45
MIAMARTI WEB DESIGN STUDIO Inserindo o Artigo criado em um Menu Mesmo seu artigo sendo criado e salvo corretamente, este ainda não será incluído em seu site, e as pessoas não vão poder velos. Para que este seja disponibilizado, devemos amarra-los em algum menu. Vá até Menus >> Main Menu* para inserir no Menu Principal (Main Menu*) ou no Menu Superior (Top).
A seguinte tela será mostrada, clique em Novo.
Uma lista de opções será mostrada, clique em Artigos
22 de 45
MIAMARTI WEB DESIGN STUDIO Repare que uma nova ramificação foi criada, selecione Layout Padrão de Artigo
Um formulário será aberto onde você preenchera os dados do link.
Basicamente este procedimento é bem parecido com os outros visualizados anteriormente. o o
Em Titulo coloca-se o nome do link que aparecerá no menu. Em Apelido repete-se o nome do link
Verifique que existe uma janela chamada Nível de Acessos, nesta janela nós definimos quais pessoas poderão acessas esta página. Se esta for pública coloca-se Publico, se for fechada a assinantes coloca-se Registrado ou se for de uso exclusivo dos administradores do site coloca-se Especial.
23 de 45
MIAMARTI WEB DESIGN STUDIO Repare que até agora nós não definimos qual é o artigo que será aberto. Para se selecionar um artigo, clique em Selecione na área Parâmetros – Básico.
Uma janela será aberta com todos os artigos disponíveis, clique sobre o artigo desejado.
Pronto agora é só clicar em Salvar.
24 de 45
MIAMARTI WEB DESIGN STUDIO Repare que o menu Pelé foi incluído no Menu Principal
Ou clicar no link criado o artigo que editamos anteriormente vai ser chamado na página conforme desejado.
25 de 45
MIAMARTI WEB DESIGN STUDIO
Editando as ferramentas automáticas Repare que no artigo que criamos, nossos sistema selecionou automaticamente algumas ferramentas e listou em nossos site, estas ferramentas são marcadas como padrão em nossos gerenciador e podem ser modificadas facilmente.
Vá até Conteúdo >> Administrar Artigos
Clique sobre o artigo
26 de 45
MIAMARTI WEB DESIGN STUDIO
Clique em parâmetros avançados
Pronto, agora é só selecionar os itens desejados.
27 de 45
MIAMARTI WEB DESIGN STUDIO
Criando um Menu no seu Site 1-) Utilize o menu Menus para selecionar o local onde o menu será criado: Main Menu* referência-se ao menu principal, e o menu TOP ao menu superior do seu site.
2-) Após clicar no menu desejado, uma lista será mostrada com os itens que compõem este menu no momento, em seguida clique em Novo:
28 de 45
MIAMARTI WEB DESIGN STUDIO 3-) Uma lista será mostrada com as opções possíveis:
4-) Clique em Artigos; Uma nova ramificação será listada, utilize a opção Layout Padrão de Artigo, a segunda em azul.
29 de 45
MIAMARTI WEB DESIGN STUDIO 5-) Na grade Detalhes do Item do Menu, preencha o formulário com o nome que será mostrado no seu menu como mostra o modelo abaixo:
6-) Em seguida utilize o botão Selecione para identificar qual Artigo deverá ser aberto toda vez que alguém clicar em seu novo menu:
7-) Após clicar no botão uma lista será mostrada, clique sobre o Artigo desejado, em nosso exemplo só existe um artigo criado, o artigo Home, clique sobre ele em seguida clique em Salvar.
30 de 45
MIAMARTI WEB DESIGN STUDIO
8-) Agora acesse o seu site e veja se o menu entrou conforme esperado:
9-) No caso de lojas on-line este link deve mostrar mais de um artigo pois eles listam as mercadorias existentes. Neste caso a ramificação escolhida muda conforme o exemplo abaixo:
31 de 45
MIAMARTI WEB DESIGN STUDIO
10-) Agora a grade Parâmetros está composta por mais algumas opções: o Em Categoria lista-se a categoria desejada, por exemplo Hardware/Impressoras o Em No. De Destaque lista-se a quantidade de itens em destaque, geralmente utiliza-se 0. o Em No. De Instruções lista-se a quantidade de anúncios por páginas, até que se apareça aqueles links <<< 1.2.3.4.5 >>> na parte inferior da página. o Em Colunas a quantidade de colunas existentes. o Em links os itens que deverão aparecer como texto seimples, geralmente utilizase 0.
32 de 45
MIAMARTI WEB DESIGN STUDIO
Gerando sua Fatura de Hospedagem Mensal 1-) Acesse o Painel Administrativo do seu site:
2-) No menu Componentes clique em 1 – Fatura de Hospedagem:
3-) Uma tela azul será listada com o nome do seu domínio e um botão pagar aparecerá depois de alguns estantes na parte inferior da tela. Assim que este for pago depois de alguns dias esta tela aparecerá em branco.
33 de 45
MIAMARTI WEB DESIGN STUDIO
Incluindo um Banner tipo folha 1-) Primeiramente iremos criar nossa arte final, que deve ter 500 x 500, após a rte final em mãos, acesse o painel de controle do seu site, em seguida utilize o botão Administrar Mídia.
2-) A seguinte tela será aberta, clique sobra a pasta banners:
3-) Na parte inferior da tela existe um navegador de arquivos, clique no botão escolher arquivo e selecione a arte final que criamos:
4-) Assim que o arquivo for selecionado clique em abrir, e em seguida pressione o botão Iniciar Envio:
34 de 45
MIAMARTI WEB DESIGN STUDIO 5 - ) O Banner que vocĂŞ criou deve aparecer na lista, juntos com os outros banners, se isto acontecer significa que tudo ocorreu bem:
6-) Cadastre uma categoria: Utilize o menu Componentes >> Banner >> Categorias
7-) Clique em Novo:
35 de 45
MIAMARTI WEB DESIGN STUDIO 8-) Preencha o título e o apelido com o nome da categoria desejada, em nosso exemplo utilizaremos a categoria Comercial, em seguida clique em Salvar.
9-) Após cadastrar a categoria, clique em Clientes:
10-) Preencha o formulário com os dados do cliente que anunciará no seu site, em seguida clique em Salvar.
11-) Após cadastrar seu cliente clique em Banners:
36 de 45
MIAMARTI WEB DESIGN STUDIO 12-) Após clicar em Banners clique em Novo em seguida preencha o formulário com o nome do banner, repetindo este nos campos Nome e Apelido, em seguida selecione a Categoria e o Nome do Cliente com as informações que criamos. Após preencher estes campos, selecione a arque que criamos e enviamos ao administrador de mídia no começo deste tutorial: No campo URL coloque o endereço do site do proprietário do banner, não esqueça de utilizar o http:// antes do endereço.
13-) Após preencher o formulário acima, clique em Salvar.
37 de 45
MIAMARTI WEB DESIGN STUDIO
14-) Em seguida clique no menu Extensões >> Administrar Módulo, se este menu não estiver disponível, comunique o pessoal da MIAMARTI, isto pode ocorrer caso você não possua um plano de administração completo, pois ele é vendido paralelamente ao valor pago ao site:
15-) Na lista de Módulos procure por MIAMARTI Page Peel v4.3, em seguida clique sobre ele:
16-) No campo Parâmetros do Modulo, selecione os campos conforme exemplo abaixo:
o No campo Select Banner Image, selecione novamente a arte final criada. o No campo Select Banner Cliente, selecione o cliente proprietário do banner. o No campo Select Banner Category, selecione a categoria do seu cliente. Em seguida clique em Salvar.
38 de 45
MIAMARTI WEB DESIGN STUDIO 16-) Após Salvar o banner, agora devemos ativa-lo, para isto clique sobre o balão vermelho que indica o bloqueio, assim ele deve se transformar em um visto que informa a ativação do mesmo:
17-) Assim que este estiver ativo, acesse seu site e veja o banner em atividade na parte superior direita da tela:
39 de 45
MIAMARTI WEB DESIGN STUDIO
Atualizando o Livro MIAMARTI Alguns dos nossos sites disponibiliza um sistema único de livro on-line, que pode ser utilizado para a apresentação de catálogos ou de revistas e folhetos on-line. Sua manutenção é bem simples e pode ser feita por qualquer usuário que conheça um pouco de internet. 1-) Acesse o painel de administração do seu site:
2-) Vá até o menu Componentes >> LIVRO MIAMARTI:
40 de 45
MIAMARTI WEB DESIGN STUDIO
3-) Uma janela será aberta com um botão de procura de arquivos, é através dele que mostraremos onde está nossa página.
As páginas devem estão no formato .jpg e escritas sempre com letras minúscula, exemplo: nunca utilize 01.JPG mais sim 01.jpg . As imagens devem ser nomeadas por números, utilizando sempre dois dígitos, assim a foto 1 ficaria 01.jpg e a foto 10 ficaria 10.jpg. O número de páginas varia conforme o solicitado a MIAMARTI no momento da compra. 4-) Clique em procurar, e selecione a imagem da página, em seguida pressione Cadastrar imagem >>.
5-) Feche o navegador em seguida abra-o novamente e veja se tudo ocorreu conforme esperado.
41 de 45
MIAMARTI WEB DESIGN STUDIO
Incluindo uma Notícia 1-) Entre em contato com o pessoal da MIAMARTI (comercial@miamarti.com.br) e peça que o formulário Notícias seja liberado no seu site. 2-) Dentro do Administrador do sei Site, clique em Adicionar Novo Artigo.
3-) Preencha o formulário do artigo conforme feito anteriormente.
4-) Nos campos Seção e Categoria preencha da seguinte forma: Seção >> Notícias e Categoria >> A categoria disponível.
5-) Clique em Salvar e vá ao site para testar.
42 de 45
MIAMARTI WEB DESIGN STUDIO
Gerenciando comentários 1-) Acesse o painel de controle do seu site:
2-) Vá ao menu Componentes >> !Joomla comment >> Manage Comments:
3-) Uma lista com os comentários postados será mostrada, através dela você pode publicar, despublicar ou até excluir um comentário.
43 de 45
MIAMARTI WEB DESIGN STUDIO 4-) Através do ícone abaixo, você consegue publicar ou despublicar o comentário, basta apenas clicar sobre ele:
5-) No menu Content Settings é possível configurar informações como quem poderá comentar, ou se este comentário deverá passar por aprovação.
6-) Vá a aba Security:
7-) O item Only registered indica que apenas pessoas registradas poderão comentar este artigo, já o item Autopublish comments, indica que os comentários deverão passar por aprovação antes de serem publicados.
8-) Em seguida salve as modificações através do botão Salvar na parte superior direita:
44 de 45
MIAMARTI WEB DESIGN STUDIO
45 de 45