Mi primera página web

 Buenas a todos, todos.

vamos a trabajar con html5 para la creación de nuestra primera página web

TAREA

Crear una página web en la que describan la carrera (biografía, trayectoria profesional, logros...) de:

• Una mujer contemporáneas que trabaje en el ámbito STEM.
• Estos referentes deben ser de o trabajar en España (o Latinoamérica, en caso de centros latinoamericanos).
• Deben estar trabajando para conseguir un entorno digital más humano, ético y equitativo, alineado con los valores y necesidades de las personas. 
  
• Mi trabajo estará formado por tres páginas web, la primera la principal y a partir de ella saldrán otras dos mediante las que ampliemos información.

Se valorará la creación de perfiles que aún no estén publicados en Wikipedia, por lo que no solo se aceptan perfiles de mujeres muy relevantes, sino mujeres del entorno local que trabajan en ámbitos STEM,  con trayectoria profesional en STEM o estudiantes del centro que desarrollan proyectos tecnológicos relevantes (por ejemplo, en programas como Technovation, MujeresTech, etc.), que están trabajando para conseguir un entorno digital más humano, ético y equitativo, alineado con los valores y necesidades de las personas.
 

Ejemplo de web

La página cumplirá las siguientes condiciones:

•  La publicaremos en github u otra plataforma similar. Si decides publicarla en otra plataforma diferente deberás indicar en la entrada del blog el proceso de subida. 
• Con un formato similar a las páginas biográficas de Wikipedia (biografía, trayectoria profesional, premios...).
• Incluyendo contenido multimedia, como imágenes o vídeos.
• El idioma es libre.

SUBIR LA PÁGINA A GITHUB

Os dejo este manual para subir la página a github

 Manual para subir la página web

 

EJEMPLOS DE MUJERES EN STEAM

Para decidir sobré que científica o investigadora española realizo la web os dejo unos enlaces:

• Mujeres STEAM por provincias.
• Mujeres científicas e investigadoras españolas 2025

• VALPAT: https://www.valpat.tech/quienes-somos/ 
• Lola Priego. 
• Búsqueda joven ingeniera en google.
  

 BUSCADORES DE PERSONAS:

Para conocer el trabajo de las personas tenemos páginas que nos lo facilitan. 

• Google
• Idcrawd
• pipl
• Muchos mas enlaces  para técnicas osint
  

Creación de páginas web con html

 Para la creación de una web con html vamos a utilizar el curso Web Development de code.org

Realizaremos hasta la lección 5, que es la parte HTML

Pinchad en el enlace para acceder al curso

Segunda web

Primera web

HTML: Publicar la web

Buenos días, hemos creado la página web, ahora debemos publicarla. Para ello la subiremos a un servidor gratuito.
En estos dos enlaces os dejo artículos bastantes actuales de servidores gratuitos:

• Top 5: los mejores servidores gratuitos de España 2017
• Mejor hosting gratuito: 8 alternativas
• Recomendación de Diego Hoya https://x10hosting.com/

En mi caso he utilizado 000wewbhost.

Una vez dentro debemos pinchar arriba a la izquierda para ver mis web (sólo permite 2 gratis).

después en una da las web si ya tengo creada o pincho en crear

después en Manager website

En subir archivos

Y nos sale la pantalla para subirlos. tenemos que mantener la misma estructura y debe aparecer la página principal con el nombre de index.html que el servidor la pilla como página de inicio

Html: trabajo final

Buenos días,
tenemos ya los conocimientos suficientes para empezar a defendernos con el html y realizar una página web, por lo que vamos con el trabajo final.

TRABAJO FINAL:

Realizar y PUBLICAR una página sobre la netiqueta o uso responsable del móvil. Tened en cuenta que lo vamos a subir a la red, de manera que lo podrá ver cualquier persona:

