- Si estás pensando en formatear tu PC tienes dos opciones: 1.- desde Windows, restaurar a valores de fábrica ó a un estado anterior (punto de restauración) si has hecho copias de seguridad. 2.- desde un USB de arranque ó un CD/DVD de arranque con el S.O. a instalar. - Si se sabe hacer, las particiones del disco duro de datos pueden conservarse inalteradas tras formatear partición C e instalar SO. Cuidado de no perder los datos personales, mejor guardarlos en disco duro externo.
- Acceso a la BIOS. Orden de arranque. En ordenadores recientes en vez de BIOS tienen UEFI que hay que desactivar pasando a modo LEGACY para poder activar y/o modificar la orden de arranque.
- Live CD con Ubuntu 9.10: acceso disco duro, virus, software libre. Lo malo que tiene es que va lento (por baja velocidad de lectura de lector CD) y cuando apagas no guarda los cambios. Posibilidad de probar S.O. y de instalarlo.
- Instalación de Ubuntu (descargar Ubuntu 18.4, tras saltarse paso de hacer donativo porque viene con 5 años de actualizaciones y mantenimiento asegurado) conviviendo con Windows. (En curso 2017_18 descargar versión primera de "released notes" y después de cambiar opciones generales de Virtual Box a Ubuntu 64 bit se ejecuta OK). Si se instala primero Ubuntu luego Windows se lo carga. Particionado de disco.
- USB Ubuntu: configuración, idioma, teclado, codecs, instalación de programas propios con asistencia de Synaptic, instalación de programas propios por consola (Spotify), instalación de *.exe, virus,...
2.- Lo mejor es que vacíes el pen driver. Si no duplica su contenido en tu PC en casa.
PRIMEROS PASOS CON UBUNTU: UBUNTU 18.04:
VISTAZO GENERAL
IDIOMA: Si se prueba desde máquina virtual, previamente en la instalación escoger adecuado. Si se está probando desde USB ir a configuración/lengua...
ABRIR EDITOR DE TEXTO Y PROBAR TECLADO. Cambiar configuración arriba derecha. 8 COSAS MÁS PARA EMPEZAR.
INSTALAR AUDACITY DESDE CENTRO DE SOFTWARE DE UBUNTU (si no aparece en la lista de software SELECCIONAR EL REPOSITORIO MÁS RÁPIDO)
DESINSTALAR ALGUNA APLICACIÓN
DESCARGAR ARCHIVO MP3 Y DESCARGAR VIDEO (no se reproducen faltan codecs propietarios ó restricted extras):
INSTALAR ASISTENTE DE INSTALACIÓN SYNAPTICS POR CONSOLA (para poder instalar extras porque no aparecen en centro de software de Ubuntu, aunque también se pueden instalar por consola)
(OPCIÓN B)
INSTALAR UBUNTU RESTRICTED EXTRAS (codecs) DESDE SYNAPTIC (buscar, marcar y aplicar)
INSTALAR SPOTIFY
INSTALAR WINE PARA TRABAJAR CON EJECUTABLES *.exe DE WINDOwS (Office 2003)
UBUNTU 16.04:
VISTAZO GENERAL
IDIOMA: Si se prueba desde máquina virtual, previamente en la instalación escoger adecuado. Si se está probando desde USB ir a configuración/lengua...
ABRIR EDITOR DE TEXTO Y PROBAR TECLADO. Cambiar configuración arriba derecha. 7 COSAS MÁS PARA EMPEZAR: hacer apartados 3, 4 y 6.
SELECCIONAR EL REPOSITORIO MÁS RÁPIDO
INSTALAR AUDACITY DESDE CENTRO DE SOFTWARE DE UBUNTU (después de seleccionar repositorio en paso anterior si no no aparece en lista)
DESINSTALAR ALGUNA APLICACIÓN
DESCARGAR ARCHIVO MP3 Y DESCARGAR VIDEO (no se reproducen faltan codecs propietarios ó restricted extras)
INSTALAR ASISTENTE DE INSTALACIÓN SYNAPTICS POR CONSOLA (para poder instalar extras porque no aparecen en centro de software de Ubuntu, aunque también se pueden instalar por consola)
INSTALAR UBUNTU RESTRICTED EXTRAS (codecs) DESDE SYNAPTIC (buscar, marcar y aplicar) INSTALAR SPOTIFY
INSTALAR WINE PARA TRABAJAR CON EJECUTABLES *.exe DE WINDOwS (Office 2003)
NOTA: Despues de formatear y reinstalar en pen varias veces para pruebas, perdió la configuración de partición y aparecia con 21 B de capacidad en vez de 8 GB. Solución.
Ir a wix.com y se puede acceder con cuenta de google.
En el siguiente videotutorial se explica lo básico:
La página web que nos estamos creando ha de cumplir con las siguientes condiciones:
1.- Escoger un tema para la web: web para promocionar tu localidad (sitios de interés turístico, fiestas, instalaciones, gentes, ...), web para tu empresa imaginaria o la de tu familia, web tipo blog para hablar y/o criticar sobre un tema de tu interés,...
2.- Pensar en qué contenidos vas a tratar y cómo organizarlos en distintas páginas organizadas en un menú con submenús. Escribir sin faltas de ortografía y dando información verídica (salvo que estés opinando) contrastada (wikipedia, ...)
3.- Tiene que haber mínimo 5 menús principales, máximo 7. Mínimo 3 submenús, máximo 6.
4.- Todas las páginas con contenido:
* Fondo con imagen, video o color personalizado (en algunas páginas se puede repetir fondo, mínimo 4 diferentes).
* Enlazar mínimo 3 vídeos de youtube, uno que se reproduzca automáticamente al entrar en la página y visualización en pantalla curva.
* Insertar el texto necesario para ordenar el contenido, alineación justificada.
* Insertar imágenes (buscar en google imágenes, flickr, pinterest,...):
- mínimo 6 imágenes independientes, una con enlace a una subpágina tuya o a otra web.
- insertar una galería con mínimo 3 imágenes
* Subir un documento pdf y enlazarlo a una palabra de un texto para que se pueda visualizar y descargar.
Como ejemplo esta es la web wix del profesor, no completa del todo pero si tiene la mayor parte de lo que se pide.
En
navegardor Firefox ir a "opciones de desarrollador" y clic en "ver
código fuente". Se nos muestra el código HTML que programa la página.
Mejor escribir etiquetas en minúsculas.
ACTIVIDAD 1: COMENZANDO
TEORÍA:
CREACIÓN DE PÁGINA WEB PROGRAMANDO CON CÓDIGO
HTML
Necesitamos un editor de texto, cuanto más simple mejor. Por ejemplo el Bloc de notas de Windows. Hay otros editores de texto más específicos que contienen ayudas para mostrar y gestionar el código HTML y los estilos CSS como por ejemplo Sublime Text.
NOTA:
HECHAR OJO A: https://tic2uribarri.blogspot.com/2016/10/html-5.html
Caracter indicador de Marca, etiqueta o
comando
<
indica que el texto a continuación es un comando, una orden
>
indica que se acaba la orden o comando
</
marca de fin, indica que aquí se desactiva el comando
<
>…</ > el texto … será afectado por el comando que vaya entre los
signos mayor y menor que.
Principales etiquetas:
<HTML>
inicio de documento html o página web
… documento
</HTML> fin de documento
<HEAD><TITLE>...</TITLE></HEAD> cabecera con título que se verá en la pestaña del navegador
<BODY>...</BODY> cuerpo de la página o documento
<P>
marca inicio de párrafo (por defecto justificado a izquierda)
<P ALIGN=RIGHT>modificamos alineación con atributo align (left o center)
</P>
<CENTER>…</CENTER>
centra una linea de texto (no un párrafo con varias lineas)
<BR>salto de línea o punto y aparte (no precisa
marca de fin)
<Hn>
aplica estilo de encabezamiento predefinido, hay 6 así que n es un número de 1 a 6, el estilo 1 es el de
mayor tamaño, necesita marca de fin
<HR>
traza líneas horizontales de separación (no precisa marca de fin)
MARCAS PARA ESTILO DE TEXTO:
1.- TIPO DE LETRA:
<B>
negrita, necesita marca de fin
<I>
cursiva, necesita marca de fin
<BLINK>
parpadeante, necesita marca de fin
<TT>
tamaño fijo, necesita marca de fin
<EM>
énfasis, necesita marca de fin
<STRONG>
gran énfasis, necesita marca de fin
<U>
subrayado, necesita marca de fin
Esta
marcas se pueden anidar
Marcas encadenadas ó anidadas:
<MARCA1><MARCA2>…</MARCA2></MARCA1>
2.- ATRIBUTOS DE LA FUENTE:
TAMAÑO
DE TEXTO:
<FONT
SIZE=n> …</FONT>n puede valer
de 1 a 7,
por defecto vale 3
COLOR
DE TEXTO:
<FONT
COLOR=”nombre color en inglés”>…</FONT>
TIPOGRAFÍA:
<FONT
FACE= “Nombre tipografía”>…</FONT>
COLOR
DE FONDO:
<BODY
BGCOLOR=…> no precisa marca de fin
Se pueden modificar varias propiedades o atributos de la fuente a la vez:
<FONT SIZE=5 COLOR=BLUE>…</FONT>size y color son dos atributos de la fuente
3.- LISTAS:
LISTAS ORDENADAS con numeración: <OL>…</OL>
Añadir <LI>…</LI> por cada elemento numerado en
la lista, aunque no
necesita etiqueta de cierre e incluye salto de línea
LISTAS DESORDENADAS sin numeración: <UL>…</UL>
Añadir <LI>…</LI> por cada elemento numerado en
la lista
INSERTAR IMAGEN:
<IMG SRC="IMAGEN.JPG"> (si la imagen dentro de carpeta Imágenes, indicar ruta relativa: "Imágenes/IMAGEN.JPG")
CREAR ENLACES:
<A HREF="#UNO">...A...</A>
<A NAME="UNO">...B...</A>
Al hacer clic en ...A... te enlaza a ...B...
Igualmente:
<A HREF="Adivina un número.exe">juego</A>
Al hacer clic sobre "juego" se ejecuta (si el archivo*.exe está ubicado en mismo sitio que documento web).
Igualmente:
<A HREF="http://tics2haro.blogspot.com.es/">Nuestro blog</A>
Al hacer clic sobre "Nuestro blog" se abre.
En este link puedes encontrar algún script curioso, par insertarlo copiar código y pegar. Más en esta web. Si buscas "isertar reloj web" encontrarás diferentes web como, por ejemplo, está.
Declarar idioma (probar para que salga la ñ en navegador):
<html lang="es">
Si no funciona cambiar el juego de caracteres a usar añadiendo un elemento "meta" par agregar metadatos en la cabecera, según este enlace.
En la url anterior se accede a un videotutorial de 30 videos para aprender lo básico de html:
Ytambién se presenta un video sobre el inspector html de Firefox:
ACTIVIDAD 2:
Crear
subcarpeta llamada "Actividad2". Abre el Bloc de notas, guardar como
Actividad2.html y comienza a crear la página web de la imagen. Como
punto de partida puedes copiar contenido de la actividad anterior,
pegarlo y editarlo (ó duplicar carpeta Actividad1 y luego cambiar de
nombre a todos los documentos). Control+G
para guardar cambios. Al mismo tiempo abrir el archivo guardado con el
navegador y pulsar F5 para actualizar e ir comprobando el resultado.
Poner de título de página: MI PRIMERA PÁGINA WEB CREADA PROGRAMANDO CON CÓDIGO HTML
Al terminar añade:
1.-
Una imagen ajustando su tamaño si fuera necesario. Para ello descargarla primero de Internet y guardarla dentro de la carpeta de la
actividad en subcarpeta "Imagenes".
2.-
Un reproductor de audio con una canción. Descargar archivo mp3 de por
ejemplo simp3.com o jamendo.com y guardar dentro en subcarpeta "Musica".
3.- Insertar un video de YouTube (clic en compartir, luego en insertar y copiar código HTML de inserción).
4.-
Insertar un script de código html para proteger con contraseña la
visualización de la web (buscar en primer link de apartado de teoría).
5.- Insertar un reloj en la parte superior.
6.-
Editar código para conseguir: cambiar contraseña, centrar video,
centrar imagen, eliminar propaganda de la web de origen del reloj y
cambiar su tamaño y alineación,...
ACTIVIDAD 3: ENLACES
Crear subcarpeta llamada "Actividad3_Enlaces".
Abrir nuevo documento con sublime llamado "Actividad3.html" y crear contenido equivalente al de la imagen de más abajo. En parte inferior derecha de la ventana de Sublime clic y activar HTML para activar ayuda sintáctica y autocompletado. Escribir etiquetas html en minúsculas para que funcione el autocompletado. Primero crear la página web con el contenido y al final añadir los enlaces.
Usar estilo H1 (título en rojo) y H2 (todo lo demás que tiene tamaño mayor de lo normal).
El color azul de los items del índice se pone solo al añadir enlaces. Mirar en parte de teoría cómo crear enlaces.
Poner de título de página: "ACTIVIDAD3: ENLACES"
Necesitas para ubicar dentro de la carpeta de la actividad y luego enlazar:
1.- archivo ejecutable del juego que hicimos con Visual Basic.
2.- una imagen de una App de Inventor.
3.- el contenido de la actividad 2, cópialo y llévalo a la 3. Así ya tienes una carpeta Imágenes para colocar dentro la del apartado 2.-
Los enlaces funcionarán como la de muestra proyectada en clase.
PUBLIQUEMOS NUESTRA WEB "SUBIÉNDOLA" A UN ALOJAMIENTO O HOSTING GRATUITO
Necesitamos un espacio de almacenamiento en un servidor de internet para subir nuestra web y hacerla pública. En la web de mejoreshosting valoran los mejores alojamientos gratuitos del año 2019.
Se nos habla de Hostinger.es y de Hostinggratis.com.ve como los mejores. El curso 2016_17 publicamos nuestras web en Hostinger pero al año siguiente ya no es gratis, lo mismo pasa con Hostinggratis, sitios donde el hosting más barato sale por 3 €/mes con regalo de un mes gratis después de dar los datos de la tarjeta de crédito o Paypal. Así funcionan, te lo ponen gratis un tiempo para captar usuarios y después de un año comienzan a cobrar. Es lógico, son empresas que viven de esto.
La tercera opción, 000webhost.com (pertenece a Hostinger), la utilizamos el curso pasado 2017_18 y sigue siendo gratuita. Vamos a registrarnos con nuestro e-mail (o con cuenta de google) y a usar sus servicios limitados de hosting. Como vamos a acceder para crear una cuenta muchos al mismo tiempo y desde la misma IP Pública (la del router del IES) a lo mejor solo nos deja crear unas pocas cuentas por seguridad al sospechar de ataque hacker. Por si alguien no puede crearse la cuenta en clase, que lo termine en casa siguiendo este video:
Luego podremos PUBLICAR LA ACTIVIDAD 3 y estará disponible para todo el mundo en la nube.
Tener en cuenta:
1.- Cambiar el nombre del archivo "Actividad3.html" por "index.html".
2.- Subir archivos desde la opcion de subir web del panel de control (cpanel) de 000webhost, ó utilizando un programa FTP como Filezilla. Si utilizamos Filezilla transfiere información a través del puerto 21 del router que en el IES lo tienen cerrado por seguridad y probablemente no logremos hacerlo funcionar. Si nos dá error de conexión en casa, intentemos solucionarlo:
Esta es mi Actividad 3 publicada en 000webhost.com con url: https://tics2haro.000webhostapp.com/.
NOTA: En un principio puede que te salga algún símbolo raro en el sitio de caracteres como la "ñ" o las vocales con tilde. Para arreglarlo doble clic sobre documento html y se abre un editor donde se indica las líneas de código con algún error y da información para solucionarlo. Con tal de arreglar errores más importantes ya se visualiza bien.
