Especialistas en Informática
Al finalizar esta sesión serás capaz de:
Contenidos de la sesión:
Todos los que programamos tenemos la necesidad, de poder probar el código que desarrollamos de forma rápida y eficiente. Para ello, necesitamos un entorno mínimo de programación instalado en nuestro ordenador.
Ahora sin necesidad de instalación y todo Online, puedes escribir código, HTML, CSS y JavaScripts y ver de forma inmediata el resultado de su ejecución.
http://rendera.herokuapp.com/
Puedes escribir código HTML, CSS o JavaScript en la parte izquierda de la página web y verás en resultado de la ejecución de ese código en la parte izquierda.
Podrás guardar el código que has desarrollado. En la pestaña “Save and Export”, de la parte izquierda, tienes esta opción y más detalles sobre lo que quieres salvar.
Una pestaña muy interesante es la de Examples, que está en la parte izquierda. Te aconsejo que la mires en profundidad. Hay una gran cantidad de ejemplos de código fuente ya desarrollados que te permitirá avanzar muy rápido en tus proyectos.
En nuestros certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web e IFCD0110-Confección y publicación de páginas web aconsejamos en uso de esta herramienta para que nuestros alumnos sean lo antes posible grandes programadores de web.
El actual (X)HTML está en su fase final a punto de ser sustituido por completo por HTML5.
Muchas son las novedades que aporta HTML5. Una de ellas ya la vimos en la publicación del pasado en la que hablamos del atributo “pattern” y su uso en formularios.
Hoy nos centraremos en ver como HTML5 sustituye el uso del elemento <div>, tan presente en HTML para dividir la web en bloques.
HTML5 cuenta con varios elementos que te sirven para estructurar mucho mejor tu página web. Con el uso de estos elementos, aportamos una semántica adicional a nuestro código web de forma que será mucho más legible por otros desarrolladores web e intuitivo en el seguimiento de la lógica aplicada. Aunque lo fundamental su trivialidad de entender para una ordenador, pudiendo darle más y mayor importancia a determinadas secciones. Por otro lado, la tarea de los buscadores será más fácil en su búsqueda de información en las partes de la web, aunque en general se beneficiará cualquier aplicación que lea páginas web.
Los elementos que HTML5 usa para mejorar la estructura de una web:
En la imagen siguiente podemos ver cómo sería un documento con estructura HTML en comparación con un documento con estructura HTML5.
Nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web o IFCD0110-Confección y publicación de páginas web te enseñan todo los que necesitas saber de HTML y HTML5 para que seas un experto programador web.
Si tienes entre 16 y 30 años y quieres aprender un oficio mientras trabajas, eres el candidato ideal para el contrato para la formación y el aprendizaje.
Este contrato para ti como trabajador, te ofrece las siguientes ventajas:
Este contrato para ti como empresario, te ofrece las siguientes ventajas:
Nosotros, como empresa de formación especializada en informática y acreditada por el Servicio Público Estatal de Empleo, ofrecemos a las empresas y a los trabajadores, nuestros servicios de formación para los certificados de profesionalidad de la familia de informática.
Puedes ver nuestros certificados de profesionalidad en la siguiente dirección: www.foc.es/certificados_de_profesionalidad y si tienes alguna consulta, puedes ponerte en contacto con nosotros a través de la web antes indicada.
Si quieres dibujar un texto de manera vertical, puedes usar imágenes, pero no es lo más adecuado, por que puedes usar reglas CSS como las que te enseñamos a continuación y que en cualquiera de nuestros dos certificados de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web o IFCD0110-Confección y publicación de páginas web puedes aprender y así conseguir este efecto en cualquier web que desarrolles.
La mayoría de los navegadores soporta el uso de rotación en el texto mediante reglas CSS3, aunque para Internet Explorer será necesario el uso de filtros DXMImage Transform; lo que contemplaremos en nuestro ejemplo, para que la compatibilidad no será un problema.
Elegiremos una dirección web a pintar en pantalla, por ejemplo: cdp.foc.es y el .es de la parte de la dirección web que rotaremos.
Para los navegadores Chrome, Safari y Mozilla que usan webkit usaremos la propiedad “transform” para rotar el texto.
Para Opera la propiedad –o-transform, soportada a partir de la versión 10.50.
Para que este efecto pueda funcionar, además de la propiedad “transform” tenemos que establecer el valor de “block” o “inline.block” a la propiedad “display” del elemento que contiene el texto que vamos rotar.
Para Internet Explorer, como suele ocurrir es un poco más complejo, pero se consigue aplicando la propiedad “filter” con un valor llamado “BasicImage” para rotar cualquier elemento que se encuentre en el layout.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
El parámetro “rotation” puede tener valores desde el 0 al 3. Donde 0 indica que rotará 0 grados, 1 indica que rotará 90 grados, 2 indica que rotará 180 grados y 3 indica que rotará 270 grados.
Para hacer este ejemplo partimos de una HTML como el siguiente:
Con este código y sus correspondientes reglas de estilos veremos en pantalla lo siguiente:
Las reglas de estilos son las siguientes y son válidas para cualquier navegador:
El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo. 😉
A continuación vamos a explicar cómo crear listas CSS y cómo aplicarles animación con tan solo unas pocas líneas de código JavaScript.
En el siguiente código puedes ver cómo con unas pocas líneas en HTML y un código JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales gracias al código JavaScript, cambian de tamaño y color cuando pasamos el ratón por encima de cualquiera de ellos.
Pero esto es muy básico para un programador web experto, por lo que le aplicamos una serie de reglas CSS para conseguir un fondo oscuro, cambiar el padding por defecto de la ul para desplazarlo hacia la derecha y aplicar bordes a cada li para crear un pequeño efecto de profundidad. También eliminaremos el borde superior del primer elemento de la lista y el borde inferior del último elemento de esta lista.
El resultado será el siguiente, al pasar el ratón por encima del elemento 3 de la lista:
Todo este desarrollo web en lenguaje HTML, JavaScript y reglas CSS lo puedes aprender si cursas con nosotros cualquiera de estos certificados de profesionalidad:
Recuerda que un Certificado de Profesionalidad es un título oficial válido en todo el territorio nacional, que lo da el Servicio Público de Empleo Estatal (SEPE) o las Comunidades Autónomas y que te acredita oficialmente para desarrollar un trabajo. Además de estar reconocido en toda la Unión Europea.
El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo. 😉