• Deberemos aplicar todo lo aprendido. 
• Deberá de constar de 4 páginas html. 
• Abriremos con una portada (con foto y título identificativo del tema) en el marco central, y a la izquierda un índice, donde cada punto del índice es un enlace a una página.
• El tema será de la guía "uso seguro y responsable de internet por los menores" o un tema de clase/interés.
• Deberemos utilizar fotografías de fondo, utizando varias para las diferentes páginas.
• Deberá haber cambios de color de fondo, de foto de fondo, de tipos de letra, de colores en las letras.
• Es importante la presentación de la página, pero no influye sólo lo bonito que hagan el sitio web, sino la información que contenga, no solo copy/paste. 
• Deberemos meter música de fondo.manual
• Deberemos incrustar vídeos, pueden ser de alguna plataforma para que no pesen.
• No abusar de muchas fotos ni de mucha información, que intercalen. 
• También no deben abusar de muchos vídeos, ni que sean vídeos chorras que no aportan nada al trabajo....
• Ojo con el peso de los elementos multimedia que nos pueden complicar la subida a los servidores gratuitos. Para imágenes tenemos http://webresizer.com/
• Importante  la organización de las páginas (en árbol bien puestas), todas las páginas deben tener enlace para ir a la página anterior, cuidado con las faltas de ortografía y las ñ y los acentos, debe ser amigable a la vista, no saturada.
• Importante la organización de los archivos, a la hora de hacer funcionar los enlaces. Debemos subirlos con la misma estructura.

Para usar marcos o meter tablas, que no lo hemos visto en el manual os dejo los siguientes enlaces:

• Marcos
• Tablas

Si los acentos y las ñ nos dan problemas y no salen bien en nuestro navegador deberemos utilizar lo siguiente:

• Para la ñ : ñ
• Para acentos:  Á en caso de acentuar la A mayuscula
• Otro ejemplo: ó La letra que se acentuará será la o minúscula
• ARAÑA; ARA%Ntilde;A
• musaraña: musaraña9:16
• cañón: ca˜ón

Un saludo 

Subir html servidor gratuito

viendo que desde 31 de agosto drive no nos permite subir la página a su espacio deberemos intentarlo desde otras plataformas:

• https://www.hostminio.es/
• http://mipropia.com/
• http://atwebpages.com/get-free-hosting.html
• http://ekiwi.es/
• https://www.000webhost.com/
• http://www.aaahost.co
• 10 mejores hosting sin publicidad

Utilizar cualquier fuente en tu página de html

Buenos días
podemos usar cualquier fuente en html referenciando en la hoja de estilos a google fonts
https://fonts.google.com/
en el link en la cabecera y luego en la hoja de estilos le decimos que fuente queremos utilizar.
Sería de esta manera:
En la página donde quiero utilizar el tipo de fuente:

<head> <link href="https://fonts.googleapis.com/css?family=Raleway|Sansita" type="text/css" rel="stylesheet" > 

</head>

Y en la hoja de estilos ponemos el tipo de fuente que queremos

1. font-family: 'Roboto', sans-serif;

1. font-family: 'Sansita', sans-serif;

Trabajo final html

Buenos días,
tenemos ya los conocimientos suficientes para empezar a defendernos con el html y realizar una página web, por lo que vamos con el trabajo final.

TRABAJO FINAL:

Realizar y PUBLICAR una página sobre la netiqueta o uso responsable del móvil. Tened en cuenta que lo vamos a subir a la red, de manera que lo podrá ver cualquier persona:

• Deberemos aplicar todo lo aprendido. 
• Deberá de constar de 5 y 7 páginas html. 
• La página constará de una estructura realizada por hoja de estilo o marcos, por ejemplo, superior para título, izquierda para índice y derecha para contenido.
• Abriremos con una portada (con foto y titulo identificativo del tema) en el marco central, y a la izquierda un índice, donde cada punto del índice es un enlace a una página.
• El tema será de la guía "uso seguro y responsable de internet por los menores". 
• Deberemos utilizar fotografías de fondo, utizando varias para las diferentes páginas.
• Deberá haber cambios de color de fondo, de foto de fondo, de tipos de letra, de colores en las letras.
• Es importante la presentación de la página, pero no influye sólo lo bonito que hagan el sitio web, sino la información que contenga, no solo copy/paste. 
• Deberemos meter música de fondo.manual
• Deberemos incrustar vídeos, pueden ser de alguna plataforma para que no pesen.
• No abusar de muchas fotos ni de mucha información, que intercalen. 
• También no deben abusar de muchos vídeos, ni que sean vídeos chorras que no aportan nada al trabajo....
• Ojo con el peso de los elementos multimedia que nos pueden complicar la subida a los servidores gratuitos. Para imágenes tenemos http://webresizer.com/
• Importante  la organización de las páginas (en árbol bien puestas), todas las páginas deben tener enlace para ir a la página anterior, cuidado con las faltas de ortografía y las ñ y los acentos, debe ser amigable a la vista, no saturada.
• Importante la organización de los archivos, a la hora de hacer funcionar los enlaces. Debemos subirlos con la misma estructura.

