programador – Instituto FOC | Informática ONLINE | FP Informática ONLINE

Cómo programar efectos en una web de forma rápida y sencilla!!!!

Cómo programar efectos en una web de forma rápida y sencilla!!!!

Nuestro alumnado del Ciclo de Grado Superior de Desarrollo de Aplicaciones Web, conoce y maneja bien técnicas para crear efectos en una página Web de forma sencilla, eficiente y amigable para el usuario.

Por ejemplo, les proponemos crear los siguientes efectos:

  • Efecto ocultar Panel 1 al hacer clic en el botón Button 1
  • Efecto visualizar Panel 1 al pasar el ratón por encima del botón Button1

A priori, parece que esto nos puede llevar a un proyecto web complejo en el que hay que escribir mucho código. Pero nada más lejos de la realidad. Observa la siguiente imagen y veras que con unas pocas líneas de código Jquery (ver parte izquierda de la imagen), puedes conseguir los efectos que hemos propuesto al inicio de este texto (ver parte derecha de la imagen).

efectos_en_la_Web Jquery

Te propongo que descargues el código fuente de este programa, extrae los ficheros y haz doble clic en el fichero index.html, podrás ver los efectos de ocultar y visualizar el  Panel 1, en tu navegador habitual.

Si sabes algo de programación Web lee las siguientes cuatro líneas de código, con ellas se realizan estos efectos visuales:

