Para crear unha páxina web hai moitas plataformas online que nos permiter crear e editar prestándonos o servicio de hosting ou aloxamento gratuito. Blogger, Workspace, Wix, Webly, ...
Vamos crear un blogue en Blogger.com, iniciar sesión coa conta de google.
Sesión 1:
Crear o blogue a partir dunha plantilla sinxela.
Engadir contido:
- pensar no tema para tratar: blogue de crítica sobre cinema, arte, música, ..., blogue para promocionar o teu pobo e as súas festas, ...
- publicar unha primeira entrada con texto (redacción coherente presentando cada imaxe ou elemento), unha imaxe sen bordo nin fondo, un vídeo inserido desde youtube, un podcast desde ivoox ou soundcloud, ...Sesións 2 e 3:
... e crear unha ligazón a outra web .
- personalizar tema ao voso gusto: modificando fondo (imaxe de fondo), cor e tipo de letra do título do blogue, do texto das entradas, ... (Non cambiar de plantilla, recoméndovos seguir coa plantilla sinxela aínda que eu máis adiante cambiarei á "fantastic" (Awesome Inc. Dark), porque todo o que imos facer funciona con ambas).
- Engadir imaxe de fondo de cabeceira con dimensións adecuadas e cubrindo toda a zona do título perfectamente. Para iso buscar e gardar imaxe "panorámica" con dimensións aproximadas 980x400 pixeles. Probar que tal che queda. Se necesitas escalala ou recortala usa Gimp, Fotoshop ou Paint para que teña o ancho en pixels do teu blogue. Tamén podes cambiar un pouco o ancho do blogue para terminar de axustala.
- Engadir unha descrición do blogue no apartado de configuración adecuado (que se visualizará debaixo do título).
- Engadir unha descrición do blogue no apartado de configuración adecuado (que se visualizará debaixo do título).
Sesión 4:
- inserir dous novos gadgets en barra lateral: 1/ un contador de visitas inserido, por exemplo desde a web websmultimedia.com o "contador-de-visitas.com" (podes buscar doutras webs) e 2/ un reloxo analóxico desde 24timezones.com ou reloxo dixital desde zeitverschiebung.net.
- inserir dous novos gadgets en barra lateral: 1/ un contador de visitas inserido, por exemplo desde a web websmultimedia.com o "contador-de-visitas.com" (podes buscar doutras webs) e 2/ un reloxo analóxico desde 24timezones.com ou reloxo dixital desde zeitverschiebung.net.
- modificar o código html de ambos os gadgets para eliminar o texto con ligazóns de propaganda da web orixe que lles acompañan (<a...a/>) e engadir un bordo exterior de 3 pixeles ao contador de visitas (border=_) e aumentar o tamaño do reloxo (segundos width y heigth).
Sesión 5 (19/5/21):
Sesión 5 (19/5/21):
Traballo individual:
1.- Crear unha entrada nova (de contido relacionado co tema do teu blogue) con texto, un vídeo e unha imaxe aliñada á esquerda. (Se copias contido da internet pega así: clic botón dereito "Pegar como texto sen formato" ).2.- Desde plantilla poñer un bordo fino cor azul para as imaxes (aparece en tema/personalizar/avanzado/imaxes). (Se a plantilla escollida non é a seinxela podría non aparecer esta opción).
3.- Remitir ó mail do profesor (marcoson64@gmail.com) a direción url do teu blog. (Publicar no noso grupo de Facebook a url do teu blog. NON)
3.- Remitir ó mail do profesor (marcoson64@gmail.com) a direción url do teu blog. (Publicar no noso grupo de Facebook a url do teu blog. NON)
Sesión 5 (30/5/21):
4.- Engadir un gadget na barra lateral para crear unha lista con mínimo tres enlaces aos blogues do resto de compañeiros (se activas miniatura de entrada máis recente quedará máis vistoso).
5- terminar de ver configuración do blogue: como eliminar blogue, moderación de comentarios sempre, indicar mail de moderación ...)
6.- Visitar os blogues de compañeir@s e facer un comentario nalgunha entrada.
7.- Logo visita o teu propio e-mail para moderar os comentarios que che fixeran, e publica os adecuados.
8.- NON. Crear un busto parlante desde VOKI. COM, inserir como gadget. A creación é gratuíta pero para poder compartilo en Blogger, agora hai que ser subscritor de pago.
9.- NON. Inserir un lector de texto desde vozme. com. Primeiro ir a vozme. com, clic na pestana Webmasters e logo baixar a "Exemplo: mediante un botón de imaxe e texto".
Sesión 6 (02/6/21):
10.- Crear gadget lateral tipo HTML para insertar unha lista de reproducción musical dende o sitio web Bandcamp (primeiro buscar artista). Activar a opción de "mostrar lista de cancións", escoller cor a gusto, axustar o seu tamaño (fixarse en cal é o ancho da barra lateral no deseño do teu blogue).
11.- NON FACER POR AGORA. Repetir paso 10 para Spotify. Instalar Spotify. Acceder. Para obter o código de inserción, seguir os pasos do link.
(Tamén se podería crear lista de reprodución desde Mixpod, GROOVESHARK ou FINETUNE e despois inserir no blogue. NON, PECHARON).
12.- Inserir Gadget de PÁXINAS que servirá como MENÚ DE PESTANAS en parte superior.
13.- En páxina principal de configuración do blogue ir a Páxinas e crear:
* nova páxina chamada TIC´S4 na que, máis adiante, presentaremos un resumo de contidos con algúns dos teus traballos deste curso.
* nova páxina ao teu gusto (eu chameille "OUTROS XÉNEROS" de cinema). Engádelle algún contido.
* nova páxina na que se visualizará outra web dentro da túa entrada. O código para engadir o iframe aquí. (Eu chameille "CARTELEIRA" e mostra a carteleira de cinemas na Coruña)
NOTA: a url que insertes ten que ser segura e comezar por https:, senón engana a bloguer engádíndolle ti a s final.
13.- Ir a gadget de páxinas e editalo para que se visualicen as 3 novas páxinas con título e na orde adecuada.
14.- Desde Tema/Personalizar/Avanzado editar FONDO e TEXTO de Pestanas de MENÚ ao teu gusto.
Este é o blogue do profesor que che pode servir de axuda para visualizar o resultado de todo o que deberías ter feito no teu ata este punto.
Sesión 7 (03/6/21):
15.- Engadir unha etiqueta a cada entrada indicando de que trata (hai que editar a entrada e esta opción aparece na súa configuración arriba á dereita) (eu etiquetei unha entrada como ALIEN e outra como STAR TREK.
16.- Engadir un gadget de Etiquetas. Ver que pasa ao " clicquear" sobre elas.
7.- Engadir unha imaxe de perfil, non real. (Facer clic sobre gadget lateral de perfil).
18.- NON FACER POR AGORA. Inserir o gadget de seguidores. Logo visita o blogue do teu compañer@ de á beira e faiche seguidor do seu blogue facendo clic no seu gadget.
19.- Para organizar mellor o contido dun blogue con moitas entradas que aparecen publicadas por orde cronolóxica na páxina principal (á que eu lle cambiei o nome por "CINEMA DE CIENCIA-FICCIÓN"). Temos que editar o menú de páxinas engadindo pestanas con "ligazóns externas" á url das etiquetas que creamos. Para ver esa url clic sobre unha etiqueta.
Así, eu creei dúas novas PESTANAS (non páxinas de blogue) no MENÚ DE PÁXINAS unha chamada "ALIEN" e outra "STAR TREK" que mostran as entradas relacionas así etiquetadas.
OBSERVA QUE O GADGET DE ETIQUETAS E As ÚLTIMAS PESTANAS DO MENÚ FUNCINAN IGUAL. DÚAS OPCIÓNS PARA ORGANIZAR CONTIDO.
20.-Engade contido á páxina "TIC´S4" (aínda que non ten que ver coa temática do voso blogue). Nela imos repasar o que vimos este curso (comenta o que fixemos, crea enlaces a algunha actividade, inserta algún video, enlaza tests, e comenta cada cousa que poñas):
- Mirando o noso blogue de clase saberás que temas e actividades fixemos.
- Crear unha ligazón ao blogue desta materia, escribindo: "Fai clic aquí para visitar o blogue de INFORMÁTICA" ou "Sigue a ligazón para visitar o blogue de INFORMÁTICA" ou similar.
Por exemplo:
- Tema 1: HARDWARE. A teoría deste tema estudámola desde a web ... (inserir unha ligazón). Vimos o seguinte video... Montamos un PC de forma virtual dende ... (investigar porque agora non vai este elemento interactivo flash e se existe a posibilidade de facelo funcionar). Mercamos un PC...
- Tema 2: PROCESADOR DE TEXTOS. Traballamos con ______ que é o procesador de textos de ______Office ...
- Tema 3: _____. Similar ó anterior.
- Tema 4: UNIDADES .... Presenta e enlaza o teu documento de Drive no que resoviches os exercicios.
- Tema 5: _______. Indicar que software empregamos. Crear unha presentación de diapositivas en Drive e insertala aquí (instrucións nesta ligazón). Empregar as 2 imaxes das caricaturas dos ex-presidentes e outras dúas fotomontaxes que che gustaran.
- Tema 6: _______.
- Tema 7: _______. Presentar. Indicar que software empregamos.
A actividade 1 subístela a Soundcloud. Insertar un podcast (reproductor) desde Souncloud para poder escoitar o resultado.
Se ó final non a publicache tiñas que haber subido un arquivo cun "chirrido" a Soundcloud. Neste caso inserta un minirreporoductor con ese audio.
Enlazar o Remix que creache na actividade 2 para que os teus lectores poidan escoitalo.
-Tema 9: DESEÑO WEB BÁSICO. Busca en Wikipedia a definición de Web 2.0 e escríbea indicando a diferenza con Web 1.0. Crear un link para que haxa a posibilidade de descargarse este mesmo documento. Primeiro dercárgao ti e almacenao en liña no teu GOOGLE DRIVE (outra posibilidade sería dropbox ou box. com), para que poidas compartilo e enlazalo e sexa posible a súa descarga desde o teu blogue.
A continuación subir o documento anterior a ISUUE, primeiro debes rexistrarche (vale acceder coa conta de google) e logo crea unha ligazón para poder visulizalo documento como un libro con páxinas.
- Tema 10: SEGURIDADE.
Resumir o que fixéstedes coa profesora. Insertar o video de hackeo que visulizastes e algún dos tests que resolvestes.
21.- Podes engadir efectos e animacións a distintas partes do teu blogue.
Para elo tes que editar os estilos CSS do teu blogue engadindo fragmentos de código javascript.
Seleccionalo e pegalo en Personalizar/Conf Avanzada/Editar estilos CSS e darfar cambios.
Efecto 1: Amplia título ó pasar co cursor do rato por enriba.
h1:hover {
transform: scale(1.5); /* Multiplica la escala del estilo título h1 (título de cabecera). */
transition: all 0.6s;/* La transición a los valores anteriores va a durar el tiempo indicado. */
}
Efecto 2: Despraza á esquerda o texto do título das entradas ó pasar co cursor do rato por enriba.
transform: scale(1.5); /* Multiplica la escala del estilo título h1 (título de cabecera). */
transition: all 0.6s;/* La transición a los valores anteriores va a durar el tiempo indicado. */
}
Efecto 2: Despraza á esquerda o texto do título das entradas ó pasar co cursor do rato por enriba.
.post-title:hover{/* Si se pone h3: hover también. */
transform: translateX(50px);
color: #70b6bd;/* Solo funciona con título de páginas y no con título de entradas ??. */
transition: all 0.6s;
}
22.- Continua engadindo contido, unha entrada máis, etiquetaa e "fala" xa de cousas relacionadas coa temática que pensasche para o teu blog.
transform: translateX(50px);
color: #70b6bd;/* Solo funciona con título de páginas y no con título de entradas ??. */
transition: all 0.6s;
}
22.- Continua engadindo contido, unha entrada máis, etiquetaa e "fala" xa de cousas relacionadas coa temática que pensasche para o teu blog.
ACTIVIDADE DE AMPLIACIÓN:
23.- O menú de paginas de blogger é moi simple. O lóxico sería poder crear un menú con submenús como o que eu coloquei abaixo como gadget no " foot" (porque mentres non elimino o gadget de páxinas arriba non permite engadir máis ahi en zona superior. Tamén temos a opción de pasar o gadget de páxinas a modo horizontal en barra lateral.)
Para iso hai que engadir un gadget HTML deseñando o menú co seguinte código HTML:
Finalmente editar código de estilo para modificar tamaño de texto, colores, ...
FUENTE: Combinación e modificación parcial de contido de:
- esta publicación en yoblogueo
- e de este titorial donde hai un documento de texto con pasos detallados e código.
Para iso hai que engadir un gadget HTML deseñando o menú co seguinte código HTML:
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='#'>PÁGINA PRINCIPAL</a>
</li>
<li>
<a href='#'>INTRODUCIÓN</a>
</li>
<li>
<a href='#'>COCHES</a>
<ul>
<li><a href='#'>ACCESORIOS </a></li>
<li><a href='#'>LEDS</a></li>
<li><a href='#'>NEUMÁTICOS</a></li>
<li><a href='#'>MEJORAS</a></li>
</ul>
</li>
<li>
<a href='#'>BLOGGER</a>
<ul>
<li><a href='#'>BLOGGER_1</a></li>
<li><a href='#'>BLOGGER_2</a></li>
<li><a href='#'>BLOGGER_3</a></li>
</ul>
</li>
<li>
<a href='#'>TUTORIALES</a>
<ul>
<li><a href='#'>TUTOS_1</a></li>
<li><a href='#'>TUTOS_2</a></li>
<li><a href='#'>TUTOS_3</a></li>
</ul>
</li>
<li>
<a href='#'>Contacto</a>
</li>
<li>
</li></li></ul>
</div>
Para modificar o nome de cada menú e submenú (pestana e subpestaña) editar o código.
Engadir as ligazóns adecuadas, similar a menú de páxinas creado anteriormente engadindo submenús coherentes.
Despois de engadir este menú queda en columna vertical. Para colocalo en fila horizontal hai que editar o seu estilo CSS.
Antes, polo si acaso, ir a Tema e crear unha copia de seguridade no teu cartafol do túa plantilla e deseño actual por se ao engadir código HTML algo sae mal.
A continuación editar os estilos CSS da plantilla. Ir a Tema/Personalizar/Avanzado/Engadir CSS e pegar o seguinte código de estilo para o noso menú (só afecta á clase mbwnavbar):
/**MBW Navgation bar**/
#mbwnavbar {
background: #bdbfbf;
width: 900px;
color: #d8f602;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #023d90;
color: #0a0a0a;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul { left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #023d90;
width: 150px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #70b6bd;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Finalmente editar código de estilo para modificar tamaño de texto, colores, ...
FUENTE: Combinación e modificación parcial de contido de:
- esta publicación en yoblogueo
- e de este titorial donde hai un documento de texto con pasos detallados e código.