Para usar marcos o meter tablas, que no lo hemos visto en el manual os dejo los siguientes enlaces:

• Marcos
• Tablas

Si los acentos y las ñ nos dan problemas y no salen bien en nuestro navegador deberemos utilizar lo siguiente:

• Para la ñ : &ntilde;
• Para acentos:  &Aacute; en caso de acentuar la A mayuscula
• Otro ejemplo: &oacute; La letra que se acentuará será la o minúscula
• ARAÑA; ARA%Ntilde;A
• musaraña: musara&ntilde;a9:16
• cañón: ca&tilde;&oacute;n

Un saludo 

Html y css

Para aprender a crear páginas web, utilizaremos el curso de html y css de la plataforma https://www.codecademy.com/es y elegiremos el curso

Una vez acabado el curso realizaremos el trabajo final.

Insertar audio y otra opción para subir la página web

buenos días
dos temas el primero
Servidor externo página web
https://www.000webhost.com/
es el servidor al que lo ha subido Alberto Cornejo
Insertar audio en html
introducimos el audio en nuestra carpeta y en la página que queremos que se reproduzca introducimos el siguiente código dentro de body
<audio src="musica.mp3" autoplay loop></audio>
siendo musica.mp3 el nombre del archivo de audio

Publicar la web en nuestro drive

Buenos días
para publicar la página web tenemos gran cantidad de páginas, que nos salen con simplemente poner en el buscador de google "almacenar páginas web gratis".
Tened cuidado con las condiciones de la página, leerlas para que luego no tengamos sorpresas.
Por eso para evitar sorpresas os recomiendo que la almacenéis en vuestro propio drive. Para ello debemos ejecutar el scritp del enlace
https://script.google.com/macros/s/AKfycbz7Mb1OJWnFz_osp7K9G_4wesHlzyPZYOtbBFu--prJj1Hb1C83/exec
Los scripts son programas que nos hacen ciertas funciones.
Una vez ejecutado  y dados los permisos deberemos:

1. Crear carpeta comprimida con todos los archivos, carpeta con extensión .zip
2. Adjuntarla en la página que nos sale y luego subirla.

Una vez subida la web a drive, deberemos en nuestro blog tener una entrada con el enlace para visitar la página.

Espero que os sirva
Un saludo
Alvaro

Publicar la página web en drive

buenos días
vamos a intentar publicar la página web en nuestro drive para lo cual os dejo dos manuales

• Propio soporte y ayuda de google
• Artículo del blog neoteo

Un saludo

html VII: Trabajo final

Buenos días,
tenemos ya los conocimientos suficientes para empezar a defendernos con el html y realizar una página web, por lo que vamos con el trabajo final.

TRABAJO FINAL:
Realizar una página sobre un tema libre, puede ser un trabajo para otra asignatura, sobre un tema de interés personal, sobre un examen. Tened en cuenta que lo vamos a subir a la red, de manera que lo podrá ver cualquier persona:

