| Curso online: MiniWeb Máster |
Resumen del curso |
Esta web, donde estáis ahora mismo, es un blog de blogger modificado por mí, y en este curso te cuento todo lo que yo he hecho para transformar un blog de blogger en una web bonita, sencilla y práctica como esta.
 |
Inicio: Lo empiezas cuando tú quieras. Te apuntas y empiezas el curso. |
 |
Final: El curso es permanente, no hay límite de tiempo. |
 |
Materiales: Instrucciones paso a paso con código en documentos Word para que sea fácil de copiar y pegar, manual y vídeos explicativos. |
 |
Vídeos El curso incluye 20 vídeos explicativos, más de 11 horas de información |
 |
Información: Curso online, permanente, lo haces a tu ritmo. Necesitas internet y word. Te daré el acceso a la plataforma de cursos desde donde podrás seguir toda la formación. |
| Paso 1: copiar Copiamos todo el código que aparece aquí abajo y lo vamos a pegar en un documento Word para hacer modificaciones. He resaltado con colores las partes que podéis modificar para personalizar, un poquito, el buscador. El texto en azul indica para qué sirve cada línea que podéis modificar. |
| <style> #search-box { position: relative; /*no tocar*/ width: 100%; /*tamaño del buscador. No lo tocamos*/ margin: 0; } #search-form { height: 40px; padding-left: 10px; border: 1px solid #999; /*grosor de la línea que rodea a la cajita de búsqueda y color de la línea*/ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 5px; /*si aumentamos el número conseguiremos un borde redondeado. Cuanto mayor sea el número más redondeado será el borde.*/ background-color: #fff; /*color de la cajita donde buscamos. Te recomiendo que no lo toques y lo dejes en blanco*/ overflow: hidden; } #search-text { font-size: 14px; /*tamaño de la tipografía del texto de la cajita de buscar*/ color: #ddd; /*color de la tipografía de la cajita de buscar*/ font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; /*La tipografía que queremos que aparezca en la cajita de buscar*/ border-width: 0; background: transparent; } #search-box input[type="text"] { /*cambios cuando escribimos lo que queremos buscar/ width: 90%; padding: 11px 0 12px 1em; font-size: 14px; /*tamaño de la tipografía del texto que escribimos en la cajita del buscador*/ font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; /*La tipografía que queremos que aparezca cuando escribimos lo que queremos buscar*/ color: #000000; /*Color de la tipografía de la cajita donde escribimos lo que queremos buscar*/ outline: none; } #search-button { /*cambios en el botón de buscar*/ position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; /*tamaño de la tipografía del botón de buscar*/ font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; /*La tipografía que queremos que aparezca en el botón de buscar*/ color: #fff; /*Color de la tipografía del botón de buscar*/ text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; /*Color del fondo del botón de buscar*/ -webkit-border-radius: 0px 5px 5px 0px; /*el primer número es para redondear el borde superior izquierdo, el segundo para el borde superior derecho, 3º para borde inferior derecho, 4º para borde inferior izquierdo. Si no quieres que esté redondeado, ponemos 0 */ -moz-border-radius: 0px 0px 0px 0px; cursor: pointer; } </style> <div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search TechFrost' type='text'/> <button id='search-button' type='submit'><span>Search</span> </button> </form> </div> |
| Paso 2: Ahora que tenemos el código pegado en un documento Word, vamos a hacer algunos cambios. |
| Cambios básicos: |
Vamos a hacer los cambios básicos e imprescindibles para este buscador. Después, si queréis, podréis seguir modificando código siguiendo las instrucciones que os he dejado un poquito más abajo. Tened cuidado de no borrar ningún guion ni signo, si lo hacéis no os funcionará. Todos estos cambios los vamos a hacer en el documento Word donde hemos pegado, completamente, el código que os he dejado arriba. Cuando hayamos hecho todas las modificaciones colocaremos el buscador en su lugar dentro de nuestro blog. Search TechFrost: Este es el texto que aparece dentro de la cajita del buscador. Podemos ponerlo que queramos. Escribiremos dentro de las comillas, por ejemplo, ¿Qué quieres buscar? Search: Este es el texto del botón. Lo podemos cambiar por Buscar. Color del fondo del botón buscar El siguiente cambio básico que os recomiendo es modificar el color de fondo del botón de buscar. Para cambiarlo deberemos cambiar el código de color. Para poder elegir un color, os recomiendo que entréis en esta página. Desde aquí podrás elegir el color que queramos. Copiaremos ese código y lo pegaremos en su lugar. |
| Otros cambios | |
Además de la modificación básica, si queréis, podéis hacer más cambios. Al lado de cada código, os he escrito qué significa cada uno de ellos, por lo que os voy a contar cómo cambiar los colores de las tipografías y fondos, el grosor y el estilo de la tipografía. font-family: Se refiere al estilo de la tipografía que queremos. Yo os he dejado una muy sencilla, pero podéis modificarla. Para poder hacerlo, entrad en esta web. En ella encontraréis distintas tipografías. Elegid la que queráis haciendo clic sobre ella. En la parte inferior derecha aparecerá el código de esa tipografía. Copiaremos el texto que aparece después de font family y lo pegaremos en su lugar en nuestro documento Word. Este es el código que nos aparecerá. Lo resaltado en negrita será lo que copiemos y peguemos, incluido el punto y coma.
font-size: Es el tamaño de la tipografía. Podemos poner valores entre 10px y 14px. En realidad podéis poner el tamaño que queráis, pero mi recomendación para que os quede bien y se lea bien, es poner 10px, 11px, 12px, 13px o 14px. El valor que elijáis, ponedlo igual en todas partes para que quede homogéneo. Los colores En cuanto a colores vais a encontrar dos nombres "background-color", que hace referencia a colores de fondo; y "color" que se refiere al color de la tipografía. La modificación en ambos casos es igual. Para hacer los cambios de color iremos a esta página, elegiremos el color, lo copiaremos y lo pegaremos en su lugar. No os olvidéis de la "#" para que todo funcione bien. |
| Paso 3: Cuando hayamos hecho todos los cambios que queramos, copiaremos todo el código de nuestro documento Word. 1. Entramos en Blogger y vamos a diseño. 2. Añadimos un Gadget de HTML en la parte del blog que nosotros queramos. 3. Pegamos el código que acabamos de copiar y guardamos. 4. Refrescamos nuestro blog para ver el resultado final. Si nos gusta, perfecto. Lo tenemos. Si no nos gusta, volveremos al documento Word, haremos los cambios que necesitemos y volveremos a repetir los pasos: copiar, pegar en el gadget HTML y guardar. |
Cursos papelería
.jpg)
| CURSO PAPELERÍA PARA ORGANIZARTE |
| Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más. |
| más info |
| PACK PROFES FETÉN |
Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones. |
| más info |
.jpg)
| PACK ESTUDIANTES CUM LAUDE |
| Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores. |
| más info |
| CURSO TUS APUNTES FLAMANTES |
| Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point. |
| más info |
.jpg)
| CURSO DISEÑA TU MATERIAL DOCENTE |
| Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más. |
| más info |
.jpg)
| CURSO DISEÑO DE PACKAGING |
Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa. |
| más info |
| CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES |
| Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites. |
| más info |
.jpg)
| CLASE EBOOKS, GUÍAS Y CATÁLOGOS |
| Aprende a diseñar y maquetar ebooks, cursos online, manuales, guías, catálogos, con Power Point. |
| más info |
.jpg)
| PACK DISEÑA TU ORDEN |
| Incluye el curso para diseñar papelería para y el curso para diseñar e imprimir tu agenda. |
| más info |
.jpg)
| PACK DISEÑA PAPELERÍA |
El pack de cursos para diseñar papelería para organizarte y todo el packaging que tú quieras. |
| más info |
.jpg)
| CURSO DISEÑA TU AGENDA |
| Aprende a diseñar e imprimir tu agenda perfecta. El curso incluye decenas de plantillas editables y vídeos. |
| más info |
.jpg)
.jpg)
.jpg)
.jpg)
