El trabajo en copiar, editar vectores procedientes de archivos svg de escudos encontrados en la web, componiendo uno nuevo.
Escudo de Talarrubias (enlace)
Escudo de Ferrari (enlace)
Galeria de elementos del taller de heráldica de Wikipedia (enlace)
martes, 8 de noviembre de 2022
Gráficos vectoriales con Inkscape (I): figuras básicas
El primer ejercicio con este editor de gráficos vectoriales consiste en editar archivos en formato *.svg
El trabajo en copiar, editar vectores procedientes de archivos svg de escudos encontrados en la web, componiendo uno nuevo.
Escudo de Talarrubias (enlace)
Escudo de Ferrari (enlace)
Galeria de elementos del taller de heráldica de Wikipedia (enlace)
El trabajo en copiar, editar vectores procedientes de archivos svg de escudos encontrados en la web, componiendo uno nuevo.
Escudo de Talarrubias (enlace)
Escudo de Ferrari (enlace)
Galeria de elementos del taller de heráldica de Wikipedia (enlace)
Graficos vectoriales con Inkscape: introducción
Una de las limitaciones que todavia no ha podido superar OpenOffice Draw es la importación/exportación de archivos en formato *.svg. Este formato es uno de los más utilizados en internet en cuanto a la represetación gráfica a través de vectores. Prueba de ello son la cantidad de graficos de ese formato que encontramos en Wikipedia.
Por contra, uno de los programas de edición de imágenes vectoriales mas utilizados, Inkscape, nos permite importar y exportar sin problema alguno imagenes vectoriales.
También se pueden convertir cualquier imagen a vector svg utilizando algunos programas o incluso esta aplicación web: (convertio.co)
Se puede dibujar a través del código, hay etiquetas en html para ello (enlace) (mozilla developer)
20 páginas para descargar imágenes en SVG (enlace)
SVG pago (adidas)
En el siguiente videotutorial os explican brevemente su funcionamiento:
jueves, 3 de noviembre de 2022
Diseña el logo de "Sembrando el cambio"
A continuación os dejo como se puede diseñar un logotipo en la web gratuita de DESINGEVO
Otra web gratuita es LOGOMAKR, y en el siguiente videotutorial se explica como usarla:
En este último videotutorial se muestra como hacer un efecto 3D en CANVA, podéis utilizarlo en el diseño de vuestro logotipo si no es ese el videotutorial buscadlo, CANVA es una herramienta online muy potente.
miércoles, 19 de octubre de 2022
martes, 18 de octubre de 2022
OpenOffice Writer (II): elaboración de catálogos
Utilizando el procesador de textos de OpenOffice-Writer diseña un catálogo/revista sobre nuevas tecnologías que tenga una portada y dos páginas. Crea una cuenta en Issuu.com y publícalo.
Webs Interesantes
TinyWow Web multiherramienta
HotPoi Efectos gráficos
Pranxs Bromas de Hacker
Waifu Ampliar una imagen
Compressor Comprimir una imagen
FlightRadar Localizador de aviones en vuelo
viernes, 7 de octubre de 2022
Como subir una página web a un servidor. Hosting Gratuito
¿Qué es hosting? es un servicio proporcionado por un servidor web
que consiste en un espacio limitado en el que albergar nuestra sitio web, en dicho espacio almacenaremos nuestros ficheros y serán publicado siendo accesibles a el público general.
Encontrar un servicio totalmente gratuito es complicado, la mayoría añaden publicidad en nuestra web o interrumpen el servicio de forma aleatoria.
Vamos comenzar a probar servicios gratuitos, a ver si encontramos uno fiable.
Este curso estamos utilizando este servidor, y por ahora está funcionando bastante bien:
https://www.awardspace.com/
En este videotutorial se explica como poder subir una web a este hosting de forma gratuita:
martes, 4 de octubre de 2022
HTML Basico (VII): etiqueta MARQUEE
La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.
Hacia abajo Hacia arriba
Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:
<marquee width="50%" height="60" align="bottom"> ... texto ... </marquee>
El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:
<marquee style="...propiedades..."> ... texto ... </marquee>
Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:
DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:
DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:
<marquee direction="right"> ... texto ... </marquee>
Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:
<marquee scrolldelay="300"> ... texto ... </marquee>
LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.
Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:
Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:
Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:
- scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
- slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
- alternate se desplaza alternativamente hacia un lado y el otro.
Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:
¿Podemos controlar una marquesina mientras se ejecuta? Aquí hay un ejemplo simple, mediante dos pseudo-botones, logramos cambiarle la dirección:
- Aeromodelismo a full
- Café de por medio
- Cosas sencillas
- Cucoalmeria.net
- El Zulo Corp.
- Fotografías de la vida irreal
- Hora libre
- Nitrox
- ReCoLecTanDo IdEaS
- rEdEsfEr@
- Renton's coming on age
- Sin miedo
- Zona Firefox
Hacia abajo Hacia arriba
<marquee id="ejemplo" direction="up">
... contenido ...
</marquee>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='down';">
Hacia abajo
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='up';">
Hacia arriba
</a>
HTML Básico (VI): mapa de imágenes
HTML nos permite la opción de crear diferentes enlaces url dentro de
una misma imagen. Es decir, podemos hacer que diferentes partes de una
imagen tengan enlaces que nos permitan ir a diferentes destinos.
Las fotos en las que queramos introducir un mapa de imágenes deberán
ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres
formatos recomendables para todos los navegadores.
A continuación vamos a explicarte como podemos crear esta etiqueta html y
los diferentes atributos que posee este tag. Como veremos a lo largo del
artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí,
sino encontrar las coordenadas en la imagen. Aunque existen programas de
edición de imágenes que nos ayudarían en esa tarea.
HTML Básico (VIII): Celdas
Imaginad que tenéis que diseñar la siguiente tabla para la página principal de un sitio web
Con los atributos de la etiqueta <TABLE> que conocemos no podemos hacerla. Utilizaremos dos atributos nuevos. Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.
Ejemplo de ROWSPAN:
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><p>Países Europeos</p></td>
<td><p>España</p></td>
<td><p>Madrid</p></td>
</tr>
<tr>
<td><p>Francia</p></td>
<td><p>Paris</p></td>
</tr>
<tr>
<td><p>Reino Unido</p></td>
<td><p>Londres</p></td>
</tr>
<tr>
<td rowspan="3"><p>Países Americanos</p></td>
<td><p>EEUU</p></td>
<td><p>Washington</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>
Con los atributos de la etiqueta <TABLE> que conocemos no podemos hacerla. Utilizaremos dos atributos nuevos. Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.
A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.
Ejemplo de ROWSPAN:
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><p>Países Europeos</p></td>
<td><p>España</p></td>
<td><p>Madrid</p></td>
</tr>
<tr>
<td><p>Francia</p></td>
<td><p>Paris</p></td>
</tr>
<tr>
<td><p>Reino Unido</p></td>
<td><p>Londres</p></td>
</tr>
<tr>
<td rowspan="3"><p>Países Americanos</p></td>
<td><p>EEUU</p></td>
<td><p>Washington</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>
| Países Europeos | España | Madrid |
| Francia | Paris | |
| Reino Unido | Londres | |
| Países Americanos | EEUU | Washington |
| Canada | Toronto | |
| Mexico | Mexico |
HTML Básico (V) : Tablas
Las tablas se usan con
profusión en las páginas Web, muchas veces debido a que son
el único instrumento con el que se cuenta, para asegurarse
que las cosas estarán en su sitio. Para definir una tabla se
usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
| Escribimos: | Visualizamos |
| <TABLE > <TR> <TD>1 </TD> <TD> 2 </TD> </TR> <TR> <TD>3 </TD> <TD> 4</TD> </TR> </TABLE>   |
lunes, 3 de octubre de 2022
martes, 27 de septiembre de 2022
jueves, 22 de septiembre de 2022
martes, 20 de septiembre de 2022
Mecanografía online
Existen muchos cursos online para aprender a teclear rápido, aquí hay algunos:
La web que utilizaremos este año para soltar los deditos es la siguiente:
Visita esta web: RATATYPE 👌
Después competiremos en Velocidactil 😉
La posición de las manos sobre el teclado es la siguiente:
- Entrenar habilidades mecanográficas para lenguajes de programación.
- Grupos en Ratatype
enlace de invitación: www.ratatype.es/groups/6602864/
- Velocidad:
Libreffice Writer (I): Tablas, elaboración de un horario
Como primer ejercicio y con el fin de aprender algo sobre "tablas" en el procesador writer de la Suite Ofimatica de OpenOffice (web) vamos a diseñar un horario con vuestras clases.
Diseño Web (II): gadgets
En el siguiente ejercicio vamos a instalar gadgets en nuestro blog. No importa si está escrito en HTML, JAVASCRIPT o FLASH vamos a instalarlos en nuestro blog.
Tenéis que buscar en internet gadgets para los siguientes objetos:
- Contador de Visitas.
- Reloj.
- La predicción metereológica.
ejemplo 1
ejemplo 2
ejemplo 3
- Por otro lado vamos a visitar el sitio web FLASHVORTEX
e integraremos dos gadgets distintos (menú y banner) en nuestro blog, no como entrada.
Diseño Web (I): Diseña tu propio avatar
Supongo que ya sabes que es un avatar, si no te acurdas te lo refresco un poco.
Un avatar es una representación gráfica de un usuario en internet (mas o menos).
Visita estas webs para crear caricaturas y avatares y que fundamentalmente existen para
recrear y representarte gráficamente como usuario en internet.
Crea tu imagen en cualquier de estos sitios y súbela a tu perfil de blogger .
Pocoyonízate
Cara de manga
avachara
http://www.crearunavatar.com/
Japonés (II)
Suscribirse a:
Entradas (Atom)