• Deberemos aplicar todo lo aprendido. 
• Deberá de constar de 10  páginas html. 
• La página constará de marcos, por ejemplo, superior para título, izquierda para índice y derecha para contenido.
• Abriremos con una portada (con foto y titulo identificativo del tema) en el marco central, y a la izquierda un índice, donde cada punto del índice es un enlace a una página. Por ejemplo, Salamanca, los púntos del índice serían historia, monumentos, iglesias, institutos, enlaces interesantes, etc...
• Deberemos utilizar fotografías de fondo, utizando varias para las diferentes páginas.
• Deberá haber cambios de color de fondo, de foto de fondo, de tipos de letra, de colores en las letras.
• Es importante la presentación de la página, pero no influye sólo lo bonito que hagan el sitio web, sino la información que contenga, no solo copy/paste. 
• Deberemos meter música de fondo.manual
• Deberemos incrustar vídeos
• No abusar de muchas fotos ni de mucha información, que intercalen. 
• También no deben abusar de muchos videos, ni que sean videos chorras que no aportan nada al trabajo....
• Ojo con el peso de los elementos multimedia que nos pueden complicar la subida a los servidores gratuitos.
• Importante  la organización de las páginas (en arbol bien puestas), todas las páginas deben tener enlace para ir a la página anterior, cuidado con las faltas de ortografía y las ñ y los acentos, debe ser amigable a la vista, no saturada.
• Importante la organización de los archivos, a la hora de hacer funcionar los enlaces. Debemos subirlos con la misma estructura.

 Un saludo 

html V: texto y tablas

Para dar formato al texto, acompañando a la etiqueta <font></font>podemos utilizar:

• size: tamaño absoluto 1-7
• Face: tipo de letra, separandola por coma, podemos poner varios tipos, que se elegirán por orden de aparición.
• Etiqueta  para poner el texto como subindice

Para  crear tablas utilizamos:

• Etiqueta <table> </table> para definir las tablas.
• Etiqueta <tr> </tr> para definir las características de la fila.
• Etiqueta <td> </td> para definir las caraterísticas de la celda.
• Atributo WIDTH para el ancho
• Atributo BORDER para poner el borde
• Atributo CELLSPACING define la separación entre las celdas en pixeles.
• Atributo CELLPADDING número pixeles entre borde y contenido.
• Atributo WIDTH y HEIGHT, ancho y alto, en pixeles o porcentaje.
• Atributo ALIGN alineación right, left, center.
• Atributo VALIGN alineación en vertical, top, botton, middle.
• Atributo BGCOLOR, color de fondo.
• Atributo BACKGROUND, imagen de fondo de la tabla.

Para unir celdas utilizamos:

• COLSPAN, para unir columnas.
• ROWSPAN, para unir filas

EJERCICIO: 

Con todo esto, haz un nuevo punto en el indice que se llame tablero y que nos envíe a un archivo nuevo, tablero.html. En este archivo nuevo crea una tabla, que ejerza de tablero de ajedrez, con las celdas en blanco y negro, poniendo imágenes de los buenos del señor de los anillos en un extremo y en el otro los malos. En la fila de los peones deberá aparecer el nombre en mayúsculas de los personajes que aparecene en la imágen: 

• Nombre de los malos, letra arial, tamaño 3

• Nombre de los buenos, letra helvetica, tamaño 4

• La letras en color rojo.

Un saludo

Html IV: body, imágenes y listados

Sabiendo que las siguientes instrucciones que podemos utilizar dentro de la etiqueta body:

• bgcolor
• background
• text
• link
• vlink
• alink
• marginwidth
• marginheight

y las  etiquetas  para meter una imagen y sus instrucciones son:

• img scr
• alt
• height
• width
• align
• border
• hspace
• vspace

además,vimos cómo hacer que sea un enlace, al ponerla dentro de <a href="" ><img scr...></a>

con esto deberemos hacer el siguiente ejercicio:

• En el ejercicio de enlaces, último realizado, poner color de fondo negro, letra en blanco, los enlaces en rojo, los usados en azul y los activos en amarillo.
• Meteremos la imagen de una casita para volver al indice.

Y teniendo en cuenta que las etiquetas para crear listas son:

• <ul></ul> listas con puntos
• type para cambiar el tipo de punto
• <li> para crear un punto nuevo
• <ol></ol> listas con números
• type="1"   o  "i" o  "I" o  "a" o  "A"
• <dl></dl> listas especiales

Realiza el siguiente ejercicio en la página del índice del señor de los anillos:

Crea el siguiente listado:

1.  CAPITULO 1
• Parte 1
• Parte 2
2. CAPITULO 2
• Parte1
• Parte2

Y en cada uno de los puntos que nos envíe al sitio correspondiente. Si queremos que nos envíe a una parte determinada de nuestra página, a un ancla, se lo deberemos decir mediante la siguiente etiqueta:

 <a href="capitulo1.html#parte1">Parte 1</a>