$(document).ready(function(){

$(‘#boton1’).click(function() {
$(‘#panel1’).slideUp(1000);
});
$(‘#boton1’).mouseenter(function() {
$(‘#panel1’).slideDown(1000);
});

¿No te parece interesante? Solo con cuatro líneas se pueden generar estos efectos. Jquery es una herramienta potente y muy útil, fundamental para cualquier programador Web.

Puedes descargar el código haciendo clic aquí: index

Empleabilidad en el sector IT

El sector IT a nivel global ha supuesto uno de los mayores generadores de empleo en los últimos años, empleando en Europa, ya en 2016, a más de 8.2 millones de profesionales, correspondiendo al 3,7% del total del empleo según los datos de Eurostat. En España este sector empleaba hace dos años a 557.600 personas (un 3% del empleo total). Dando lugar así a una tasa de empleo del 76% según datos del INE.

La tecnología es cada vez más transversal,  lo que provoca que los desarrolladores de software trabajen en una amplia gama de industrias tanto dentro como fuera del sector IT.

Dentro de este amplio sector IT, la mayor parte de los desarrolladores profesionales trabajan para empresas que realizan desarrollo web, TI y SaaS, mientras que los que trabajan en consultoría o en la industria médica tienen más experiencia en codificación.

grafico ok

 

A pesar de existir diferencias de salario según los roles profesionales, los desarrolladores cuentan con empleos estables y niveles salariales altos.

La encuesta Stack Overflow estima que alrededor de la mitad de los desarrolladores ha aceptado un nuevo trabajo en los últimos dos años, y más del 34% lo ha hecho en menos de un año.

El mercado de las tecnologías no cesa en su evolución, creando nuevas profesiones y  modificando las tradicionales para adaptarlas a las necesidades actuales.

Se requieren habilidades y conocimientos tecnológicos, en concreto sobre programación. Tanto es así que, según la Unión Europea, más del 90% de las ocupaciones profesionales ya requieren alguna competencia en TIC y se espera que el número de puestos de trabajo que requieren habilidades tecnológicas aumente en 16 millones para el año 2020.

Los desarrolladores para seguir en activo están continuamente renovándose, pues deben adaptarse a las nuevas tecnologías, lenguajes de programación…

El desarrollo de la economía digital y la sociedad de la información hacen que el conocimiento técnico se combine con las habilidades sociales y de negociación, de forma que puedan atender a una gran variedad de funciones dentro de sus puestos de trabajo y que se puedan adaptar a los cambios que son previsibles y que no lo son.

 

Fuente: Coding Institute. Informe IMMUNE.  02/10/2018. https://static1.squarespace.com/static/5a705ce0d74cffb25065aa36/t/5aec195903ce641d8ca4a94b/1525422434677/RESUMEN-EJECUTIVO-INFORME-IMMUNE-ESTADO-DEL-CODING.pdf

Foto de Fondo creado por freepik – www.freepik.es

El Programador Java con conocimientos en Scrum, uno de los perfiles más demandados de hoy.

En 2018 las empresas comenzaron a demandar nuevos perfiles profesionales para desarrollar su proceso de Transformación Digital. Se busca tener una mayor proximidad con el usuario final y con el cliente y por este motivo crece la demanda en el sector de la analítica.

El ránking de los 10 perfiles IT más demandados lo encabezan los especialistas en Java, un lenguaje de programación muy polivalente, consolidado, estable y que permite la convivencia con otras tecnologías Frontend más actuales.

Una de las competencias que se exigen en los procesos de selección es la de trabajar con metodologías ágiles como Scrum. Será el estándar de la industria de la ingeniería de software en un futuro próximo.

Los profesionales con este perfil se integran en un grupo de trabajo ágil y tendrán que colaborar con otros perfiles dentro de la empresa que no poseen conocimiento de programación pero cuentan con una visión amplia del proyecto en el que trabajan.

Informes como el realizado por la Digital Talent Agency (DTA) sobre Perfiles IT más demandados en 2018: prospecciones del mercado tecnológico según los expertos en selección, avalan estos datos.

Rendera: herramienta 0nline para aprender programar. ¡Sin necesidad de instalació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.

Rendera-Hola_Mundo

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.

Rendera-ejemplos

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.

Conoce con nosotros las mejoras en la programación web que nos aporta HTML5.

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:

  • section representa a una sección general dentro de un documento. Es como un capítulo de un libro, el cual podemos dividir en subsecciones con h1-h6.
  • article referencia el contenido independiente del documento. Un ejemplo claro son las noticias y las entradas a un blog.
  • aside representa el contenido poco relacionado con la web. Ejemplo es la barra lateral. Fundamental para delimitar el contenido importante del contenido de apoyo, de forma que le da más importancia al primero que al segundo.
  • header representa la cabecera de una sección. Por lo que la lógica indica que se le debe más importancia que al resto.
  • footer representa el pie del documento. Es esta sección contiene información acerca de la página/sección y poco tiene que ver con el contenido de la página como copyright, edición, año, autor, etc.
  • nav representa la sección establecida para la navegación dentro del propio sitio. Ejemplo la típica barra superior de los periódicos digitales.

En la imagen siguiente podemos ver cómo sería un documento con estructura HTML en comparación con un documento con estructura HTML5.

HTML A 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.

Contrato de Formación y aprendizaje CFyA. Trabaja y fórmate durante tu jornada laboral.

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:

  • Te facilita que tengas acceso a tu primer empleo.
  • Te permite formarte mientras trabajas dentro de tu jornada laboral. Efectivamente, durante el primer año el 25% de tu jornada laboral la dedicarás a formarte.
  • Tendrás todas las coberturas básicas de la seguridad social, incluido el seguro de desempleo.
  • La formación que recibirás será conseguir un título oficial. Este título oficial puede ser un certificado de profesionalidad, titulación reconocida en todo el territorio nacional y homologable en la Unión Europea.
  • La formación que recibirás puede ser a distancia. Siendo la modalidad de teleformación las más usada y recomendada, por su flexibilidad, dinamismo y fácil seguimiento.

Este contrato para ti como empresario, te ofrece las siguientes ventajas:

  • Reducción del 100% en cuotas de la Seguridad Social en los contratos hechos a desempleados inscritos en la Oficina de Empleo como demandante de empleo.
  • Reducción del 75% en empresas de más de 250 trabajadores.
  • Permite a la empresa la incorporación y formación de una plantilla joven, para su posterior incorporación en la empresa con la formación adecuada.
  • La transformación posterior del contrato de trabajo para la formación en un contrato de trabajo indefinido tiene especiales bonificaciones en las cuotas de la Seguridad Social: 1500€ para hombres y 1800€ para mujeres, durante tres años.
  • La formación teórica que recibe el trabajador es deducible de las cuotas de la Seguridad Social., 5€/hora/alumno en formación modalidad de teleformación.

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.

cdp-foc-es

Hazte un experto en programación web con nosotros y podrás desarrollar efectos web como el siguiente: ”Rotar un trozo del texto solo aplicando reglas CSS.”

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:

div-contenedor

Con este código y sus correspondientes reglas de estilos veremos en pantalla lo siguiente:

cdp-foc-es

Las reglas de estilos son las siguientes y son válidas para cualquier navegador:

reglas-rotacion

El código usado para este ejemplo, puedes descargo aquí para probarlo e incluso mejorarlo. 😉

Quieres crear listas CSS con animación en JavaScript como un programador web experto? Pues apúntate con nosotros.

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.

ListasCSS-Codigo

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.

listaCSS-Estilos

El resultado será el siguiente, al pasar el ratón por encima del elemento 3 de la lista:

listasCSS_Resultado

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. 😉

Aplica efectos llamativos a las imágenes que publiques en tus webs. Serás un experto programador web.

Si realizas alguno de los siguientes certificados de profesionalidad con nosotros:

Serás capaz de aplicar efectos llamativos a las imágenes que publiques en tus webs de forma sencilla y eficiente. De esta forma mejorarás la presentación del tus web incentivando así las visitas de los internautas.

En la publicación de hoy vamos a ver como aplicar un efecto de desvanecimiento y aparición progresiva de una imagen a demanda del usuario visitante de la web.

En este caso partimos de una web con una imagen centrada y dos botones que nos permiten aplicar el efecto de desvanecimiento y revertirlo aplicando además un efecto de transparencia.

web Mostrar Ocultar

Si haces clic en el botón Mostrar  verás como se aplica el efecto desvanecimiento y si haces clic en el botón Ocultar verás como el efecto es revertido.

Esto los puedes realizar con los conocimientos adquiridos en cualquiera de los certificados de profesionalidad que arriba te indico y con aplicando las siguientes líneas de código en tu proyecto web:

Mostrar Ocultar

El código usado para este ejemplo, puedes descargo aquí y usarlo para mejorar tus web.

Coloca en las webs que publiques, efectos llamativos para atraer a más visitantes.

Los alumnos que  realizan nuestro certificado de profesionalidad  IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web,  serán capaces de desarrollar páginas webs con efectos visuales, que llamen la atención de los visitantes y así generar más visitas en las webs que  publiquen.

En la publicación de hoy  explicamos cómo hacer que los colores de tres zonas de nuestra web cambien, simplemente con pasar el ratón por encima. Este efecto hará que el visitante de la web se vea sorprendido y fije su atención en la zona de la web en la que deseas publicar alguna información importante.

Partimos de una web en la que tenemos tres zonas bien deferencias por su color de fondo.

Efecto_colores

Con el código que se indica a continuación y que podrás descargar aquí, podrás ver como los colores de tres zonas van cambiado de forma rotativa cada vez que pasas el ratón por encima.

codigo_efecto_colores

Este efecto tan llamativo, se consigue con unas cuantas líneas de que código que podrás desarrollar sin dificultad al terminar con éxito nuestro certificado profesionalidad  IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web.

Desarrolla tus webs para que se vean en todo tipo de dispositivos, con “Responsive Web Design”.

Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad   IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web,  serás capaz de desarrollar páginas webs que se visualicen correctamente en tablets, móviles y en dispositivos de escritorio, es decir, diseño web adaptable (en inglés Responsive Web Design).

En esta publicación del blog te explicamos cómo hacer este diseño adaptable y te facilitamos el código para que puedas hacer las pruebas que consideres oportunas.

Para explicar adecuadamente como hacer un diseño adaptable para nuestra web partimos de la siguiente página web, la cual está diseñada en cuatro columnas, de forma que cada columna está encabezada por una imagen y a continuación un texto relacionado con la imagen.

Responsive_design1

Esta visualización de la página web corresponde a un dispositivo de escritorio (ordenador), con un tamaño superior a 900px.

Si reducimos el tamaño de la página web por debajo de los 900px, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la página web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen:

Responsive_design2

Si reducimos el tamaño por debajo de 500px estamos visualizando para un dispositivo  móvil y la información se la web se visualizará en una sola columna, tal como vemos en la siguiente imagen:

Responsive_design3

Para conseguir que tus webs se visualicen correctamente en distintos dispositivos solo tienes que aplicar las siguientes reglas CSS llamas media Queries:

Responsive_design4

El código asociado a este ejemplo los puedes descargar aquí.

Aprende a programar efectos web de forma rápida y sencilla.

Haz con nosotros el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web,  aprenderás a programar efectos como los siguientes, de forma sencilla, eficiente y atractiva para el usuario.

  • Efecto ocultar Panel 1 al hacer clic en el botón Button 1
  • Efecto visualizar Panel 1 al pasar el ratón por encima del botón Button1

ejemplo001

Descárgate el código fuente de este programa, extrae los ficheros y haz doble clic en el fichero index.html, podrás ver los efectos de ocultar y visualizar el  Panel 1, en tu navegador habitual.

Con las siguientes cuatro líneas de código, se realizan estos efectos visuales:

codigo-001

Los lenguajes de programación mejor pagados en 2017

Si quieres provocar una discusión entre programadores informáticos, tan sólo pídeles que escojan su lenguaje de programación o framework preferido, tendrás «diversión» asegurada para rato.

La programación es un sector en auge que requiere un reciclaje continuo, de ahí que resulte imprescindible saber cuáles son los lenguajes de programación más cotizados y mejor pagados hoy por hoy. Tanto, que algunos ingenieros incluso tienen agentes (sí, casi como los managers de los cantantes) que les aconsejan dónde trabajar o qué lenguaje de codificación usar.

salario_programadores_mundo

Hay que destacar que los efectos de la crisis económica en nuestro país también se han dejado notar mucho menos en este sector. Un programador informático cobra de media en España alrededor de 30.000 euros (según PayScale), una cifra que dista mucho de la que ingresan ingenieros de otros países por realizar el mismo trabajo; lo que no quiere decir que no sea una buena opción, puesto que el sueldo sigue siendo bueno y la estabilidad y posibilidades de progreso, también.

Pues bien, la revista digital de negocios Quartz ha elaborado una lista de los lenguajes de programación mejor pagados en EEUU., usando como base para ello miles de anuncios de empleo. El conjunto de datos no es perfecto, puesto que faltan lenguajes nuevos como los cada vez más populares Erlang y Haskell, pero esto da una buena idea de lo que las empresas están pagando y qué debería conocer un ingeniero de hoy en día para progresar en su trayectoria profesional.

Lenguajes de programación mejor pagados

Habría que puntualizar algunos consejos, como que aunque una lengua actualmente en alta demanda como Ruby podría conseguirte un mejor salario, tal vez el centrarte sólo en ese lenguaje no sea la mejor manera de hacer carrera puesto que podría ir perdiendo fuelle con el tiempo. Es mejor ser multidisciplinar, con una sólida comprensión de los algoritmos, principios de diseño y, sobre todo, capacidad para aprender nuevos lenguajes y conceptos rápidamente, conociendo varios lenguajes y no centrándose en uno solo.

Para terminar, indicar que por supuesto, dentro del mismo gremio de programadores también hay clases. El que más cobra es, lógicamente, el CTO o Director de Tecnología de la empresa, seguido de los arquitectos/diseñadores de software. El desarrollador de aplicaciones móviles ha ascendido y ya supera al desarrollador de software backend, quedando en última posición el software frontend.

Ese precisamente debe ser tu objetivo: escalar peldaño a peldaño, hasta llegar a la cúspide de tu empresa y para ello, nada mejor que comenzar estudiando un Ciclo Formativo de Grado Superior en Desarrollo de Aplicaciones Multiplataforma, donde aprenderás a dominar un montón de lenguajes de programación y será tu lanzadera para alcanzar tus objetivos.

¡Con Instituto FOC llegarás hasta el infinito y más allá!