Un saludo

 

Html III: enlaces a otros archivos y anclas

Hasta ahora hemos visto los enlaces para ir a páginas que se encuentran en otros ordenadores o servidores.
Tenemos otras posibilidades:

• Página que se encuentran en nuestro ordenador.
• Anclas

1.- Página que se encuentran en nuestro ordenador.
Para páginas que se encuentren en nuestro ordenador sería de la siguiente manera:
<a href= "capitulo1.html">ir al capitulo 1</a>
En el ejemplo de arriba, vemos que en vez de la url de la página, ponemos el nombre del archivo.

2.-Si la página es muy larga para evitar que la gente tenga que leer todo para llegar a la información que le interesa utilizamos anclas.

Las anclas se definen de la siguiente manera:

 <a name="capitulo1"> 

y para que en nuestra página se mueva hasta el punto indicado deberemos poner:

<a href="#capitulo1">Ir al capitulo1</a>

EJERCICIO 1:

haz el siguiente ejercicio utilizando las anclas y poniendo todos los textos en una sola página

EJERCÍCIO 2:

Crea el ejercício anterior en una sola página utilizando anclas. Para que la separación sea grande, introduce mas texto  copiándolo de la siguiente página o mete imágenes mediante la etiqueta <img src="url de la imagen">.

En esta práctica crea un indice que te envíe al inicio de cada capitulo, y en el final de cada capitulo un enlace que nos permita volver al inicio

Un saludo

Html II: enlaces

Un enlace es una zona de texto o gráfico que si son pulsados nos envían a otra parte de la página o a una página diferente de internet. Esas páginas pueden estar en el ordenador o repartidas por internet.
Todo lo que encerremos con la etiqueta <a> </a> será considerado enlace. veamos un ejemplo:

<a href="www.google.com"> ir a google</a>

Href es necesario para indicar la página a la que enviaremos cuando se pinche en el enlace.

Teniendo en cuenta esto realiza los siguientes ejercicios:

Un saludo

Html I: comenzamos

Buenos días, comenzamos con la programación en html para la creación de páginas web.

Cómo ya hemos comentado antes, para trabajar vamos a tener tres opciones:

• utilizar un editor on line de html:  http://htmledit.squarefree.com/
• Utilizar el blog de notas gedit y una navegador para ver cómo van quedando las páginas.
• La opción mas recomendada: un editor visual de archivos HTML nos vendrá muy bien para poder ver la apariencia que está tomando cada página y poder realizar las diferentes modificaciones, sin tener que recurrir al navegador permanentemente, aunque no es del todo imprescindible. En nuestro caso nos inclinaremos por emplear la aplicación BlueGriffon, que es gratuita, multiplataforma y de código abierto. Existen otras alternativas, pero ésta es la que más se ajusta a nuestras necesidades.
• Os dejo en enlace para la descarga de la aplicación.http://bluegriffon.org/freshmeat/1.5.1/setup-bluegriffon.exe
• Podemos también descargarnos la versión portable:http://bluegriffon.org/freshmeat/1.5.1/bluegriffon-win32.zip
  Es un archivo comprimido que tenemos que descomprimirlo en nuestro usb

Recomiendo en principio para los primeros ejercicios la tercera opción. Posteriormente cuando hagamos nuestra página web propia la segunda opción.

Primer ejercicio.

Para esta primera práctica utilizaremos las instrucciones html, head, body, p, align, tittle, pre width,br,div, blockquote.

Un saludo

html VIII: publicar el trabajo

Para colgar la página utilizaremos servidores gratuitos (free hosting o low cost hosting). Os pongo un listado donde podéis colgar vuestra página. Una vez colgada, poner una entrada en el blog, que se titule, mi página web, donde aparezca la dirección que os ha concedido el servidor.

Os dejo un manual para subir la página al freehosting  de www.galeon.com, además de un estudio de diferentes free hosting, podéis leerlo  y luego decidir el más idoneo para vosotros. En el resto de free hosting, se trabaja de modo parecido. Manual galeon

260mb.net

Magix.net

Hostinger.es

2tr.es